Drag-and-Drop — Full drag-and-drop support for background and particle images.

Getting Started

First, download Particle Designer 2.0. The application is Mac-only, however Corona supports all effects which are created with and exported from Particle Designer, so Windows users can download particle systems and easily implement them in a Corona project.

Once installed, load the Particle Designer application. If you’re not familiar with the product, you can read some basic tutorials located on the 71Squared website.

When you open the Particle Designer application, you’ll see a sample particle system running. In the left panel, you’ll see this system listed under Particle Systems. If you wish, click the “cloud” button in the upper-right region of the application window and select another system from the Shared Emitters library.

In the Settings panel on the right side, you can adjust a myriad of properties for the emitter and see the changes reflected interactively in the main window. This tutorial will not discuss how to design particle systems, but rather focus on how to implement them within a Corona project.

Exporting for Corona

Once you’re pleased with the particle system in Particle Designer, it’s time to export it to Corona. There are some very important steps associated with this, so please read this section thoroughly.

1. Rename the Particle System

By default, the particle system name is Untitled 1. Obviously this isn’t a useful descriptor, so click on the name and enter something more accurate:

2. Expand the Particle System Options

To use a particle system in Corona, you must set some specific options before export. Expand the panel by clicking the “gear” button next to Particle Systems:

3. Deselect the “Embed” Option

When exporting a particle system, Particle Designer can embed the emitter texture file inside the particle file, however Corona does not support this feature. So, deselect the Embed option now:

4. Select the “Flip Y” Option

In some frameworks, including Corona, the Y coordinate is flipped. Particle Designer will take this into consideration if you select the Flip Y option:

5. Enable or Disable “Grouped/Relative”

In Particle Designer, the generated particles can be either grouped/relative in respect to the emitter, or independent of the emitter. This option can be toggled via the Grouped/Relative option:

If grouped/relative, all particles are dependent on the emitter position. For example, if you move the emitter up 100 pixels within Corona, the existing particles will also move up 100 pixels.

If this option is disabled, the generated particles behave independently of the emitter. For instance, if you create an emitter in Corona and, sometime after it begins generating particles, you move the emitter to a new location, the existing particles will not move in relation to the emitter — instead, they will continue their transformations independently.

If you want to see the difference interactively, you can toggle this option and drag the system “handle” around in the center panel.

6. Adjust the Maximum Particles

In the right panel, notice the Maximum Particles slider. The amount of memory pre-allocated for an emitter is driven by this value and you should balance it between the best visual effect and the fewest amount of particles. If you increase this value to an unnecessarily large value, you can bloat the memory usage within an app.

7. Change the Export Settings

In the bottom region of the left panel, locate and click the Export Settings button:

In the popup panel, select JSON as the Export Type. Then, for Export Location, browse to some folder where you can test Particle Designer from within a Corona project. When finished, exit the popup panel.

8. Export!

When you’re all ready, click the Export button:

To confirm that the export was successful, check inside the folder that you selected for export. Two files should now exist which match the name of the particle system that you set in step 1, for example nebula.json and nebula.png. The .json file contains the particle system details — this will be decoded within Lua and passed to the emitter instance in Corona. The accompanying .png file is the texture file used by the emitter.

Displaying the Particle System

With these files generated, adding the particle system to a Corona project requires just two steps:

1. Decode the .json file into a Lua table that Corona can utilize. This is accomplished by opening the .json file using the file i/o library, reading its contents into a string, and converting it to a Lua table using json.decode():

Now, relaunch the Corona Simulator and you should see the particle effect running effectively the same as it does in Particle Designer!

Module-Based Decode

If you intend to use several particle effects in an app, it may be useful to construct a simple Lua module which accepts some parameters and returns the decoded information. The following example, particleDesigner.lua, accepts the .json file name and (optionally) the system directory where it’s located:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

local particleDesigner={}

local json=require("json")

functionparticleDesigner.newEmitter(fileName,baseDir)

local filePath=system.pathForFile(fileName,baseDir)

localf=io.open(filePath,"r")

local fileData=f:read("*a")

f:close()

local emitterParams=json.decode(fileData)

local emitter=display.newEmitter(emitterParams)

returnemitter

end

returnparticleDesigner

With this module accessible within the main project folder and required within main.lua or the proper Composer scene file, displaying a particle system is now as simple as this:

1

2

3

4

5

local particleDesigner=require("particleDesigner")

local emitter=particleDesigner.newEmitter("nebula.json")

emitter.x=display.contentCenterX

emitter.y=display.contentCenterY

Subfolder Usage

This module-based approach can also be used if you export the .json and image file(s) to a subfolder within your main project folder, for example particleFX. In this case, the emitter instantiation may look like this:

1

2

3

4

5

local particleDesigner=require("particleDesigner")

local emitter=particleDesigner.newEmitter("particleFX/nebula.json")

emitter.x=display.contentCenterX

emitter.y=display.contentCenterY

Emitters on Physics Bodies

If you wish to “attach” an emitter to a physics object, this can be accomplished by creating a new display group, a display object, and a new emitter. With these objects created, insert both the object and emitter into the group and apply a new physics body to the group itself (not the object or the emitter):

Sample Projects

In Conclusion

Hopefully this tutorial illustrates how easy it is to visually design, test, and export spectacular particle effects using Particle Designer and, once exported, display them within a Corona app in just a few lines of code.

Disclaimer: SDKNews.com only syndicates the blog entries from various SDK blogs.
We are not the creator/author of these entries (posts). Product names, brand names
and company names mentioned on this site may be trademarks of their respective owners.