Examples Using Predefined Behaviors

Contents List

Usecase for Send Value Changed as Event and reception in state machine(s)

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 Action - 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.

Process Value Changed Event - Slider Example

Drag&drop a Slider and a TextNode2D from the Toolbox into the Scene Editor or the Scene Tree and arrange them in a way that both are clearly visible.
Drag&drop a Process Value Changed Event from the Toolbox onto the Slider in the Scene Tree.
Select the Slider in the Scene Tree and drag&drop a Format String Behavior into the right side of the Scene Tree onto the Receivers part of the Process Value Changed Event.
Drag the Format String Behavior from the Slider's Process Value Changed Event's Receivers and drop it onto the TextNode in the Scene tree.
Select the TextNode2D in the Scene Tree, so that its behaviors get visible on the right side of the Scene Tree and select the Format String Behavior. In the Properties panel configure the Text to "%d" so that the TextNode2D can correctly display the value given by the Slider
You can test the functionality already without starting the Player: Select the Slider and change its Value in the Properties panel (confirm the value by hitting the <Enter> key). The TextNode2D will always display the current value of the Slider.
You can also start the Player. Manipulating the Slider knob will change the Slider's value. The TextNode2D will get updated whenever the Slider's value is changed, it will always display the Slider's value.

Process Value Changed Event - State Machine Example

1. Drag&drop a Button and a TextNode2D from the Toolbox into the Scene Editor or Scene Tree and arrange them in a way that both are clearly visible.

2. Create a new State Machine through the menu "State Machine" - "New State Machine...", which will open the "Add New State Machine" dialog. Adapt the State Machine's name to your needs and press "OK".

3. Select the created State Machine and make it a global State Machine by checking the "Is Global" property in the Properties panel.

4. Double-click your Global State Machine to open it in the State Machine Editor. Drag&drop a State from the tools in the top right corner of the State Machine Editor into the State Machine diagram.

5. Drag&drop a Transition from the tools in the top right corner onto one of the States in the diagram, then move the mouse and click the second state of the diagram, which will draw a Transition from one State to the other.

6. Perform the same action again, drawing a Transition in the other direction.

7. Select a State and add an OnEntry Action. To do this, press the "+" sign. Choose the "Send Value Changed As Event" from the drop-down list and configure a Float value of "1.00".

8. Click the magnifying glass next to the Target Node property to open the "Choose Item" dialog, where you can select the Scene's TextNode2D.

9. Now, select the other State and perform the same action again, but configure a different value in the "Send Value Changed As Event", e.g. a Float value of "2.00".

10. Drag&drop a "Process Value Changed Event" from the Toolbox onto the TextNode2D in the Scene Tree and drag&drop a "Format String" behavior onto the Receiver's part of the "Process Value Changed Event".

11. Select the Format String Behavior and enter "%d" in the Text Property.

12. Save your solution and start the Player. Whenever you press the button, a state transition will be performed. Each of the two states is configured with a different value (1.00 or 2.00), which will be sent as event. The TextNode2D will receive this value and display it. So, repeatedly pressing the button will change the displayed value from 1 to 2 and back to 1 etc.

Usecase for Send Value Changed as Event and reception in state machine(s)

Triggering State Transitions using Buttons

This example demonstrates the usage of "Send Value Changed as Event" in combination with a local as well as a global state machine.

Setting up the Scene

For this example, two groups are used each with two buttons and a color node. The buttons are used to send events with values "0" and "1". The color node is used to display the corresponding state of the associated state machine.

1. Drag&Drop a StackLayout onto the scene and rename to "Group"

2. Drag&Drop a StackLayout onto the root group and rename to "GlobalGroup". Set the property "Layouter > Arrangement" to "Vertical"

3. Drag&Drop a TextNode into the GlobalGroup and change name and text to "Global". Add two TextButtons rename to "GlobalButton_Send_0" and "GlobalButton_Send_1" and change the text to "0" and "1". Add a SolidColorNode and rename to "GlobalTarget". Set property "StretchBehavior" to "Fill".

4. Repeat Step 2. and 3. using "Local" for the names (as displayed in the screenshot).

Setting up the State Machines

1. In Solution Explorer in "Solution > State Machines" from the context menu use "Add > New Item…". In the dialog select "StateMachine" and change name to "GlobalChangeColorOnEvent"

2. Open State Machine Editor by double clicking on the created state machine. It shows an initial state and a state with a transition.

3. Drag&Drop a new State onto StateMachine canvas. Rename the two states to "Value_Is_0" and "Value_Is_1".

4. Drag&Drop a Transition starting from State "Value_Is_0" to "Value_Is_1". Rename it to "If_Value_1". In the property panel in the "Transition" section set the property "Event" to "Value Changed" and property "Condition" to "Check Changed Value". In the "Condition parameters" section set "ConditionOperator" to "Equal" and "ConditionValue" to "Int32" and value "1".

5. Repeat Step 4. for the transition in opposite direction. Use "If_Value_0" as a name, and for the "ConditionValue" property use value "0".

6. In the "Solution Explorer" clone the state machine "GlobalChangeColorOnEvent" naming it "LocalChangeColorOnEvent".

7. Set the property settings of the cloned state machine (set "Transition > Event" to "Value Changed", "Transition > Condition" to "Check Changed Value", "Condition parameters > ConditionOperator" to "Equal" and "Condition parameters > ConditionValue" to "Int32" and value "0" and "1", respectively).

Connecting Scene and StateMachines

1. In Scene Tree open "GlobalButton_Send_1". From "Behaviors > Action > Property" drag&drop a "Send Value Changed As Event" action onto the buttons "Actions" section in the "Behaviors" tree. In the property panel of the added action, change "Value" to "Int32" and value "1" and "EventDispatchStrategy" to "Bubble".

2. Repeat Step 1 for the other buttons "GlobalButton_Send_0", "LocalButton_Send_1", and "LocalButton_Send_1", with values set accordingly.

3. In Solution Explorer open state machine "GlobalChangeColorOnEvent". Select Transition "Received_1". In the properties panel set "Condition Parameters > Sender" to "Scene2D > Group > GlobalGroup > GlobalButton_Send_1".

4. Repeat Step 3 for Transition "Received_0" using "GlobalButton_Send_0".

5. In the State Machine Editor, select state "Value_Is_0". From "Behaviors > Action > Property" drag&Drop a "Set Color" action onto the "On Entry Actions" section in the transition’s actions editor.

6. Select the new action and in the properties panel set "TargetNode" to "Scene2D > Group > GlobalGroup > GlobalTarget" and "Color" to a color that is associated with the global value "0" (for example #FFD900FF)

7. Repeat step 5 and 6 for state "Value_Is_1" (using a different color, such as #0E00FFFF)

8. Repeat Step 3 – 7 for state machine "LocalChangeColorOnEvent" referring to the nodes in "LocalGroup" instead and using different colors (for example #00FF00FF for value "0" and #FF0000FF for value "1").

9. Select the state machine "GlobalChangeColorOnEvent" and change its property "Is Global" to "true".

10. In Scene Tree select "Scene2D > Group" and drag&drop a StateMachine behavior onto its behavior tree. In the properties panel set "StateMachine" to "Solution > State Machines > LocalChangeColorOnEvent".

Result and Conclusion

Generate and play the solution to see the following result:

The following aspects have been considered in this example:

A combination of "Send Value Changed as Event" action and "Check Changed Value" behavior are used to trigger state transitions in a global and a local state machine.
The "Send Value Changed as Event" action provides variants for the "EventDispatchStrategy" property. Please refer to Behaviors and Events. In this example, the "Bubble" strategy was applied as it is very simple to understand.
The global state machine receives all bubbling events that have not been consumed already.
To avoid that the two state machines react on the same events, the "Sender" property in the condition parameters of the state transitions should be used.