Using Cocosstudio resources in Cocos2d-js-frame animation (1)

In this blog, we will briefly describe the following by using an example of a frame animation resource exported from Cocosstudio in Cocos2d-js : How to use the exported Frame animation resource using the Actiontimeline for animation cutting. About frame animation, due to the complexity of the content. We will be divided into two articles to introduce. This article will focus on the preparation of resources, and the next article will focus on the use of resources.

have to say:

In accordance with the original schedule, frame animation and skeletal animation I am ready to introduce the last. However, seeing a lot of friends are very excited about the animation, so modified the plan. In fact, about frame animation, a few days ago on the general study understand, these days have been around a "pit", how can not climb out. That is: Setframeeventcallfunc method always callback unsuccessful, later after and a lot of people communicate, seemingly this is a bug, and actiontimeline in the bug is more than this place.

Well, I hope the official website will respond early and fix it as soon as possible. Of course, it's also possible that I'm using the wrong thing. If useful to understand the friend, welcome the guidance, welcome the discussion.

Here to special thanks to help me a lot of two friends: this road does not brake and wxhqforever, to your enthusiasm to help point a praise!!

First, Cocosstudio preparation

The first step: Download the appropriate sample from the official website, Battlescene. As follows:

In fact, we only use the middle one with the fork in the big shark .

Step Two: make the Cocosstudio project we use:

Why do you make your own Cocosstudio project?

For the resources provided by the official website: first, we do not need to be so complicated, because we are talking about how to use resources, rather than how to make resources, so we need to make appropriate simplification. Second, the official website provides the resources, especially regarding the frame animation part, and we now use the environment does not match, appears the version compatibility question, therefore we must make the appropriate change.

The following are the specific changes:

1. Objective Overview: Our final production results are as follows:

2. Import a resource, create a node: After creating the project, we need to import the following resources: GENERALSHARK.CSD and Generalshark_png folders and their files. After importing, create a new node: SHARK.CSD. The effect is as follows:

3. Copy the resources to the new node: Double-click the GENERALSHARK.CSD file, select all resources in the animation panel (ctrl + A), copy (Ctrl + C), double-click the SHARK.CSD file, and then paste in the animation panel (CTRL + V). Finally, delete the GENERALSHARK.CSD file. Sections are as follows:

State when all is selected:

Status of SHARK.CSD after pasting:

PS: here to explain why it is so troublesome to copy and paste. Because the version is incompatible. once you have selected GENERALSHARK.CSD, you will find this in the attribute description:

Once you have selected SHARK.CSD, you will find this in the attribute description:

Also, you can see the difference in color, SHARK.CSD and GENERALSHARK.CSD color is not the same.

4. Design layout: Please directly drag the SHARK.CSD and three button buttons into the scene for the corresponding layout, please refer to the target overview in the first step.

5. Very IMPORTANT!!! Cut the SHARK.CSD into different animations, as shown in the following:

PS: the way to enter the animation management interface, click on the animation panel to look like a "pen" that button. This step must be done carefully and the benefits of doing so will be explained in detail in the next blog post.

Step Three: publish the resources. Note that you should change the data format to JSON format in the Publish settings, you can select the Res folder of the project created in the Cocos Code IDE, and, of course, you can choose another folder. Specific release settings such as:

In order to facilitate everyone, the following provides Cocosstudio project resources Baidu cloud Download Link:
Link: http://pan.baidu.com/s/1eQxVXE6 Password: 9VJW

Second, Cocos Code IDE Operation

The first step: Create the COCOS2D-JS project and copy the resource Res published by Cocos Studio to the Res folder of the project or directly to the project's Res folder.

PS: When you create a project, the resolution defaults to 640 x 960, and the direction is selected vertically.

Step Two: Modify the Project.json file and add the Cocostudio in the modules. Add Frameanimationscene.js and Resource.js to Jslist. The specific code is as follows:

{  "Project_type":"JavaScript",  "DebugMode":1,  "Showfps":true,  "framerate": -,  "ID":"Gamecanvas",  "Rendermode":0,  "Enginedir":"FRAMEWORKS/COCOS2D-HTML5",  "Modules":[ "cocos2d", "Cocostudio" ],  "jslist":[ "Src/resource.js", "Src/frameanimationscene.js" ]}

Step Three: specify the required resources in the Resource.js file for post-load use. The specific code is as follows:

var res = {        frame_animation_json:"res/FrameAnimationScene.json",        shark_json:"res/Shark.json"};var g_resources = [];for (varin res) {    g_resources.push(res[i]);}

Fourth Step: a very, very important step, you need to modify the Main.js file, change one cc.view.setDesignResolutionSize(960,640,cc.ResolutionPolicy.SHOW_ALL); of cc.view.setDesignResolutionSize(640, 960, cc.ResolutionPolicy.SHOW_ALL); the: to.

Although the direction we chose is vertical, we don't know why, when the project was created, the width is 960,640. The height of the vertical should be 640,960. Therefore, to make the appropriate changes to run properly. If you want to see the effect, you can try it, there will be surprises oh.

The specific code for Main.js is as follows:

Cc. Game. OnStart= function () {CC. View. Adjustviewport(true);Cc. View. Setdesignresolutionsize(640,960Cc. Resolutionpolicy. SHOW_all);Cc. View. Resizewithbrowsersize(true);Load Resources cc. Loaderscene. Preload(G_resources, function () {CC. Director. Runscene(New Frameanimationscene ());}, this);};Cc. Game. Run();

Iii. Summary

As for the preparation of the frame animation, this is the end of the process. You can run the animation in the SHARK.CSD in the Cocosstudio project yourself and take a look. In the next section, we will explain in detail how to use frame animation resources in Cocoscodeide.

Special Note: frame animation, as the name implies, is through a frame of a frame play to achieve the animation effect. There are a number of drawbacks compared to skeletal animations. One of the more obvious: if you want to achieve a realistic effect, then the picture resource file is relatively large, the number of pictures will be very much.

However, an example of the official website provides us with an important improvement measure. You can open the Battlescene in the official website example to view it. You'll find that although frame animations are used, the official website example breaks down the entire character into parts, one picture for each part. Each part changes in each frame to make up the whole character changes in each frame.

this kind of "skeleton animation Essence" frame animation effectively improves the control ability of frame animation in controlling the quantity and size of picture resources.

It's beyond the scope of this series of tutorials on how to make good frame animations, which we won't elaborate on here.

Using Cocosstudio resources in Cocos2d-js-frame animation (1)