Tutorial: Adding a Picture (Sprite) to a Cocos 2d-x Game
Now that you have created a basic game using Cocos 2d-x (see this tutorial for how to do so), it’s time to learn how to modify it by changing the default picture to something else.
The first step is to copy your picture file into the Resources folder located inside your game’s directory:
Then open up your game’s solution file in Microsoft Visual Studio (e.g. since I have Windows 7, I open the proj.win32 folder and double-click on the file with the same name as my game and type Microsoft Visual Studio Solution).
Once you do that, go to the Solution Explorer and in the src folder, double-click on AppDelegate.cpp to open it.
In the init() function, there is a line
auto sprite = Sprite::create("HelloWorld.png");. Simply replace “HelloWorld.png” with the name and extension of the picture you added to the Resources folder (e.g. “Mickey.jpg”).
Ta-da! You have successfully replaced the default image with one of your own!
Let’s take it one step further. This time instead of simply replacing one image with another, we’re actually going to create a new layer to put our image in.
In the same directory where you found the Resources folder, there is a folder called Classes. Currently, it holds your AppDelegate and HelloWorldScene files (.h and .cpp). Create a new .h and .cpp file in the same directory with a name that has something to do with your picture (e.g. Mickey.h and Mickey.cpp). The easiest way to create these new files is simply to copy-paste an existing .h/.cpp file and then delete all the code it contains.
In your new .h file, put the following code (changing “Mickey” to be whatever you named your file as):
You’ll notice it’s exactly the same code as in the default HelloWorldScene.h file, except it doesn’t include the menuCloseCallback(), since we don’t need to create another quit button for the application.
In the .cpp file, put the following code (again changing “Mickey” to match your own file names):
Once again, notice that the code is exactly the same as the original HelloWorldScene.cpp file except we’ve replaced HelloWorldScene with the name of our new class and I’ve deleted the “Hello World” label (text) code and the code that adds our image to a menu, since we don’t need them.
To use our new class, we have to do two things. First, we have to tell the linker where our files are at. We do this by going to the Solution Explorer and right clicking src->Add->Existing Item… then navigating to the directory where we stored our class’ .h and .cpp files. Add each of them to your program.
Finally, go to AppDelegate.cpp and change
#include "HelloWorldScene.h" to your class’ name (e.g.
#include "MickeyScene.h") and then in the function applicationDidFinishLaunching(), change
auto scene = HelloWorldScene::createScene(); to match your class’ name (e.g.
auto scene = MickeyScene::createScene();).
Now recompile your program. You’ll get something like this:
Congratulations! You’ve successfully create your own image layer.
But wait! What if you want both the original layer AND your new layer?
Follow the same directions as above, but instead of deleting HelloWorldScene’s
#include line in AppDelegate.cpp, simply add your new include line underneath it instead. Also leave the original
auto scene = HelloWorldScene::createScene(); alone. Instead, we’re going to add our new layer as a child of that scene:
auto layer = MickeyScene::create();
The complete code for the AppDelegate.cpp is now (being sure to change “Mickey” to match your own class):
As you can see, our new picture is superimposed over the old Hello World layer: