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 and change to the Community tab. 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 and navigate to the Templates tab. Highlight the Battlestation Template. Select it and add it to your hotbar, and close the library.
Place the battlestation in your game world a little way away from where the player starts (to make space for obstacles and other exciting level features).
Preview the game.
Walk your character towards the desk. Interact with the PC by pressing the interaction key. You should see a textbox appear. Congratulations! You win.
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 selecting Close on the interface.
Exit the game preview and return to EDIT mode.
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 the interact button.
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 adds 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.
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.
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.
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 and 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 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;
- The rotateandMoveConfig which we used in the Packages tutorial: Basic Tutorial #1: Packages
- DamagePlayerScript, which affects the health of the Player’s Character. The amount of damage cauwsed by this Entity is editable by changing the value next to Damage in the DamagePlayerScript Properties.
At the moment our DamagePlayerScript has some missing information, as shown by the warning symbol:
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.
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 spins up then stops and changes the direction it spins in, it doesn’t move, and it is still quite easy to reach the Battlestation. Open the Entity Editor for the saw, first disabled the bounce, this means it will spin in one direction. You can also try making it move or rotate in the other direction by using the other properties in the RotateAndMoveConfig Properties to make the obstacle more challenging.
Some initial values to try that seemed to work for me are setting the Rotation End to 720, the Movement End to 300, and the Bounce to enabled. It might be that you want to switch the positive value for a negative one and tweak the values slightly.
Upping The Ante
Once you are happy with the movement and rotation of the saw, you can add additional DamageItem Entities from the templates section of the library, and place them in a new 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.
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 to 10.
Preview the game and allow the timer to run out.
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.
Now close the Entity Editor. Preview the game and allow the timer to reach 00: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; it could be that the game is too easy to complete in the new time limit or the time limit is too tight to reach the desk.
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.
Preview the game and test that reaching the computer stops the time and shows the the winning Widget. Great work!
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:
- 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.
- 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.