Examples Using Predefined Behaviors
Contents List
- Thermometer Example
- Align Pivot Example
- Arc Align Example
- Enable Rendering Example
- Format String Example
- Forward Value Example
- Hover - Hover Leave Example
- Interpolate Value Example
- Move Node Example
- OnClick Example
- OnPressed Example
- Perform Transition Requests Example
- Render Child Nodes Example
- Send Value As Event Example
- Set Alpha Value Example
- Set Image Example
- Set Position Example
- Set Rotation Example
- Set Scale Example
- Set Text Example
- Start Timer Example
- Switch Image Example
- Transform Gesture Action Example
- Transform Gesture Condition Example
- Swipe Gesture Example
- Scroll View Example
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.
Enable Rendering Example
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.
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. 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.
Hover - Hover Leave Example
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.
Interpolate Value 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 "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.
