Partcile Effect over GUI object

#1 There isn't an easy way to do it. I had a similar query when I was using some GUI controls to display text. The text would appear over stuff when I wanted it behind. I think what you might need to do is create a new GUI with a scengraph that sits on top of the hud. You can then put your effect on that and it should work as you want.

#2 Philip's idea works great. I typically have an extra FX scenegraph positioned above the rest of the GUI layers for custom animated mouse cursors, particle and transition effects, etc. Using Canvas.pushDialog's second optional parameter you can specifically set the depth of the GUI control being pushed. Default is '0' and the higher the number, the more front/on top the GUI is. So I define:

new GuiControl(screenFX) {
   profile = "GuiFXContentProfile";
   horizSizing = "width";
   vertSizing = "height";
   position = "0 0";
   extent = "640 480";
   minExtent = "8 8";
   visible = "1";
   useVariable = "0";

   new t2dSceneWindow(sceneFXWindow) {
      profile = "GuiFXContentProfile";
      horizSizing = "width";
      vertSizing = "height";
      position = "0 0";
      extent = "640 480";
      minExtent = "8 8";
      visible = "1";
      lockMouse = "0";
   };
};

and push it to the display with "Canvas.pushDialog(screenFX, 1);" so it'll be over everything else. You'll have to create and initialize another scenegraph for t2dSceneWindow, set to the same parameters as your main scenegraph to keep the scale and positioning right.

Also the GUI profile used above is important in that it has the parameters 'modal' and 'opqaue' set to false, so mouse clicks are handed down throuh the GUI and it doesn't render a background color.

Then when you want to render a particle effect over a GUI object, just create it in the new scenegraph instead of your main one.

#3

Quote:You'll have to create and initialize another scenegraph for t2dSceneWindow, set to the same parameters as your main scenegraph to keep the scale and positioning right.

What is the syntax to create and initialize a scenegraph to match your main scenegraph?

#4 It'd be something like this, assuming the above GUI code and that your primary window is also centered at 0,0 and is 100 units wide by 75 units high:

new t2dSceneGraph(fxSceneGraph);
   sceneFXWindow(setSceneGraph(fxSceneGraph);
   sceneFXWindow.setCurrentCameraPosition( "0 0 100 75" );

#5 @Luke D

Thanks, it worked like a charm.

#6 Im confused, how do I mount a particle system to the hud

#7 In the example above you wouldn't, you'd create the particle effect object (not mounting it to anything) in the FX scenegraph and just set its position so it aligns with the proper GUI element beneath it.

#8 And this is done in mainscreen.gui?

#9 I'm not really sure where it'd best fit in the most current version of TGB, the structure has changed substantially since I was familiar with it, but it doesn't really matter. You can put the screenFX GuiControl definition in the same file as the mainscreen gui or you could put it in a new .gui file (provided that you then exec() that file around the same time that mainscreen.gui gets exec()'d).

The fxSceneGraph initialization can also happen anywhere, as long as it happens prior to when you're going to actually create sprite/particle objects in it of course. For simplicity's sake, you can put it right next to wherever the mainscreen's t2dSceneGraph is getting initialized; search the script files and see where 'new t2dSceneGraph' already exists, and just add the new one below all that.

#10 I'm having a problem trying to figure out how to do this. It seems that I no matter how much I try, I can't get a particle effect (or 2d sprite) to show up over my GUI.

After I create the GUI above, I have no idea how to get a particle effect (or 2d sprite) to appear above. As well, none of my mouse events effect anything below the screenFX GUI. Please help! I've been working on this silly problem for five hours with no fix in sight (pathetic, I know).

Can someone spell out each step? (I've even looked at the tutorial, but it seems to be missing big chunks of information)

#11 @amanda

This is what I put in my Gui file

new GuiControl(screenFX) {
   profile = "GuiFXContentProfile";
   horizSizing = "width";
   vertSizing = "height";
   position = "0 0";
   extent = "800 600";
   minExtent = "8 8";
   visible = "1";
   useVariable = "0";

   new t2dSceneWindow(sceneFXWindow) {
      profile = "GuiFXContentProfile";
      horizSizing = "width";
      vertSizing = "height";
      position = "0 0";
      extent = "800 600";
      minExtent = "8 8";
      visible = "1";
      lockMouse = "0";
   };
};

This code goes in my game.cs file

//Canvas.setContent(MainMenu_Game);
      echo("Level lvl");
      Canvas.setContent(mainScreenGui);
      Canvas.setCursor(CustomCursor);
[b]
      Canvas.pushDialog(screenFX, 1);      
       new t2dSceneGraph(fxSceneGraph);
      sceneFXWindow.setSceneGraph(fxSceneGraph);
      sceneFXWindow.setCurrentCameraPosition( "0 0 200 150" );[/b]
      //Canvas.pushDialog(HudGuii);

This is how I make my particle effect:

%effect = new t2dParticleEffect() { scenegraph = sceneFXWindow.getScenegraph(); };
      // Load our fire-effect from disk.
      %effect.loadEffect( "~/data/particles/gem_sparkle.eff" );      
      //%effect.loadEffect( "~/data/particles/abracadabra.eff" );
      //%effect.loadEffect( "~/data/particles/magic_trail.eff" );
      %effect.setEffectLifeMode(kill, 1);
      %effect.setPosition(%this.getPosition() );
      %effect.playEffect();

This goes in my main.cs file

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

Hope this helps

#12 Thank you so much, Stanley! This is exactly the type of help I needed! I've actually made a tutorial from this. Hopefully it will help others who want to create particle effects, sprites, or animations over GUIs. :)

http://tdn.garagegames.com/wiki/TGB/MiniTutorials/GUIParticles