Cocos2d-x 3.x plist + png Animation

Cocos2d-x 3.x plist + png Animation

 

 

 

Preface:

 

This time, after 2048, I wanted to use Flash.

Just like, everyday series, there will be a "tiami" sound + animation at the beginning, isn't it quite appealing.

Previously, when I was playing the first game, I made a set of 78 frames of Flash,

But it won't be used at the time. It's just now available, hey ~

 

Body:

 

In this example, let's take the FlappyBird I want to make over the past few days as an example:

1. First, let's make the required resources first,

There are three layers (I know)

① Load each image

② Compress all the images into one image and extract them separately.

③ Use the plist file and png to retrieve the image.

 

The first two are relatively simple, and the efficiency is not very high. I will use the best of the three directly, plist + png

In fact, plist is generally used on mac,

You can use TexturePacker to create a plist in windows,

(Can be downloaded here: https://www.codeandweb.com/texturepacker/download)

A very convenient tool,

After the installation is complete, open it and select your engine. Of course we chose cocos2d:

 

The following page is displayed:

 

I am not very familiar with the use details of this tool =.

For more information, see du Niang.

I only know, click the button above to add the image you need to compress in PNG:

 

I don't need to say more about this technique:

Press Ctrl to select one or more,

Shift can be selected multiple times in a row.

 

Select images and add them.

If there are no images, take the following together:

 

Click the File button in the upper left corner:

 

Then, select Public sprite sheet from the drop-down menu and select the directory for storing PNG and PLIST:

 

First, the plist directory and then the PNG directory. It is recommended that the two file names be the same.

Then, the output is as follows:

 

OK. You can view the two files generated in the storage area.

 

 

2. Next is the call part in the Cocos2d-x.

 

Copy two files (plist and png) to the Resource,

In VS2012, right-click the Resource folder and choose add> existing item to add the two.

 

Here, I put the flying bird animation directly on the HelloWorld interface.

 

Add the following code to the Init function of HelloWorldScene. cpp:

 

// ① Create cache, read the image into CCSpriteFrameCache * cache = CCSpriteFrameCache: sharedSpriteFrameCache (); cache-> trim (hero_bird.plist); // ② create the first frame, set the location, add to the current scenario CCSprite * sp = CCSprite: createWithSpriteFrameName(bird_hero_01.png); sp-> setPosition (Point (visibleSize. width/3, visibleSize. height/2); this-> addChild (sp); // ③ create a set and store each image Vector <SpriteFrame *> sfme = Vector <SpriteFrame *> :: vector (); char str [20] = {0}; for (int I = 1; I <4; ++ I) {// ④ get the image name and add it to sprintf(str,bird_hero_%02d.png, I) in the Set ); spriteFrame * fname = cache-> spriteFrameByName (str); sfme. pushBack (fname);} // ⑤ create an animation and set the playback speed to CCAnimation * animation = CCAnimation: createWithSpriteFrames (sfme, 0.1f); sp-> runAction (CCRepeatForever :: create (CCAnimate: create (animation )));

To explain:

 

I don't need to say much before ① and ②,

③. CCArray or Array is used before,

No, I cannot use Array for both 3.0 and 3.2.

CreateWithSpriteFrames has a problem,

Because of this function definition, we can find that:

 

Animation* Animation::createWithSpriteFrames(const Vector
 
  & frames, float delay/* = 0.0f*/, unsigned int loops/* = 1*/){    Animation *animation = new Animation();    animation->initWithSpriteFrames(frames, delay, loops);    animation->autorelease();    return animation;}
 

Its first parameter must be:

const Vector
 
  & frames
 

 

This is different from the previous version.

 

Then ④

Why is the image name obtained here:

Sprintf(str,bird_hero_10902d.png, I); what about it?

 

Because % 02d can be ensured, after I is obtained, it is not enough to be supplemented by 0,

For example, if it is % d,

When I is equal to 1, the obtained name is bird_hero_1.

And % 02d, get the name: bird_hero_01

 

OK. Run it and you will find that the bird is flying ~

 

PS: How to use it as an opening animation?

My method is to add a scheduled task after the above Code,

How long will the jump take:

 

this->scheduleOnce(schedule_selector(InkmooFlash::jumpToMain), 4);

In this way, you can make an opening animation after calculating how long a frame is played and how many frames are in total ~.~

 

 

 

 

 

* *********************************** Please specify the source: bytes ******************************************