Widget Blueprints And Our Tutorial UI

 By: Matthew Steinhardt

The Problem

Creating tutorials for the player that are effective but also not annoying proved to be rather difficult. We knew that we had to give some kind of guidance to new players to show them the controls/objectives of the game. In order to tackle the generic problem of "Show people how to play our game", we would need to come up with some more fine-tuned requirements for what pieces of information we deemed necessary for players to know while playing our game. After talking it over with Yash, we came up with the following:

1. The player should have easy access to a reference of all the controls for our game.
2. The player should be given a clear objective from the moment they press play.
3. The player should have guidance as to where enemies are coming from.
4. The player should be shown how to build towers to defend lanes on their behalf. 
5. The player should be shown how/when to find the ship and purchase upgrades throughout the game. 
6. Tutorial prompts should not be intrusive and should only show up until the player has demonstrated they understand what the tutorial prompt is trying to teach them.
   
   

This rather straight forward list proved to be rather difficult to implement in a way that "felt good". However, I took a crack at adhering to these six requirements, and I believe I made some good progress going into our final month of development work. 

The Solution

The first requirement was already semi-taken care of by Yash's infographic showing the different keybinds and their function. I began making a loading screen view which would display this infographic as well. This would give the player something to look at while the game loads and it would familiarize them with the various actions and key binds. Since the loading phase will likely go by very fast, I added a "click any button to continue" feature. This will allow the player to continue to look at the key binds until they are ready to play!

Before the rest of the requirements could be met, I had to think about how tutorials should be shown to players. The current framework simply showed a box with text at a hard-coded point at begin play. Taking some inspiration from God of War, Yash created some textures to make the UI look much cleaner and more visually appealing. 

These textures would serve to turn the simple box of text into something that would catch the players eye and provide some subtle contextual hints as well. The biggest difficulty was getting things to scale correctly. This was a requirement for dynamic text sizes. Eventually I settled on a layout hierarchy that looks something like this: 

And the final product looks like this:

The text is a Rich Text block, so it will support different styles and images if we want to add visual cues for future tutorials as well. In addition, the icon in the upper left-hand corner can be changed to denote the type of tutorial it is regarding. For example, tutorials regarding using towers will have the tower icon (as shown above) while tutorials regarding upgrades will have a different icon.

After the tutorial UI was looking cleaner, I set out to ensure the tutorials would not be too "in your face" by implementing logic that saves shown tutorials and doesn't show them again. This persists throughout a given save file. In addition, tutorials will hide themselves early if the player performs the action. For example, when a tutorial pops up prompting the player to open the build menu, it will hide itself early if they actually open up the build menu. This proved to be a subtle but important addition in accomplishing requirement #6.