Plumbee engineering

Stardust particle effect editor

| Comments

TL;DR: We made an open source app to create and edit particle effects for Flash, try it here.
Github repository links:
Editor
Playback/loader library
Enhanced Stardust library

Our games at Plumbee require top quality graphics, and this poses many artistic and technical challenges. The highest quality animations and effects can be made with professional software tailored to make these - e.g. After Effects or 3D Studio Max. While we can import these to our game as movie files, they have a big file size and cannot be changed at runtime.
These two shortfalls prompted us to explore the use of runtime-generated particle effects in our games. Currently one of the best particle effect engines for AS3 is Stardust. It solves the two problems mentioned above, but there is no GUI tool for it that artists can use to make particle simulations. This makes the process very slow. A programmer has to make the changes based on the artist’s instructions and needs to recompile the app every time they want to see the results. And for artists to make the best effects they need to tweak the simulation parameters a lot.

The Stardust animation editor tries to solve this problem by creating an application which can be used to create these particle effects.

Features:

  • Fully open source: MIT/Apache 2.0 license.
  • Able to create all 2D initializers in Stardust and most actions. 3D effects are not supported.
  • Runs in the browser, no installation needed.
  • Changes to the simulation are updated in real-time, allowing fast iterations.
  • Ability to save and load simulations. The savefiles are simple .zip files.
  • Visualize the zones used by emitters and deflectors.
  • Set simulation properties: blend mode, particle creation rate and pattern, etc.
  • Able to use a sprite sheet to create animated particles.
  • Able to specify a path for the emitter.
  • Able to use multiple emitters.
  • Use a color/background image to better visualize the simulation in its final environment.

How to use

The main parts of the editor: Emitters: Settings to add/remove emitters.
Clock: Settings for how many particles should be created on each simulation step and clock type. Initializers: These determine the initial state of the particles when they are created. For example what graphic to use, creation position, initial speed… Actions: What actions should affect particles on each simulation step. For example gravity, changing size, bouncing back from walls etc.

The bottom right side has a performance monitor. You can use this panel to determine how much CPU and memory your simulation uses.

Flash Player 11+ is required to use the editor. You can check out the source code for the editor at Github

How to integrate Stardust simulations in your app

We forked the Stardust library to add a few extra features and fix some bugs. Note that the changes break compatibility between our fork and the original library, but it should be easy to convert simulations if needed.

The simulations made by the editor can be played back by a loader + playback library (this depends on stardust-library-plumbee). For the specification of the savefiles see the readme file in the repository. The editor uses this library too to load and play simulations.

The libraries need Flash player 10.3+ to compile. The projects have pom.xml files for Maven users.

Examples

A few example simulations created with the editor. You can find the source code in the repository of the playback library

Code example: Loading and playing back a simulation:

The Stardust loader library needs to be added to your project as a dependency.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
[Embed(source = "CollectCoinsParticles.sde", mimeType = 'application/octet-stream')]
private static var Asset:Class;
public static var assetInstance:ByteArray = new Asset();

 private const loader : SimLoader = new SimLoader();
 private const player : SimPlayer = new SimPlayer();

public function loadSim()
{
    loader.addEventListener(Event.COMPLETE, onSimLoaded);
    // this function parses the simulation
    loader.loadSim(assetInstance);
}

private function onSimLoaded(event : Event) : void
{
    const simCanvas: Sprite = new Sprite();
    addChild(simCanvas);
    player.setSimulation(loader.project, simCanvas);
    // step the simulation on every frame
    addEventListener(Event.ENTER_FRAME, onEnterFrame);
}

private function onEnterFrame(event : Event) : void
{
    player.stepSimulation();
}

Questions or comments?

Contributions and comments are welcome. If you make use of the editor, we’d love to see the results! Just send us a link to your project. Many thanks to Allen Chou for the awesome Stardust library.

Comments