New TGB Particle Editor (Preview)
by Matthew Langley · 02/27/2006 (7:00 pm) · 15 comments
Well for the past 2-3 weeks I've been working on the new TGB (Torque Game Builder formerly known as Torque 2D) Particle Editor. I've had a blast among a few headaches along the way. In the end the editor is coming along very nicely... I couldn't hold the excitement in any longer, had to sneak out some shots and details :)
Note: These pics are early dev shots, they are not final so the interface will probably be different by the time we release it.
The biggest thing I wanted to do with the new Particle Editor (inspired by melv and his docs for the particle editor) was make everything configurable in a graph control, a real graph control. I mean this is how we visualize particles, the life and decay, the speed change, visibility change, etc, so why not edit it like this?
Well as some of you may know the existing Torque 2D (ported from Torque) graph control is extremely lacking, in fact it crashes the engine if you play with it too much lol... so I took the base, fixed it and almost completely rewrote it into a new Gui Control. I tried to expose a lot of functionality so further Torque 2D users can use this in there GUIs and hopefully it will be ported back to the Torque Core.
Here's a pic of the Level Builder interface (looking awesome even if it is a work in progress) with a particle selected and the particle editor open in the right toolbar.

This is the only shot I will have of the entire interface since I don't want to throw huge images up here and if I kept them at this size you wouldn't be able to see any details in the editor.
A lot of the interface is fairly similar... the options and toggles, except now in a nice tabbed format.
You can even go back and edit it in the traditional (what I call) Table format, though it was made a bit easier.
The biggest benefit is the new graph control... on top of being able to edit your particle effects actually as graphs, you can view multipe graphs at the same time. This allows you to see the relation between different graph fields. Say the relation to Visibility change and Size change, now that could be useful? Well here you have it.
(Note: the rest of the pics will be zoomed in to show the details).
Each Graph Key is a point on the graph, represented by a handle bar, you can click and drag the points to change them immediately. You can even set it up to update it as you move or you can leave it to update when you release your mouse (this and a few other configurations are given to you to tweak performance).
The beauty of the graph control is each graph has its own min and max for both time and value, so you can see everything relative to eachother. How many graphs can you see at once? You might ask... all 32 emitter graph fields if you want :) There is no limit, you have the control... right now you have two lists that you can move graphs over in a simple shift select (for a group) and a click of a button and you can see and edit your graph... later we may be adding even easier to use and simpler ways to move your graphs back and forth.
To conserve space the position of a point is only rendered on a selected or last selected point, though you do have the option to render them on all points (tends to clutter it up so is set to off by default, again you get a lot of control though :).

A simple click an drag and you can see how the particle effect changes... its so much fun making particle effects lol :) (thanks to Melv's marvelous particle engine).
If you click on a spot that isn't a handle then it creates a point in your selected graph. To make using multiple graphs easy, if you select a point in another graph you then select that graph...

On top of that if you hover over a handle a tool tip renders the graph it is so you can easily tell what you are selecting (of course you can turn these tooltips off too :)...
Here is a quick pic of me having too much fun with the three color graph fields open lol.

Note: the white line is a screenshot glitch, its really part of the selection box that didn't get taken by the screenshot.
Well theres a quick sneak peek of the New Particle Editor... its turning out to be great, then again TGB is becoming amazing!
Its an honor to work on the TGB dev team :)
Note: These pics are early dev shots, they are not final so the interface will probably be different by the time we release it.
The biggest thing I wanted to do with the new Particle Editor (inspired by melv and his docs for the particle editor) was make everything configurable in a graph control, a real graph control. I mean this is how we visualize particles, the life and decay, the speed change, visibility change, etc, so why not edit it like this?
Well as some of you may know the existing Torque 2D (ported from Torque) graph control is extremely lacking, in fact it crashes the engine if you play with it too much lol... so I took the base, fixed it and almost completely rewrote it into a new Gui Control. I tried to expose a lot of functionality so further Torque 2D users can use this in there GUIs and hopefully it will be ported back to the Torque Core.
Here's a pic of the Level Builder interface (looking awesome even if it is a work in progress) with a particle selected and the particle editor open in the right toolbar.

This is the only shot I will have of the entire interface since I don't want to throw huge images up here and if I kept them at this size you wouldn't be able to see any details in the editor.
A lot of the interface is fairly similar... the options and toggles, except now in a nice tabbed format.
You can even go back and edit it in the traditional (what I call) Table format, though it was made a bit easier.
The biggest benefit is the new graph control... on top of being able to edit your particle effects actually as graphs, you can view multipe graphs at the same time. This allows you to see the relation between different graph fields. Say the relation to Visibility change and Size change, now that could be useful? Well here you have it.
(Note: the rest of the pics will be zoomed in to show the details).Each Graph Key is a point on the graph, represented by a handle bar, you can click and drag the points to change them immediately. You can even set it up to update it as you move or you can leave it to update when you release your mouse (this and a few other configurations are given to you to tweak performance).
The beauty of the graph control is each graph has its own min and max for both time and value, so you can see everything relative to eachother. How many graphs can you see at once? You might ask... all 32 emitter graph fields if you want :) There is no limit, you have the control... right now you have two lists that you can move graphs over in a simple shift select (for a group) and a click of a button and you can see and edit your graph... later we may be adding even easier to use and simpler ways to move your graphs back and forth.
To conserve space the position of a point is only rendered on a selected or last selected point, though you do have the option to render them on all points (tends to clutter it up so is set to off by default, again you get a lot of control though :).

A simple click an drag and you can see how the particle effect changes... its so much fun making particle effects lol :) (thanks to Melv's marvelous particle engine).
If you click on a spot that isn't a handle then it creates a point in your selected graph. To make using multiple graphs easy, if you select a point in another graph you then select that graph...

On top of that if you hover over a handle a tool tip renders the graph it is so you can easily tell what you are selecting (of course you can turn these tooltips off too :)...
Here is a quick pic of me having too much fun with the three color graph fields open lol.

Note: the white line is a screenshot glitch, its really part of the selection box that didn't get taken by the screenshot.
Well theres a quick sneak peek of the New Particle Editor... its turning out to be great, then again TGB is becoming amazing!
Its an honor to work on the TGB dev team :)
About the author
I Manage Tool Development for Torque at InstantAction
#2
02/27/2006 (8:07 pm)
Will this work for TGE? as in does it make the same particle scipts?
#3
02/27/2006 (11:01 pm)
Screenshots in no way do this baby any justice!
#4
02/27/2006 (11:38 pm)
Looks like a huge improvement. Nice work :)
#5
-Jase
02/28/2006 (12:01 am)
This is awsome! I hope to pick up a copy of TGB sometime in the near future.-Jase
#6
02/28/2006 (12:42 am)
Finally I think I might be able to build my own particle effects!! Looks really promising!
#7
02/28/2006 (3:08 am)
Wow, that looks, and sounds, awesome! Dito on James, i need to pick up my own copy of this baby soon!
#8
I really wish I could make it to the TGB Boot Camp.. :'(
-Tim
02/28/2006 (4:51 am)
This should help me refine my poor attempt at creating particle effects.... great job guys!I really wish I could make it to the TGB Boot Camp.. :'(
-Tim
#9
02/28/2006 (8:17 am)
Looks awesome!
#10
-JF
02/28/2006 (10:05 am)
This is great! This should make it MUCH easier for my graphic designer to come up with particle effects! Now if only we had an easy GUI for managing datablocks... -JF
#11
02/28/2006 (11:04 am)
TGB just keeps getting better and better...
#12
(um.. can we have bezier handles? pretty please? ;) )
02/28/2006 (11:12 am)
Very cool Matt! This will definitely be fun to play with. (um.. can we have bezier handles? pretty please? ;) )
#13
03/01/2006 (2:17 pm)
Hey, that is really slick!
#14
-Keith
03/18/2006 (9:18 am)
I haven't played with the old editor in quite awhile; this one looks much easier. I'm really looking forward to messing around with this one. Good work, Matt.-Keith
#15
Alex
04/12/2006 (10:15 pm)
This new Particle Graph editor is really sweet! I love how it updates the Particle FX in realtime!!Alex
Torque Owner Travis Wood