Getting to know sprite sheets

The first game we made was so simple that it just used a single image file. But the story of our dragon will need much more. So, we finally have enough art to actually collate it into a sprite sheet. As you may already know, a sprite sheet is an image that contains many other images. A sprite sheet needs a texture file and an information file to tell the engine where each inpidual image or frame lies within the texture. Since this is a fairly small game, you have just one sprite sheet that looks like this:

I created this sprite sheet and the corresponding plist using Texture Packer. Texture Packer is a great utility that helps you compose all of your sprite frames into a single sprite sheet. This is just one of the many things Texture Packer can do for you and your graphics artist. You can find Texture Packer and relevant information at the following URL:

https://www.codeandweb.com/texturepacker

You must load a sprite sheet into the cc.SpriteFrameCache if you intend to use its sprites. The code is as follows:

cc.SpriteFrameCache.getInstance().addSpriteFrames("beautiful_dragon.plist");

In the preceding code, "beautiful_dragon.plist" is an example of a .plist file for a given sprite sheet. Don't bother about the syntax there. The code reads getInstance instead of sharedSpriteFrameCache that you're familiar with. It's among the few differences between the C++ and JavaScript versions of the engine.

Now that you've learned how to load sprite sheets, we can proceed with the creation of the scenes of this game. Similar to our first game, this is also composed of two scenes: the main menu / opening scene and the game world. So without further ado, let's define our fairy tale's main menu!