In this guide you will learn how to create a selection menu using a DataTable and Primitives Valkyrie entities. The menu will consist of 5 buttons and a highlight that will move around
the last clicked button.
It is recommended to be familiar with the following elements before starting this tutorial:
Download the template file below in order to manipulate the software while reading this tutorial:
Vlk Project Download
In the Entity Library, Drag & Drop a DataTable into the Center-Anchor Dummy. The position of this Dummy object is controlled by the ViewportAnchor action and is configured to be at the center of the screen.
Now we need to make the DataTable relative to its parent object (Center-Anchor) & center it.
The next step is to create our buttons.
In the Entity Library, Drag & Drop a Primitive into the DataTable and turn on the Relative flag.
The default shape of a primitive is a Box. In this tutorial we will change the shape to a Sphere.
We are going to create 5 buttons but as you can notice the first one is quite big so we'll make it smaller. Click on the Primitive and change its scale to 0.4.
Let's copy this primitive 4 times.
And give them a different colors
It's time to make the buttons interactive.
The EnterRayHit event allows entities to detect clicks and is triggered every time a click is detected. So now, all of the Primitives are clickable but we need to specify what happens when they are clicked.
Before we proceed, we need to create a property in the DataTable that will store the buttons when they are clicked.
The interaction we'll create will store the name of the clicked button into the button_name property of the DataTable.
Now every time we click on a button, the EntitySetProperty action is going to write the name of the clicked button into the button_name property of the DataTable. In other words, the DataTable knows which button the user has clicked.
We are now going to create a rule to define what happens when the button_name value of the DataTable changes.
All that's left to do is to move this Primitive with the white circle texture at the location of the button that was clicked.
To achieve this, let's create a PropertyChanged event into the DataTable.
The PropertyChanged event will always be triggered when the button_name property of the DataTable changes.
Now let's define what happens when the PropertyChanged event is triggered.
Now, every time you click on a button, the white circle will automatically move to the position of the clicked button