Categories
Basic Tutorials

Basic Tutorials 4: Combat

Preface

There is a huge variety of games that aim to achieve a whole range of experiences and enjoyment. The idea of combat in games is a simple, primal addition, but in adding combat to a game a new element of choice is added, and a chance to outwit (and outgun) your friends. 

Combat is quite often a central aspect of gameplay for lots of different reasons, and isn’t always the run-and-gun style that it seems for non-gamers. It can be used to tell a story like in Last Of Us or it can present puzzles like in Legend Of Zelda or Shadow of the Colossus. Combat can also be delivered in lots of different ways as well. For example, Silent Hill’s creepy aesthetic and tense atmosphere or Call Of Duty’s action-packed warzones, or it can be made into a competitive team sport such as in Overwatch, CS:GO or Fortnite, each of which require a team to have excellent communication, teamwork and tactical skills.

Whatever the reason for including combat in your game, there are a few simple techniques that you can use to make your combat compelling and engaging, and to give your players something more in-depth than just point and shoot. Let’s get into it.

Introduction

This tutorial will look at leveraging some of the skills you’ve learned from the previous basic tutorials, and add a premade game type into the mix to put your own stamp on a tried-and-tested game mechanic. It will look at:

  • The “Capture The Flag” game type
  • Adding destructible and indestructible terrain
  • Level editing to create intense battles with guns and traps

Create Your Game

Under the CREATE A NEW GAME menu, find the Team CTF (Capture The Flag) game template. Select this template, and select the Start: Team CTF starter map. Notice that this time we will not be using the Empty Game. Give your game a name, choose a thumbnail image and enter the editor.

Use the Team CTF game template for this tutorial.

Welcome to Capture The Flag!

Before we make any changes, Preview the game by holding D-PAD DOWN. 

You will see that there are two flags, and two coloured zones. Players start in a “Lobby” as they wait for all Players to connect. When the Lobby time limit reaches 0, the game begins.

The object of the game is to capture the opposing team’s flag by running into it, and then bring it back to your team’s coloured zone. Each time you do this, your team will score one point. The team with the most points when the timer reaches 0 wins. If a Player dies, they will respawn at their team’s base. 

The game is quite simple at the moment, let’s mix things up.

End the game preview and ensure you are in Basic Editor mode.

Moving The Bases

This section concerns moving the bases to a different location on the map. If you don’t want to move the bases, and are happy with where they are, you can skip this step, but it’s good practice to fully configure your own game.

A base is comprised of the following Entities:

  1. A coloured floor – This indicates to the player which base is which. The red and blue plastic floors are not destructible, so that the flag is always accessible.
  2. A flag – The flag is a Prop Entity. When a Player collides with the flag they “pick it up” and carry it on their back. To “capture the flag”, the Player with the flag must collide with their own team’s flag in their own base. When they have captured the flag, it is immediately returned to their opponent’s base, ready to be captured again.
  3. A locator – The locator in the base is where Players are respawned when they die. 

To move a base will take three steps:

  1. Create a new floor area which will specify the new base area
  2. Move the flag and respawn locator to the new base
  3. Delete the old floor area

Let’s get started.

Look at the floor and press X to open the Entity Editor. This will show you the Entity Editor for your terrain, and it gives you a good opportunity to see an overview of your map.

You open the Entity Editor for the Terrain and this will give you a good overview of your level map.

Open the Entity Editor for the Terrain regularly, to get an overview of how your level is shaping up. For now, press B to exit the Entity Editor.

Press Y to open the Library. Navigate to the Voxels tab. Highlight the Plastic Dull voxel and press A. You will see that you have a choice of colours of Voxel to add to your Hotbar. This game has been setup to use Red and Blue, so stick to these colours for now. Highlight either the Red or Blue Plastic Dull Voxel and press A to add this Voxel to your Hotbar

Locate the Plastic (Dull) Voxel and press A.
Add the red or blue plastic Voxel to your Hotbar.

Use D-PAD UP to change the Voxel tool to a 1x1x1 block

Change your Voxel tool to a 1x1x1 block.

Press R2 to place a Voxel and create a new base somewhere else in the level by drawing a low platform. I have chosen to position the bases in each corner of the map. Do this for both the Red and Blue teams.

When you have finished, press RB to select an empty Hotbar slot. Look at the floor and press X to open the Terrain Entity Editor again. You should see you now have two bases on your map – the original two, and two new ones.

You should now see 4 bases marked on the map. The old ones, and the new ones you have added.

Press X to close the Entity Editor.

Now you need to move the flags onto your new bases.

Move towards a flag and, whilst looking at it, press X to open the Entity Editor.

You should see that the flag entity has a flagSpawnerScript attached to it. Each flag has a different team. By default, Team 1 is on the Blue floor, Team 2 is on the Red floor.

You have two options to move the flag. You can pick the one that suits your style of level making:

Option 1: Numerically Move The Flag

You can edit the position data in the Entity Editor for the flag. This method is better for level designers who like to be very precise.

To do this, ensure the Entity Editor for the flag is open. Use the D-PAD to navigate to the “position” property box. These three numbers represent the coordinates of the flag, and specify its position in the world. Adjusting the first two boxes will move it’s position on the ground, whilst the third box changes it’s vertical position.

Use the position property boxes on each flag to move them to the corresponding team base. To do this, highlight one of the first two position property boxes and press A. Use D-PAD LEFT/RIGHT to change the numbers and move the flag.

If you hold RB whilst pressing D-PAD LEFT/RIGHT you can increment the numbers in multiples of 10, and move the flag faster.

Move the flags to the new team bases.

Press A to finish editing a property box. Press X to close the Entity Editor when you are happy with the flags position.

Option 2: Pickup The Flag

Alternatively, you can pickup the flag and move it to a different location. This method is better for freeform level designers.

Look at the flag with the Entity Editor closed, and press RT to pickup the flag. Head over to your new base location, and place the flag by pressing RT again. If you want to cancel the move and return the flag to it’s original position you can press RB (this also selects an empty slot on your Hotbar).

Once you have moved the flags to new bases, the last Entity to move is the Locator, which is the spawn point for the Players on each of the teams. Use the same technique you used to move the flags to move this Locator.

Open the Entity Editor for each flag and make sure that Team 1 is on the Blue floor, Team 2 is on the Red floor. Close the Entity Editor.

The last step is remove the old bases. To do this, you can paint the red outline of the base with the Technical Grid Voxel.

Press Y to open the Library. Navigate to the Voxels tab and add the Technical Grid Voxel to add it to your Hotbar. Close the Library.

Press D-PAD UP to cycle through the Voxel tools until you see the Fill tool. Press R2 to use the Fill tool on the previous base outlines.

Use the fill tool on the old bases to remove them.
Once you have moved your bases you will have a larger combat area.

Adding Walls

To make a more compelling level it is a good idea to add some walls so that the opposing teams can’t just stand and shoot each other. You can use Voxels to create obstacles on your map, which players can use to hide behind, or which cut off certain routes to the opponents flag. This “cover” also creates opportunities for teams to outflank (and outwit) each other. 

Choose a Voxel to be your walls. The walls are destructable by default, so select a Voxel that is usually considered destructable in shooting games. Press D-PAD UP to increase the size of the Voxel tool, and use large blocks to create a general shape to your level. You might find it easier if you double jump to enter flying / non-clip mode. 

Try to compose a variety of spaces. Create some wide corridors and some narrow corridors, some small areas, and some bigger areas.

You can choose if you want to surround your level perimeter with a wall. If you choose not to have a wall then if your players fall off the side they will fall to their doom.

Mark out your level and create a variety of cover with the Voxel tools. Don’t worry about detail for now.

Remember you can get an overview of your level by opening the Entity Editor for the Terrain.

Creative Control: Combat Situations

Your level should offer rich opportunities for players to battle in a variety of ways You could choose between short, medium and long-range combat situations or a mixture of all three. 

Creative Control: Level Design

There are lots of ways to design a level. You could use a pen and paper to sketch some ideas for your level, or build structures freeform in Crayta’s EDIT mode, and devise a level bit-by-bit. It’s your choice! 

Think about how your level could be structured. Make sure to include points which might be suitable to spawn resources such as different guns.

Also consider whether there might be perilous areas of your level, traps that either team can take advantage of to gain the upper hand. 

Once you have given your level a general shape, you can tweak some of the spaces by adding and removing smaller Voxels to give opportunities for more or less cover in certain areas. Experiment with different sizes of the Voxel tools.

Start to add detail with smaller groups of Voxels, and give your level some interesting spaces.

Creative Control: Game Balance

Remember there are two teams on the field of battle at once, so try to keep in mind how to make sure that the game is fair for both sides. Try to give each time an equal number of good positions, and build in weaknesses to dominant areas of the map to encourage teamwork and tactical thinking.

Indestructible walls

Preview your game. If you shoot any of the Voxels you placed then you will see they are destroyed. If you shoot either the Red or Blue team floors, you will notice that they are indestructible. This is a good thing, because otherwise a team could destroy their own floor and the flag would no longer be accessible, ruining the game.

You can turn off destructable voxels by looking at the floor anywhere and unchecking the “damageEnabled” property.

As you will be adding a mixture of destructable and indestructable cover you should leave damageEnabled checked.

Creative Control: Destructible Environments

Having destructible cover is great for forcing players to think on their feet, and adjust their tactics in the middle of a gunfight, but having indestructible areas can make map control more important to achieve victory.

You can create your own indestructible Voxels.

Press Y to open the Library and choose a Voxel that is unlikely to be damaged, for this tutorial we have used Metal Steel. Build some cover in your game using the Metal Steel Voxel.

Build some metal walls that will be indestructible cover.

Once you are happy with your indestructible cover, open the Entity Editor for the Terrain.

Look at the floor and press X to open the Entity Editor for the Terrain.

At the bottom of the Entity Editor is a button “Add to Entity”. You can use this button to add Scripts and UI Widgets to an Entity. Highlight Add to Entity and press A.

Click the Add to Entity button add the bottom of the Terrain Entity Editor.

Select Add > Script > voxelHealthScript.

Select Add > Script > voxelHealthScript.

The voxelHealthScript allows you to tell Crayta how much damage different Voxels can take before they are eliminated. You can also set a default value here.

Now, use the Add to Entity button again to add the voxelHealthValueScript.

This Script enables you to determine the health of a specific voxel (how much damage it can take before it is eliminated). Once you have added it to the Entity Editor select Metal (Steel) Voxel in the voxel dropdown, and set the health to 0 (use LEFT D-PAD to reduce the value).

Select Metal (Steel) and set the health value to 0.000.

Press X to close the Entity Editor. Hold D-PAD DOWN to preview the game and test that your Metal Steel is indestructible by shooting it.

Try shooting the Metal (Steel) Voxels. Notice how the steel voxels do not get damaged by bullets.

Edit your level so that you have a mixture of destructible and indestructible cover and remember to play test it regularly so that you can see how your level editing changes the dynamic of the game.

Creative Control: Voxel Health

A voxel doesn’t have to be destroyed in one shot. Just like we decreased the Voxel Health to 0.000 to make it indestructible, you can increase the Voxel Health to take 2 bullets, or 10 bullets! The Automatic Rifle default damage is around 150, so a Voxel Health of 150 or less would take one shot (1 bullet x 150 damage = 150), 300 or less would take 2 shots (2 bullets x 150 damage = 300) and so on.

More Guns Please

You can find many different weapon packs by visiting the Store in the Library.

Press Y to open the Library. Press Y again to open the Community tab. Find the Shotgun Package within the store, highlight Install and press A to install the Package.

Return to the Library by navigating back to the Library tab, and open the Templates.

You should see a new template has been added to your Templates, called Shotgun. Select the Shotgun Template from the Library and place it in your scene.

Open the Shotgun Entity Editor and find the pickupSpawnerScript Properties. Chane the Properties to match the following:

Change the highlighted Properties on the pickupSpawnScript attached to your Shotgun.

After making these changes, navigate to the top of this Entity Editor and make sure to select Copy To Template.

Copy To Template means that when you place another Shotgun somewhere else in your game it will keep the same pickupSpawnerScript Properties.

Preview the level to try the Shotgun. Walk over the gun to pick it up.

Preview the level. Pickup the Shotgun and blast some stuff.

Return to the game editor.

You can switch between the guns in-game by pressing RB and LB.

You may disagree with some of the values of the Shotgun (does it cause too much damage? Is it too accurate?). You can fully customise each gun to behave differently by using the Entity Editor and changing the Properties on the gunScript. Remember to press Copy To Template after making any changes.

Press Copy to Template to update the template of this gun and make the changes take effect.

Creative Control: Risk and Reward

Based on your experience with the new guns, consider where might be a suitable place to put them in a level. You may decide that the base of each team has a library of weapons available, or that one team has only shotguns whilst the other have only handguns. 

Alternatively, you could put less powerful guns in easy to reach places, and more powerful guns in dangerous places, such as the middle of a crossfire, or somewhere requiring serious parkour skills. 

Adding this risk and reward can give the game more depth, as the teams will need to weigh up arsenal resources versus the risks to team members, and ultimately decide which will help them win the game.

Level Peril

What’s more exciting than two factions battling it out in intense combat? When that combat takes place in a hostile environment. Sometimes, it’s the situation that can turn the tides of battle, and teams can use natural dangers to their advantage, as distractions or as danger themselves.

Open the Library and press Y to navigate to the Community. Find and install the Basic Combat Traps Package. Return to the Library and add the Laser Spikes Template to your Hotbar.

Place the Laser Spikes somewhere in the level. Remember, you can rotate the Entity to make laser walls also.

You can also try placing multiple Laser Spikes, and creating no-go areas or dangerous corridors that are asking for escalating gun battles. Players can shoot through the Laser Spikes, but can’t get past them, so they can offer some exciting advantages to clever Players. 

Players can shoot through Laser Spikes, but can’t travel through them.

Preview your game. Test the traps. You should find that they cause your player damage. 

Return to the EDIT mode.

Touching the Laser Spikes will cause players damage, and knock the player back. You can change the amount of damage and knockback that the traps have. In EDIT mode, open the Laser Spikes Entity Editor. The properties that can change the damage that the Laser Spikes cause can be found in the passiveDamageScript properties. 

Using the Entity Editor, you can change the amount of damage caused to the player, how much it knocks the player back, and what Sound effect will play when a player collides with the trap. 

Experiment with the properties of the Laser Spikes, and adjust them to suit your game. You can make a trap deadly, by increasing the localDamage to 1000! You can also change the Mesh Asset to suit your theme. Maybe your game features a highly lethal coffee table, or a not very dangerous banana which launches players across the map.

Turn your laser spikes into a dangerous art-deco coffee table if you like.

Recap

Congratulations on completing the last of the Basic tutorials. In this tutorial, you have discovered:

  • Remixing your own version of a Capture The Flag game
  • Designing a level for exciting and dynamic combat
  • Adding destructible and indestructible terrain
  • Adding guns to a level
  • Adding traps to a level

Adding Polish

You have started designing a level for combat, but there are endless opportunities for changing the environment in your game, and making a really exciting and challenging level with plenty of opportunities for strategy.

Using the level you have started, you could try and include some of the following ideas:

  1. Improve the theme of the game to start building a sense of story. Why are these teams fighting? Why do they need to capture the flag? Even the most combat focused shooting games have some kind of narrative.
  2. Try making your level have high areas and low areas, and experiment with three dimensional tactical advantages.
  3. Install the Super Smash ‘n’ Grab package, and place the flags in Bank Vaults, with their own key. Now Players will need to find the key, or blow open the doors before they can start to win points.
  4. Give your game level more variation by adding some of the premade Mesh Assets that fit your theme. You can also turn on physics on the Mesh Assets, which means that players can move them around and give themselves more cover or hiding spots.

Next up: Advanced Editor Mode

Congratulations on completing all of the Basic tutorials. Hopefully you feel inspired to experiment with some of the other game modes, and get creative with the tools at your disposal.

To really take things to the next level, you can try the Level Editor in Crayta with a keyboard and mouse. In the Advanced Level Editor you will have an opportunity to code within Crayta and use scripts to customise the interactions in your game.

There are a variety of guides which you can use as a reference point for using some of the Advanced tools in Crayta.

Familiarise yourself with the Advanced Level Editor in the Advanced Workflow Tutorial.

Learn some basic scripting in the step-by-step Code Tutorials.

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

Categories
Basic Tutorials

Basic Tutorial 2: Events

Preface

Every game needs user interaction. Without interaction, games lack their most powerful ingredient – player choice. In this tutorial, we will start to add more interactivity to our games using an event-driven system. 

In the context of a game, an Event could be anything that changes in the game world. It could be the user pressing a button on their gamepad, a countdown timer reaching zero, or two enemies colliding. There are three main types of Event :

  • User interface – the user has interacted with something in some way.
  • Timer – a timer has reached a value.
  • System – an embedded system (such as the physics engine) has fired an event.

When an Event occurs in our game, we can use that event to cause a reaction. This tutorial will be focusing on adding functionality to our game that causes a response to an Event, and changes the state of the game.

Introduction To Puzzle Games

Puzzle games can be as elaborate and exciting as you like. They can be made more complicated by giving obscure clues and adding layered objectives, or easier by giving more clues and reducing the number of objectives.

For example, a puzzle game could be as simple as “Open the door”, where the user just opens a door. Or it could be a bit more complicated. For example, if the door needs a key, but the key is locked in a vault, and to get in the vault you need the code which is written on the inside of a teapot which you need to smash with a hammer, but the hammer is positioned a bit too high to reach so you need a box to stand on…you get the picture.


An example of an easy puzzle game. The player has one simple puzzle that stands between them and the objective.
A more difficult puzzle game would have several puzzles between the player and the objective. You could also increase the difficulty of the puzzles, but make sure the player can still solve them!

This tutorial will guide you through making an easy puzzle game, and then add more obstacles to make it harder.

Create Your Game

Create a new Empty Game and call it “Super Smash-n-Grab”. 

When you enter the game, open the Library by pressing Y

Press Y to open the Library and press Y again to open the Community tab. Find and install the Package “Smash-n-Grab Tutorial (working)”. If you have any difficulties with this step, revisit the Packages tutorial to get a rundown on installing Packages in Crayta.

Navigate to the Store, and install the “Smash-n-Grab Tutorial (working) Package.

The Smash-n-Grab Tutorial (working) Package gives you everything you need to make a simple heist-themed puzzle game.

First you need to add your bank vault. Open the Library (press ‘Y’ again), use R2 and L2 to navigate to the Templates tab. Use the D-PAD to highlight the Bank Vault Template.

Press “A” to add it to your Hotbar

Add a BankVault Entity to your game world.

Close the Library by pressing “B”. Add an instance of the bank vault Template to your world. Find a good location and press R2 to place it. Press RB or LB to select an empty Hotbar slot to make it easier to navigate the scene.

Gaining Entry: Unlock The Door

By default, the door of the Bank Vault is locked. Before we Preview the game we need to unlock the door and then link the keypad to the door to be able to open it.

Start by looking at the door, and open the Entity Editor by pressing X. If you navigate to the bottom of the Entity Editor you can find the Script: LockedDoor Properties.

Aha here is the first problem. You can see that the “locked” Property is checked, which means the door is currently locked. Uncheck the locked checkbox.

Open the Entity Editor for the Bank Vault door.
Uncheck the “locked” Property checkbox.

Preview the game by holding the DOWN D-PAD.

Interact with the keypad next to the door by looking at it and pressing X. The door should swing open.

Interacting with the keypad should make the door swing open.

Seems pretty easy to get in the bank vault, right? This is because the door is unlocked by default. Let’s turn up the difficulty of this puzzle game. Return to the game editor by holding DOWN D-PAD.

Adding An Obstacle

In Edit mode, look at the door and press X to enter Entity Editor.

Edit the Properties of the vault door.

Make sure you are editing the door by checking the name at the top of the Entity Editor – it should be “BankVault-VaultDoor”. Return the Locked Checkbox to its Locked state by highlighting the box and pressing A.

Lock the bank vault door again.

You have just created a puzzle. Now we need to give the player a way to solve it!

Gaining Entry: Detonation

This tutorial will cover blowing open the door with TNT first, and then using a key to open a different door. 

Creative Control: Player Choice

Games like Hitman and Metal Gear Solid strive to have multiple solutions to each problem. Giving your player choice forces them to decide, makes the journey more interesting and makes the game feel less linear.
Jam some other ideas on other ways to get past a door. For example, you could use the voxel tools to create a hidden tunnel under the vault, or add a keycard that unlocks the keypad, or you could blow the door open with TNT! The only limit is your imagination (and, let’s face it, physics). 

Open the Library and navigate to Templates.

Open the Templates tab.

Switch to an empty slot on your Hotbar and add the TNT Template to your Hotbar.

Place the TNT on the door of your bank vault.

Put some TNT on your bank vault.

Open the Entity Editor for the TNT and change the position and rotation Properties to fine tune the position of the TNT. It should be flat against the door.

Fine-tune the rotation and position of the TNT.

Open the Library again and open the meshes tab. Add the TNT Plunger to your Hotbar.

Add the TNT Plunger Template to your Hotbar.

Place the TNT Plunger nearby, so you can see the door when you press the plunger. 

Place the TNT Plunger a short distance from the vault door.

Preview your game and make further adjustments as required.

If you try interacting with the plunger in Preview mode you will find that nothing happens. This is because we haven’t told the TNT Plunger to listen to any events yet. We need to tell the TNT Plunger what to do when the user interacts with it, otherwise nothing happens. Return to edit mode and we will do just that.

Tech Tip: Events Terminology

Listening, triggering, handling…these are terms used by game developers to discuss Event systems. Using the correct names is super useful when you need to communicate your vision to other members of your game development team.

Event trigger/ Event fire: When an event occurs, we say that the event has “fired”. The thing that caused the event to fire is called the “trigger”. 

Event handler: The code that is executed due to an Event being fired is called an “Event handler”. 

Event listener: An event listener links an Event Handler to an Event. In some game engines we would need to write this in manually, but Crayta manages our Event listeners for us. 

In edit mode, look at the TNT Plunger and press X to open the Entity Editor

Edit the TNT Plunger Properties in the Entity Editor.

Use the D-PAD to navigate to the bottom of the Entity Editor to find the onInteract Property.

Crayta Entities automatically listen out for events that might affect their state in the Game World, such as colliding with another Entity or the player interacting with an it. You can make things happen by adding functions to the event property boxes. 

There are 2 possible events that we can listen for on the TNT Plunger:

  • onInteract: The player looks at this entity and presses X
  • onCollision: The player’s character touches this entity

Tech Tip: Functions

A function is a chunk of code with a single identifier. Programmers group chunks of code into functions so that they can be re-used easily, and to help organise the code into a logical pattern. A single script can have multiple functions. 

A function identifier will usually describe the intention of the code within the function. For example, a function with the identifier “makeInvisible()” should make an entity disappear, a function with the identifier “explode()” should make an entity explode. To run a function, we “call” it.

For example, here is the function within the LockedDoor script which “destroys” the door:

function

LockedDoor:DestroyDoor() self:GetEntity().collisionEnabled = false self:GetEntity().visible = false

End

If you read the code above, it states “for the entity this is attached to, make collisionEnabled false and visible false”. What this means, is that the collisions are disabled and it is made invisible. This is a simplified way of removing an entity from the game. It’s not the most optimal way, but completely destroying an entity comes with other programming responsibilities that are beyond the scope of this tutorial. 

Use the D-PAD to highlight the “+” next to onInteract and press A. Now, highlight the box with the placeholder “(…)” and press A again. 

Add an event handler to the TNT Plunger’s Interact Event. Select the “+” next to onInteract.

You will see three new property boxes appear; Entity, Script and Event. We will use these properties to target a specific entity, target a script attached to that entity, and choose a function within that script. 

Highlight the Entity field and press A. This will display a list of every entity in your scene. 

Pressing A on the Entity Property dropdown will display all of the Entities within your Game World.

Tech Tip: Parents and Children

An Entity in Crayta could be a Mesh, a Voxel Mesh, a Sound or any other item that is added to your game. 

When you add an Entity to your game, Crayta will make it a “Child” of another Entity so that it is attached to something in your game. 

For example, a table is added to the game. Then a cup is placed on that table. Because the cup is on the table, Crayta will add the cup as a child of the table. Then, if we move or rotate the table, the cup will move or rotate with it.

Parent/child relationships exist in most game engines, and are shown using lists:

  • World
    • Terrain
      • Table
        • Cup
      • House
        • Door
        • Television

When we added our TNT to the door, Crayta renamed it to tNT1, so that we can distinguish between that specific TNT, and any other ones we might add to our game later on. 

To find tNT1, press DOWN D-PAD to highlight the Terrain Entity. Press RIGHT D-PAD to expand the list of children added to the Terrain Entity. Do the same with BankVault and you should see BankVault-VaultDoor. Continue expanding the lists to find tNT1. In this tutorial, the tNT1 was here:

Use the dropdown menu to find the TNT Entity you placed on the vault door.

World > terrain > bankVault1 > BankVault-VaultDoor > tNT1

Highlight tNT1 and press A

When you select the TNT, the Event Property should automatically fill with the tntDetonator Script.

Our TNT only has one script attached to it, so the Script Property is automatically filled with our tntDetonator script. If there was more than one, we could use this box to determine the exact script.

Finally, highlight the arrow next to Event and press A. You will be given the choice of two functions that exist in the tntDetonater Script; Detonate() and Init(). Select Detonate().

Press B to close the Entity Editor. You have now hooked up the TNT Plunger to run the Detonate() function on the TNT that is attached to the bank vault door.

Preview your game.

During the game Preview, interact with the TNT Plunger by looking at it and pressing X. You will notice that the TNT detonates, as expected, but the door to our bank vault remains firmly locked. We can fix that by adding another Event Listener onto the TNT Plunger’s onInteract Event.

Return to Edit mode, open the Entity Editor for the TNT Plunger once again. Navigate down the Properties and press the “+” next to onInteract, underneath the previous function we added. Using the same method that we used when adding the Detonate function, add the following function:

  • Entity: bankVaultDoor
  • Script: LockedDoor
  • Event: DestroyDoor()
Select the “+” under onInteract to add another event listener.
Select the BankVault Door and choose the Script: LockedDoor and the DestroyDoor() function.

You should now see two items in the onInteract field; tNT1 / tntDetonator and BankVault-VaultDoor / LockedDoor.

Preview your game again and interact with the TNT plunger. You should find that the TNT explodes, and the door is destroyed. ACCESS GRANTED.

Preview the game, and blow open the door with TNT.

We can add as many functions as we like to this event listener, or to the other event listeners. If you choose to program your own functions you can use this Event Property to make them run.

Gaining Entry: Unlocking The Door

So far we have a bank vault where players can gain entry through the use of explosives. Great! What happens next? Well, usually once you have got the goods you need to escape without getting caught. We are going to use a new instance of just the Vault Door to create another obstacle. This obstacle will get in the way of the player escaping.

Add a different door Mesh to your hotbar and add it to the Game World.

Add door from the Meshes Library to your game world
Build a bank around your bank vault and vault door.

Now your player will have to gain entry into the bank first, then the vault and then escape out of the building.

Creative Control: What’s Your Game About?

This tutorial covers adding two doors, but you can use the same techniques to add more doors, change the scenario and change the direction of the game. 

For example, the player could start in a dungeon and have to escape a castle, or rescue someone from a prison. Requiring obstacles to be solved in different ways keeps your players guessing and makes the game more interesting. Get creative!

Don’t forget you can change the Mesh Asset Property of a Template. So you could change the bank vault door to a jail cell door, or a door to a townhouse.

In Edit mode, open the Library and add the Keycard Template to your hotbar. Then close the Library

Add the Keycard Template to your Hotbar.

Place the keycard in your game world. Preview your game and adjust the position of the Keycard using the Entity Editor if necessary.

Creative Control

You could place your keycard somewhere obvious, or you could place it somewhere devious. You could also consider where someone might leave a keycard by accident, such as on a table (look in the Meshes tab in the Library for inspiration). If you’re more of the trickster type, be sure to give your player clues so that they don’t get frustrated!

Return to Edit mode and open the Entity Editor for the Keycard.

At the bottom of the Entity Editor you will find a script attached to this Entity; HideShowScript. The next step in this tutorial will show you how to use the Event Properties to unlock the door and make the keycard disappear, simulating that you have picked it up.

Add the following to the Keycard’s onInteract Event Property:

Entity: Keycard1

Script: HideShowScript

Event: Hide()

Edit the Properties for keyCard1.
Select keyCard1 as the Entity.
Select the Hide event.

Preview your game and interact with your keyCard. You will find that it disappears, simulating that you have “Picked it up”. 

Return to Edit mode.

To make the outer door unlock, you will need to add a Script to it. The Script is the same Script used on the bank vault door.

Open the Entity Editor for the outer door.

Open the Entity Editor for the outer door.

At the bottom of the Entity Editor click the Add to Entity button. Select Script > LockedDoor and press A to add the LockedDoor Script to this door.

Add the LockedDoor Script to the outer door.

Check the locked checkbox to ensure that the door starts locked.

Lock the outer door using the locked checkbox.

Click the + on the onInteract and choose the Door instance > LockedDoor > ToggleOpen(). This will mean when you interact with the door it will open, but only if it’s unlocked.

Add the OpenDoor() Event Listener to the onInteract Event Property of the front door.

Unlocking the door is the last piece of this puzzle.

Open the Entity Editor for the Keycard once again.

Return to the onInteract field. This time we will also add the unlock function to the onInteract event. Select the following:

  • Entity: outer door (make sure to select the right door here)
  • Script: LockedDoor
  • Event: UnlockDoor()

Note: Make sure that you have both the key1 / HideShowScript and bankVaultDoor1 / LockedDoor in the onInteract field.

Select the UnlockDoor as the additional Event Handler to the onInteract Event Property of the Key.
Select your door as the entity, then the LockedDoor script, and the UnlockDoor event.

Close the Entity Editor for the Keycard. You have created a way to pick up the key and unlock the door. 

Preview your game. Interact with the Keycard and you should find it disappears (and behind the scenes we know the door has unlocked). Then, interact with the outer door and the door should swing open. 

Tech Tip: Testing

Testing is a vital part of making games as it ensures that the game you have made is doing what you expect it to do. 
Most of the time, developers test the game as they develop new features, but sometimes adding a new feature, or changing a part of the gameplay, may cause unexpected or unwanted things to happen to other parts of the game. Unwanted behaviour in a game is called a “bug” and needs to be fixed before continuing with the game development.
For example, in our situation, selecting the wrong door to “open” when the player interacts with the keycardReader might cause the vault door to open, rather than the exit. This would be very confusing to the player, and they won’t be able to get out!
Test your game regularly to make sure your game is doing what you want it to do, and make sure to fix any problems when they come up.

Recap

Congratulations, you have created a bank heist game. In this tutorial you have looked at:

  • What are Events and how do we use them
  • Using the Event Properties to add interactivity to the game
  • Changing a mesh and adding more interactivity to craft new puzzles

How did you get on? If there were moments which didn’t work how you wanted, now is a good time to revisit your game and fine-tune it, and practice what you have discovered in this tutorial.

Adding Polish

If you want to carry on adding to this game, here are some ideas that you can explore using the techniques we have looked at in this tutorial:

  • Hide the keycard in the bank vault itself, so that the player has to get in the bank vault before they can leave
  • Give your player the choice to either blow up the vault door, or use a keycard hidden somewhere else in your game
  • Create another obstacle, where the player has to pick up some TNT before it appears outside the bank vault door.
  • Make a dungeon “escape room” by linking multiple obstacles that need to be solved before the player can escape

Next Up: UI

The next tutorial will look at how we can display information to your players using the inbuilt UI system. This will allow you to add written narrative elements and dialog, show player health or points, and show the player a win or lose message. 

Combining communication with events will enable you to create completely unique and exciting narratives that reward and challenge your players.

Basic Tutorials 3: UI

Categories
Basic Tutorials

Basic Tutorial 1: Packages

Preface

This tutorial assumes that you understand the basics of entering Crayta’s CREATE mode and have some experience building levels.

In this tutorial, you will look at how you can use the Packages within Crayta to add playful Entities to our game.

Create Your Game

Navigate to CREATE mode in the Crayta menu and under CREATE A NEW GAME press A on EMPTY GAME.

Select STARTER: EMPTY GAME.

Name your new game “Robot Run Race” and press APPLY AND CONTINUE. Choose an image and press CREATE AND ENTER.

You should now see your empty Game. If any of that was confusing, head back to the Basic Workflow Tutorial which guides you through the process of creating and editing your own Game from the very beginning. 

Otherwise if you are still with me, great! Read on!

Adding Packages

Components are the basic building blocks of our game, and they include Sounds, Meshes, Scripts, Templates and Voxels. You can access the Components through your Library

Open the Library by pressing Y

If this is your first time using the Library, and you want a better overview, head back to the Basic Workflow Tutorial.

The Blank Game template has a range of basic Components that you can use to make your game idea a reality. However, there are many more available that have been created by Crayta makers and the Crayta Community. You can add these Components by visiting the Community tab and installing groups of Components which are called Packages.

When you install a new Package the Components are automatically added under the appropriate Library tab.

This tutorial will guide you through installing the Robot Run Race Package, which includes everything you need for the game you are about to make. 

When you open the Library, your controller is now moving the highlight square in the Library menu.

Press Y to change tab to the Community tab.

Navigate the Community Packages and find the Robot Run Race Package.

With the Package highlighted, press A to install.

When installation is complete, the items from the Package will be added to the corresponding tab in the Library.

Adding Templates To Our Game

To return to the Library press Y.

Press R2 to change tab to the Templates tab. Here you should see three new Templates that were added by installing the Robot Run Race package. 

In addition to the standard Player and User templates, we now also have RobotRunRace_Competitor, RobotRunRace_FinishLine and RobotRunRace_Racetrack. These templates feature custom functionality, and we can use them in lots of different ways.

To add RobotRunRace_Racetrack (the 3rd template in the list) to our Hotbar, highlight the Template by using the D-Pad in the Library window, and press A. The Library will disappear, and you will find that you now have a racetrack in your Hotbar.

You can move around to find a good spot, and rotate your racetrack by changing the direction you are facing with the Right Analog Stick. When you are happy with its position press R2 to place it. Remember, if you change your mind you can undo by pressing LEFT D-PAD.

Press RB to change to an empty Hotbar slot. This makes it easier to navigate and edit your world.

How exciting! You have a basic racetrack, with a start line. But you are the only competitor? It’s called Robot Run Race for a reason, right? Let’s get some robots involved. 

Adding A Robot

Open your Library and select RobotRunRace_Competitor from the Templates. Press A to equip it.

Preview the game by pressing and holding D-PAD DOWN.

Tech Tip: Preview Often

There are two modes in the Crayta CREATE mode. Edit mode and Preview mode. To change between them, press DOWN on the D-PAD.

Edit mode: Here is where we can build our game world, add entities and change their properties. When you do anything in this mode it is saved. In this state, your game is not running, so entity behaviours such as movement won’t occur until we Preview or Run our game.

Preview mode: This is your game in action. Enter this mode to start any entity behaviours and test your game. When you do anything in this mode it is not saved. 

Regularly Editing and Previewing your game follows the same process that game developers use when they are building a game. Always remember to Preview your game, to see how the changes you make in the Edit mode impact your gameplay.

Oh no! Come back Robot! You’re going in the wrong direction! You’re not supposed to wander off.

When you’ve spent enough time chasing the Robot hold D-PAD DOWN to return to the Editor.

Don’t panic, we can rectify the direction the Robot is running in easily, but first let’s take a look at how we can customise this part of the racing game.

Changing The Mesh

Press RB to select an empty hotbar slot.

Look at your Robot with your crosshair and an outline should highlight it with yellow.

With the Robot Competitor highlighted, press X to open the Entity Editor. You can open the Entity Editor for any Entity in your game.

Using the Entity Editor, we can change some of the properties of our Robot. To start with, we are going to make it a Wardrobe.

Use the D-PAD to navigate the Entity Editor menu. Highlight the meshAsset dropdown box and press A.

Scroll the list using the Left Analog stick. It’s in alphabetical order, so scroll down until you can see Wardrobe on the list. Then, use the D-PAD UP/DOWN to highlight Wardrobe. Press A to select.

Notice how the Robot has now magically transformed into a Wardrobe. This is because we have told Crayta that we want to use the Wardrobe Mesh with this Entity, instead of the Robot Mesh

Creative Control

You can select any mesh from the meshAsset dropdown, and this can be a great way to experiment with different game themes. Maybe it’s bedroom furniture that’s racing, or different vehicles, it’s your choice.

And just for fun, close the Entity Editor by pressing B. Preview the game by pressing and holding D-PAD DOWN. Congratulations on making a “chase the wardrobe” game.

Return to the game, and return the Competitor to being a Robot instead of a Wardrobe (if you like).

Tech Tip: Entities, Properties And Behaviours

In this example our Entity Template is RobotRunRace_Competitor, but the actual Entity in the game is named robotRunRace_Competitor1. It is just one instance of RobotRunRace_Competitor. We can add as many instances of RobotRunRace_Competitor as we like.

Entities in Crayta have Properties

Properties are information stored about the entity, such as its name, position and rotation. When we selected a new meshAsset for this entity we changed one of its properties.

Changing Direction

If your robot was anything like mine, it ran in the completely wrong direction from the racetrack. Furthermore, it seems to be facing completely the wrong way. We can use the same technique we used to change the mesh to change the other properties of our entity in the Entity Editor and fix these mistakes too!

If your Robot is facing away from the racetrack then you need to follow these steps to make it face the correct direction.

Again, look at the Robot and press X to open the Entity Editor.

Use the D-PAD to navigate the Entity Editor. Highlight the middle box next to the label marked “rotation” and press A to begin editing this value.

You can use D-PAD RIGHT or LEFT to increase or decrease this number. When you change its value, you should find that the Robot starts to rotate.

Rotate the Robot to make sure it is facing in the direction it of the racetrack. It’s likely to be either 0, 90, 180 or 270.

Press B to stop editing the number and press B to close the Entity Editor.

Hold D-PAD DOWN once more to Preview your level.

Oh! It’s better, but it’s still not quite right. Finally, we need to make the Robot move in the direction its facing. To do this, we need to return to the Editor and open the Entity Editor one last time.

With the Entity Editor open, navigate to the boxes next to “speed”.

Tech Tip: Three Dimensions

3D games use three different numbers to determine a position in the world. A 3D coordinate system has values for LEFT and RIGHT (X), AWAY and TOWARDS (Y), UP and DOWN (Z). 

Our “speed” values show how much our object will move in each of these directions each time the screen is updated (about 60 times per second, or 60 FPS).

By default, our CompetitorScript moves 100.0 units every frame on the X axis. Changing this value to -100.0 would move our entity in the opposite direction. Positive values move one way, negative numbers move the other.

Look at which way your Robot moves when you Preview the game. To move in the direction of our racetrack, we will need to have either 100 or -100 in one of the first two boxes, with the final box always 0. If it is already moving in the correct direction, note down what the current values are, and experiment with the following.

Try the following combinations of numbers. Consider what is happening each time, and choose the right one for your Robot. Remember, if something breaks or does not look right you can undo the last action with LEFT D-PAD.


XYZNotes
speed100.00.00.0Robot moves RIGHT
speed0.00.00.0Robot STOPS
speed-100.00.00.0
speed0.0100.00.0
speed0.0-100.00.0
speed0.00.0100.0

To speed this up, you can also work it out logically. 

If your Robot is moving LEFT/RIGHT compared to your racetrack then X will need to be 0.0, and Y will need to be either +100.0 or -100.0. 

If your Robot is moving directly opposite away from your track then Y will need to be made negative (or positive if it was negative already).

Preview your game and make sure your Robot is travelling down the racetrack.

Success! Your Robot is now racing to the finish line.

Adding More Competitors

Now is a good opportunity to practice what you have done so far. Add more competitors to your game. You will need to adjust their mesh, rotation and speed properties to be the same as the first one. Repeat the steps from Adding A Robot if you want to follow the instructions again to remind yourself how to add competitors to the game. 

Preview your level and make sure that you have some Robots, that all travel in the same direction in a race.

To make things more interesting we can change the speed of some of our Robots.

Open the Entity Editor and navigate to the CompetitorScript’s “speed” boxes.

Change your 100.000 to 300.000, or if it is -100.000 change it to -300.000 and you will see that the speed of the Robot increases.

Change this value for all of your robots and Preview your game. Notice that even though they are made with the same template, they can be made to move in different directions and different speeds (or behave slightly differently). This isn’t limited to the movement, as you will discover in the next tutorial.

Finishing Touches

The last thing we need to do is determine who won our race.

Open the Library and add the RobotRunRace_FinishLine to your Hotbar menu.

The FinishLine template includes a finish line, two flags and a Trigger Volume – an invisible box stretched between the two flags. The Trigger Volume has some special features.

One of your robots will enter this Trigger Volume, and a Script attached to it will tell you the name of the winning Entity. Make sure that the glowing blue trigger volume is the opposite side of the finish line to the robots, such as in this handy reference image.

Preview your game one more time.

Race your robots! Get to the start line, and race against them. First entity to the finish wins and…well…you’ll see what happens!

Recap

This tutorial was about taking you to the next level by adding packages and adjusting the properties of entities in your game. In this tutorial you have covered:

  • Packages in Crayta’s CREATE mode
  • Adding Templates to the game
  • Changing an Entity’s mesh from a wardrobe to a robot
  • Changing other Entity Properties including rotation and speed

Adding Polish

You have the beginnings of a game, but Robot Run Race could go in whatever direction you choose (just like the wardrobe). You can use the same techniques to setup a race with your friends, racing against each other, or some ultrafast teapots? Some other things you could add might include:

  • Adding a high-up area to spectate
  • Adding more lanes, more competitors and space for players to race too
  • Remove the racetrack and make an obstacle course for players to race through. The winner is the first one to the finish line!

You could also look at installing some other packages that would make for some compelling races. For example, try downloading the DancingCacti package, and use each of the Dancing Cacti to decorate your scene, or as obstacles for your racers!

Next Up: Action!

The next tutorial adds a lot more interactivity, and looks into templates that enable you to trigger events, make things explode and create puzzles for your players to solve.

Basic Tutorial 2: Events

Categories
Basic Tutorials

Crayta Editor: Basic Mode Workflow

Welcome to Crayta. Crayta is both a platform for playing online games, and the perfect environment to quickly realise your own creative visions. It’s easy to start creating games in Crayta, and the best way to make games is to spend time making levels in Crayta’s CREATE mode. However, if you want a little more direction, some tips to speed up your process and to add some custom interactivity to your games then this series of tutorials will help you on your way.

Ready to take game development to the next level? Then read on!

How To Use These Guides

These guides are designed to help a complete beginner game developer get to grips with Crayta as a game engine. They start with an introduction to the Basic Editor mode, and eventually move up to the Advanced Editor mode.

It is recommended that you follow the tutorials in order, as the later guides will assume you have some understanding of the skills that are introduced in the first ones.

That said, they are written in a way that should be relatively straightforward to follow. You can also come back to previous tutorials, and use them as a dip-in reference, should you need to.

Tech Tips

Tech Tips are comments which have a bit more technical depth. They might include additional techniques, a more thorough explanation of code or some theory that explains why we are suggesting this method. You don’t have to read them, but they are there to help you further understand game development in Crayta.

Creative Control

These tutorials are here to guide you towards best practice as much as possible, but they are only a guide! The Creative Control boxes are prompts to remind you to stay creative, and have fun. They highlight opportunities to deviate from the tutorial whilst still being able to follow along to the end.

Code boxes

Crayta has an inbuilt Lua scripting engine. Any source code will be presented in code boxes, which are there to help you distinguish between instructions and code (unless you’re a computer, in which case they are the same thing).

local AwesomeScript = {}

-- Script properties are defined here
AwesomeScript.Properties = {
	-- Example property
	--{name = "health", type = "number", tooltip = "Current health", default = 100},
}

--This function is called on the server when this entity is created
function AwesomeScript:Init()
end

return AwesomeScript

This Tutorial Will Cover

  1. Navigating the basic editor
  2. The Crayta level design tools and adding and removing Entities including:
    1. Meshes
    2. Voxels
    3. Effects
    4. Lights
  3. Previewing your game

The Crayta Editor

Welcome!

To celebrate your arrival to Crayta’s CREATE Mode, and to grasp some of the fundamental aspects of Crayta’s game design features, you are going to build a house! To get started you need to enter CREATE Mode.

Press START and switch tabs to CREATE

This is the CREATE menu. There are different ways you can choose to start building. You can either:

  • use a pre-filled template and edit it to suit what you want to make, or
  • use an empty game, which has only the Player, the ground, and the sky

For now, select EMPTY GAME. You will be prompted to enter a name and choose an image that suits your new creation. Name your game (I’ve called mine Underwood).

Press APPLY AND CONTINUE. Now choose an image.

Finally press CREATE AND ENTER to complete the setup of your first game and start the creative process.

The Game World

Welcome to your blank canvas. This is the starting point for all the great games you’ve experienced in Crayta, and it’s your opportunity to let your imagination free, tell stories and craft memorable experiences. 

The Crayta Library

Press Y to open the Library.

Crayta has a huge Library of ready-made Entities you can use to create and decorate your game world. The term Entity is used to refer to any Sound, Mesh, Voxel, Effect or Template in the Crayta Library.

You can navigate the Library using the D-PAD to move the highlight cursor, and use the triggers (L2 and R2) to switch tabs.  Pressing Y will close the Library.

To add an Entity to our game, you need add it to the Hotbar at the bottom of the screen. 

Voxels

Voxels are the physical building blocks of Crayta. A group of Voxels is called a Voxel Mesh. You can make just about any physical object with Voxels such as bridges, skyscrapers or oceans. Building with Voxels is like sculpting your landscape by adding and removing blocks. 

Open the Library and navigate to the Voxels tab. Highlight a Voxel texture that would make a suitable structural material (or cheese, if you fancy) and add it to your Hotbar by pressing A.

You should see it appears in your Hotbar at the bottom of the screen and the library window closes.

Creative Control

Why stick to one material? You can add any voxel onto any other voxel. Try adding flavour to your creations by using a variety of materials and block sizes.

To place a voxel, press R2. To erase a voxel, press L2

Time to start building. For the house walls, increase your voxel size to 3 x 3 by pressing the D-PAD UP. This will loop through the available sizes you can work with in basic mode. 

Using your selected voxel, build four walls for your house. The house can be as big or small as you like. Remember to leave a space for a door, and try to make sure that you can get into it.

Tech Tip: Oops!

If you make a mistake, you can use LEFT D-Pad to UNDO the last action. If you want to REDO it, press RIGHT D-PAD.

To add a roof you will need to be able to look at your house from above. Double-tap jump (A) to enter Drone mode. You are now controlling your flying Drone, and you can move towards the direction your crosshair is pointing with the left analog stick. 

Whilst in Drone mode hold A to elevate your character until you can see the top of your walls (you can hold crouch / RS to descend). Open the library, select a roof material (such as Tile Slate, or cheese again I guess) and add it to your Hotbar. Proceed to build a roof onto your house.

To leave Drone mode, double-tap jump again.

To add windows you will need to remove some of the blocks in the walls of your house. Hold L2 whilst facing the wall and your Voxel tool turns into a Voxel eraser. Remove an area in your wall that measures 6 voxels wide by 6 voxels high.

Also remove an area of your wall to create a door.

A welcoming door opening.

Once you are happy with your creation preview the game by pressing and holding D-PAD DOWN. Try entering your house and test that it works the way you want it to. To return to the editor, press and hold D-PAD DOWN again. Make any adjustments to your house and then continue to the next step.

Tech Tip: Preview

At the moment, Previewing your game doesn’t change much. In the future, you will use Preview to start your game logic.

Make sure to test your game regularly. Testing your game gives you the chance to experience how your game feels, as well as how it looks. Game feel is essential to making a great experience for your players.

Adding A Door

Use the RB/LB to select an empty slot in your Hotbar. Open your Library and use the triggers (R2 and L2) to navigate to the Meshes tab.

A Mesh is a premade 3d model.

Highlight a door Mesh and press A to add it to your empty Hotbar slot.

Look at where you want to position your door and press R2 to place it.

Next, follow the same process you used for your door to find a window Mesh in the Library and add some windows to the window openings you created in your house walls. 

Removing a Mesh is the same as removing Voxels. Look at the Mesh you want to erase and press L2. Don’t forget you can also undo and redo by pressing LEFT and RIGHT on the D-PAD.

Editing Properties

Look at your door and press X to bring up the Entity Editor. The Entity Editor shows some of the Properties of the Mesh, such as it’s position, whether it’s visible, and whether collisions are enabled for this Mesh. Uncheck the collisionEnabled checkbox on your door, to allow you character to walk into the house unhindered. Preview your game to test that it works.

Adding Grass

Crayta Voxel tools are not limited to adding and removing Voxels. If you have a Voxel selected in your Hotbar, you can press UP D-PAD to change the type of tool that you are using.

Open the Library and add the Grass (short) Voxel to your Hotbar.

With the Grass (short) Voxel selected, press UP D-PAD until your the tool type states “FILL”.

Look at the floor and press R2 to turn all the floor Voxels to grass.

Lights, Sounds And Effects

In addition to physical objects, the Crayta library also has some lighting, sounds and particle effects you can add to your world. Your house might be a bit dark inside. Open the Library and change to the Primitives tab. Use the cursor to select a Light. Use the same technique as the voxels and meshes to place the light inside your house.

You can edit the Properties of the Light in the same way that you turned off collisionEnabled on your door. Press RB to select an empty Hotbar slot – this changes the tool to Select. Look at your Light and press X.

You can change many aspects of the lighting in your building. Try making some mood lighting for your house by changing the Light colour under the color Property.

Press B to close the Entity Editor.

Create a chimney with Voxels by switching to one of your building materials (Use the bumpers to change Hotbar slot) and add a single 4×4 Voxel onto the roof of the house

Open the Library and change to the Effects tab. Use the cursor to select Smoke Chimney. Place the Smoke Chimney Effect on the chimney to add that warm, cosy feeling.

You can add Sounds in the same way. Take a look at the Sounds tab in the Library, and find some appropriate background music for your home.

Previewing Your Creation

Once you are happy with your creation Preview the game by pressing and holding D-PAD DOWN.

When you Preview your game you can’t edit it and instead can explore the world you have created just as your Players would if they played your game. You can see the effects of this by looking at your chimney. Notice that the Effect icon has disappeared, and all you can see now is the smoke.

Try entering your house and test that it works the way you want it to. To return to the editor, press and hold D-PAD DOWN again. Make any adjustments to your house and then continue to the next step.

Over To You

Underwood. The home of a Crayta tutorial writer.
Underwood. The home of a Crayta tutorial writer.

Congratulations. You have now mastered the basics of the Crayta level editor. In this tutorial we:

  • Investigated the Crayta Library
  • Built things out of Voxels
  • Added Meshes, Lights and Effects
  • Edited the Properties of a Mesh Entity
  • Previewed your game

It’s now over to you. Continue to add to the world you have started creating. Some things to try are:

  • Dig a trench around your house using the Voxel eraser
  • Add water Voxels to your trench to make it into a moat
  • Use a bridge Mesh, or Voxels , to create a bridge over the moat to your front door
  • Decorate the inside of your house with furniture and artefacts from the Meshes Library
  • Add Sounds by placing them in your scene the same way you added Meshes, Effects and Voxels

Next Up: Basic Tutorials

Now go and create entire worlds for Players to experience using the tools you have just learned. OR! Maybe you want to make something more exciting and varied? Well, you are in luck! You can build on your understanding of game design, scripting and level design in the step-by-step Basic Tutorials, which will guide you through some of the more detailed aspects of creating games in Crayta. 

The choice, as they say, is yours!

Basic Tutorials 1: Packages