Control Examples

Button Control 
 This section explains how the Button Control works. 
 
 
 
 
 
 
 
 The Control State Handler Behavior sends its state as an event. Event Handler Behavior uses a „Check Control State“ condition. If the Condition is positive, one or more Actions are invoked. 
 
 
 
 
 
 
 
 The internal Behaviors define how the appearance of the Button changes. The user can add additional actions to a Button instance like starting an animation or triggering transitions. 
 
 
 
 
 
 
 
 Advantages of using the Button Control: 
 
 
 
 
 A logic combination of multiple conditions is also possible. 
 As many different Action Behaviors are available, a lot of different kinds of Button Controls can be realized without developing source code. 
 Each instance of a button can cause an Action in the UI without writing source code. 
 Custom content is not limited to a simple text, anything can be attached to the anchor node. 
 
 
 
 
 Gauge Control 
 Compared to the Button Control the Gauge Control rather visualizes a value instead of states. This value is passed along a processing chain. Further wise the value is used for actions 
 
 
 
 
 Transformation (rotation, psoition, size, ...) 
 Graphicsl effect (alpha, switch image, zoom, ...) 
 Manipulating an animatoin, invoking an action, ... 
 
 
 
 
 
 Combining Controls 
 This section shows how Controls can be combined. It mainly shows how simple it is to achieve the following points with Controls: 
 
 
 
 
 Communication between the Controls. 
 Adding interactivity to the application. 
 
 
 
 
 The idea of this example is to take a FlipBook-Control and add touchable Controls to the scene that allow to flip through the images of the FlipBook. Therefore a slider will be added that allows scrolling through the images by sliding it. Further wise two buttons will be added that flip to the next or previous image. 
 Scene Setup 
 Drag the following Controls into a 2D Scene: 
 
 
 
 
 FlipBook 
 Slider 
 Two TextButtons 
 
 
 
 
 Place the Controls accordingly. Note that one button increases the FlipBook-value while the other lowers it. In the end the scene should look similar to this example: 
 
 
 
 
 
 
 
 
 
 While the scene-tree should look similar to this: 
 
 
 
 
 
 
 
 
 
 Adding Behaviors 
 To connect the Slider to the FlipBook simply add a "Forward Value"-Behavior (can be found under "Value Processing") on the Slider and set the FlipBook as TargetNode of the Behavior. Note that the FlipBook only support a value from 0 to 29 by default (because it exists of 29 images). This means that the "Maximum"-property of the Slider needs to be set to 29. This is it. The result can be tested by setting the Value of the slider which will lead to switching the images of the FlipBook. 
 Connecting the Buttons with the FlipBook works a bit differently because the value of the FlipBook should be increased or decreased relative to the value. To connect a Button with the FlipBook add a "Send Value as Event"-Behavior to the "Actions"-section of the Behaviors of the Button. This Behavior can be found under "Action/Property/". Assuming that this is the button that increases the value the Value-property must be set to "1.00". Because the value should change relatively to the current value the "ChangeValue"-property must be set to "Relative". Finally, the target node should be set to the FlipBook. 
 Note that for a better interaction the Slider should also jump to a new position if the Button is pressed. Therefore the same procedure has to be done as in the last paragraph, just for the Slider. This means that a new "Send Value as Event"-Behavior should be added to the Button whereas its target node is the Slider this time. 
 In the end the Button that increases the value of the FlipBook should look similar to the following screenshot: 
 
 
 
 
 
 
 
 
 
 For the Button that decreases the value, the same procedure has to be repeated. This time the value of the "Send Value as Event"-Behaviors has to be set to "-1.00". Naturally, the first button can just be cloned instead of repeating every single step. 
 Result 
 The final result of this control-composition can be best seen in the Player. The slider can be slided via touch-input whereby the FlipBook animates according to the position of the Slider-knob. Further wise the buttons can be pressed to switch to the next or previous image. This also sets the slider to a new position.