Deploy Particle2dx system for Cocos2d-x games in Windows OS [Part 3]: Import Particle to Cocos2d-x game.

Hi everyone! This is the final post of series "Deploy Particle2dx system for Cocos2d-x games in Windows OS". Here are my previous posts: Part 1, Part 2.

In part 2, I did create 2 files: "Fire_Wheel.png" for the image which will be used to display a chain of movement in screen and "Fire_Wheel.plist" to control the direction of movement. In this post, I will continue to use those files to import to Cocos2d-x project in Visual Studio.

Step 1: I have a character in png format with file name "Fighter.png". I will add the wheel under his legs.

Fig 1: A character will be added to game.

Step 2: Put that "Fighter.png", "Fire_Wheel.png" and "Fire_Wheel.plist" to the "Resources" folder of Cocos2d-x project.

Fig 2. Capture 3 files to Resources project.

Step 3: Open the "HelloWorldScene.cpp", copy these code lines to the bottom line of "init()" method:

Fig 3. Add code to init methods.

In this code, first, I add "Figher.png" to a Sprite object and add it to middle Y and right X in screen. It will be moved from Right to Left. After that, I create a "ParticleSystemQuad" object to scan the plist file to get all information of the "Fire_Wheel" particle. Two "MoveTo" objects will perform the move action from right to left for both Sprite and ParticleSystemQuad object.

Here is the code in text:

Sprite* yumikiFighter = Sprite::create("Fighter.png");

yumikiFighter->setAnchorPoint(Vec2(0.5, 0.5));

yumikiFighter->setPosition(Vec2(visibleSize.width + origin.x, visibleSize.height / 2 + origin.y));

this->addChild(yumikiFighter, 0);

ParticleSystemQuad* preParticle = ParticleSystemQuad::create("Fire_Wheel.plist");

preParticle->setScale(0.5);

preParticle->setPosition(Vec2(yumikiFighter->getPositionX() + yumikiFighter->getContentSize().width / 2 + origin.x

, yumikiFighter->getPositionY() - yumikiFighter->getContentSize().height / 2 + origin.y));

this->addChild(preParticle);

MoveTo* moveToFighter = MoveTo::create(5, Vec2(0 + origin.x, yumikiFighter->getPositionY() + origin.y));

yumikiFighter->runAction(moveToFighter);

MoveTo* moveToParticle = MoveTo::create(5, Vec2(0 + origin.x, preParticle->getPositionY() + origin.y));

preParticle->runAction(moveToParticle);

After adding code, run the project and you will see the Fighter will move with the particle:

Fig 4. Sprite object will move with particle effect.

If you compare with the Sprite object without Particle effect, you can see it will be less attractive than the one with particle effect:

Fig 5. Sprite object will move without particle effect.

 So that's all for this topic. I hope that you are able to make your own particle well. 

If you have any questions or concerns, please post your comment here, I will take a look and response ASAP. And if you are interesting in my posts, please follow and like me on my posts. Thank you!

Yumiki.

Deploy Particle2dx system for Cocos2d-x games in Windows OS [Part 2]: Working with Particle2dx.

There are some several ways to create Particle objects for games. Particle2dx is a straightforward tool to create Particles. I will walk you though this tool in this post and in the next post, I will show you the way to deploy Particle2dx offline.

First of all, check out this official website particle2dx.com, We will work with the online version of this tool. After the website is loaded, there are 4 tabs need to notice in menu.

Fig 1. Menus of Particle2dx.

• Color&Shape: To determine the image shape (circle, square, polygon, etc) and color of the chain of images.
• Motion: To determine the position, direction and length of Particles.
• Template: To change the type of effects.
• Export: To export the Particles and options to plist file and png file.

Step 1: Select "Motion" tab, there are 3 things need to work on are:

Fig 2. Motion screen.

1. Illustration of what you edited. (1)
2. Angle of Particle. (2)
3. Gravity of Particle. (3)

Step 2: Rotate the Angle (2) and Gravity (3) to the positions like screen shot below by dragging and moving the mouse pointer:

Fig 3: Rotate the Angle.

Step 3: Drag the Particle object in (1) to the left.

Fig 4: Drag and move the Particle to the left position.

Step 4: Shorten the line of Angle (2) by dragging and moving the mouse pointer:

Fig 5. Shorten the line of Angle option.

Step 5: Lengthen the line of Gravity (3). You should monitor the (1) to see the changes of Particle.

Fig 6. Lengthen the line of Gravity.

Step 6: Select "Color&Shape" menu, change the image to polygon and change the start color to red, end color to yellow.

Fig 7. Change the shape and color of Particle.

Step 7: It is good to export to output now. Select menu "Export", rename the "filename" to "Fire_Wheel", then click on the Cocos2d-x image to export plist file and click on the "Fire_Wheel.png" to export the PNG image.

Fig 8. Export the Particle to output with plist file and png file.

In the output folder, it should have 2 files like image below:

Fig 9. There are 2 files plist and png in output folder.

Open the plist file, it contains xml values to determine the position of images, direction, color as well as how the chain of images moving in there. 

Fig 10. XML Contains in plist file.

When we import this file to Cocos2d-x game, Cocos2d-x will load this file and render exactly what we see in the review screen. In the next post, I will continue to import this plist file to Cocos2d-x project and make it work.

Yumiki.

Run CPP demos of Cocos2d-x in Visual Studio.

When Cocos2d-x new versions release, in the release notes will have some examples which will help you to have better understanding for exactly what the new functionalities do. But there are some obstacles that you may not know how and where to run it. In this post, I will let you know how to run those demos in Visual Studio.

I use Visual Studio to run the demos as it will be easier for me to run debugger and verify codes. You can use eclipse to run that in Android or Xcode in MacOS but they will take much time for configuration things. So Visual Studio is an express way to run and build demos for testing.

I am using Cocos2d-x version 3.9 and Visual Studio 2015. The setup location for it is in "C:\Android\cocos2d-x-3.9". I noted this so that you can ease to collate with your setup location.

To run the VS project, locate to "C:\Android\cocos2d-x-3.9\build" and open "cocos2d-win32.sln" to open demo project in VS. After project is loaded, select "cpp-tests" as start-up project then build and run.

Fig 1. Select "cpp-tests" as Start-up project.

Then the demo game will be run and it has a lot of options to test. I think that the name of options make sense and you can find the functionality which you want to explore.

Fig 2. Options in Menu to test.

If you want to view the code for better understanding, go to Classes folder and all codes are in there.

Fig 3. Example code in VS Project.

That is all set! I think that now you are able to explore all things by yourself. This demo project is very important if you want to work with Cocos2d-x as it will show you the example code and how to work with the functions you are interesting in. Then you base on those to make your own games.

Yumiki.

Deploy Particle2dx system for Cocos2d-x games in Windows OS [Part 1]: Introduce Particle.

Particle are the effects in games which help developer can make the games more addictive and attractive such as Fire, Lighting or Explosion effect. These effects are the chain of the same images and repeat them infinitively. To do this, some game engines support the particle system so that the developers are able to create the effects easier and quicker in development process. In this post, you will be able to understand the Particle and how it works, particular in Cocos2d-x.

In Cocos2d-x 3.x, it contains the Particle classes to help us to toggle the effects in game screens. Here is the example of a Particle object, you can see that there are many of duplicate images are appeared repeatedly and created a chain of images. It looks like a meteorite effects.

Fig 1. An particle example. 

Particle System in Cocos2d-x contains 2 files. First one is a "png" image file. The second one is a plist file in XML format and contains all information about the position of image, transformation from a position to another place. Of course that we can made these file manually but it will waste a lot of time to define the images and locations. We have some tools can help generating this. One of them is Web-base tool and you can use it on-line or off-line as it is open-source. Please refer to "particle2dx.com" and check out that.

In this series of posts, I will walk you though how to create particle objects step by steps including creating images, plist and coding. The next post will be coming soon to create particle objects by using particle2dx.

Yumiki.

Import Spine Animation in Cocos2d-x (Part 9): Import Animation to Cocos2d-x game.

Before taking a look on this post, please refer to the first post to create a worm sprite: Part 1; Part 2, Part 3, Part 4, Part 5. Part 6, Part 7, Part 8.

This is the final part of series "Import Spine Animation in Cocos2d-x". I will use the materials which we made from previous post to import to Cocos2d-x and make it animate. I am going to use Visual Studio 2015 to code and build game. I created a project "YumikiTutorial" from Cocos console. To open the VS 2015 cocos2d-x solution in relative path "..\YumikiTutorial\proj.win32" and open "YumikiTutorial.sln". After opening this, VS will display the projects like this:

Fig 1. Whole Cocos2d-x project in Visual Studio 2015.

Open the AppDelegate.cpp, find and comment the code lines like screen shot below:

Fig 2. Comment all unnecessary code lines.

Add this code line to bottom of the code lines which you commented above:

glview-setFrameSize(800, 600);

Fig 3. Set screen size of game to 800 x 600.

Open "HelloWorldScene.cpp", insert these codes in the end of "HelloWorld::init()" method:

spine::SkeletonAnimation* player = spine::SkeletonAnimation::createWithFile("skeleton.json", "skeleton.atlas");
player->setScale(0.5f);
player->setSkin("default");
player->addAnimation(0, "animation", true);
player->setPosition(Vec2(visibleSize.width + origin.x, visibleSize.height / 2 + origin.y));
this->addChild(player, 2);
MoveTo* moveTo = MoveTo::create(20, Vec2(0 + origin.x, player->getPositionY()));
player->runAction(moveTo);

Fig 4. Add those codes in the end of init method.

That's it. You can see that in code, we will create a sprite object which is defined by the position of image and declared in json and atlas. Now you build and run the game, you can see that the worm will move from right to left with animation:

Fig 5. The worm sprite is moving with animation.

There are many interesting things need to explore in Spine and Cocos2d-x. And I hope this topic can help you to understand the basic and base on this to have some advance research and share your knowledge to everyone.

If you are interested in my posts, please like and follow to have my further posts' notification. Thank you!

Yumiki.