Basic classes of Cocos2d-x

The following are the basic classes of Cocos2d-x:

• CCScene: A CCScene class is used to make screens such as the menu screen, game screen, and credits screen. The CCScene class can be used as a container of CCLayers. It is an abstract entity and you can apply transitions on it to go between scenes such as the menu scene, gameplay scene, and options scene.
• CCLayer: In a scene, you can have different layers to help you organize your scene better just like in Adobe Photoshop. In games, you would usually have different layers such as the Heads-up Display (HUD) and background. Also, CCLayers, unlike CCScenes, have the ability to receive touch and accelerator events. Inside CCLayers, you can have CCSprites, CCMenus, and so on.
• CCSprite: This is the class that is used to display the images on the screen. The image could be in .png or .jpg format. It has various properties such as the width and height of the image, setPosition, setScale, and setRotation, which can be used to manipulate the image's position, scale, and rotation.
• CCLabeITTF: This is used whenever you wish to display any text on the screen. It is mainly used for showing tutorials or level numbers at the start of the game. The text can also be dynamically changed, for example, while updating the score during the game. The user can apply styles, fonts, colors, sizes, and so on on a CCLabeITTF.
• CCMenu: This is used for placing the UI elements in the game such as buttons. CCMenuItems are used to attach the images, position them, and then add them to CCMenu so that they are displayed on the screen. Although you can position the CCMenu, it is general practice to position CCMenuItems instead and keep CCMenu positioned at the origin.

The following is the Gameplay scene from my game, pizzapMania, which shows the layers in the Gameplay scene in action:

The Gameplay scene can be further divided into the background layer, with Z-order 0, which is a CCLayer containing the background image that is a CCSprite. The gameplay layer at Z-order 1 contains gameplay elements such as the player and houses that are all sprites. Finally, the HUD layer, at Z-order 3, has the pause button and controls that are sprites and score, time elapsed, and coins collected are CCLabeITTFs that are updated periodically.

If you don't understand what a Z-order is, go through the Coordinate system section to refresh your memory.

Here, I have included the controls in the HUD layer itself. You could create a new layer and add the controls to it so that it is handled separately on a separate layer. Refer to the following screenshot: