Categories
Advanced Tutorials

Advanced Level Design 4: Particles and optimisation

Preface

You have reached the final tutorial in this series of Level Design Tutorials. Adding finesse and quality to a game level is usually the most time consuming part, and has the least amount of noticeable difference. However, all of the small details that you add in the final 20% of level design add up to a much greater player experience, so it’s worth investing a little bit more time and energy, to really make the level worth playing.

Introduction

In this tutorial, you will look at further developing the narrative of the level by creating a dramatic backdrop in the form of castles. These backdrops could be anything linked to the theme of your game. They are also a great opportunity to tie together the narrative in many games, if you have made a series of games that are linked in some way.

In addition to the backdrop, you will also look into some of the Effects that are available within Crayta, so that you can add movement and natural effects like fire to your game. This tutorial also touches on optimisation, which is essential to ensure that your game demands are within the bounds of what is possible on Crayta and Google Stadia, as well as looking into final touches in the Game Settings panel to allow your UI to also be a part of your story.

Open Your Game

Start by reopening the level you are working for for this series of tutorials. If you haven’t got one, it would be worth learning some of the Advanced Editor tools and techniques before starting this tutorial, so run through that tutorial, and then start this series of tutorials with Level Design Tutorial #1.

Your level is looking polished, but it’s not quite finished.

Creating A Kingdom

Large, faraway phenomena can add depth and feeling to the game, as well as help your players to orient themselves in the level, especially if this is their first time playing your game. It gives your game a sense of place, and describes the type of world that exists outside of the walls of your level. Structures and landscapes in the distance help to further embed the narrative and theme of your game, whilst simultaneously expanding the size of the world in the mind of the player.

Revisit your reference document, or search online for images relating to your theme. You are looking for inspiration to create dramatic backdrops that embellish the story of your game. For this example, medieval villages seem to have a range of different phenomena in their backdrops including castles, churches, mountains, guard towers, windmills, and other villages on hilltops. Once you have a list of several ideas, you can choose one or two that you would like in your game. For this tutorial, you will look at creating a castle that overshadows this village at the edge of its kingdom.

Creating A Castle Silhouette

To start, you will create a silhouette of the structure which will be visible in the distance in your game. The shape needs to be recognisable, but doesn’t necessarily need the same level of detail as the buildings and landscape in your game world because your players will not be able to see it up-close. In game design, this is called LODing (level of detail) and is a technique used to optimise the gameplay, whilst maintaining the aesthetic effect of the level. 

To start, move your view away from your village to a blank area of your level.

Choose the Voxel Meshes tab in the Library. You should see your Voxel Mesh creations as well as the Terrain which is the basic landscape of your level.

Click Create New Asset. Call it Castle and select it from the Voxel Meshes menu.

Place it in your game world, and move your camera so that you can see the initial Voxel clearly.

Just like building the house, you can build on top of this Voxel and Crayta will ensure that the Voxels all form the same Voxel Mesh. Click the Shape tool and add Voxels to your Castle Voxel Mesh in the shape of a cuboid. Expand the shape so that it creates a silhouette 1 Voxel thick.

Before applying the Voxels, move your camera to your game level. Check to make sure that your castle will be visible from your game world, as well as being an appropriate size and distance to be believable.

Once you are happy with the placement and size of your castle, return the view to look closely at the Voxel Mesh and use your reference image as a guide to add a general shape.

It doesn’t need to be perfect at the moment, but having a general shape will help you to make sure it is visible, and recognisable at a distance. This castle shape is very typical of the type found in medieval Europe, but you may want to experiment with more fantastical styles of castles and palaces. Different castle styles will have a different impact on the mood and the narrative of the world you are creating. 

To make the castle feel more attached to the game world, add some lines of Box Hedge Voxels underneath to build a green hill for it to be positioned on.

Use TAB to Enter Basic Editor Mode regularly to see if it is visible from the ground, and remember to look from several perspectives.

Also remember to check your parkour spots to make sure the player can’t see a castle floating in midair (unless that is something that’s possible in the physics of your world. Hey, it’s your game!).

Once you are happy with the size and general shape of your castle you can add some more detail. Remember, the castle is in the distance, so your main focus is to maximise the impact of the silhouette.

Start by making any spires or towers a more rounded shape. Use the Shape tool to draw a circle on top of a tower.

Drag the blue handles to extend the circle into a cylinder.

Press Enter to add the Voxels. You can move the same shape to any other towers to keep the same size and shape. This castle is very symmetrical, so this is a useful technique to save time.

Use the Eraser modifier of the Shape tool to hollow the towers. This effect will be important when you start to add the battlements.

Battlements are a very important feature for the look of a castle. To add battlements, select the Shape tool with the Eraser modifier, and draw a cuboid block on the top of a tower.

Extend the cuboid so that it will erase a distinct section of the tower. It should erase the front and the back of the turret. You might need to experiment with the size of your battlements by erasing a section, and then using TAB to see how this looks on the silhouette of the castle from the Basic Editor mode.

There is a noticeable battlement on the left turret, but the gap is too wide.

Once you are happy with the size of your battlement use the move tool to create a uniform set of battlements across the top of the towers of your castle.

Press TAB to view the silhouette of your castle in Basic Editor mode.

Tweak your castle silhouette to take into account some of the aspects of your reference document. For example, the tower sides can be trimmed to give a more dramatic shape.

You can also paint some features onto your silhouette using the Voxel Paint tool. Accurately modelling arrow slits with Voxels will be invisible at this distance, but to mimic the shadow created by the slit you can paint Onyx Voxels onto the towers. 

They are just about visible from the level, but these occasional small details makes the castle feel more solid and real.

Major features of the castle walls can also be added. Use the Extrude tool to add depth to the castle walls.

Use the Voxel Paint tools to draw the outline of features on the castle walls. In the example below, an archway has been drawn within the main gate area using the Onyx Voxel.

Use the Extrude tool to extrude or regress features, and use the Fill tool to make it an appropriate material.

The flag Meshes in the Library will be too small at this distance to be visible. Make a flag using wood and velvet Voxels

When you look at the flag from the level this really underlines the Capture The Flag game mode, and gives context to the other flags in the level.

Reusing Your Castle

The great thing about making a Voxel Mesh is that you can copy it and reuse it, just like you did with the houses in the level. However, this time you want to be able to change the colour of the flag. To do this you will need to duplicate it.

Tech Tip: Why Do You Need A Duplicate?

A Voxel Mesh contains a specific configuration of Voxels. When you place a Voxel Mesh in your game, you are creating an Entity which is linked to that Voxel Mesh. Whenever you edit that Entity, you are actually editing the Voxel Mesh. 

This means that if you change the colour of the flag in your castle Voxel Mesh it will change the flag colour for every Entity that originated from that Voxel Mesh (you can try this to see it in action). To make changes to a single specific Entity, you need to make a duplicate of the original Voxel Mesh, then you can make the changes to the duplicate without it affecting the original Voxel Mesh.

 Select the Voxel Meshes tab in the Library.

Right-click on the Castle Voxel Mesh and select Duplicate.

Call the new copy CastleB.

Add CastleB to the other side of the map.

Drag it into a suitable position, and change the flag colour to match the same colour as the other team.

Vary the distance and position of the new castle so that it’s different from your first one.

Playtest your game to feel the dramatic effect of being surrounded by castles. Great stuff!

Effects

Effects add wind, smoke, fire and other natural phenomena to your game level. Effects are great for adding realism and movement to your game world, and help make your game feel like it’s set in a rich world teaming with life. Just like lights, you can use Effects to attract a player to a feature or location, and to give them information about the level or the story of the game. For example, a smoke Effect might tell the player that something is on fire.

Open the Effects tab in the Library, and select the Smoke Chimney Effect.

Place the chimney smoke on one or two of the chimneys throughout the level.

They don’t need to all have smoke. Don’t forget, this is an abandoned village, so many of the fires will have gone out, or they might not have had one to start with.

Playtest your game to see the chimney’s in action.

Effects are particularly good for adding fire and flames to your game. Try building a fire using Meshes, Voxels and Effects.

Remove Unnecessary Meshes

Tech Tip: Optimisation

By now there is quite a lot going on in the level. To be a good game designer is managing everything you want to happen in the level, with the technical capabilities of the system and the game engine that the level exists in. This means you need to be considerate of the technical overhead of the level. You can do this by tidying up the level, removing Meshes and Voxels that aren’t in use, and by turning off collision detection on Entities that are not reachable.

Work around the perimeter to find and remove any trees that aren’t required to hide the wall. 

This tree is not visible because it is behind the other trees, so this is possible to remove.

Also, have a look around your level to see if you have left any Voxels or Meshes lying around that aren’t adding anything to the game. If unsure, try removing it and see if it makes a big difference. Everything in your level should add something to the game either narratively, for aesthetics or for gameplay.

Turn Off Collision Detection 

The physics engine within Crayta works very hard, performing thousands of computations every second to ensure that the simulated physics in your level work smoothly. The more physics enabled Entities you have in your level, the more difficult it is for the physics engine to keep up with the demands of the level. To avoid causing it undue stress, you can turn off the physics and collision detection on Entities which don’t need it.

Some Entities within your level would be strange if the players didn’t collide with them and walked straight through them, walls for example, but many things don’t need to. For example, the wall around the perimeter of your level acts as a barrier to stop your players from falling from the world, but the trees that are hiding it do not need to do this as well – they are purely aesthetic. Therefore, you should turn off the collision detection on the trees that are hiding the perimeter wall. Choosing which objects have collisions turned off will be down to you, but try to keep it believable (even if it is fantastical).

To turn off collision detection, select an Entity.

In the Entity Editor, uncheck the collisionEnabled checkbox.

You should also turn off collision detection on your castles – players cannot get to them, so they won’t need to be “collidable”.

Turn off collision detection on very small Entities that wouldn’t be noticeable if a Player walked into them. For example, the rocks around this firepit are very small, and the fire itself has collisionEnabled set to on, so the rocks can have their collisions turned off.

These books can have their collisions disabled also.

Add Your Own Tone Of Voice

In the Game Entity Editor, you can tweak many aspects of the gameplay itself, such as the text in the notifications of the game, the team names, the score and the game time. You should use these messages to further embed your theme within the game itself.

Click the dropdown on the Hierarchy menu and select the Game Entity.

The Game Entity contains the Script which is used to run the game logic, such as who is winning, who has the flag and so on. It is also in charge of the messages that get sent to the players when they join or leave, as well as the names of the teams. You can edit these messages using the Entity Editor.

Select the welcomeMsg in the Entity Editor by clicking on the Pen icon to edit the text.

A dialog box will appear, which contains the text from the welcomeMsg. Here you can see that the text gives a welcome message:

Welcome to the game *{name}*!

The *{name}* part of this sentence will be replaced with the player’s name when they enter the game. Change this text to fit the tone of voice that works with your game theme. For example:

Good morrow Sir *{name}*. I bid you welcome!

You can also include rules in this introductory message such as:

Refrain from profanity, or face exile from the realm.

Edit the other messages in the Game Entity Editor to fit your theme. Here are some more suggestions:

playerJoined: Hurrah! Good Sir *{name}* has joined us!

playerLeft: Alas! Sir *{name}* has bid us farewell.

You can also change the team names to better represent the theme of the game. For medieval factions, a good option is to choose words to do with animals, fighting and royalty.

Blue: Falcon Renegades

Red: The King’s Vanguard

Notice how changing the team names has suddenly created an entire story about a band of rebels trying to claim the throne for themselves.

And that’s it! Publish your level, invite your friends and let the battle commence!

Recap

Congratulations on completing this series of Level Design Tutorials. In this series you have learned the basics of creating an exciting and polished level for a Capture The Flag game. 

In this tutorial, you looked at:

  • Creating a backdrop for your game by building opposing castles
  • Using particle effects to add movement and intrigue to your level
  • Optimising your level to reduce the technical overhead
  • Customising the Game settings, to establish the theme throughout every aspect of the level.

Adding Polish

Practice the techniques introduced in this tutorial by adding the following to your level:

  • Add a tall hilltop with a monument and a church to the surroundings outside of the map.
  • If you didn’t add a fire to your level, consider adding one or two. You could make an area in the village where they gather to tell stories.
  • Take the narrative you have developed in this level, and explore some of the other game modes with the same theme.

Next Steps

Whilst the tutorials focused on the theme of a medieval village and knights, the same principles can be applied to any theme you can think of, and you can apply this to any of the inbuilt Crayta game modes. If you want to start building game mechanics from the ground up, you can take a look at the Scripting Tutorials, which you can use to establish some basic coding skills to build games in Crayta.