Cocos2d-x 3.x plist + PNG Animation

Labels: cocos2d-x 3.x plist + PNG animation texturepacker Application Opening Animation

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

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 a cache and read the image into ccspriteframecache * cache = ccspriteframecache: sharedspriteframecache (); cache-> trim ("hero_bird.plist"); // ② create the first frame, set the location and add it 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, add to the set sprintf (STR, "bird_hero_10902d.png", I); 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<SpriteFrame*>& 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<SpriteFrame*>& 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 ******************************************

Cocos2d-x 3.x plist + PNG Animation