Infinite Background Parallax In Cocos2d

sauvik blog 2

Infinite background parallax effect is quite popular in games. It creates an illusion of speed for foreground game objects. Actually the foreground game objects are static in nature and the game background moves towards left slowly. This situation causes the illusion of speed towards the right direction for foreground game objects.

But creating an infinite parallax effect for game background is tricky. If you are  familiar with the open source, 2d game development framework Cocos2d-swift, then this blog is just for you.

Before You Start:

Before you start, you need to download the scratch project from GitHub. Open the project in Xcode. Explore it in Project Navigator. You will see a tree like structure as shown in the screenshot below.






Make sure that you have all the image assets in the ParallaxAssets folder under Resources. You also need to be sure about the ParallaxScene.h and ParallaxScene.m file under the classes FileGroup.





What is Parallax?

Before we start learning more about parallax effect let’s take a closer look on the effect. The following may be helpful for understanding the parallax effect.


Sample Parallax Effect

What you see is Parallax effect. Let’s find out the moving objects.

  • Clouds 
  • Funny Cactuses.
  • Grass.

 Is there anything special?

Did you notice the speed of the moving elements? Yes, it is the main aspect of Parallax Effect. The farthest object has the minimum speed and the nearest one moves at maximum speed.

 What’s wrong with CCParallaxNode for infinite parallax effect?

You might be thinking about CCParallaxNode, the Cocos2d frameworks class to implement the parallax effect. You can find its usage on StackOverflow. But the problem with it is: it does not support infinite parallax. You need to perform move and reposition action on the parallax node. This often leads to another issue; flickering problem might arise if the width of various layers are not managed properly.

What’s the strategy behind the infinite parallax effect?

Untitled copy

How to implement the infinite parallax effect on a single CCSprite which is small comparable to the screen?


  1.  Initial Left Move: Move the sprite just out side of the left edge of the game scene so that it is not visible.
  2. Repositioning Move:  Reposition the sprite just out side of the right edge of the game scene to make it prepared for next move to the left edge of the game scene  .
  3. Left Move: Move sprite to the left edge of the game screen.
  4. Repositioning: Repositioning sprite as specified in  2.



How to implement parallax on this Grass Layer Sprite? What about this strategy?



N.B: To avoid flickering you must ensure that first window.width pixel and last window.width pixel of these layer sprite image assets must superimpose on each other.

Now you have the complete idea of creating infinite parallax for small sprite like cloud and large background sprite like grass layer.

Let’s start writing the code

We will need a singleton ParallaxManager which will implement all these infinite parallax effect on small sprite as well as large layer sprite. Create a new file with [Command + N]. Type CCNode as the parent class. Name the class as ParallaxManager.

Now replace the content of the ParallaxManager.h with the following code.

And replace the content of ParallaxManager.m with the following code.

Next, you must go through the code of the functions

Comments in the code clarify the implementation of strategies as we have discussed earlier.

Before you start writing code to add image sprite on ParallaxScene add the following device determining macros in your Prefix.h file.

Now, to access these macros, clean your project by [Command + Shift + K]. Because any modification in .pch (Pre-Compiled Header) file are not effective until the project is cleaned.

Now replace the content of the ParallaxScene.h file with the following code

Do the same for the ParallaxScene.m file using the following code

Those #define Macros defines the Z-Oders of the sprite images to be added on this game scene. Sprite drawn with less Z-Oder, added at lower layer of the game scene.

Before we add the first cloud sprite to our game scene  make sure you ParallaxAssets file group contains all the image asset files.



Hope that you are seeing all the image assets as shown in the above two pictures. Let’s add some background components such as Sky, Clouds, Mountains, Trees etc.

1.  Adding Sky as a background component

Find this code in the init method of ParallaxScene.m.

Below the above code, add following code block:

It just adds the proper version of the sky depending upon the device type. (Wide Version of the sky is taken for iPhone5).Now create the singleton ParallaxManager object using the following code.

2.  Adding some clouds with infinite parallax effect

Now run your project by [Command + R].You should see something like this.

3. Love mountains – here you go

Only Sky and Clouds are not enough. Let’s add mountains as a background component to make it more real. Here is the code for that:

Run your project again. You must see something like this:

4. Trees and Grass

Should we add some cool trees and grass layer? Do we have the image assets stored in the right folder? Yes we have. So, just append the following code in the body of init().

On run your project and you can see the result like that

Where to go from here?

If you get stuck at any point, download the working project from GitHub. I hope you learned some cool new tricks to implement infinite parallax in Cocos2d games. To learn more about Cocos2d you can find a cool book from here, for any class reference, go to Cocos2D Developer Library Reference. If you have any question or comment on this tutorial, please feel free to ask or leave a comment.

Sauvik Dolui

Sauvik Dolui is an iOS enthusiast and ingenious blogger who loves all things design and technology. He works closely with clients across Fortune 500 companies to develop an effective technical strategy. Besides iOS apps he also loves to develop cross-platform mobile games. The Little Indian Archer, a bow-arrow game developed by Sauvik, can be found on App Store and Play Store as well. When he is not coding, he can be found travelling around the villages or reading a book. By the way he is crazy about soccer.