Displaying the background image
Now that we have a clean slate, let's start from the top by displaying the background image.
You might think that, "Wait a second. Are we going to be using a static image for the background? But the book says it will teach the parallax background." It is true that we are going to use a static background for the time being so that it is easy to visualize and see whether proportionately everything looks right on the screen. The image is just for reference; we will change the static image into a parallax layer later in the book.
First, we need to copy all the assets from the Resources
folder provided with the chapter into the Resources
folder of the project on the drive. The Resources
folder should be in the wp8Game
project folder along with the Classes
folder, as mentioned in Chapter 1, Getting Started. After importing the background image and other images into the Resources
folder, we go to the wp8Game project (not the component!) in the Solution Explorer pane in Visual Studio, click on the triangle beside it to open the folder structure, and look for the Resources
folder. We then right-click on the Resources
folder and navigate to Add | ExistingItem. Now, we navigate to the Resources
folder on the drive that we have copied all the resources of the game on, select the bookGame_Bg.png
file, and finally click on Add. We should now be able to see the file in the Solution Explorer pane, as follows:
Now, in the init()
function, we create a new variable called bg
of the type CCSprite
and position it as follows:
CCSprite* bg = CCSprite::create("bookGame_Bg.png"); bg->setPosition(ccp(visibleSize.width* 0.5, visibleSize.height * 0.5)); this->addChild(bg, -1);
Regular C++ users follow the practice of "if you create new, you must delete", which pertains to creating pointers. However, since CCSprite is an autorelease object of Cocos2d-x, this is not required in this case.
Now, if we build and run it, the background image will look as follows:
Note how the code is exactly the same as the initial default Cocos2d-x background that was displayed, except that I just put the depth as -1
so that the background object is behind all the other objects on the screen.
Congratulations! We have displayed the first object on the screen. Let's ship it and make some money. Well, not so soon. We still need our hero to make it a little more interesting. The player obviously won't pay a whole lot of money for a pretty picture to get displayed on the screen.
Next, we will import the hero into the game. So, we follow the same steps to import the bookGame_tinyBazooka.png
file into the project that we did for bg
. So, we go to the Resources tab in the Solution Explorer pane, right-click and select Add Existing item, select the PNG file, and click on Import.
As we will be accessing the hero sprite all the time, we will make it a global variable and declare it in the .h
file instead of the .cpp
file. So, we go to the .h
file and create a new CCSprite variable called hero
right below the area where it says public:
, as follows:
CCSprite* hero;
Now, below the position where we created bg
in the init()
function, we type the following:
hero = CCSprite::create("bookGame_tinyBazooka.png"); hero->setPosition(ccp(visibleSize.width * 0.25, visibleSize.height * 0.5)); addChild(hero, 5);
We now build and run the project; we should see the hero on the screen, as follows:
Unlike the background object that was placed at the center of the screen, the hero is placed at 0.25
or 1/4th the width of the screen and at half the height of the screen. I have placed it at a z depth of 5
so that it is above all the other objects on the screen. Now, if we add a new child between -1
and 5
, it would be placed between the background and the hero image.