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.