Now we have launched on Facebook Gaming, we now have a new virtual controller for players that are joining via mobile devices. The first thing to point out is that if you’re using the stock Crayta blueprints, you won’t need to do anything to assist with this unless you add a new button input to your game. However, if you do add a new button or you have a custom game, then you will need to run through this process to make sure it’s configured correctly. The good news is that it’s fairly straightforward, and you should be familiar with some of the concepts already if you used Crayta before.
For the tutorial we are going to use the Basic Tutorial : Mobile Controls blueprint, this can be found by selecting Create from the main Crayta menu and then selecting Create A New Game. If you select the Basic Tutorial: Mobile Controls and then select the Create A New Game option. You need to go through the setup process until you enter the editor mode.
If we load into Crayta on a mobile device and preview the game, then you should be able to move around using the virtual thumbsticks. You should be able to see a treasure chest in the middle of the island, but the interact button wont work. You may also see a lot of extra buttons that don’t make sense given the context of this game.
Adding a Control Scheme
So, how can we fix this? Well, we need to go back to the PC version of Crayta so that we can access the advanced mode. If we load the game back on the PC, we then need to move to advanced mode by pressing tab. Once we are in the advanced editor, we can then select the Game tab from the right-hand side of the screen.
At the top of this menu is the Help category, you may need to expand this to see all of the options contained within.
Want to add some basic help information about your latest game? Why not use the built-in help pages that we provide from the Crayta menu system.
From within the Game tab in the Advanced Editor you can use the Pages array to add useful help pages to your games, this will appear in the main Crayta menu alongside any control schemes you have set.
We need to set the control scheme to have the correct buttons displayed. You can either create a control scheme by selecting the + icon or if you have an existing element you can edit an existing scheme. If you expand the control scheme element, then you should see the option to Edit Input Labels and if we click on that a new window will appear.
Now we are on the input window, we need to make sure that we are correctly setting the buttons we will be using in our game. For the case we have, we have a single interact button that is needed so we can open the chest. To add this, we can either select the empty Label field next to the interact binding and then type in Interact or we can simply select the drop-down to the right of this and select Interact from the pre-populated list.
Once that is done, we only need to close this menu, and that is it! We should now be able to load this on a mobile device, and when we preview the game this time we should only see the movement controls and the interact button shown. If we go up to the treasurer chest we should now be able to open it by pressing interact. As you can see, this is a relatively simple change to your games, but makes the experience for mobile players much better. If you have older published games, then consider adding this change and republishing them to allow for a wider audience to play them.
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 that come with Crayta to add playful Entities to our game.
Creating your game
We are going to use an existing Blueprint to base our game off, a blueprint has the basic building blocks for you to expand into your own game!
Navigate to CREATE mode in the Crayta menu and under CREATE A NEW GAME select Basic Tutorial : Packages.
Select CREATE A NEW GAME and then name it a suitable name, in my case I have chosen the name “Mine Mayhem” but it’s entirely up to you. Remember to choose an image and to continue until you’re loaded into the editor.
You should now see your Game world. 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!
Our team have provided several packages that will help you get started in your development, the Blueprint already has three of these pre-installed, these are:
Inventory – Allows the player character to hold and store objects in their inventory.
Health – Adds a health bar and player character can be “killed” by losing all their health.
Auto-Respawn – Handles the respawning of players who may have been “killed” by something in the level.
You should once again have started in Basic Editor mode, now open your asset Librarythen you should see the Community tab that is at the very top-left of this window. Select the Community tab and then check the Crayta Packages filter option. If you then look through these packages you should see the packages listed above as installed.
Using Filters and Tags
Trying to find packages can be hard work, but you can use the filter to search for a specific package name. Try searching to easily find the package you want.
Better yet you can use tags to look for a specific group of items if you have a specific theme in mind!
Now we have understood that this is where we can install and see the installed packages we are already using, we should close this window.
Playing the Game
We should see what this Blueprint provides in terms of how the game currently functions, if wePreview the game by pressing and holding the menu button on controller or pressing F5 on keyboard.
Tech Tip: Preview Often
There are two modes in the Crayta CREATE mode. Edit mode and Preview mode. To change between them, press and hold the menu button on controlleror pressing F5 on keyboard.
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.
This should be a simple fetch quests mechanic, there should be a shiny coin spinning at the end of the mine tunnel, you need to get your character to run over to the coin and they should pick it up.
If you now take this back to the start point, which should be indicated by the starting line pattern on the floor, then your coin will be magically removed and you should see some effects and hear some celebratory sounds indicating your success!
If we select the same button we select to start the preview to end the preview at this point, by now you might be a little underwhelmed by the difficulty of the task. We are going to add another package to spice this up a bit, and make it more of a challenge to retrieve this coin.
Increasing the difficulty
As we mentioned, there is no difficulty curve and we aren’t really using all the player mechanics afforded to us by our player character. Let’s try by adding an obstacle to make it not such a walk in the park… err cavern.
If we select the option to enter our Library and then go back into our Community tab to look at all our packages. If you then select the filter and then search for Death Collision and install it.
Next, if you stay in or reopen your Library and enter the Templates tab. The package has been installed you will see the Death Obstacle Template. Assign the Death Olbstacle to your Hotbar so that you can place it in your game, now close the Library window.
Place the new Death Obstacle between the player start point and the coin collectable. You may find that it’s positioned or rotated not quite how you would like it. To fix this, interact with the Death Obstacle and select E on the keyboard or X on the controller to Edit DeathObstacle1 so you open the Entity window on the right-hand side of the screen.
Tech Tip: Three Dimensions
3D games use three different numbers to determine a position in the world. The Crayta 3D coordinate system has values for LEFT and RIGHT (X), BACK and FORWARDS (Y), UP and DOWN (Z).
You need to bare this in mind when think about the position(s) or rotation(s) of your entities within the world.
You can now edit the Position by highlighting one of the three values (X,Y,Z) and using left/right on the left-analogue stick on controller or holding left-mouse button and moving the mouse from left to right.
To rotate the Death Obstacle then highlight the Rotation options and do the same as how you changed the values for the position; if you want to rotate around the centre point then you will need to edit the middle (Y) value.
Creative Control: Increased Difficulty
It’s completely up to you if you want to increase the difficulty of the traversal of the level by adding more of the Death Obstacles. Place a few close together so players need to time their jumps, change the size of the voxel mesh, or apply the script on other mesh entirely.
Don’t forget to not make it too challenging, or you may put your players off and they may never come back; and who would want that!
With your new Death Obstacle setup in the level, it’s time for a bit of testing. You want to Preview your game and then try to collect the coin and bring it back to the start point. In my case the challenge is simple enough, jump over the obstacle to reach the coin and then repeat to bring it back to the finish.
Once you have finished play testing then you can exit out of the preview.
Rules of Motion
We have now got our simple obstacle in our level, and that is great to introduce our players to a challenge. But, we may want more than one challenge in our level. We are going to install another package that will quickly allow you to set up movement and rotation to any mesh object.
To get this additional package, you will need to open the Library and then the Community tab as you did before. We now want to make sure we have selected the Crayta Packages checkbox and then search for the “Rotate and Move” package and install it.
You can then close the Library and interact with your Death Obstacle. With the Death Obstacle highlighted, you will need to select the option to Edit DeathObstacle to open the Entity window.
Scroll down in this Entity window and then select the Add to Entity button, then select Add > Script > rotateAndMoveScript to add the script.
With this installed you should see some properties that can be modified. Firstly, let’s check the Bounce property as this will stop the animation just snapping back at the end of the movement or rotation.
We can also highlight the middle value (Y) for the Rotation End and then set this to a value of 360. This should make the Death Obstacle do one complete rotation and then rotate back in the opposite direction, then keep doing this.
If you want to Preview the game to see that the Death Obstacle is spinning correctly, and then exit the preview when you’re satisfied. Finally, let’s reopen the Entity window and set the Time value to 2 seconds so it’s more challenging and Preview our game again. The run is just that more perilous this time around!
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.
How we can install existing packages to make new gameplay experiences.
Adding existing Templates to our game.
Changing other Entity Properties including rotation and speed.
You have the beginnings of a game, but there is no reason to stop there. Here are some suggestions how you could improve the experience and make some deeper gameplay mechanics:
Install another package like the Timer Widget to see how fast you can complete the course in.
Expand the mine tunnel and then add some additional traps and pitfalls to the Obby course.
Include more pickups for the player to collect and retrieve as they explore.
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.
This tutorial will guide you through making an easy puzzle game, and then add more obstacles to make it harder.
CREATE YOUR GAME
Navigate to CREATE mode in the Crayta menu and under CREATE A NEW GAME and choose the Basic Tutorial : Events and accept the selection.
Confirm by selecting Create a New Game and name it something, I am calling my game “Super Smash-n-Grab” but it’s up to you!
Keep selecting to continue until you have loaded into the game editor.
You should end up in the basic editor mode, we can select the preview mode by pressing F5 on the keyboard or the Menu button on the controller. While we can enter the bank via the front door by default, the door of the Bank Vault is locked. Before we preview the game again we need to unlock the door and then link the keypad to the door to be able to open it.
You may have noticed that in the basic editor you can walk around, but things like the doors won’t open, this is because the game will only run within the editor. To allow you to get inside the Bank while in the editor then double tap your jump button to enter drone mode, you should know be able to fly into the bank interior by using your movement controls.
In Edit mode, highlight the door and then use E on the keyboard or X on controller to Edit ‘_bankVaultDoor’ to enter Entity Editor.
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 and preview your game again.
Interact with the keypad next to the door by looking at it and pressing the interact key. The door should 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. Now return to the game editor.
Securing the vault
In Edit mode, highlight the bank vault door and select the option to Edit ‘_bankVaultDoor’ to enter Entity Editor.
Scroll down to the lockedDoor script and make sure that the Locked option is checked once 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.
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.
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.
Open the Library again and open the Meshes tab. Add the TNT Plunger to your Hotbar.
Place the TNT Plunger nearby, so you can see the door when you press the plunger.
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, highlight the TNT Plunger and select the option to Edit ‘TNTPlunger1’ to enter the Entity Editor.
Navigate to the bottom of the Entity Editor to find the On Interact 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:
On Interact: The player looks at this entity and presses the interact key.
On Collision: 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.
To setup the event highlight the “+” next to On Interact and select it. Now, make sure that the event binding is expanded.
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 select it. This will display a list of every entity in your scene.
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:
When we added our TNT-Template to the door, Crayta renamed it to tNT-Template1, so that we can distinguish between that specific TNT, and any other ones we might add to our game later on.
With the drop-down expanded for the Entity field; highlight the Terrain Entity. Expand the list of children added to the Terrain Entity. Do the same with bank-Template and you should see _BankVaultDoor. Continue expanding the lists to find tNT-Template1. You may find that the tNT-Template1 appears in a slightly different location in your tree view:
Highlight tNT-Template1 and select it so it appears next to the word Entity in the properties panel.
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 select it. You will be given the choice of two functions that exist in the tntDetonater Script; Detonate() and Init(). Select Detonate().
Now 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 the interact key. 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 On Interact Event.
Return to Edit mode, open the Entity Editor for the TNT Plunger once again. Navigate down the Properties and press the “+” next to On Interact, underneath the previous function we added. Using the same method that we used when adding the Detonate function, add the following function:
You should now see two items in the On Interact field; tNT-Template1 / tntDetonator and _BankVaultDoor / 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.
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 an door used for an emergency escape as an extra obstacle to get in the way of the player reaching the vault.
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 AssetProperty 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.
Place the keycard somewhere in your bank, a good place would be in one of the side-rooms. Preview your game and adjust the position of the Keycard using the Entity Editor if necessary.
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 Editorfor 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 On Interact Event Property:
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 emergency exit door unlock, you will need to add a Script to it. The Script is the same Script used on the bank vault door.
Look for the _emergencyExitDoor and highlight it, this should be the door that is in the office to the left-hand office space when leaving the vault and is on the outer wall of the building. You can also tell as there is a small corridor leading out to an exterior door.
Open the Entity Editor for the emergency exit door.
At the bottom of the Entity Editor click the Add to Entity button. Select Add > Script > lockedDoor and add the lockedDoor Script to this door.
Check the locked checkbox to ensure that the door starts locked.
Click the + on the On Interact 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.
Unlocking the door is the last piece of this puzzle.
Open the Entity Editor for the Keycard once again.
Return to the On Interact field. This time we will also add the unlock function to the On Interact event. Select the following:
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 emergency exit 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, interacting with 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.
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.
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
Edit the help screens and controls screens to display the controls used in the game.
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.