From TDN

This mini tutorial shows you how to make a particle effect appear above a GUI.

Contents 1 Add the Particle Effect to Your Game Project 2 Update mainScreen.gui 3 Update profiles.cs 4 Update game.cs 5 Test your game

Add the Particle Effect to Your Game Project

First we need to add a particle effect to your project. In this example, we are going to use the particle beam effect in the default Torque Game Builder project. To do this, you must copy the particle effect and its associated images to your project. Then you must import the images into your project and create an animation that is needed by the particle effect.

1. Navigate to the games\TGB\data\particles directory and copy the particlebeam.eff file to the game\[your game]\data\particles directory.
2. Navigate to the games\TGB\data\images directory and copy the particles1.png and lightning.png files to the game\[your game]\data\images directory.
3. Open your game in Torque Game Builder.
4. Click Project > Image Map Builder. The Image Map Builder dialog box opens.
5. In the Data\images directory, select lightning.png and click Select.
6. In the Image Mode drop-down list, select CELL.
7. In the Cell Width field, type 64.
8. In the Cell Height field, type 128.
9. Click Save.
10. Click Project > Image Map Builder. The Image Map Builder dialog box opens.
11. In the Data\images directory, select particles1.png and click Select.
12. In the Image Mode drop-down list, select CELL.
13. Click Save.
14. Click the Create tab.
15. Click on the Create New Animation icon. A dialog box opens.
16. In the Source ImageMap list, select lightningImageMap and click Use Selected ImageMap.
17. Select Use All Frames and click Save Animation.
18. In the Animation Name field, type lightningAnimation, and click Create.
19. Save your project and close Torque Game Builder.

Update mainScreen.gui

1. Navigate to the games\[your game]\gui directory and open mainScreen.gui in a text editor.
2. At the bottom of the file, add the following code:

   //--- OBJECT WRITE BEGIN ---
   new GuiControl(screenFX) {   
   	profile = "GuiFXContentProfile";   
   	horizSizing = "width";   
   	vertSizing = "height";   
   	position = "0 0";   
   	extent = "1024 768";   
   	minExtent = "8 8";   
   	visible = "1";   
   	useVariable = "0";   
   	
   	new t2dSceneWindow(sceneFXWindow) {      
   		profile = "GuiFXContentProfile";      
   		horizSizing = "width";      
   		vertSizing = "height";      
   		position = "0 0";      
   		extent = "1024 768";      
   		minExtent = "8 8";      
   		visible = "1";      
   		lockMouse = "0";   
   	};
   };
   //--- OBJECT WRITE END ---
   

3. Save this file and close it.

Update profiles.cs

1. Navigate to the games\common\gui directory and open profiles.cs in a text editor.
2. At the bottom of the file, add the following code:

   if(!isObject(GuiFXContentProfile)) new GuiControlProfile (GuiFXContentProfile)
   {      
       modal = false;      
       opaque = false;
   };
   

3. Save this file and close it.

Update game.cs

1. Navigate to the games\[your game] directory and open game.cs in a text editor.
2. Under the line, Canvas.setContent(mainScreenGui);, add the following code:

      Canvas.pushDialog(screenFX, 1);
           new t2dSceneGraph(fxSceneGraph);
      sceneFXWindow.setSceneGraph(fxSceneGraph);
      sceneFXWindow.setCurrentCameraPosition ("0 0 200 150" );
   
       %effect = new t2dParticleEffect() { scenegraph = sceneFXWindow.getScenegraph(); };      
           %effect.loadEffect( "~/data/particles/particlebeam.eff" );                
           %effect.setPosition(%this.getPosition() );      
           %effect.playEffect();
   

3. Save this file and close it.

Test your game

Now, lets test your game. Open up your game in Torque Game Builder and play the game. The particle effect should appear in the upper-left corner of your screen when you start the game.

Note: The code in this tutorial is not mine. I grabbed it here: TGB Forums