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

Figure 2-20 . CCNodeColor moved upwards via drag and drop to reverse the draw order

In the stage, the color node should now slide under the gradient node if you move it. See
Figure 2-21 for an example.

Figure 2-21 . Color node is now drawn behind the gradient node

The drag-and-drop operations in the Timeline are also used to move a node so that it be-
comes a child of another node, essentially changing the node's parent. It is worth noting
that child nodes are always drawn in front of their parent node.

Tip Double-clicking a node in the Timeline allows you to give it a descriptive,
purely informational name within SpriteBuilder. A node's name in the Timeline
can be different from its Name property but it's good practice to ensure a node's
name in the Timeline is the same as its Name property, to avoid confusion.

Finally, delete the Color Node again, it only served to demonstrate the draw order. Select
the color node, and press Backspace, or use the menu: Edit Delete.

Filling the Layer with a Gradient
Armed with that knowledge, it becomes easy to fill the entire layer with the gradient node.
Change the content size scale types to Width in percent of parent container and Height in
percent of parent container. Enter 100 and 100 for both content size Width and Height