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
cc.spriteFrameCache
. 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
cc.Sprite.setSpriteFrame()
.

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

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

gem1.png
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 gems.zip.

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) {
    g_resources.push(res[i]);
}


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

var Gem = cc.Sprite.extend({
   ctor:function() {
      this._super();
                // load the spritesheet plist. 
                // Cocos parses it, loads the PNG file, and stores all the frames in the cache
      cc.spriteFrameCache.addSpriteFrames(res.gem_plist);
                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,
    "engineDir":"frameworks/cocos2d-html5",

    "modules" : ["cocos2d"],

    "jsList" : [
        "src/resource.js",
        "src/app.js",
        "src/Urchin.js",
        "src/Squid.js",
        "src/Gem.js"
    ]
}


and load the Gem in our main layer

in app.js
Code: Select all
      this.gem = new Gem();
      this.addChild(this.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++)
        {
           f=cc.spriteFrameCache.getSpriteFrame("gem"+i+".png");
           frames.push(f);
        }


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));
       
        this.runAction(this.gemAction);


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));

this.runAction(this.gemAction);
[
Attachments
gems.zip
(20.73 KiB) Downloaded 170 times
User avatar
BenChang
 
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

cron