Cocos2d-x 使用 TexturePacker制作一个英雄，老外写的

Create spritesheet

@H_301_4@ Have you seen this sort of image before? The first time I saw this I thought this is created using Photoshop,and I also have no idea how to use thisBIGimage in the game.

@H_301_4@ Until… I started to look in the game development,I only know that this is actually created byspritesheetprogram/app.

@H_301_4@ Here I will be usingTexturePacker.

@H_301_4@ Why? I have seen many game tutorials are talking about this,I tried it and found that it is very easy to use.

How to use demo

@H_301_4@ First of all,I’m going to do this in Cocos2d-x engine,so selectCocos2dhere.

@H_301_4@ Now,drag images to theBox

@H_301_4@ Here I drag 3 bird images,and you can see the left pane,there arehero_01.png,hero_02.png,244)">hero_03.png,these are the original file name.

@H_301_4@ Once you’ve done,selectPublish sprite sheet

@H_301_4@ It will prompt you twice,one is to save the plist file contains the Meta data of the original images such asframe,244)">offset,244)">rotated,etc. It may sound complicated,but no worry,Cocos2d-x will handle it.

@H_301_4@ The second prompt is to save the merged image.

@H_301_4@ And you’ve done.

Use in Cocos2d-x

@H_301_4@ File structure

@H_301_4@ InAppDelegate.cppapplicationDidFinishLaunching()method,add

 
     // 1. fix the resolution glview->setDesignResolutionSize(320, 480, ResolutionPolicy::EXACT_FIT); director->setContentScaleFactor(1);  // 2. add search path for images std::vector<string> searchPaths;  searchPaths.push_back("images"); FileUtils::getInstance()->setSearchPaths(searchPaths);  // 3. add sprite frame SpriteFrameCache::addSpriteFramesWithFile("hero.plist", "hero.png"); "images.plist",152)!important">"images.png");

I’m a iPhone user,thus I fix the resolution to320 x 480for simplicity
In this case,I put the sprite sheet underimagesdirectory,thus I add the search pathimagestoFileUtils
Add sprite sheet to cache

Create a sprite object (bird in this case)

@H_301_4@ I just name itHero. EditHero.h

 
     #ifndef __HERO_SCENE_H__ #define __HERO_SCENE_H__  #include "cocos2d.h"  class Hero : public cocos2d::Sprite { public:  Hero();  private:  RepeatForever *moving(); };  #endif // __HERO_SCENE_H__

@H_301_4@ andHero.cpp

 
     #include "Hero.h" #include "GameScene.h"  USING_NS_CC;  Hero::Hero() {  // 1. load a default image  initWithSpriteFrameName("hero_01.png");   // 2. run the move action  this->runAction(moving()); }  RepeatForever* moving() {  // 3. repeat the frame  int numFrame = 3;   Vector<SpriteFrame *> frames;  SpriteFrameCache *frameCache = getInstance();   char file[100] = {0};   for (i = 0; i < numFrame; i++) {  sprintf(file,152)!important">"hero_%02d.png",210)!important">i+1);  SpriteFrame *frame = frameCache->getSpriteFrameByName(file);  frames.pushBack(frame);  }   Animation *animation = Animation::createWithSpriteFrames(frames, 0.3);  Animate *animate = Animate::create(animation);   repeat = RepeatForever::animate);  return repeat; }

Load an image for the Hero(a.k.a bird)by default during object instantiation
Make the bird fly by running the move action
As we know that there are 3 images onhero.plist,thus fix it to 3. Then add all these 3 images(get from sprite frame cache)to an array,and then repeat it forever.

Add hero to GameScene

@H_301_4@ EditGameScene.cpp,under theinit()method,add the code below right beforereturnstatement

 
     Hero *hero = new Hero(); hero->setPosition(Point(visibleSize.width / 2,210)!important">height / 2)); addChild(hero);

@H_301_4@ This is to instantiate aHeroobject,set the position to center of screen then add to current scene.

@H_301_4@ Run it and you will get the animated bird,see screenshot below.

@H_301_4@ Done.