Categories
Basic Tutorials

Basic Tutorial 3: UI

Preface

Until this point, the tutorials have focused on creating gameplay that is possible within Crayta, and have not really considered the game objectives. I believe a game without an objective is more like a toy, although if you really want to geek out about the definitions of play, games and toys, checkout Chapter 3 of Jesse Schell’s The Art of Game Design: A Book of Lenses.

In order for you to give your players an objective, there needs to be a way of communicating to the player how close, or far away, they are from reaching the objective, and notify them when they have successfully accomplished the objective (or plummeted to their death). This is when the UI (user interface) and HUD (head’s up display) come in handy.

Introduction

Firstly, let’s clarify the different terms that we are using.

Heads-Up Display

The HUD describes the graphics and text that are overlaid on the game screen, usually to communicate the current state of the game to the player whilst they are in the middle of playing the game.

User Interface

The UI is a term often used in game design to describe all the interaction and information exchange that occurs between the player and the game. It’s primarily concerned with the menu systems, although it’s occasionally used as an umbrella term to talk about the HUD as well.

This tutorial will focus on creating a game with a “Heads-Up Display” to add depth to a game level. Adventure games such as “Temple Run” or the “Uncharted series” often require the player to overcome obstacles, preferably without dying and sometimes under time-pressure. These are aspects of the game that need to be communicated through a well placed HUD, so for this tutorial, we will be making an adventure game!

If this is your first time using Crayta, we recommend starting from the first tutorial in this series of basic tutorials. Otherwise, let’s get started.

Create Your Game

Create a new Empty Game and call it “ Danger Dash”. 

The objective of Danger Dash is to race through an obstacle course, dodge the hazards and reach the end before the timer runs out. 

Open the Library (Y) (or ‘L’ on keybaord) and change to the Community tab (Y). Find and install the Package “Danger Dash”. If you have any difficulties with this step, revisit the Packages tutorial to get a rundown on installing Packages in Crayta (found here: Basic Tutorial #1: Packages).

The “Danger Dash” Package gives you everything you need to make a classic adventure game with a modern twist. 

Winning

This tutorial follows a similar pattern to the puzzle game made in the previous Events tutorial, by starting with how the player wins, and working backwards to add difficulty to that journey.

To win, the player must interact with an instance of the “Battlestation”  (also called a desktop PC) that is in the Package. You will start by adding the Battlestation to the game world.

Open the Library again (Y) and use Right Trigger (RT) and Left Trigger (LT) to navigate to the Templates tab. Use the D-PAD to highlight the Battlestation Template. Press A to add it to your hotbar, and press B to close the library.

Add the Battlestation Template to your Hotbar.

Place the battlestation in your game world (RT) a little way away from where the player starts (to make space for obstacles and other exciting level features).

Place a Battlestation in your game world.

Preview the game by holding D-PAD DOWN. 

Walk your character towards the desk. Interact with the PC by pressing X. You should see a textbox appear. Congratulations! You win.

The win screen – the object of Danger Dash is to get to the computer.

This textbox is a user interface entity, called a Widget. Widgets can be used to communicate a variety of information to the player as you will discover in this tutorial. This Widget requires the user to press Close before it will be removed from the screen. Close the Widget by using the thumbstick to control the mouse and click the button by pressing A.

Exit the game preview and return to EDIT mode by holding D-PAD DOWN. 

Tech Tips: Chain of Events

It is not immediately clear how this works, so this tech tip aims to break down exactly what is going on.

There is a script attached to the ‘computer1’ Entity (a child of the Battlestation Entity) which displays the textbox and updates the text. In EDIT mode, look at the computer and open the Entity Editor by pressing X.

This Entity has a ShowWidget script, which can be used to show and hide Widgets

When a Player interacts with the Entity, the OnInteract Event is fired, and calls a function within the ShowWidget Script that updates the textbox and makes it visible. You can see this function in the Entity Editor next to the OnInteract dropdown.

This chain of events happens very quickly, and results in the textbox appearing. Behind the scenes, there is a series of logical steps which are:

Creative Control: Tell A Story

We can use this same Entity in lots of different ways by changing the mesh. It is also possible to change the text displayed if you use a keyboard, which means we can add lots of story elements to the game world.

Try creating a narrative that the player can discover by interacting with different entities. Do you want players to read your messages in any order, or is there a path you want them to take?  Get creative, and play with your level design to direct players to specific points of interest. 

Let’s make this game a bit more difficult.

Adding HUD Widgets: Health

Widgets don’t have to only appear when the player interacts with things, they can be always onscreen and form the HUD. 

Open the Library, navigate to the Templates tab and add the PlayerHealthLocator to your Hotbar. Close the Library.

Add an instance of the PlayerHealthLocator Template anywhere to your game world.

When you add PlayerHealthLocator, you should see that only a Locator icon appears, without a Prop or any kind of physical object.

Tech Tip: A Locator Entity

The PlayerHealthLocator template is comprised of a Locator with some Scripts attached. 

A Locator is a type of Entity that doesn’t have a Prop or Sound or any physical body. A Locator represents a single point in the game world and can be used to specify a position, such as where the player will spawn. 

We are using a Locator here so that we can add a Script that affects the game world without requiring a physical Entity. This is essential for us to be able to add HUD elements without using the Advanced Editor.

The Script that is attached to PlayerHealthLocator runs automatically when the Player starts the game, and add the Health widget to the Player’s view. To view the Widgets that are attached to the PlayerHealthLocator, look at the PlayerHealthLocator Locator icon and open the Entity Editor by pressing X.

Open the Entity Editor for the PlayerHealthLocator.

Two textboxes appear on the screen. The Health Widget in the top-left corner, and the Game Over Widget in the center of the screen.

The Game Over Widget will only appear in the game when the player’s health reaches 0. 

The Health widget shows the players health and remains visible throughout the game. 

It is possible to change the starting health value next to the “health” property in the basicPlayerHealth Properties in the Entity Editor by navigating the Entity Editor in the normal way. In this way we can give the Player more or less health, and make the game harder or easier. For now, leave this value as 100.000.

You can change the value of a player’s health using this property.

Press X to close the Entity Editor.

Tech Tip: Clients and Servers

Crayta is a multiplayer game, which means that there can be more than one player in the game world at any time. As such, the game needs to be synchronised so that events happen for all the Players at the same time. For example, if you blow open a bank door, the same door should blow open for all the Players in the game at the same time.

To synchronise the game for all the Players, the game runs on a server, which is a computer somewhere in the world that is connected to the internet. A Player’s Stadia instance is called a client

The Crayta Servers manage the communication between the clients to ensure the game stays consistent for all players.

Whenever a Player does something in the game, the client sends that information to the server. For any event, whether caused by a Player or an Event in the game itself, the server sends the updated game information to all the clients and the game remains synchronised for the Players. 

To make a unique Health Widget for each Player, the basicPlayerHealth Script keeps track of the health values of each of the Players.

Preview the game by holding D-PAD DOWN. You should see the Health Widget now appear in the top-left corner of your screen.

Adding Hazards

So far so good, but the Health system won’t do anything unless there is some kind of peril which impacts the players health. We will use the perilous DamageEntity Template lurking in the Library to make this game a bit more dangerous. Open the Library, navigate to Templates and add the DamageEntity Template to your Hotbar

Place the DamageEntity in your game world, as an obstacle between the player and the Battlestation.

Place the DamageEntity between where the player starts and the Battlestation.

Open the Entity Editor for the DamageEntity you have just placed in your game world.

The DamageEntity Template has two scripts attached; 

  1. The RotateAndMoveScript which is covered in the Packages tutorial: Basic Tutorial #1: Packages 
  2. DamagePlayerScript, which affects the health of the Player’s Character. The amount of damage caused by this Entity is editable by changing the value next to Damage in the DamagePlayerScript Properties.
You will need to set the player health locator in the properties as playerHealthLocato

At the moment our DamagePlayerScript has some missing information, as shown by the warning symbol:

The warning symbol tells us that some information is missing or incorrect.

This is telling us that the DamagePlayerScript does not know who to notify about the damage information. Click the down arrow and set it to World->Terrain->playerHealthLocator1.

Use D-Pad + Right to expand the World and terrain and select PlayerHealthLocator1.

Preview the game and test the DamageItem by walking into the circular saw.

Ouch! You should see your Health reaches 0 (rather quickly) and the Game Over Widget appears.

You may notice that the circular saw is spinning the wrong way, it doesn’t move, and it is still quite easy to reach the Battlestation. Open the Entity Editor for the saw, and make the saw spin in the correct direction. You can also try making it move, and bounce, using the other properties in the RotateAndMoveConfig Properties to make the obstacle more challenging.

Upping The Ante

Once you are happy with the movement and rotation of the saw, duplicate the DamageItem Entity, and move it to a separate location. Change the values in the RotateAndMoveScript Properties to alter the speed and direction of the different saws. Use the voxel tools to create a room and force the Player to run a gauntlet of circular saws to reach their goal.

Hard mode: ENGAGED.

Creative Control: Peril

Remember, you can also change the mesh of the saw, to make different dangerous items, and edit the level to theme the game in any way you like.

Adding A Timer

Just in case a multitude of spinning wheels of death isn’t enough, you can give your Players a bit more pressure by adding a ticking clock.

Open the Library, and add the TimerLocator Template to your Hotbar. The TimerLocator is another HUD item based on a Locator.

Add this to the game world at any location.

The Timer Widget will display the same countdown for all Players in the game. The Widget is already set to be displayed to everyone, and will be added to each Player’s screen when they start the game.

You can edit the number of seconds on the timer by changing the Length value in the SimpleTimerScript Properties. 

Change the TimerScript Length Property from 100.000 to 10.000.

Preview the game and allow the timer to run out.

After changing the duration of time for the Timer to 10 seconds you should see the timer count down 10 seconds at the top of the screen.

The timer completing doesn’t cause any game actions. This is something you need to rectify.

Exit the game Preview mode and open the Entity Editor for the TimerLocator once more.

In the TimerScript Properties you can see that the OnComplete field is empty. This means that nothing happens when the timer reaches 0:00. For this game, when the timer reaches 0:00, a Game Over message should be displayed. There is a Game Over Widget already attached to the PlayerHealthLocator, and the ShowWidget Script has the functionality you need to show the GameOver Widget, you just need to hook it up to the OnComplete Event. 

Use the “+” next to OnComplete to set the Entity / Script / Event that performs this action.

Set the Timer’s OnComplete Event Listener. Select the PlayerHealthLocator Entity. Set the Event to the ShowGameOver() function on the basicPlayerHealth Script attached to the playerHealthLocator.

Press X to close the Entity Editor. Preview the game and allow the timer to reach 0:00.

Preview the game and allow the timer to reach 0.00

You should see that when the timer runs out, the Game Over Widget is displayed. Great! You can make Widgets appear and disappear like this as long as there is an associated Script with the appropriate functionality. 

Return to EDIT mode. Set the TimerScript duration Property to 100.000. Test your game to ensure that the level is possible. Tweak the damage caused by the DamageEntities and the TimerScript duration to achieve a good level of difficulty.

Stopping The Timer

The objective of this game is to reach the Battlestation before the time runs out, and without our health reaching zero. So far the game meets these requirements, although the timer continues to countdown even if we get to the computer in time (and results in showing the Game Over Widget when the timer runs out). The timer needs to stop when we interact with the Battlestation.

Make sure you are in EDIT mode and open the Entity Editor for the computer1 by looking at the Battlestation computer. Add the StopTimer function as an additional Event Listener to the onInteract Event on computer1. You can find it on the TimerLocator Entity on the TimerScript Script.

Add StopTimer() as an additoinal OnInteract event.
Add the StopTimer event to the onInteract event on the Battlestation.

Preview the game and test that reaching the computer stops the time and shows the the winning Widget. Great work!

Hacking the computer before the time runs out!

Recap

Well done! You’ve successfully completed this tutorial and made a bonafide adventure game. In this tutorial you have looked at:

  • The difference between a UI and a HUD
  • A popup Widget that appears when you interact with something in the game world
  • The difference between the Client and the Server
  • Player health 
  • Dangerous items that can hurt the player
  • Timers and timer events that add time pressure to the level

Adding Polish

Now that you have mastered the basics of adding UI elements to the game world, and how they can be used to display different types of information to the Player, you can take these ideas further to add more depth and excitement to your game. Here are some possible activities you could try to explore the UI in more depth:

  1. Add a Battlestation to the start of the level. Remove the Story widget, and start the timer when the Player interacts with it – you will need to uncheck the Autostart Property of the TimerScript.
  2. Make the game a Banana Run game where the Player must dodge bananas.

As you can see, there are even more possibilities now that you have Packages, Events and Widgets at your disposal. These tools can be combined in lots of different ways, and make Crayta a very versatile and comprehensive game engine.

Next up: Putting It All Together

Now that you have got to grips with some of the fundamentals of the Crayta editor your games can start getting a even more exciting. The next tutorial will looks at extending a ready-made Capture The Flag level, and turning it into a intense warzone. Hold onto your guns, we’re introducing COMBAT.

Basic Tutorial 4: Combat