Cocos2D Using Sprite Sheets

Cocos2D Using Sprite Sheets

Postby BenChang » Fri Sep 11, 2015 7:30 am

A spritesheet in Cocos2D is made up of two files: an image file with all the sprite frames in it, and a data file that stores the name and location of each frame within the sheet. Once you've created these files, you load the spritesheet using the
Code: Select all
. This caches sprite frames by name, which you can load and draw efficiently. You can display a single frame from the cache using
Code: Select all

To play an animation, you first construct a
Code: Select all
object, with a list of all the frames you want it to play. Then you create a
Code: Select all
action, which takes the Animation object and actually plays it.

In this example, we'll create a spinning gem animation.

gem1.png (3.16 KiB) Viewed 2112 times

You can use the files gem1.png through gem6.png in the TappySquid repo, or from the attached zip file

Create the spritesheet

We'll use TexturePacker for this task. TexturePacker has a free version, with additional features enabled if you pay for the Pro version.

Screen Shot 2015-09-11 at 3.14.33 AM.png

When you launch TexturePacker, create a new project, and set the format to Cocos2D

Screen Shot 2015-09-11 at 3.15.48 AM.png

Screen Shot 2015-09-11 at 3.16.40 AM.png

Drag the gem PNG files into the TexturePacker window

Screen Shot 2015-09-11 at 3.17.57 AM.png

The free version has some features disabled, so you'll need to make some changes to the settings.
- set "PNG Opt Level" to 0
- set the "Algorithm" to "Basic"
- set the "Trim Mode" to "None"

Screen Shot 2015-09-11 at 3.19.26 AM.png
Screen Shot 2015-09-11 at 3.19.26 AM.png (33.7 KiB) Viewed 2112 times

Now click the "Publish Sprite Sheet" button.

Screen Shot 2015-09-11 at 3.20.41 AM.png

Save the spritesheet in the res/ folder for your Cocos2D project. Name it "gem". TexturePacker will save two files, "gem.png" and "gem.plist".

Load the spritesheet

add the files in src/resources.js:

Code: Select all
var res = {
    background_png : "res/background.png",
    urchin_png : "res/urchin.png",
    squid_png : "res/squid.png",
    squid2_png : "res/squid2.png",
    squid3_png : "res/squid3.png",
    gem_plist : "res/gem.plist",
    gem_png : "res/gem.png"


var g_resources = [];
for (var i in res) {

Create a new source file named Gem.js
Code: Select all

var Gem = cc.Sprite.extend({
   ctor:function() {
                // load the spritesheet plist. 
                // Cocos parses it, loads the PNG file, and stores all the frames in the cache
                return true;

Add Gem.js to project.json so Cocos will know about it

Code: Select all
    "project_type": "javascript",

    "debugMode" : 1,
    "showFPS" : false,
    "frameRate" : 60,
    "id" : "gameCanvas",
    "renderMode" : 0,

    "modules" : ["cocos2d"],

    "jsList" : [

and load the Gem in our main layer

in app.js
Code: Select all
      this.gem = new Gem();
      this.gem.x = 500;
      this.gem.y = 200;

Nothing will show up yet, because we haven't created an animation from the frames yet.

Create the Animation

add this code to Gem.js after loading gem_plist:

Code: Select all
   var i,f;               
        var frames=[];
        for (i=1;i<=6;i++)

This loads gem1.png, gem2.png, gem3.png, etc from the spriteFrameCache and stores them in an array of frames.

Code: Select all
       var gemAnimation = new cc.Animation(frames, 0.1);

This creates an Animation object that stores the frames. It has a default delay of 0.1 seconds. This is something you can also change for each frame.

Code: Select all
         this.gemAction = new cc.RepeatForever(new cc.Animate(gemAnimation));

we create an Animate action object using the animation we just made. It's also wrapped in a RepeatForever action so it will loop. Finally, we call runAction() to begin playing it.

this.gemAction = new cc.RepeatForever(new cc.Animate(gemAnimation));

(20.73 KiB) Downloaded 170 times
User avatar
Posts: 176
Joined: Mon Jan 17, 2011 4:48 pm

Return to Game Development

Who is online

Users browsing this forum: No registered users and 1 guest