Before you proceed, it would help if you understood The Anatomy of a Cocos2D for the android Game.

We will be looking a step by step guide a way to develop an easy game from scratch – variety slider puzzle game. the game logic is easy. we are going to provide players a scattered 3X3 matrix slider puzzle and their task is to properly set up the numbers so as of accelerating magnitude. we conjointly keep track of the quantity of your time accustomed to complete the task.

Lets get started…

Create a New Project and Import the Cocos2D

  • You must have downloaded the Cocos2D library already to your machine… if not please checkout the previous post on how to dowload Cocos2D and run the sample applications that come with it!
  • Create a new Android Application Project – PuzzleGame.

  • You may click Next, Next Button. On the create Activity Prompt, select Blank Activity and finish.

  • There are two ways to import the Cocos2d libraries into your PuzzleGame project.
  1. First, you may simply copy the cocos2d-android.jar file to the libs folder within your project. If this folder does not exist, you may create it.
    You can find the cocos2d-android.jar file in the downloaded cocos2d source (cocos2d-master.zipcocos2d-mastercocos2d-androidlibs) from github. Next, you must notify the compiler about the existence of this library by adding it to the build path. To do that Right Click on your project > Properties > Resource > Java Build Path > Libraries > Add JARS ..Navigate to the libs folder in your project and select cocos2d-android.jar


  1. You can copy the entire src folder in the cocos2d-master zip file (cocos2d-master.zipcocos2d-mastercocos2d-androidsrc) into your own PuzzleGame project src folder.
    We will be using Method A above for this tutorial because there are less files to manage. However, as you develop more complex projects, you might want to work directly with the main cocos2d source files.
  • Next, copy the fps_images.png file to your PuzzleGame project assets folder. You can find the file in the cocos2d-master zip file you downloaded.

Lets Start Writing the Main Code

We begin by modifying the default activity ( . At the top of your class, add the following field:

Eclipse might flag this as an error – could not resolve type. This is because the type “CCGLSurfaceView” has not been imported. You can fix this by pressing Ctrl + Shift + O . Or hovering over the error and clicking “import CCGLSurfaceView”. You may use this to solve other similar errors. Next, replace the OnCreate Method with the following

Above snippet sets up the OpenGL surface for Cocos2D , sets some flags to ensure fullscreen and attaches the OpenGL surface to the current application screen. Next, we further extend the onCreate as follows :

The added snippet tells Cocos2D which surface to render, set the screen orientation to landscape left, to display the current FPS rate and set animation interval to 60fps. The actual framerate achieved depends on the capabilities of the device. Next, add the following snippets to instruct Cocos2D on what to do when the device changes state – e.g when the application is terminated or paused or switched.

Cocos2d has now been setup! You should be able to run the application now, although it will be empty. Next, we will work on adding a game layer, game logic and adding the graphics/tiles ! Excited ? Lets go!

Create a New Game Layer

Create a new Class . File > New > Class
Name your class GameLayer and Uncheck the public static void main(String[] args) option and Click OK. Eclipse will generate a some class code for you with a default constructor. Now, your class should extend the Cocos2D Layer class, so you add the extends CCLayer keyword to your class.

Next add the following static method

The method above creates a scene on which we can add our items. Your GameLayer class should now look like this . (Remember to use Ctrl + Shift + O) to solve type resolution errors.

Positioning in Cocos2D

Game development does require some simple but very interesting mathematics especially when figuring out the best way to position and scale you images to look good on device screens. Cocos2D uses an inverted coordinate positioning system where each point on the screen is described by its X and Y plane (x,y) distance from the bottom left of the screen . The bottom left is described as coordinate (0,0) and the x value increases as you move right and y value increases as you move up the screen.

For this game tutorial we will be using the following image assets which I have designed .
background.jpg tile.png , tile2.png cancel.png (cancel.png originally sourced from . You may download them now, and add them to the assets folder of your puzzleGame project. We will be using a few other image assets which will be introduced later!

Adding a Sprite and Text Labels .

Sprites are pieces of 2D graphics (images) that can be animated on screen. Typically the images we will be working with on this slider puzzle game will be implemented using Cocos2D sprite class. First, lets add our game background and a sample tile.

Add the following field to your GameLayer class to store the device screenSize

private static CGSize screenSize;

Add the following code to your default constructor.

Scaling in Cocos2D

While adding images and positioning objects you must also pay attention to scaling issues that arise when your game is run on devices of different resolutions. For example, our background image from the previous tutorial has a dimension of 1024 by 600. On an android device with a resolution different (smaller or larger than 1024 by 600), the image would look quite different – either too large or too small. To avoid this, we usually calculate some appropriate scale factor – a floating point value which we use to scale (expand or shrink) our image to fit the screen . In our code above we have calculated a general scale factor

generalscalefactor = CCDirector.sharedDirector().winSize().height / 500 ;

We will use this scale factor when scaling all our sprites added to the canvas to ensure it scales properly on devices of different screen size. We also set the scale factor value of the background sprite to a mathematical calculation that ensures it is scaled such that its width becomes the width of the device. Next we set our anchor point to the top left (0,1) and also use similar positioning to set the sprites position to the top left (0, screenSize.height) . We then add the background sprite to the scene using a z-index of -5. This means every other sprite added with a value larger than -5 will be on “top” of the background!

So just before we run this and admire the pretty work thus far, you should inform Cocos2D to run the new GameLayer class. Go back to and add the following to the end of the onCreate Method.