Tutorial 4: Random color box
In this tutorial you will:
- Add a behavior: Script and variables
- Connect behavior's elements to the component's elements
- Change color property on component click.
Let's start by creating a new component in the Library page. If you don't know how to do it, please take a look to Creating a new component.
We will use the default cube for this tutorial. However, before continuing, let's add a material element to the component, as we did on the Tutorial 2.
The behavior is the part of the component that gives life to it. It is a logic function with some input and output variables that can be used to define parts of the component's behavior that cannot be defined directly by other elements, like for example the physic attributes.
For now, the logic can be defined using a python script which will be executed periodically or when the inputs change. The defined variable elements will be available inside the script, and when the script is executed, the value of the output variables will be updated and transferred to other elements within the component.
In the diagram above, user_input and color are both elements included in the visual element. The goal of this component is to change its color on click, therefore we need to be able to read the user_input and write the color.
The script can only interact with elements within the behavior. Therefore, the variable elements act as a bridge between the script and the elements outside the behavior. This is why we created one input variable (is_pressed) connected to the user_input and one output variable (cube_color) connected to the color.
Let's start by adding is_pressed and cube_color variables. Right-click the behavior element and then pick variable. Do that step for both of them.
Variable elements have several properties, such as data-type (smtk_int, stmk_string, etc), that must match the element it will be connected to. Furthermore, they have a type property to specify if it will act as input or output.
Click on the first variable you have created and name it is_pressed, by clicking on the Name field at the bottom. We don't need more changes, as by default, it will be an input variable of type smtk_bool.
Next, click on the second variable and name it cube_color. For this variable we will need to set the data-type to smtk_rgba, as it is a color, and the type to output.
First, let's download the script with the logic by right-clicking here and selecting Save Link As... Go back to the Component Information tab and upload it as an asset.
Go again to the 3D tab. Inside the behavior element, click on the script and finally on the Value field at the bottom to pick the logic asset. If you did it correctly, now you should be seeing the logic code in the editor.
The box logic is following the statement below:
If a click is performed on the component, randomly generate values for red, green and blue (from 0.0 to 1.0) and update the component's color using these values.
In the script, the initialize part is a predefined block in Simumatik that will be run each time we play the emulation.
By default, the script only runs when an input variable changes. However, you can tweak it to run periodically by clicking on the step_time element, inside behavior, and setting its Value to the amount of seconds to wait per execution.
Connections act as a bridge between the variables inside the behavior and any element from a component, so the script can read and write them.
To manage the connections, it is as easy as drag-and-drop any element from the tree to a variable of the behavior. Let's drag-and-drop the user_action element into is_pressed and color into cube_color. Inputs will be on the left side and outputs on the right:
Each time an element connected to a variable changes, the behavior's logic will be rerun. If an output variable changes, the element connected to it value will be updated.
Your random color box is now finished! Let's take a screenshot of your newest component and save it. You can now add it to a library and start using it. You can see an example below:
Let's make the color changing automatically every 2 seconds! Click on step_time, inside behavior, and change its Value to 2.