Laying the Groundwork - Learn SpriteBuilder for iOS Game Development - page 39

Within the node's rectangular area, the mouse cursor shows a 4-way cross of arrows (1).
Click and drag when this is your mouse cursor to move the node. If the cross of arrows
has a circle at its center (2), the mouse is hovering near the node's anchorPoint and drag-
ging will cause the anchorPoint to move instead. The anchorPoint itself is often mistaken
as a way to reposition a node, but alas it's mainly the center of rotation and scale opera-
tions for a node. Typically, the anchorPoint is either at the lower left corner (0, 0) or the
center (0.5, 0.5) of a node.
Caution Unless mentioned specifically in this topic, you should leave the an-
chorPoint at its default value. Watch out for the slight difference in icons 1 and
2 before starting to drag a node.
The two-way arrow handle (3) allows you to scale the node and becomes visible when
hovering over one of the four selection handles. It can be mistaken for resizing the node,
but except for Color Node and Gradient Node, changing a node's size by changing its
scale will result in reduced image quality, in particular when enlarging the node through
scaling. If you move the mouse cursor slightly outside the node but hover near a selection
handle, its shape will change to a bent 2-way arrow (4), which allows you to rotate the
node when dragging.
Finally, the two split-in-half arrows (5) indicate the skew action. You can grab a node
between two selection handles to move that edge along its axis, forming a trapezoid-
shaped node.
Editing Node Properties
For precision changes, the mouse drag operations are unsuitable. You can use the Nudge,
Move, and Align commands from the Object menu for finer control, but this doesn't suit
every situation either. Most of the time, when you know the exact value of a property
you'll want to use the Item Properties view on the right side of Detail View. All node
types present the same basic properties at the top, labeled CCNode , as seen in Figure
2-15 .