Torque 2D/StandardTutorials/Basics/GuiScene
From TDN
Contents |
Introduction
If you ever need to use Sceneobjects (such as t2dStaticSprite or t2dAnimatedSprite, for example) in your menus you are presented with a slight difficulty: GUI controls do not have the same screen coordinates as Sceneobjects. If a GUI control is placed on a screen with 1024x768 resolution at the coordinates 255, 320 - that means the control will appear 255 pixels from the left edge of the screen, and 320 pixels from the top edge of the screen. If you have a t2dSceneWindow placed over the screen with the camera set to "0 0 1024 768", a Sceneobject placed at those same coordinates would appear 255 pixels and 320 pixels down and to the right of the center of the screen! And that's only if you created a scenewindow the size of your screen. Of course then you would have to make sure it is layered under the GUI controls (such as buttons) so you can click on them. Not to mention that Sceneobject's 0, 0 is at their center while GUI object's 0, 0 is at their top-left corner!
My head's already starting to hurt - how about you?? Fortunately I came up with a simple solution... after dealing with the hell I just described above. To save you from the same fate, I'll share what I've learned.
The Application
Okay so if you're still not quite clear on what I'm babbling on about, let's have a look at this image here
In this game settings dialog box there are three t2dStaticSprite objects: the two volume bars and the mute "button" (we'll ignore the fact that the mute sprite could really be a toggle button rather than a sprite with a guiButtonBaseCtrl laid over it - I'm still learning too you know ;). So let's focus on the two volume bars - because they look cool. Obviously as you click the arrows the bars will increase and decrease depicting the volume level of music and sound effects. Now, considering the craziness that I was spouting in the beginning - how do we align these sprites in the GUI editor when their coordinates are so off-whack from the actual GUI controls? Easy. We don't just use one scenewindow, we use many.
Setting Up the Scenewindows
A scenewindow is just what it sounds like - it's a viewport into the scene. In other words it's T2D's version of a camera like you would find in 3D games. Usually we use a single scenewindow to fill the entire screen and that's what we display our games on. GUI objects don't use scenewindows, they use the canvas. Scenewindows are only for objects drawn using a scenegraph, like the aformentioned t2dStaticSprite and t2dAnimatedSprite. In this case however we are going to use a bunch of scenewindows to display our sprites on the menu, as well as our own scenegraph. But leave the scenegraph for later. For now we need to fire up the GUI editor and create three t2dSceneWindows in the locations we want our sprites to appear:
Setting Up the Scenegraph and Sprites
Okay time to open your favorite script editor (I prefer Codeweaver) and get busy with the code
First we have to create our own scenegraph. We can't use the scenegraph created for the game because unless there's a blank spot on the game screen underneath the menu you'd see sceneobjects twice.
new t2DSceneGraph(guiSceneGraph);
Eh, simple enough right? Now we need to attach this scenegraph to our scenewindows so they render objects attached to the graph.
winMusicVolume.setSceneGraph(guiSceneGraph); winSfxVolume.setSceneGraph(guiSceneGraph); winMute.setSceneGraph(guiSceneGraph);
Finally we need to tell the scenewindows where in the scene to "look" and see the sprites, and what size the sprites will be.
winMusicVolume.setCurrentCameraPosition("0 -150 222 50");
winSfxVolume.setCurrentCameraPosition("0 -50 222 50");
winMute.setCurrentCameraPosition("0 50 107 76");
As you can see each scenewindow is going to be looking at a separate sprite object located at the same coordinates and sized to the same extents as the scenewindow. I've stacked them one atop another in the order they appear on the screen, for my own sanity at mentally picturing them, with more than enough room so they won't overlap each other.
I'll post only a single sprite creation since that's all that will be needed to fully illustrate the technique.
%musicVolume = new t2dStaticSprite() { scenegraph = guiSceneGraph; };
%musicVolume.setPosition("0 -150");
%musicVolume.setSize("222 50");
Conclusion
So there you have it. Now your sprites will show up exactly where you want them to in the GUI - right where you placed your scenewindow controls. No need to worry about converting world coordinates to screen coordinates or where the center of the objects are... *sigh* Heaven. Now don't forget to clean up after yourself when you unload your menu/dialog!
guiSceneGraph.clearScene(true); guiSceneGraph.delete();
Well I hope you've benefitted from this as much as I have. Be afraid of sceneobjects in GUI menus no more! Go forth!!
Categories: T2D | TGB | Getting Started | Basics | Tutorial






