Coordinate system

Coordinate systems are used to determine the position of the objects on the screen. Cocos2d-x uses a rectangular coordinate system with the bottom-left corner of the screen being the origin in landscape mode and top-left corner in portrait mode.

From the bottom-left corner of the screen, imagine a line going straight towards the bottom-right corner, which would be the x axis, and a line going up from the origin to the top-left corner, which would be the y axis. There is also a z axis that is coming out of the screen from the origin. This is irrespective of whether you are holding the device in the landscape or the portrait position. Refer to the following figure:

Since Cocos2d-x is the 2D game development framework, we will be mostly dealing with the x and y coordinates. The z axis is used mainly for placing objects in front or behind other objects. To decide which image is above another image, Cocos2d-x has something called a Z-order. The higher the Z-order, the further away from the screen that image will be.

A positive z value means that you are placing the object in front of other objects and a negative z value means that you are placing it behind other objects. For example, the background image would usually have a Z-order of 0 or -1. And you would place other objects at a value that is higher than that value since you would want the background to be behind all the other objects on the screen.

Also, if you don't specify the Z-order while adding a layer or sprite, the next available Z-order will be taken by default. For example, if you add a background sprite and then immediately add the player sprite, the player sprite will be drawn above the background and you will be able to see both the player and the background. If you add them the other way around, you won't be able to see the player as the background is at a higher Z-order than the player and hence the player will be drawn beneath the background and you will be able to see only the background. You might think the player is not drawn but in fact the player is being drawn but under the background, so you don't see it.

The distance is measured in pixels. So assume you have a Nokia 820, which has a screen resolution of 800 x 480 when viewing the screen in landscape mode, which means the width of the screen is 800 pixels and the height is 480 pixels. So if you wanted to place something on the middle of the screen, you would move 400 pixels from the right of the origin and then go up 240 pixels from the bottom of the screen to place the object at (400, 240).