In this part of the chapter, we want to touch on using UMG to control the behaviors influenced upon our agents. We will do this by first creating a UMG widget with the proper controls to manipulate our three float variables. Then, we must assign this user widget to the owning PlayerController. Then, we will end by adding a function that will reset the Agents to their original position, starting the simulation fresh.
Let's navigate to our Content Browser, create a new Widget blueprint, and name it FlockingUI. Let's open this up and go to the Designer tab to get started, as follows:
- Let's drag Vertical Box into our Hierarchy panel.
- Next, set the slot (Canvas Panel) properties: the Size X value to 350.0 and the Size Y value to 600.0.
- Then, drag a button into our Hierarchy class under Vertical Box. Rename the button ResetButton. Next, set the Vertical Box slot's Padding properties to 75.0 and 25.0.
- Lastly, drag Text into our Hierarchy class under ResetButton. Next, set the text property Text to "Reset":
- Now, let's drag Horizontal Box into our Hierarchy class under Vertical Box. Then, add two more widgets within Horizontal Box, which are called Text and Slider.
- Now, we must duplicate Horizontal Box and its children two more times within the Hierarchy class.
- Right-click and copy Horizontal Box and then paste it into Vertical Box twice:
- After this, we want to rename the widgets we will use for organization purposes. In a sequence, we want to name the first slider AlignmentSlider, the second CohesionSlider, and the last one SeparationSlider.
- Now, in sequence, let's set our text property Text to these three names: Alignment, Cohesion, and Separation. Then, we will set our Padding text property to 7.5.
Now that this is completed, you should have something similar to the following screenshot:
- To update our Global variables, we must create an event from the three sliders. We can start with AlignmentSlider, then go under Events, and then click on the + option on OnValueChanged. Then, when this event is called, we will update the Global Alignment variable in
RollingGameMode. - Now, we must do this for the other two sliders—CohesionSlider and SeparationSlider—with the respective global value:
- Let's focus back on the Designer tab of this user widget. Then, click on the ResetButton event we made in previous steps.
- We want to go down in Events and click on the + option on OnPressed. This will give us the event we just created.
- Here, we want to pull from the pin and call Get All Actors Of Class. Next, we want the Actor Class value to be Flocking Ball. From there, Out Actors will return all instances of Flocking Ball in the world into an array.
- The last thing to do is pull from Out Actors and call Reset Ball. This will notify all our agents to reset the simulation:
- Now, we must go back to Flocking Ball in EventGraph to add more blueprint code. Find an empty place above the Reset Ball event.
- Right-click and search for Event Possessed. Cast a new controller to PlayerController and then pull from As Player Controller and search for Create Widget. Set the Class pin for this node to FlockingUI.
- Next, we must pull from Return Value and call Add to Viewport. Lastly, we need to show our mouse to the player so that they can interact with the widget.
- Right-click and search for Get Player Controller. Pull from Return Value and search for Show Mouse Cursor.
Comment this area Enable Flocking UI & Mouse Visibility:
Let's compile everything. Click on Save All and go back to our Map. If you hit Play, you should see the agents bounce off the walls they collide. Then, if we turn up the different behaviors, we will see that they begin to affect the direction of our agents.
The following screenshot shows what the level looks like after putting everything together:
