Understanding Nodes, Components, and Rendering Pipelines in Cocos Creator

Cocos Creator uses an Entity‑Component System (ECS) where a Node is an entity that holds various Components . By attaching components to a node, developers achieve different visual and functional behaviors. This article examines the inner workings of Cocos Engine nodes and components, offering practical insights beyond the official documentation.

Create Node: Nodes are created through the Hierarchy Manager and can be seen in both the scene editor and the hierarchy panel.

This example creates a new Sprite node, which is a node that gains functionality from the Sprite component.

What is a Node and what does it do?

Describes UI window hierarchy; the node tree visualizes parent‑child relationships, influencing render order.

Encodes spatial information.

Acts as an event listener, capturing user interactions and broadcasting them to attached components.

Serves as a container for logical components.

1. Node – Window Hierarchy & Visit Order

Each visual element is a node. Understanding the relationships and access order between nodes is essential during development.

The window hierarchy forms a tree: the top node is the parent, its children are sub‑nodes.

Traversal follows a depth‑first strategy; nodes closer to the root are visited first.

During traversal, world‑space calculations, vertex positioning, mask setup, etc., build a GL‑compatible model array that is rendered sequentially.

Sibling nodes are sorted by zIndex when applicable; otherwise, Creator renders them in top‑to‑bottom order.

2. Node – Spatial Information

Nodes are rendered based on their position on the canvas. Spatial data includes position, anchor, size, scale, rotation, and skew.

Cocos and OpenGL use a right‑handed Cartesian coordinate system with the origin at the bottom‑left.

World coordinates are absolute within the scene; local coordinates are relative to each node’s anchor point.

In the visit process, the engine first converts local transform data into a 4×4 matrix ( _localTransform ), then multiplies it by the parent’s world matrix to obtain the node’s world matrix ( _worldTransform ). The final world matrix, combined with size and anchor, yields the four world‑space vertices of the node’s rectangle.

Because unrelated nodes have independent world‑space positions, moving a node within a background’s bounds requires converting local coordinates (e.g., using the parent’s anchor as the reference) rather than raw world values.

3. Node – Touch Event Listening Flow

Event handling occurs on cc.Node . Components can register listeners via this.node.on() and deregister with this.node.off() . Example:

cc.Class({
  extends: cc.Component,
  onLoad: function () {
    this.node.on('mousedown', function (event) {
      console.log('Hello,Node!');
    });
  }
});

When a listener is no longer needed, off must be called with matching parameters.

cc.Class({
  extends: cc.Component,
  _sayHello: function () { console.log('Hello Node'); },
  onEnable: function () { this.node.on('foobar', this._sayHello, this); },
  onDisable: function () { this.node.off('foobar', this._sayHello, this); }
});

Touch events are first captured by the canvas, then propagated through the node hierarchy using both capture and bubble phases. The process:

User touch generates a touchStart event dispatched to the canvas.

Traversal proceeds from deepest child to root to locate the target node.

After the target is found, the event flows through capture → target → bubble phases.

Key points about the event flow:

Both capture and bubble phases are supported; the event travels from root to target and back.

The target node is determined before traversal begins.

Any node can stop propagation via event.stopPropagation() .

Node Properties: active, activeInHierarchy, enabled

active – the node’s own activation flag.

activeInHierarchy – true only when the node and all its ancestors are active; triggers component lifecycle callbacks (preLoad, onLoad, onEnable) and participates in the visit process.

Combined active and parent state determine activeInHierarchy .

enabled – component‑level enable flag (e.g., a disabled button appears grey).

Component Overview

In the inspector, a newly created Sprite node shows its node properties (position, rotation, scale, size, anchor, color, opacity) and the Sprite component’s rendering settings.

Nodes themselves have no rendering capability; they become renderable by attaching components such as cc.Sprite , cc.Label , cc.Button , etc. The component list includes CCLabel , CCSprite , CCGraphics , CCMask , CCButton , CCScrollView , among others.

Accessing the node from a component is done via this.node :

start: function () {
  var node = this.node;
  node.x = 100;
}

Getting another component on the same node uses getComponent :

start: function () {
  var label = this.getComponent(cc.Label);
  var text = this.name + 'started';
  label.string = text;
}

Component hierarchy diagram (simplified):

Engine Rendering – Visit Process

The Visit step builds the input assembler (vertex data) and material (textures, colors, masks) for each node based on its properties.

LOCAL_TRANSFORM : Convert position, scale, skew, rotation into a local 4×4 matrix.

WORLD_TRANSFORM : Multiply the local matrix by the parent’s world matrix.

UPDATE_RENDER_DATA : Update vertex positions and index data using the world matrix.

OPACITY : Apply node opacity (inherited from parents).

COLOR : Set RGB values in the material.

RENDER : Combine input assembler and material into a render model.

CUSTOM_IA_RENDER : Custom input assembler support.

CHILDREN : Recursively visit child nodes.

POST_UPDATE_RENDER_DATA & POST_RENDER : Used for mask cleanup.

Summary of Visit: The engine traverses the node tree, computes transformation matrices, assembles vertex buffers, and produces a list of render models that are later drawn in order.

Engine Rendering – Render Process

Update view settings based on the camera (zoom, fov, near/far planes).

Apply culling mask filtering.

Commit blend, depth, stencil states.

Set cull mode (back‑face culling).

Submit vertex buffers and textures to the GPU.

The rendering ultimately uses WebGL ( canvas.getContext('webgl', …) ) to draw the prepared models.

Understanding these node, component, and rendering pipelines helps developers diagnose performance issues and implement advanced visual effects in Cocos‑based games.