Parallax

A Parallax Node is a special Node type that simulates a parallax scroller. What did you say? A para.. what? Yes, parallax Simply put you can consider a ParallaxNode to be a special effect that makes it appear that the position or direction of an object appears to differ when viewed from different positions. Simple every day examples include looking through the viewfinder and the lens of a camera. You can think of many games that function this way, Super Mario Bros being a classic example. ParallaxNode objects can be moved around by a Sequence and also manually by mouse, touch, accelerometer or keyboard events.

Parallax nodes are a bit more complex than regular nodes. Why? Because they require the use of multiple nodes to function. A ParallaxNode cannot function by itself. You need at least 2 other Node objects to complete a ParallaxNode. As usual, in true Cocos2d-x fashion, a ParallaxNode is easy to create:

// create ParallaxNode
auto paraNode = ParallaxNode::create();

Since you need multiple Node objects, they too are easily added:

// create ParallaxNode
auto paraNode = ParallaxNode::create();

// background image is moved at a ratio of 0.4x, 0.5y
paraNode->addChild(background, -1, Vec2(0.4f,0.5f), Vec2::ZERO);

// tiles are moved at a ratio of 2.2x, 1.0y
paraNode->addChild(middle_layer, 1, Vec2(2.2f,1.0f), Vec2(0,-200) );

// top image is moved at a ratio of 3.0x, 2.5y
paraNode->addChild(top_layer, 2, Vec2(3.0f,2.5f), Vec2(200,800) );

OK, looks and feels familiar, right? Notice a few items! Each Node object that was added is given a unique z-order so that they stack on top of each other. Also notice the additional 2 Vec2 type parameters in the addChild() call. These are the ratio and offset. These parameters can be thought of as the ratio of speed to the parent Node.

It's hard to show a ParallaxNode in text, so please run the example Programmer Guide Sample code to see this in action!