Examples Using Predefined Behaviors

Contents List

Thermometer Example

1. Drag&drop a Slider Control and a Text Value Control from the Controls Panel of the Toolbox to the Scene Editor or the Scene Tree.

2. Set the Slider's Minimum to "-50,00" and the maximum to "+50,00".

3. Change the Text Value Control's "Format Text" Property to "%d °C".

4. Drag&drop a Forward Value Behavior (which is a Value Processing Behavior) from the Behaviors Panel of the Toolbox onto the Slider in the Scene Tree.

This is what the Scene Tree should look like now:

5. Select the Forward Value Behavior in the right side of the Scene Tree view. Set the Forward Value Behavior's Target Node to the Text Value Control you have added to the scene in step 1 by clicking on the magnifying glass on the right of the input field and selecting the Text Value Control in the "Choose Item" dialog.

After that, the Forward Value Behavior's Properties will look as follows.

6. Drag&drop a Value Behavior (which is a Value Processing Behavior) from the Behaviors Panel of the Toolbox onto the Text Value Control in the Scene Tree.

7. Select the Value Behavior on the right side of the Scene Tree View. Set the Value Behavior's AcceptValueEvent Property to "true" by checking the checkbox.

8. Select the "Text Value" Control in the Scene Tree Panel and drag&drop two Action on Value Behaviors (which are Value Processing Behaviors) from the Behaviors Panel of the Toolbox onto the "Receivers" of the "Value Behavior" in right side of the SceneTree Panel.

9. Add a condition to the Action on Value Behaviors you have just added by dragging&dropping a Check processed Value Behavior (which is a Condition - Control Behavior) onto each of the Action on Value Behaviors you have just added.

10. Configure one of the Conditions to "LowerThan 0,00" and the other one to "GreaterThan 0,00".

11. Drag&drop a Set Color SetColor Action (which is a Action - Property Behavior) from the Toolbox view onto the Actions of each of the Action on Value Behaviors in the SceneTree.

12. Set the color to Blue on the Action on Value Behavior with the Condition Lower Than 0,00 and set the Color to Red on the Action on Value Behavior with the Condition Greater Than 0,00.

13. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

14. The text color of the Text Value Control displaying the temperature in degrees celcius will turn blue once the value of the slider gets lower than zero and it will turn red once the value becomes greater than zero.

Align Pivot Example

1. Drag&drop a Group from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree. Choose the follwing two Images from the Construction Kit (in the Solution Explorer) and drag&drop them onto the Group node in the SceneTree: GaugeBmP and GaugeNeedleBmp

2. Arrange the Controls in the SceneEditor so that "GaugeNeedleBmp" is the last entry of the Group Node in the Scene Tree.

3. Select the "Pivot only" Translation tool in the toolbar and move the pivot of "GaugeBmP" to the center of the image and the pivot of "GaugeNeedleBmp" to the usual center of rotation of a gauge needle.

4. Drag&drop the Align Pivot Behavior (which is a Control Behavior) from the Toolbox view onto the Group node in the SceneTree.

5. The Align Pivot Behavior does not have any properties to set. The pivots of the Bitmap Nodes are aligned and the result can be seen in the SceneEditor: The Needle image is positioned correctly in the Gauge image.

Don't forget to reset the Translation tool to "Pivot and Object".

Arc Align Example

1. Drag&drop a Group from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree. And add four Text Nodes to this group by dragging&dropping them onto the Group node in the SceneTree.

2. Change the texts of the Text Nodes to "Text", "Text_1" etc. according to their names in the Scene Tree View.

3. Drag&drop the Arc Align Behavior (which is a Control Behavior) from the Toolbox view onto the Group node in the SceneTree.

4. Configure the Arc Align Behavior with a radius of 50 and AngleMinMax values of 0 and 90.

5. The result can be seen in the Scene Editor view: All nodes are aligned like an arc from 0 to 90 degrees.

1. Drag&drop a TextButton Control from the Controls Panel of the Toolbox to the SceneEditor or the Scene Tree.

2. Drag&drop the OnClick Behavior (which is a Control Behavior) from the Toolbox view onto the TextButton node in the SceneTree. Additionally, drag&drop the Enable Rendering Behavior (which is a Action - Property Behavior) from the Toolbox view onto the "Actions" field of the OnClick Behavior on the right side of the Scene Tree.

3. Check the properties of the Enable Rendering Behavior. We want to change the visibility of the TextButton to invisible when it has been clicked (onClick), so the checkbox "Visible" has to remain unchecked.

4. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

5. When you click on the TextButton you can see in the Player, it will get invisible. The behavior of the TextButton is like the behaviors that we have configured: OnClick -> EnableRendering (not visible)

Format String Example

1. Drag&drop a TextButton Control from the Controls panel and a TextNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree. Set the TextButton's Text to "Format String".

2. Drag&drop a Value Behavior (which is a Value Processing Behavior) from the Toolbox view onto the TextNode in the SceneTree. Set the Value Behavior's "AcceptValueEvent" property to true.

3. Drag&drop a Format String Behavior (which is a Value Processing Behavior) from the Toolbox view onto the Value Behavior's Receivers.

4. Set the Format String Behavior's "Text" property to "Score: %0.2f", in order to represent the value as formatted string.

5. Drag&drop a Send Value as Event Behavior (which is a Action - Property Behavior) from the Toolbox view onto the TextButton's Actions on the right side of the SceneTree view.

6. Configure the Send Value as Event Behavior's Value property to datatype Int32 and value 10. Adjust the behavior's TargetNode by clicking on the magnifying glass on the right of the property.

7. Set the scene's TextNode as TargetNode for the Send Value as Event Behavior: After clicking the magnifying glass in the properties panel, the "Select Item" Dialog is opened. Select the scene's TextNode and press OK.

8. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

9. When the TextButton is pressed, the Int32 value of 10 will be sent to the TextNode. This value is accepted by the TextNode and the behavior FormatString formats it to "Score: 10.00".

2. Position the Slider Control and Text Value Control in the Scene Editor View.

3. Change the Text Value Control's "Format Text" Property to "Value: %d".

4. Drag&drop a Forward Value Behavior (which is a Value Processing Behavior) from the Behaviors Panel of the Toolbox onto the Slider in the Scene Tree.

After that, the Forward Value Behavior's Properties will look as follows.

6. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

7. When manipulating the slider, the Value of the Text Value Control changes according to the alteration on the slider.

1. Drag&drop a Text Control from the Controls Panel of the Toolbox to the Scene Editor or the Scene Tree and change its text to "Hover".

2. Drag&drop a Hover Behavior (which is a Control Behavior) and a Handle Control State Behavior (which is a Control - Internal Behavior) from the Behaviors Panel of the ToolBox onto the Text Control in the SceneTree. The Handle Control State Behavior is needed in order for the Text Control to receive Input Events.

3. Drag&drop a SetColor Behavior (which is an Action - Property Behavior) onto the Actions of the Hover Behavior on the right side of the SceneTree view.

4. Select the Set Color Behavior and change the Color to red.

5. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

6. When moving the mouse over the Text Control, the text color changes to red.

7. Drag&drop a Hover Leave Behavior (which is a Control Behavior) onto the TextNode.

8. Drag&drop a Set Color Behavior (which is an Action - Property Behavior) onto the Actions of the HoverLeave Behavior on the right side of the SceneTree view.

9. Select the Set Color Behavior and change the Color to green.

10. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

11. When moving the mouse over the Text Control, the text color changes to red (as it did before). When moving the mouse away again, the Text Control's color changes to green. Whenever you hover, it's getting red, when leaving, it's turning green.

1. Drag&drop a TextButton Control from the Controls panel and a TextNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree. Set the TextButton's Text to "Count to 10".

2. Drag&drop a Value Behavior (which is a Value Processing Behavior) from the Behaviors Panel of the Toolbox onto the TextNode in the Scene Tree.

3. Select the Value Behavior in the right side of the Scene Tree view. Set the Value Behavior's AcceptValueEvent Property to "true" by checking the checkbox.

4. Drag&drop an Interpolate Value Behavior (which is a Value Processing Behavior) onto the Value Behavior's Receivers in the right side of the Scene Tree Panel.

5. Select the Interpolate Value Behavior on the right side of the Scene Tree View and set the UnitsPerSecond to 1,00 in the Properties view on the bottom right.

6. Drag&drop a Format String Behavior (which is a Value Processing Behavior) from the Toolbox onto the Interpolate Value Behavior's Receivers on the right side of the Scene Tree Panel.

7. Select the Format String Behavior on the right side of the Scene Tree view and set the Text property to "%d" in the Properties view.

8. Drag&drop a Send Value as Event Behavior (which is a Action - Property Behavior) from the Toolbox view onto the TextButton's Actions on the right side of the SceneTree view.

9. Select the Send Value as Event Behavior on the right side of the Scene Tree Panel. Set the Value property to datatype "Float" and value "10" in the Properties view. Adjust the behavior's TargetNode by clicking on the magnifying glass on the right of the property.

10. Set the scene's TextNode as TargetNode for the Send Value as Event Behavior: After clicking the magnifying glass in the properties panel, the "Select Item" Dialog is opened. Select the scene's TextNode and press OK.

11. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

12. When clicking on the TextButton, the value 10 gets sent to the TextNode, but the TextNode doesn't change to 10 immediately. The Interpolate Value Behavior makes the TextNode count up from 0 to 10 in one step per second.

1. Drag&drop a TextButton Control from the Controls Panel of the Toolbox to the SceneEditor or the Scene Tree and change the Text to "Move Node"

2. Select the TextButton in the Scene Tree View and delete all Behaviors that are automatically attached to the TextButton from the right side of the Scene Tree View.

3. Drag&drop a Value Behavior (which is a Value Processing Behavior) and a Handle Control State Behavior (which is a Control - Internal Behavior) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The Handle Control State Behavior is needed in order for the TextButton Control to receive Input Events.

4. Select the Value Behavior on the right of the Scene Tree View and set the Value Behavior's AcceptValueEvent Property to "true" by checking the checkbox.

5. Drag&drop the Move Node Behavior (which is a Value Processing - Transformation Behavior) from the Behaviors Panel of the ToolBox onto the Value Behavior's Receivers.

6. Drag&drop an OnClick Behavior (which is a Control Behavior) from the Behaviors Panel of the ToolBox onto the TextButton Control.

7. Drag&drop a Send Value as Event Behavior (which is a Action - Property Behavior) from the Behaviors Panel of the ToolBox onto the OnClick Behavior's Actions Property.

8. Select the Send Value as Event Behavior on the right side of the Scene Tree View and set the value to datatype "Float" value "100,00" in the Properties view.

9. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

10. When Clicking on the TextButton in the Player, the Button moves to position 50, 50.

OnClick Example

1. Drag&drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree.

2. Drag&drop a OnClick Behavior (which is a Control Behavior) and a Handle Control State Behavior (which is a Control - Internal Behavior) from the Behaviors Panel of the ToolBox onto the SolidColorNode in the SceneTree. The Handle Control State Behavior is needed in order for the TextButton Control to receive Input Events.

3. Drag&drop a Set Color SetColor Behavior (which is a Action - Property Behavior) from the Toolbox view onto the Actions of the OnClick Behaviors in the SceneTree.

4. Select the Set Color Behavior and change the Color to red.

5. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

6. When clicking on the SolidColorNode, the SolidColorNode's color changes to red.

OnPressed Example

1. Drag&drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree.

2. Drag&drop a OnPressed Behavior (which is a Control Behavior) and a Handle Control State Behavior (which is a Control - Internal Behavior) from the Behaviors Panel of the ToolBox onto the SolidColorNode in the SceneTree. The Handle Control State Behavior is needed in order for the TextButton Control to receive Input Events.

3. Drag&drop a Set Color SetColor Behavior (which is a Action - Property Behavior) from the Toolbox view onto the Actions of the OnPressed Behaviors in the SceneTree.

4. Select the Set Color Behavior and change the Color to red.

5. Save your solution and start the CGIPlayer through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

6. When pressing the mouse left button on the SolidColorNode, the SolidColorNode's color changes to red.

Perform Transition Requests Example

1. Drag&drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the 2D scene "Scene2D" in the SceneEditor or the Scene Tree view. Change the Scale X and Scale Y propertes to 3,0 each in the Properties view.

2. Open the already existing 3D scene "Scene3D" by double-clicking it in the Solution Explorer on the left.

3. Drag&drop a Cube Control from the Controls Panel of the Toolbox to the 3D Scene "Scene3D" in SceneEditor or the Scene Tree view.

4. Select the Cube Control in the Scene Tree view and set the Position properties to (0, 0, 0).

5. Switch back to the 2D scene "Scene2D" by double-clicking it in the Solution Explorer on the left.

6. Drag&drop a OnClick Behavior (which is a Control Behavior) and a Handle Control State Behavior (which is a Control - Internal Behavior) from the Behaviors Panel of the ToolBox onto the SolidColorNode in the SceneTree. The Handle Control State Behavior is needed in order for the TextButton Control to receive Input Events.

7. Drag&drop a Perform Transition Requests Perform Transition Requests Behavior (which is a Action - Transition Behavior) from the Toolbox view onto the Actions of the OnClick Behaviors in right side of the SceneTree view.

8. Drag&drop two Transition Request Transition Request Behaviors (which are Action - Transition Behaviors) from the Toolbox view onto the Requests of the Perform Transition Requests Perform Transition Requests Behavior in the right side of the SceneTree view.

9. Select the first one of the two Transition Request Transition Request Behaviors. Set the Transition Request Transition Request Behavior's Identifier to the current scene (Scene2D) by clicking on the magnifying glass on the right of the input field and selecting the current 2D Scene (Scene2D) in the "Choose Item" dialog.

After that, the Transition Request Transition Request Behavior's Properties will look as follows.

10. Now, select the second Transition Request Transition Request Behaviors. Set the Transition Request Transition Request Behavior's Identifier to the 3D scene (Scene3D) by clicking on the magnifying glass on the right of the input field and selecting the 3D Scene (Scene3D) in the "Choose Item" dialog.

After that, the Transition Request Transition Request Behavior's Properties will look as follows.

11. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

12. You can see your 2D scene with the white SolidColorNode. When clicking on the SolidColorNode, a transition to the 3D scene is performed.


Initially displaying Scene2D	After Clicking, displaying Scene3D

Render Child Nodes Example

1. Drag&drop two TextButton Controls from the Controls Panel of the Toolbox to the already existing Group Node of the Scene Tree and change their texts to "Button 1" and "Button 2".

2. Drag&drop an Event Handler Behavior (which is a Control Behavior) from the Toolbox view onto the Group Node in the Scene Tree view.

3. Select the Group Node in the Scene Tree view and drag&drop a Check Click Behavior (which is a Condition - Input Behavior) from the Toolbox view onto the Condition of the Group Node's EventHandler in the right side of the Scene Tree view.

4. Keep the Group Node selected in the Scene Tree view and drag&drop a Render Child Nodes Behavior (which is a Action - Property Behavior) from the Toolbox view onto the "Actions" of the Group Node's EventHandler on the right side of the Scene Tree view.

5. Select the "Render Child Nodes" Behavior in the right side of the Scene Tree view. In the Properties view set Index to "1,0" and OperationMode to to "SingleNode".

6. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

7. After clicking on one of the two buttons (no matter which one), "Button 2" will disappear and "Button 1" will get rendered.

8. Stop the Player by pressing on the Stop Button (next to the option "Generate and Play") and change the "Render Child Nodes" Behavior's Property: Set Index to "2,0".

9. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

10. After clicking on one of the two buttons (no matter which one), "Button 1" will disappear and "Button 2" will get rendered.

Send Value As Event Example

2. Rename the TextButton Controls to "DecreaseButton" and "IncreaseButton". Change the text of the DecreaseButton to "-" and the text of the IncreaseButton to "+".

3. Change the Text of the TextValue Control to "Count: %d" and arrange the three Controls as in the right picture below.

4. The value of the TextValue Control should be increased or decreased according to the pressed Button. To connect the TextButton Controls with the TextValue Control select one of the TextButtons. Drag&drop a Send Value as Event Behavior (which is a Action - Property Behavior) onto the Actions sections of both of the TextButton Controls' EventHandler.

5. Select the "SendValueAsEvent" Behavior of the "DecreaseButton" and change the Value to "-1,00" in the Properties view. As the value should change relative to the current value, the "ChangeValue" property has to be set to "Relative". Select the "SendValueAsEvent" Behavior of the "IncreaseButton" and change the Value to "1,00" in the Properties view. Again, the "ChangeValue" property has to be set to "Relative"

6. Both "SendValueAsEvent" Behaviors need to be configured with the "Text Value" Control as TargetNode by clicking on the magnifying glass on the right of the property.

7. Set the scene's TextValue Node as TargetNode for the Send Value as Event Behavior: After clicking the magnifying glass in the properties panel, the "Select Item" Dialog is opened. Select the scene's TextValue Node and press OK. Repeat this for the second "SendValueAsEvent" Behavior.

8. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

9. When pressing the "-" Button, the Count value is decreased by one. When pressing the "+" Button, the Count value is increased by one.

Set Alpha Value Example

1. Drag&drop a TextButton Control from the Controls Panel of the Toolbox to the SceneEditor or the Scene Tree and change the Text to "Set Alpha Value"

2. Select the TextButton in the Scene Tree View and delete all Behaviors that are automatically attached to the TextButton from the right side of the Scene Tree View.


before deleting all behaviors	after deleting behaviors

3. Select the TextButton Control in the SceneTree View and decrease its Alpha Value e.g. to 0,5 in the Item Tab of the Properties Panel.

4. Drag&drop a Value Behavior (which is a Value Processing Behavior) and a Handle Control State Behavior (which is a Control - Internal Behavior) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The Handle Control State Behavior is needed in order for the TextButton Control to receive Input Events.

5. Select the Value Behavior on the right of the Scene Tree View and set the Value Behavior's AcceptValueEvent Property to "true" by checking the checkbox.

6. Drag&drop the Set Alpha Value Behavior (which is a Value Processing - Effects Behavior) from the Behaviors Panel of the ToolBox onto the Value Behavior's Receivers.

7. Drag&drop an OnClick Behavior (which is a Control Behavior) from the Behaviors Panel of the ToolBox onto the TextButton Control.

8. Drag&drop a Send Value as Event Behavior (which is a Action - Property Behavior) from the Behaviors Panel of the ToolBox onto the OnClick Behavior's Actions Property.

9. Select the Send Value as Event Behavior on the right side of the Scene Tree View and set the value to datatype "Float" value "1,00" in the Properties view.

10. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

11. When Clicking on the TextButton in the Player, the Button moves to position 50, 50.

Set Image Example

1. Drag&drop a TextButton Control from the Controls Panel and a BitmapNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree.

2. Position the TextButton Control and the BitmapNode next to each other in the Scene Editor.

3. Drag&Drop a Provide Image Behavior (which is a Control - Public Property Behavior) from the Behaviors Panel of the ToolBox onto the BitmapNode in the Scene Tree view.

4. Select the TextButton Control in the Scene Tree view and change its Text to "Set Image" in the Properties view.

5. Drag&Drop a Set Image Behavior (which is a Action - Property Behavior) from the Behaviors Panel of the ToolBox onto the "Actions" field of the TextButton Control's EventHandler on the right side of the Scene Tree.

6. Select the newly added Set Image Behavior in right side of the Scene Tree view. Adjust the "Set Image" Behavior's Image Property by clicking the magnifying glass on the right of the input field.

7. Set the "Set Image" Behavior's image property: After clicking the magnifying glass in the properties panel, the "Select Item" Dialog is opened. Select an image from the construction kit (a preview of the image is shown when moving the mouse over the image) and press OK.

8. Select the Set Image Behavior on the right side of the Scene Tree view and drag&drop it onto the BitmapNode on the left side of the Scene Tree view (you can see a little arrow and "Set Image").

9. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

10. When the TextButton is pressed, the configured image will be set to the BitmapNode and the image will appear.

Set Position Example

1. Drag&drop a TextButton Control from the Controls Panel of the Toolbox to the SceneEditor or the Scene Tree and change the Text to "Change Position".

2. Select the TextButton in the Scene Tree View and delete all Behaviors that are automatically attached to the TextButton from the right side of the Scene Tree View.


before deleting all behaviors	after deleting behaviors

4. Select the Value Behavior on the right side of the Scene Tree View and set the Value Behavior's AcceptValueEvent Property to "true" by checking the checkbox.

5. Drag&drop a Set Position Behavior (which is a Value Processing - Transformation Behavior) from the Behaviors Panel of the ToolBox onto the Value Behavior's Receivers.

6. Select the Set Position Behavior on the right side of the Scene Tree view and set its TranslationAxis Property to "AxisX"

7. Drag&drop an OnClick Behavior (which is a Control Behavior) from the Behaviors Panel of the ToolBox onto the TextButton Control.

8. Drag&drop a Send Value as Event Behavior (which is a Action - Property Behavior) from the Behaviors Panel of the ToolBox onto the OnClick Behavior's Actions Property.

9. Select the Send Value as Event Behavior on the right side of the Scene Tree View and set the value to datatype "Float" value "100,00" in the Properties view.

10. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

11. When Clicking on the TextButton in the Player, the Button's horizontal position (x coordinate) is set to 100, so it moves to the right.

Set Rotation Example

1. Drag&drop a TextButton Control from the Controls Panel of the Toolbox to the SceneEditor or the Scene Tree and change the Text to "Set Rotation".

2. Select the TextButton in the Scene Tree View and delete all Behaviors that are automatically attached to the TextButton from the right side of the Scene Tree View.


before deleting all behaviors	after deleting behaviors

4. Select the Value Behavior on the right side of the Scene Tree View and set the Value Behavior's AcceptValueEvent Property to "true" by checking the checkbox.

5. Drag&drop a Set Rotation Behavior (which is a Value Processing - Transformation Behavior) from the Behaviors Panel of the ToolBox onto the Value Behavior's Receivers.

6. Drag&drop an OnClick Behavior (which is a Control Behavior) from the Behaviors Panel of the ToolBox onto the TextButton Control.

7. Drag&drop a Send Value as Event Behavior (which is a Action - Property Behavior) from the Behaviors Panel of the ToolBox onto the OnClick Behavior's Actions Property.

8. Select the Send Value as Event Behavior on the right side of the Scene Tree View and set the value to datatype "Float" value "40,00" in the Properties view.

9. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

10. When Clicking on the TextButton in the Player, the Button is rotated 40° clockwise.

Set Scale Example

1. Drag&drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree.

2. Drag&drop a Value Behavior (which is a Value Processing Behavior) from the Behaviors Panel of the Toolbox onto the Text Value Control in the Scene Tree.

3. Select the Value Behavior on the right side of the Scene Tree View. Set the Value Behavior's AcceptValueEvent Property to "true" by checking the checkbox in the Properties view. Check the Minimum Checkbox and set the Minimum Value to 0,50. Check the Maximum Checkbox and set the Maximum Value to 3,00. Also, set the Variant Value to 1,00.

4. Select the SolidColorNode in the Scene Tree view and drag&drop an Interpolate Value Behavior (which is a Value Processing Behavior) onto the Value Behavior's Receivers in the right side of the Scene Tree Panel.

5. Select the Interpolate Value Behavior on the right side of the Scene Tree view and set the property "Units Per Second" to 1,00 in the Properties view.

6. Drag&Drop a Set Scale Behavior (which is a Value Processing - Transformation Behavior) onto the Interpolate Value Behavior's Receivers in the right side of the Scene Tree Panel.

7. Select the Set Scale Behavior and check the ScaleAlongY checkbox in the Properties view. Set the ScaleVextor2D Property to (1, 1).

8. Drag&drop two TextButton Controls from the Controls Panel of the Toolbox to the SceneEditor or the Scene Tree.

9. Configure the first TextButton Control to have the Text "Decrease". Configure the second TextButton Control to have the Text "Increase" and set it's Enabled Property to "false" by unchecking the Checkbox.

10. Drag&drop a Send Value as Event Behavior (which is a Action - Property Behavior) from the Toolbox view onto the TextButton's Actions on the right side of the SceneTree view. Do this for both of the TextButton Controls.

11. Select the first TextButton Control (the one with text "Decrease") and then select its Send Value as Event Behavior on the right side of the Scene Tree view. Set the Value Property to 0,50. Adjust the behavior's TargetNode by clicking on the magnifying glass on the right of the property.

12. Set the scene's TextNode as SolidColorNode for the Send Value as Event Behavior: After clicking the magnifying glass in the properties panel, the "Select Item" Dialog is opened. Select the scene's SolidColorNode and press OK.

13. Select the second TextButton Control (the one with text "Increase") and then select its Send Value as Event Behavior on the right side of the Scene Tree view. Set the Value Property to 3,00. Set the behavior's TargetNode to the scene's SolidColorNode as you just did for the first TextButton Control.

14. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

15. When clicking on the TextButton "Increase" in the Player, the size of the SolidColorNode is slowly increased. When clicking on the TextButton "Decrease", the size of the SolidColorNode is slowly decreased.

Set Text Example

1. Drag&drop a TextButton Control from the Controls panel and a TextNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree. Set the TextButton's Text to "Change Text".

2. Position the TextButton Control and the TextNode nicely in the Scene Editor.

3. Drag&Drop a Provide Text Behavior (which is a Control - Public Property Behavior) from the Behaviors Panel of the ToolBox onto the TextNode in the Scene Tree view.

4. Select the TextButton Control and drag&drop a Set Text Behavior (which is a Action - Property Behavior) from the Behaviors Panel of the ToolBox onto the "Actions" field of the TextButton Control's EventHandler on the right side of the Scene Tree.

5. Select the newly added Set Text Behavior in right side of the Scene Tree view and change the Text property to "Hallo" in the Properties view.

6. Select the Set Text Behavior on the right side of the Scene Tree view and drag&drop it onto the TextNode on the left side of the Scene Tree view (you can see a little arrow and "Set Text").

7. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

8. When the TextButton is pressed, the text of the TextNode will be changed to "Hallo".

Start Timer Example

1. Drag&drop a TextButton Control and a Text Control from the Controls panel of the Toolbox to the SceneEditor or the Scene Tree.

2. Select the TextButton in the Scene Tree View and delete all Behaviors that are automatically attached to the TextButton from the right side of the Scene Tree View.


before deleting all behaviors	after deleting behaviors

3. Set the TextButton Control's text to "Start Timer" and the Text Control's text to "Wait for Timer".

4. Drag&drop an OnClick Behavior (which is a Control Behavior) and a Handle Control State Behavior (which is a Control - Internal Behavior) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The Handle Control State Behavior is needed in order for the Text Control to receive Input Events.

5. Select the TextButton Control in the Scene Tree view and drag&drop a Start Timer Behavior (which is a Action - Control Behavior) from the Toolbox view onto the Actions of the TextButton Control's OnClick Behavior in the right side of the Scene Tree view.

6. Select the Start Timer Behavior in the right side of the Scene Tree view and set the Delay property to "1000" in the properties view. Set the Start Timer Behavior's Target Node to the Text Control you have added to the scene in step 1 by clicking the magnifying glass on the right side of the input filed and selecting the Text Value Control in "Choose Item" dialog.

After that, the Start Timer Behavior's Properties will look as follows.

7. Drag&drop an On Timer Behavior (which is a Control Behavior) and a Handle Control State Behavior (which is a Control - Internal Behavior) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The Handle Control State Behavior is needed in order for the Text Control to receive Input Events.

8. Select the Text Control in the Scene Tree view and drag&drop a Set Color Behavior (which is a Action - Property Behavior) from the Toolbox view onto the Actions of the Text Control's On Timer Behavior in the right side of the Scene Tree view.

9. Select the Set Color Behavior and change the Color to red.

10. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

11. When the TextButton "Start Timer" is pressed, a timer is started and after some time the Text Control's text changes its color.

Switch Image Example

1. Drag&drop a FlipBook Control from the Controls panel of the Toolbox to the SceneEditor or the Scene Tree.

2. Drag&drop a Value Behavior (which is a Value Processing Behavior) and a Handle Control State Behavior (which is a Control - Internal Behavior) from the Behaviors Panel of the ToolBox onto the TextButton Control in the SceneTree. The Handle Control State Behavior is needed in order for the Text Control to receive Input Events.

3. Select the Value Behavior in the right side of the Scene Tree view and set the "AcceptValueEvent" property to "True" in the Properties view.

4. Select the FlipBook Control in the Scene Tree view and drag&drop a Switch Image Behavior (which is a Value Processing - Effects Behavior) from the Toolbox view onto the Receivers of the FlipBook Control's Value Behavior in the right side of the Scene Tree view.

5. Drag&drop an OnClick Behavior (which is a Control Behavior) from the Behaviors Panel of the ToolBox onto the FlipBook Control in the SceneTree.

6. Select the FlipBook Control in the Scene Tree view and drag&drop a Send Value as Event Behavior (which is a ~~Value Processing~~Action - ~~Effects~~Property Behavior) from the Toolbox view onto the Actions of the FlipBook Control's OnClick Behavior in the right side of the Scene Tree view.

7. Select the Send Value as Event Behavior in the right side of the Scene Tree view and set the "Value" propert to "5,00".

8. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

9. When the FlipBook Control is clicked in the Player, the image of the FlipBook is switched.

Transform Gesture Action Example

1. Drag&drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree.

2. Select the SolidColorNode's SolodColorBushBlend effect and change the Size properties to 100,00 and 100,0 in the Properties view.
The SolidColorNode is going to be our touchable content, which should be large enough to touch it with two fingers. This could also be achieved by extending the touchable area of the RenderNode (defining the Bounding Rectangle). But please beware that this will have consequences on the laid out size.

3. Drag&drop a Transform Gesture Action Behavior (which is a Action - Gesture Behavior) and a Handle Control State Behavior (which is a Control - Internal Behavior) from the Behaviors Panel of the ToolBox onto the SolidColorNode in the SceneTree. The Handle Control State Behavior is needed in order for the TextButton Control to receive Input Events.

4. Select the Transform Gesture Action Behavior and configure Panning Minimum and Maximum values for x and y coordinate.

5. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

6. When panning the SolidColorNode you can drag it around in the area that has been defined in the Transform Gesture Action Behavior's Panning Properties. If you do have a touch screen available, you can also try pinching and rotating the SolidColorNode.

Transform Gesture Condition Example

1. Drag&drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree.

2. Select the SolidColorNode's SolidColorBushBlend effect and change the Size properties to 100,00 and 100,0 in the Properties view.
The SolidColorNode is going to be our touchable content, which should be large enough to touch it with two fingers. This could also be achieved by extending the touchable area of the RenderNode (defining the Bounding Rectangle). But please beware that this will have consequences on the laid out size.

3. Drag&drop a Event Handler Behavior (which is a Control Behavior) and a Handle Control State Behavior (which is a Control - Internal Behavior) from the Behaviors Panel of the ToolBox onto the SolidColorNode in the SceneTree. The Handle Control State Behavior is needed in order for the TextButton Control to receive Input Events.

4. Drag&drop an Event Handler Behavior (which is a Control Behavior) from the Toolbox view onto the SolidColorNode or its parent node in the Scene Tree view.

5. Select the SolidColorNode and drag&drop a Transform Gesture Condition Behavior (which is a Condition - Input Behavior) onto the Event Handler EventHandler's Condition on the right side of the Scene Tree View.

6. Select the SolidColorNode and drag&drop a Set Color Behavior (which is a Action - Property Behavior) onto the Event Handler EventHandler's Actions on the right side of the Scene Tree View.

7. Select the Set Color Behavior and change the Color to red.

8. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

9. When a transform gesture is detected, a TransformEvent is sent to the touched node. If the event matches the condition, the configured action will be performed. In our case, when a transform gesture is detected, the SetColor Action will be performed and the SolidColorNode changes its color.

Swipe Gesture Example

1. Drag&drop a SolidColorNode from the "Nodes 2D" Panel of the Toolbox to the SceneEditor or the Scene Tree.

4. Select the SolidColorNode and drag&drop a Swipe Gesture Condition Behavior (which is a Condition - Input Behavior) onto the Event Handler EventHandler's Condition on the right side of the Scene Tree View.

5. Select the Swipe Gesture Condition Behavior and configure its direction to "Right".

6. Select the SolidColorNode and drag&drop a Set Color Behavior (which is a Action - Property Behavior) onto the Event Handler EventHandler's Actions on the right side of the Scene Tree View.

7. Select the Set Color Behavior and change the Color to red.

8. Copy the EventHandler (with both its Condition and its Action you configured in steps 3 - 6 of this example) by right-clicking on the EventHandler in the right side of the Scene Tree View and choosing "Copy" (or via keyboard shortcut use Ctrl+C). Paste the EventHandler by right-clicking on the Behaviors (the topmost entry, where it says "Behaviors") in the right side of the Scene Scene Tree view and choosing "Paste" (or via keyboard shortcut select the topmost entry where it says "Behaviors" and press Ctrl+V).

9. By duplicating the EventHandler you have created "Event Handler_1" with Condition "Swipe Gesture_1" and Action "Set Color_1".

10. Select the "Swipe Gesture_1" Condition and set its Direction to "Left". Select the "Set Color_1" Action and configure its color to Green.

11. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

12. In the beginning the SolidColorNode is white. But after a swipe to the right, the SolidColorNode is gets red. If you swipe to the left, the SolidColorNode gets green.


Initial color	After swipe right	After swipe left

Scroll View Example

1. Drag&drop a ScrollView Control from the Controls Panel of the Toolbox to the Scene Editor or the Scene Tree.

2. Drag&drop a StackLayout from the "Nodes2D" Panel of the ToolBox onto the ContentAnchor of the ScrollView Control in the Scene Tree.

3. Change the Layouter Arrangement of the StackLayout to "vertical".

4. Drag&drop a Text Control from the Controls Panel, a BitmapNode from the "Nodes2D" Panel of the ToolBox and another Text Control from the Control Panel onto the StackLayout in the Scene Tree.

5. Select a Text Control in the Scene Tree View and set its width to "500" in the Layout Size Properties.

6. In the Control Properties change the Text Property to a longer, several lines long text (newlines can be achieved via Ctrl+Enter). Also set the Text Control to be Multiline and enable Word Wrap.

7. Repeat the previous two steps for the second Text Control.

8. Select the BitmapNode in the Scene Tree View before selecting the BitmapBrushBlend Effect on the right side of the Scene Tree View. Adjust the BitmapBrushBlend Effect's image by clicking on the magnifying glass on the right of the input field.

9. Set the BitmapBrushBlend Effect's image property: After clicking the magnifying glass in the properties panel, the "Select Item" Dialog is opened. Select an image from the construction kit (a preview of the image is shown when moving the mouse over the image) and press OK.

10. The SceneEditor now displays the ScrollView and its contents without the possibility to scroll.

11. Select the ScrollView Control in the Scene Tree View and set its Layout Size to a height of "400". After that, a vertical scrollbar is displayed in the SceneEditor.

12. Save your solution and start the Player through the Play button (with the option "Generate and Play") in the Toolbar on the top to see the result.

13. The ScrollView is displayed with a full functional scrollbar. When scrolling, you can check that all configured content is available: both Text Controls and one BitmapNode.