Plastic Gem #37: Plastic Tweaker Support

Download Code File




Plastic Tweaker Support

Difficulty: Easy

If you have been following the Plastic Gem series you have learned that we at Plastic Games have provided some really neat features. The last Gem discussed the Plastic Tweaker comments. In this article we are going to provide some support GUIs for the Plastic tweaker to increase its functionality. By the end of the this article you will have at your fingertips a control to show what ease curve you have selected, additionally you will have something we call the Plastic Picker.
You might have noticed that when you executed the Plastic tweaker scripts in the Plastic Gem 35 that the console had this error.

) Couldn't find class rep for dynamic class: GuiPlasticPickerCtrl
plastic/ui/tweak/tweakPickerGUI.gui (0): Unable to instantiate non-conobject class GuiPlasticPickerCtrl.

That is because we had not provided the GUI file for it, yet, first a quick description. The Plastic Picker is a GUI that is used when a tweak has the data type TypePoint2I or TypeRectI. The Plastic Picker is used to choose a point on the GUI or a rectangle on the GUI. Once selected it will automatically set the value for these tweaks.

1) Add guiPlasticPickerCtrl.h and guiPlasticPickerCtrl.cc into the shiney folder (be sure to pull from the appropriate TGE or TGEA folder)


The second part of this resource is providing a GUI to show what type of ease curve you are using.

2) Add guiEaseViewCtrl.cpp into the shiney folder

3) Compile the Engine

Now time for an example:

4) Add the star folder into your game's folder as a sibling of the server/client/data folders. Replace the one from the Plastic Gem 4

5) Open the console (~) and execute the script file by typing exec("YOURGAMENAME/star/star.cs");

A plastic bitmap will appear on your current GUI. For this resource I am putting the tweaks around global variables. Note also that the tweaks are using the //M[ //M] convention so DO NOT execute this while in a game server.

6) Click and release the star and watch it animate and change size, let's review the code

//M[ starTweaks
$star::GoToDelay = "0"; // TypeS32 Delay until animation starts, in milliseconds
$star::GoToDuration = "500"; // TypeS32 Duration of animation starts, in milliseconds
$star::GoToRect = "0 0 300 300"; // TypeRectI Rectangle to animate to
$star::GoToEase = "0 0"; // TypeEaseF Ease applied to animation move
//M]


function pg::onMouseDown(%this, %item, %pts, %obj){
   echo("release button press to animate");
}

function pg::onMouseUp(%this, %item, %pts, %obj){
   %this.animateBounds( getWord($star::GoToRect, 0), getWord($star::GoToRect, 1), getWord($star::GoToRect, 2), getWord($star::GoToRect, 3), $star::GoToDelay,  $star::GoToDuration, $star::GoToEase);

}

The onMouseUp callback is responsible for animating the GUI. The values which are used in the animation are global variables. We can easily change these values with the Plastic tweaker.

7) Open the tweaker (Ctrl + T)

When you want to adjust a rectangle you will have to press the (. . .) button next to the string field. This will take the Plastic tweaker to an intermediary step, the plastic picker, the tweaker itself will disappear and a hazy back ground will cover the screen. You will also notice a white outline on the screen, additionally you will see real time values of your cursor's position and the current rectangle values located at the top left.


To move the rectangle's position click and drag in the rectangle. To adjust the rectangles extent, click and drag on the edge of the rectangle. When you are done click out side of the rectangle, the intermediary step will go away and the tweaker will return, with the values set. If you are in the plastic picker and want to cancel out, right click in the window space.

8) Adjust the $star::GoToRect value by using the plastic picker.

9) Close the Plastic tweaker ( Ctrl + T) and click on the star to watch it animate to you newly chosen position.

The GuiEase control is the curve shown on the line containing $star::GoToEase in the tweaker. The in/out and ease type are available thru the drop down lists. In certain cases extra values will appear if the ease types require them. The curve will adjust to your current selection


10) Open the Tweaker ( Ctrl + T), choose a new rectangle to animate to but this time adjust the animation by changing the ease. $star::GoToEase

In this example I separate the animation into global variables, the tweaks could have been put in the actual .gui files but watch out because when you save a GUI with the GUI editor it will write over the Plastic Tweaker comment conventions. I could also have made the animation happen automatically with the Tweaker's listener system, instead of requiring clicking on the GUI. As you can see the possibilities are endless
Now you are beginning to see how powerful having all the Plastic Gems can be but wait there is more! In the next gem we will focus on designing a simple state machine with tweakable action system to do some simple GUI transitions.