Skip to main content

Parent-child Relationships

Nodes can contain other nodes. This is called a parent-child relationship. The parent node is the node that contains the child node. We've seen this already: a Scene has been the parent of all the other nodes we've created so far. For example, we added a Label to a Scene by calling sceneOne.addChild(helloLabel).

But every node can be the parent of another node. For example, a Scene can be the parent of a Shape. That Shape can be the parent of another Shape. And that Shape can be the parent of a Label.

Four things to know about parent-child relationships​

  1. A Scene can't be the child of another node. A Scene is the top of the hierarchy and can only be a parent.
  2. A parent can have zero or more children, but a child can have only one parent.
  3. When positioning children within a parent Scene, the { x: 0, y: 0 } position is the upper-left corner of the Scene -- we've seen this already.
  4. When positioning children within a parent of any other kind of node, the { x: 0, y: 0 } position is the center of the parent node.

Why a different coordinate system for children when the parent is a Scene versus when the parent is any other kind of node? Because the Scene represents the entire display area, it's useful to have a coordinate system that starts in the upper-left corner. But when positioning children within a parent node, it's more useful to have a coordinate system that starts in the center of the parent node: usually, you want to position the child in the center of the parent.

note

All this talk about coordinate system sounds more complicated than it is in practice. You'll get the hang of it after you see some examples.

Below, we create a rectangle Shape near the left hand side of the screen. To center a Label inside it, we simply call the addChild() method on the rectangle. We didn't specify a position for the label, so it takes the default position of { x: 0, y: 0 } -- which is the center of the rectangle!

Except for scenes, when we add a child to a parent, we almost always want to center the child in the parent. This is what we get by default. But if you want to shift the child off-center within the parent, specify the position of the child as an offset from the center of the parent.

Loading...
Explore:
  • Offset the child's position if you don't want to center it.
  • It is valid to position a child beyond the bounds of its parent.