Sparticle Tutorial

Sparticle is a profession GUI tool, based on one of the most popular3D engines in Flash, Away 3D. Sparticle is completely GPU-accelerated whichmeans that all rendering computations are performed by the GPU. Thishigh-performance tool is ideal for game-effect designers who want to developcomplex 3D effects for their games. This step-by-step tutorial will walk youthrough the process of authoring a 3D particle effect.

Installation

Sparticle is powered by Adobe AIR, a cross-platformtechnology that makes it possible to install the application on any operatingsystem (including Windows and Mac OS). There are two install options on the Sparticle download page (http://www.effecthub.com/t/sparticle):

Auto install – Click the Install now icon. If not alreadyinstalled, AIR Runtime is first installed. This installation may take a while.

Manual install – Ensure that you have AIR Runtime environmentinstalled. To get the latest version, visit http://get.adobe.com/air/.Next, install Sparticle from http://www.effecthub.com/download/software/sparticle.

Sparticle automatically checks for software updates so youneed not check for new versions, manually.

Editor Overview

You need an EffectHub account to be able to sign in. Onceyou have created an account, log in to the application with your account ID and password.

On successful log in, the Sparticle application main page isdisplayed.

The main page contains the following panels:

Information panel: This panel displays your personalinformation and other social-media related content.

Preview panel: Use this panel to control and view your gameeffects.

Edit panel: Use this panel to set attributes for variouseffects.

While authoring your effects, you can collapse theInformation panel by clicking the arrow on the left of the panel.

Creating an effect

This tutorial describes the authoring of a fountain effect.Select New from the File menu. Navigate to the required directory and name it fountain. A default effect is displayedin the preview panel.

The Animation 0 in the right panel represents the defaulteffect. Deleting Animation 0 will show no animation. You can add moreanimations so that there are multiple default effects overlapping each other atthe same position.

Delete any additional effects that you may have created andsave one for editing. Next, click and select the animation to view theattributes in the Properties panel and the Behaviors panel.

To simplify the authoring process, delete all the nodes inthe Behaviors panel by clicking delete. Expand the Time node and clear thecheck boxes as shown in the following image:

The preview window displays a small static rectangle. Adjustthe view point by dragging your mouse or rolling your mouse wheel for a previewas shown in the following image:

Water drops

The next step involves building the fountain. The firstthing to consider is the water drops that will make up the fountain. It mayseem like you need to import a 3D model as a particle. And the Sparticle tooldoes allow you to import 3D models as particles. Expand the list of shapes inthe geometry tab. The External Model type allows you to import models.

Creating a 3D model for a water drop is, however, not very straight-forward.You may need to spend a considerable amount of time on a professional 3Dmodeling tool. A 3D model may also contain thousands of vertices. A fountainmade of thousands of drops with each drop having probably thousands of verticeswill thus result in the final effect containing almost a million vertices.These multiple vertices are bound to cause performance issues. This issue canbe overcome by using another method – the Plane. The obvious problem with aplane is that it does not have a 360 degree visibility. When a camera isrotated the plane is not visible from certain angles. To create a 3D effect thatcan be viewed from any angle, the commonly used solution is to use thebillboard. Select the billboard node available in the Behaviors pane.

The plane is now visible every time you rotate the viewpoint, irrespective of the angle.

This may not be a 3D effect in the truest sense butthousands of water drops moving together have the same effect. The twoadvantages of billboard are that it is not time consuming and a plane has onlyfour vertices as compared to the thousands in a 3D model.

Texture

The next step is to change the skin of the water drop. Go tothe materials tab in the Properties pane. The default material type isColorMaterial. For a more natural effect, use the Texture material with whichyou can apply an external picture to the object. Use another paint tool tocreate an image as follows:

Note that textures rendered directly by the GPU, both thewidth and height need to be powers of 2. Create the texture material as a64x64, 128x128, or 256x256 (or other powers of 2) image. Sparticle does notallow the import of images that are not to the power of 2.

Move

The next step is to create the moving effect of the waterdrops. The water source emits the drops with an initial velocity in the upwarddirection. The drops are then driven by gravity and finally drop to the ground.First add the velocity by selecting the Velocity from the Behaviors drop downlist. You also need to set a value for the Velocity node. Velocity is a 3Dvalue and Sparticle provides several 3D types as seen in the following image:

Velocity is 3D value. This tool provides several 3D types asthe picture shows. Select ThreeDSphere type which indicates that every particlegets a random value in the sphere you set. The drops need to have a large valuein the y axis and a small velocity component in different directions. Set thevelocity as follows:

Now click the Restart button in the lower-left corner of thepreview panel. You will see the drops move as expected.

Next, add Acceleration node to simulate gravity. As youknow, gravity on earth is a constant. Select ThreeDCons and set it as(0,-500,0).

Click the Restart button again. The effect now looks morelike a fountain.

Time

The fountain effect lasts only a few seconds unlike anactual fountain that runs for much longer. To adjust the time, expand the Timenode in the Behaviors panel. Following are a few attributes:

startTime: This is a 1D value. There are a couple of other 1Dtypes for you to select. Here the default type is OneDRandom which means thevalue for every particle will be assigned a random value between the minimumand maximum values. As the name describes, startTime indicates when the drops firstappear. In this case, all the drops will appear, randomly, between 0 to 2seconds.

duration: This indicates how long the particles last after theyfirst appear. Clearing this check box will mean the particles last for aninfinite duration. The drops move down for an infinite amount of time even whenit is out of view. Drops that you don’t see after a few seconds are stillpresent but just that they are out of view. Now check the duration and set the values as 1 to 2 second. For thefountain effect, all drops need to disappear when they reach the ground. Enablethis attribute and set the value as 1 to 2 seconds.

loop: This value indicates whether the drops should berestart when they have completed their cycle. To achieve a fountain effect withcontinuous flow, enable the loop.

delay: This value is explained later in the article

The Time node should now look as follows:

The only thing required now, for a natural looking fountain,is to increase the number of drops. Go to the Geometry tab in the Propertiespane and set particle num to 5000.

The effect should look as follows:

Copy a similar effect

You may want to create a more complex water fountain thathas multiple water sources emitting within a circle, to the tune of a musicalpiece. You can add another source that emits drops at a greater height. Sincemost of the behavior is the same, you can copy the existing effect and modifysome of the parameters. To create a copy, select Animation 0.

From the Edit menu, select Copy and then Paste. Since thetwo effects are identical, the resulting effect only has an increased number ofdrops. Select Animation 1, go to Velocity node and set the values as follows:

Animation 1 needs to emit drops at a greater height butextend out lesser than Animation 0. Since the drops are emitted at a greaterheight, the duration needs to be extended. Expand the Time node and set thechange duration to constant time at set the value as 2.5 seconds.

The delay attribute indicates the sleep time between aparticle appearing and completing one cycle, before restarting again. Set thedelay value to constant 5 so that the drops are emitted at a different pace.The Time node should look as follows:

While the effect appears as follows:

Share with community

You may want to share the effects you created, with otherdesigners to get their feedback. The shared effects may also be useful to otherdesigners. Sharing is this beneficial to all. Sparticle provides a convenientway to share the effects that you create. Click  in the Preview panel,type in the required information and click upload.

This fountain effect is available on www.effecthub.com.

You must Sign up as a member of Effecthub to view the content.