Torque 2D/Getting Started/T2DParticleEditor1
From TDN
Contents |
Torque Game Builder Tutorial – Particles
by: Matthew "King BoB" Langley
edited by: Spider
This tutorial will cover the following:
- Creating Particle Effects
- Particle Emitters
- The Particle Graph Field
Note: Any time you do a tutorial or experiment with Torque Game Builder, it’s a good idea to copy your entire TGB directory and modify only the copy. That way your original files remain intact.
Note for users of TGB Beta 2: Most of this tutorial remains the same, and you can follow it to make a new particle effect. Please note the following, however:
- To create a new particle effect, you need to launch T2D.exe, and drag one of the existing particle effects from the right onto the scene graph. Then click the Edit tab at the top right - you should see the Particle Effect pannel. Click the Save button in the Configuration panel and save your new particle effect (with an extension of .eff) in the ~/data/particles/ folder. You can now edit this new particle effect.
- Your screen will not look like the screenshots. The new interface uses tabs across the top to switch between different editing options.
- When the tutorial refers to actions inolving the "Graph Field", you really want to select the Table tab from the top, and use this section. The Graph tab lets you do the same kind of thing, but instead of entering the values exactly, you draw a graph on the screen, using left click to add points, and right click to remove points.
- When the tutorial refers to the "Trigger" action, press the Show All button in the Effect Emitters panel instead. You can also select a single Effect Emitter from the list, and press the Solo button to see just that emitter fire, without the others.
Creating A New Particle Effect
Okay, let's start with an idea... say we just want some very basic explosion, with fire shooting in all direction and a simple smoke puff in the center. This could be used for anything that explodes. Pretty basic, but a good example... let's do it. Start by running T2D. Now, fire up the particle editor by hitting "F11". Click the New... button at the top left. You should see this... click YES to create a new effect:

Before we go on, let's do a quick introduction to a couple particle concepts in T2D particles: “effects†and “emittersâ€. A particle “effect†is the whole particle effect that we save off, including one or more emitters. An “emitter†is a component of a particle effect. In our tutorial, the fire will be created by one emitter, and the smoke by another. The particle effect will be the combination of these two emitters. The use of multiple emitters creates some very powerful particle effects that look, well, amazing.
Let's start by adding our first emitter. Click Add...:

You'll see a menu that says "Emitter Name". We're going to call our fireball “BOOMâ€...

After clicking Create you'll see "BOOM" under the "Emitters:" list. You've just created your first emitter, but it doesn't actually do anything yet. Let's fix that. Left click "BOOM" in the list and then left click Edit... You'll see a the Emitter Edit interface:
Alright, there's a lot of options available here. We're going to go through the ones we need for our effect, which are all the basic features, and then you'll know how to experiment with what's left. The first thing we need is an image for our fire. Click on the empty button next to the ImageMap label (not the button that says “IMAGEMAPâ€). You'll get a dropdown, like this picture:

Select particle1ImageMap, which is a fire image included with T2D. Now you should see fire shooting in a circle. Pretty cool, eh? Some more terminology... the little fireballs are the “particlesâ€. See how they're emitting from a point on the screen? That point is the location of the “emitterâ€. And the whole thing is our “particle effectâ€. Already the effect is pretty neato, but it's definitely not the explosion we're looking for. For one thing, the fireballs are too small and they go too far. For another, we don't want it shooting out in this strange pattern.
We'll fix the simplest first, which is that the particles are shooting too far. This has to do with a couple properties of our effect: speed and life. Let's change those properties using the true powerhouse of the Particle Editor, the Graph Field.
On the lower-left area of the screen you can see Graph Field: with particlelife_base in the selector button below it. Below that is the Key(s) – Time/Value list. This list contains data that applies to the property in the selector button, which in this case is particlelife_base. Currently, the list contains “0.000000 2.000000â€. What does that mean? 0 represents the time and 2 represents the value, so at 0 time, particlelife_base will be 2. Let's change that. Left click the values in the list, then click Edit... You'll get a pop-up that allows you to change the 2.000000. Change it to 0.5, like this:
Now click Save. Now the little fireballs don't “live†as long. Pretty cool. Let's move on to an even better example of the power of the Graph Field: changing the size. Click on the selector button that currently says "particlelife_base" and you'll get a drop down of other aspects of your particle effect. Select sizex_base. You'll get the same thing in the key list that we first got with particlelife_base: "0.000000 2.000000" . We know that's too small, so left click on that list entry, click Edit... then change the value to "10".
Now the size is more like what we want. The reason that changing the sizex_base changes the overall size of our particle is that Fixed Aspect (see the checkbox?) is selected. De-select it and see what happens. Hmm, fire-frisbees aren't what we want, so re-select it.
Our next task will be to make the fireball shrink over time. For this, we'll use a new value: "sizex_life", which is basically a scale value. Click the Graph Field dropdown and select sizex_life. You'll see this:
We have it set to value "1" at "0" time. This means that our fireball is full scale at time 0, which is when it starts. What we want is to make it shrink some by the end. All we have to do is add a new, smaller value at a later time. Click the Add... button and you'll get an Add Key... dialog with entries for "Key Time" and "Key Value". Set the time to "1.0" and, to make the size decrease by half, set the value to "0.5". It should look like this...
Now click Create. You'll see the particle shrink to half size as it moves away from the emitter. As you can see, changing Graph Field effects can tweak your particles to your liking. On that note, let's check out another spiffy visual tweak. Right now the fireballs just shoot out and shrink then disappear instantly... what we really want is it to fade out quickly at the end, like a real explosion. Go back to the Graph Field dropdown and select visibility_life (all the way at the top). It should already have a basic time: 0, value: 1 entry. Let's do something a little more fancy with this. Add a key with time: 0.5 (halfway through the life) and value: 1. This is how we tell it that at halfway through its life it's still fully visible. Now add another key with time: 1 (the end of its life) and value: 0 (completely transparent). Click Create and you'll see it fade out halfway through the life of the particle. You should see something like this:
We're definitely getting somewhere, but it's still not quite the effect we're after. We want an explosion, but we still have a bunch of spinning fireballs. Though they are a little more pretty than when we started, there's
definitely more to do. We want the emitter to shoot the particles out all at once and we also want it to die down after that happens. These two aspects of our effect are tied to each other... let's tackle the second one first since having them all emit at once will be hard to do without the effect dying out at the right time.
Click the << Effect button to go back to the main particle effect screen. Now we're editing our overall particle effect, and not just our BOOM emitter. Notice that we have a Graph Field here as well. Click on its drop down, just like you do in the emitter settings, and go to quantity_scale. You'll see this:
As you can see, quantity_scale starts out as a quantity of "1". Our goal is to set it to 0 at the correct point. To do this, you need to add two new keys. The first key will be at time: 0.09 and value: 0.5. The second key will be at time: .1 and value: 0. What we're doing here is lowering our effect to half at time: 0.09 (almost one tenth of our lifetime) and then stopping altogether at time: 0.1. You should now have keys that look like this:
You probably saw the effect send a spark off and then stop. Since we have now set a time for it to stop, it no longer loops continually. To test the effect you can click the "trigger" button, however there are not enough flames being emitted now for us to see anything. Let's change that by increasing the output of our emitter. Click BOOM in the emitter list and then click Edit... You are now back to our fireball emitter settings. Click the Graph Field drop down and go down to quantity_base. The value is set to 10 which isn't enough, as we just discovered by clicking Trigger and seeing nothing. Edit that key and change the value to 200. You should have this:
Now click Trigger a few times to test it out. Ummm... awesome! Later you can tweak this more to your liking, but for now we're going to move on to the second part of the explosion: the smoke puffs. This will add a lot of realism.
The second emitter: Smoke!
Click the <<Effect button to get back to the overall effect settings again. You've got your one emitter, BOOM, in the emitter list. Now click Add... and name the new emitter “PUFFâ€. Select this emitter and click Edit... Click the Imagemap dropdown, again not to be confused with the Imagery dropdown just above it. Scroll to particles5ImageMap. Right now if you hit Trigger you wont see any difference for the same reason that we didn't see any fireballs until we upped the quantity to 200. Now, using your newly particle wizardry, increase the quantity_base to 50 using the Graph Field. You should now have this:
If you click Trigger now, you can just barely catch a glimpse of the new smoke particles, which are tiny and
shoot out much like the old fireballs did. Increase the size by changing sizex_base to 15 like this:
Now if you hit trigger you'll get some more visible smoke intermingled with the fire. We want the smoke to do a couple things... for one we want it to stay put for the most part, or maybe move at a slow speed, and then we want it to fade smoothly out and maybe even shrink in size. Let's tackle the first thing, changing its speed. Go to speed_base and change it to 0.5 like this:
If you hit trigger, it moves at a much better speed, though it lives way too long compared to the other particles. Go to particlelife_base and change the value to 0.75. Remember the BOOM was set to 0.5, so we have this one last a little longer. The effect we want is to have the smoke fade slowly. The key setting should now look like this:
Alright, we have the life changed to match the effect better. Now we need to make it fade out properly. Go to visibility_life and add a key at time: 0.5 with a value of 0.25. Then add another key at time: 0.75 with value: 0. That way by the time the fire dies down, the smoke is at 0.25. Then it dies off in the next 0.25 (the difference between time: 0.5 and time: 0.75). Your values should look like this:
Now click Trigger and you should see a much more complete effect. We have a puff of smoke that fades out nicely, with fire that shoots out in all directions. Cool! We're done creating our particle effect, so all that's left to do is save our settings. Click <<Effect to go back to the main effect. Scroll up if needed and click on Save... Put whatever name you want in the prompt.
Click Save. One thing to remember... currently when you save a particle effect, you cannot reload it back in with "Load" until you restart T2D (just a simple, and probably soon-to-be-eliminated quirk).
Well, this tutorial should be a good jumping off point for you. It's easy to experiment with the Particle Editor now that you know the basics. Don't forget to post your progress pics in the "Show Off!" forum!!! Enjoy!



