Controlling the Game Flow

In the previous chapter, we completed the core gameplay for Pangaea. To transform it into a fully fledged game, we will incorporate a basic game flow that enables players to go into the game through the main menu and return to the main menu upon exiting the game.

A game’s flow control could be very complex, depending on the game’s design. Many games use a centralized control system, such as a finite-state machine (FSM), to control transitions from one game state to another, but using the advanced control system is outside the scope of this book.

To make it easier to learn the C++ scripting skills to control the game’s flow, we will design and implement a minimum game flow for the Pangaea game. We will do this by covering the following topics:

• Designing the Pangaea game’s flow
• Creating the UI widgets
• Adding networking functions to PangeaGameInstance
• Adding UI widgets to game levels
• Adding the game timer...

Technical requirements

The code for this chapter can be found at https://github.com/PacktPublishing/Unreal-Engine-5-Game-Development-with-C-Scripting/tree/main/Chapter11.

Designing the Pangaea game’s flow

To minimize the complexity of the Pangaea game’s flow, the game is designed to have only one lobby (LobbyMap) and one gameplay (TopDownMap) level. The lobby level shows the main menu, which allows players to choose to play as a game host or a client, whereas the gameplay level is the map on which players fight. Here is the game flow chart:

Figure 11.1 – Pangaea game flow diagram

Based on this flow chart, the next thing we need to do is create the three UI widgets for displaying the main menu, the HUD, and the Game Over window, respectively.

Creating the UI widgets

To create UI widgets, first, select the All | Content | TopDown | Blueprints folder (or wherever you want to place the new widgets in the Content Drawer). Then, right-click in the empty area and choose User Interface | Widget Blueprint from the pop-up menu:

Figure 11.2 – Creating a UI widget from the editor pop-up menu

Now, click the User Widget button to pick the root widget:

Figure 11.3 – Clicking the User Widget button to create the widget

After picking the root widget, you should see a new item named NewWidgetBlueprint in the folder:

Figure 11.4 – The new widget blueprint

Rename the new widget to the name you want – I will choose BP_LobbyWidget. Then, repeat these steps and create two more widgets called BP_HUDWidget and BP_GameOver.

Now, let’s edit these widgets’ settings.

Creating BP_LobbyWidget

With BP_LobbyWidget...

Adding networking functions to PangaeaGameInstance

Before we add these functions to APangaeaGameInstance, it is important to explain why we must add these functions to this class but somewhere else.

We know that GameInstance only exists on the client side and that the ButtonHost, ButtonJoin, ButtonLeave, and ButtonLobby buttons are pressed by players when they are playing the game on their end, so it makes sense to implement those functions that allow players to host, join, and leave games on the client side.

Now, let’s open the PangaeaGameInstance.h file and add the following code to declare the functions in the ApangaeaGameInstance class:

public:UFUNCTION(BlueprintCallable, Category = "Pangaea")
  void StartListenServer();
  UFUNCTION(BlueprintCallable, Category = "Pangaea")
  void JoinAsClient(FString IPAddress);
  UFUNCTION(BlueprintCallable, Category = "Pangaea")
  void LeaveGame()...

Adding UI widgets to game levels

UI widgets can be created and added to the viewport of the current game level, but the preferred place to create UI widgets is in Level Blueprints. So, click on the List of World Blueprints button on the toolbar and choose Open Level Blueprint to open and edit the Level Blueprint:

Figure 11.12 – Opening the current Level Blueprint

Next, open LobbyMap and edit the Level Blueprint as follows:

1. Search for and add a Create Widget node to the graph. The new node’s title only displays Construct NONE at the moment.
2. Select BP_LobbyWidget from the Class drop-down menu. The Create Widget node’s title will now display Create BP Lobby Widget Widget.
3. Add a Add to View Port node and connect the output pin of the Create BP Lobby Widget Widget node to the input pin of Add to View Port node. Connect the execution pins of these two nodes as well:

Figure 11.13 – Creating...

Adding the game timer

The game timer serves the purpose of counting down and restricting the duration of a game session. To make the timer work, follow these steps:

• Introduce a new float variable named Timer into the APangaeaGameState class.
• Ensure that the Timer variable is capable of being replicated to inform clients about changes to the timer’s value.
• Define a C++ Delegate that can be linked to Blueprint events, enabling the execution of an event function whenever the timer’s value changes. This function will update the display for the countdown.
• Create a custom event on BP_HUDWidget and bind the customer event to the C++ Delegate. In the meantime, link the custom event to an event function, which will be responsible for updating the display.
• Count down the Timer variable within the Level Blueprint of TopDownMap.
• Display the Game Over window once the timer reaches 0.

Let’s get started!

Adding the Timer variable to the APangaeaGameState...

Destroying a base defense tower to win the game

To complete the implementation as well as add the IsBase tower’s designation support for the ADefenseTower class, we must do the following:

• Add the IsBase flag to ADefenseTower.
• Modify the Hit function so that it deals with the server and client processes when the tower is destroyed.
• Add the GameWin flag and the OnGameWin function to APangaeaGameState.
• Add OnGameWinLoseDelegate to APangaeaGameState.
• Edit the BP_DefenseTower blueprint to bind OnGameWinLoseEvent to OnGameWinLoseDelegate.
• Show win or lose information in the Game Over window.

So, let’s get started. First, open the DefenseTower.h file and add the IsBase flag to AdefenseTower. Then, add the following code:

public:…
UPROPERTY(EditAnywhere, Category = "Tower Params")
bool IsBase = false;

Next, in DefenseTower.cpp, modify the Hit function so that it deals with the server and client processes when the tower...

Summary

In this chapter, you started by designing the basic game flow for Pangaea and then created three UI widgets called BP_LobbyWidget, BP_HUDWidget, and BP_GameOverWidget. You also learned how to use Unreal’s OpenLevel function to start a listen server, join a game as a client, and travel back to the lobby. Based on knowing that a game instance always exists on the client side, you created the networking member functions for APangaeaGameInstance. By clicking buttons on the user interfaces, players can play the online game by choosing to host a game or join other people’s game sessions and even exit the current game to go back to the lobby.

To add something fun to this game, you added some conditions for players winning or losing the game. The Timer value was used to determine whether the game ends due to a timeout. You also finished implementing DefenseTower by allowing designers to designate any defense tower to be the base tower so that once a base tower is destroyed...