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.
