Categories
Advanced Tutorials

Advanced Level Design 1: Voxels

Preface

How do you make great levels that are fun to play, believable and also look good too? This series of tutorials is focused on making a single Capture The Flag game, and working with Crayta’s Advanced Level Editor to shape and dress a level that is aesthetically pleasing, but that also offers some interesting gameplay opportunities.

The Advanced Level Design tutorials are designed to introduce you to some of the advanced level design tools available in Crayta, and to give you the skills and the confidence to theme and develop your own levels. There are some additional activities at the end of each tutorial to further develop your skills, and to make your game more dynamic and interesting.

Introduction

Level design is an art, and there is not necessarily a right-or-wrong way to make a level. Instead, this first tutorial aims to show one good way to start making a level that is often used by professional game designers. You will take a simple game mechanic, decide on a theme to work with, and start to shape a themed landscape that offers opportunities for some interesting gameplay dynamics. Later tutorials will look at dressing the level and adding rich detail. Let’s get going.

Create Your Game

When you’re designing a level, you need to keep two things at the forefront of your mind:

  1. How will this affect gameplay?
  2. Does this feel believable?

Level design is a constant balancing act between these two things, and when you get it right, the level will look and feel great to play. Sometimes you will make level design choices based on gameplay, sometimes it will be aesthetics. 

To start, open Crayta and create a copy of the Capture The Flag game. You will be using this as your template for these tutorials, but you can use many of the same techniques regardless of the game type. You will be greeted with the following screen:

Press TAB to enter the Advanced Editor Mode.

Game Breakdown

Capture The Flag is a team based game, where players must run to the other team’s base, grab the flag, and return it to their base. Each time they do this, they score a point. When the timer reaches zero, the team with the most points wins. Sounds easy? There is one thing that makes it slightly more challenging – you can kill each other:

  • If you get killed, you will respawn at your base after a time penalty.
  • If you get killed whilst holding the flag, you will drop the flag, which means either team can pick it up. If a team recaptures their own flag, it returns to their base automatically.

Test your game and play with the mechanic to get a feel for what the players need to do. When you are happy that you understand the basic premise, return to the Advanced Level Editor.

Game Parameters

Each prebuilt game mode includes a list of parameters that you can change to completely customise the gameplay of your level. The game is coordinated by a “Game Script” which you can find by clicking on “Game” within the dropdown in the Entity Hierarchy. 

The game is quite short at the moment. You can adjust this with the maxPlayTime Property. Lengthen the game time from 1 minute to 5 minutes. Within the gameScript, find the “maxPlayTime” Property, and change this to 0H 5M 0S:

Test your game. Once the lobby has concluded, you should find the game timer now counts down from 5 minutes.

Creative Control

The gameScript gives you many options to change the game parameters. This gives you the opportunity to design your game right down to the core mechanic. You can regularly revisit this Script and make tweaks to improve your gameplay.

Researching A Theme

Coming up with a theme can be great fun, but using it throughout your level design can be a little challenging. For this tutorial, we will take the game type as the inspiration for our theme. Flags. Flags make me think of a mysterious history, a dark fantastical time, a time of knights and noble deeds and glory, and flags. Two warring factions are locked in eternal combat, fighting to lay claim to a crucial, yet sleepy, town. By capturing the flag, they assure their complete dominance over the opposing clan, and when the battle is over, the winner rules the realm. 

To develop this theme, a good idea is to create a research document, and then fill it with imagery of the type of world you want to make, and the feeling you want to give to your player. The process for this is simple, find somewhere which you can use to store your images (a Google Doc is a good start), and search online for images relating to your theme. For this theme, I might search for the following words and phrases:

  • Medieval village
  • Knights
  • Wilderness

Copy and paste images that reflect your theme into the document. The process of doing this helps you to fine-tune your theme, and gives you something to refer back to as you develop your level. Write a note to remind yourself of ideas triggered by the image, and give a reason why you have added that image in particular. For example “a narrow bridge over a canyon – it’s a shorter way across than going around, but limits your movement making you easier to trap”.

Creative Control: What Does This Add To The Game?

The level itself is a useful tool that can help players to achieve their aims, progress through the game and have an enjoyable experience. Each aspect of your level should perform one or more of the following actions:

  1. Teach a new game mechanic
  2. Provide a memorable moment of gameplay
  3. Supply the player with a reward such as a powerup, or a new weapon
  4. Provide a pleasant visual vista and/or a memorable area that helps the player orient themselves in the level

Knowing why you have added it to the level will also give you the chance to make sure it performs its task well, and don’t be afraid to modify or remove elements that are not meeting one of these criteria.

Once you are happy with your document, and feel like you have plenty of material to refer back to, return to the Crayta Advanced Level Editor.

Mapping Out The Level

By holding right-click on the mouse, you can use WASD and the mouse to move around. You can also use Q to move down, and E to move up. Move the camera back in your level so that you can see the entire playmap.

You can use the Fill Bucket tool to turn the white Voxels into grass. To do this, click on the Fill Bucket icon at the top of the screen. Then, select the “Grass (Short)” Voxel in the Voxel Library. Click anywhere on the terrain Voxel Mesh to turn it into grass.

You should also give your players a decent sized play area. To extend the map, you can use the Extrude tool. The Extrude tool can be used to extend a Voxel Mesh in any direction. Select theExtrude tool at the top of the screen (next to the Fill Bucket). Hover over one edge of the Voxel Mesh and you will see a strip of Voxels highlighted in blue under the mouse cursor. Click and drag the mouse to extend the Voxel Mesh. Make your level a bit longer, and a bit wider using the Extrude tool.

Remember to test the game regularly until you are happy with the size of the level.

Now it’s time to create a basic level map. Ignoring gameplay for a second, the first thing we want to do is build a familiar topography for a medieval village. 

Sketching The Level

Using the research document, you can see that many fantasy villages are placed in a green space, near a water source and near a forest (close proximity to natural resources would have been very important before everyone drove around in cars). This map will put each of the bases a different hilltop, with a village between them. 

Firstly, select the Grass (Wild) Voxel from the Voxel Library. Select the Pen tool and click on the Paintbrush modifier. Increase the size of the tool to 20 x 20 x 1. You can use the Paintbrush Pen to sketch a basic topology of your map. Start by painting two new areas for the bases. For the Capture The Flag game, the base location is important. They should be balanced, so that neither team is at an advantage, and easily visible, so that all the players know where to go. A good start for new base locations is at opposing ends of your map.

To ensure it is intuitive where the players need to get to, these bases will form two hilltops, and will be eventually decorated with objects of the teams colours. In order for our level to feel believable, we need to think about why these two hilltops might exist..

Creative Control: Take Inspiration From The Real World

To make a believable level, even a fantastical one, we need to draw inspiration from the real world. Here you are going to separate two hilltops at similar heights, so you have a couple of believable options to choose from. 

You could use a medieval path, which would likely have taken the easiest route between two hilltops, i.e. the flat space between them. Alternatively, if you wanted to separate the hilltops with a water feature, a river might have eroded a valley between the two hilltops.

Use a different Voxel (I’ve used Gravel) to separate your hilltops with a line that can give a general flow to your level. This will help players feel like this is just one snippet of a larger world, and gives you a guideline to build around.

Creative Control: Start big

Leonardo da Vinci famously stated “Art is never finished, only abandoned”. This is true for levels and games too! We are in the early stages of a level design, and there is a lot to do. The trick here is to not be too precious with the small details. Once you have built up a level map you can refine it later, and make it perfect. You need something to work with first, and sketching out the level is the first step in the process. So be bold! And don’t be scared to make mistakes, sometimes they can lead to the most interesting aspects of your level!

Contouring

Contouring is a great technique to build aesthetic and functional topography. Contouring uses two tools – the Pen tool and the Extrude tool.

To start, select the Pen tool and change it to a square. Ensure the Paintbrush modifier is selected, but change the size of the block to 3 x 3 x 1. Draw a line joining your hilltops to the edges of the map, loosely following the direction of your pathway.

Now you can add some more contours between this key line and the pathway. Add 4-5 contour lines between the base and the line in the middle. Add a few contour lines behind your hilltop also. Make sure that none of the lines touch each other, there must always be a gap between them. Also make sure that they reach the edge of the map.

Creative Control: Contouring

Look at any standard Ordnance Survey map and you will see contour lines. These are lines that show the map-reader the height of the land. Looking closely, you will notice that they are never straight, and they are never the same. Also, the closer they are to each other the steeper the land. Take these points into consideration when you are drawing your contour lines.

Once you are happy with your contour lines do the other side in the same way. 

Once you have finished drawing all of your contour lines it’s time to grab the Extrude tool and turn these lines into hills.

Click the Extrude tool. The Extrude tool raises or lowers a group of Voxels that share type. For example, each of the Grass (Wild) you painted into contour lines are now their own group. Use the Extrude tool to raise the line of Grass (Wild) closest to the path by one block.

Now raise the line of Grass (Short) behind this by two blocks. Then the next contour by three blocks, and so on. You should see a hill forming. If you realise that a line doesn’t reach the edge of the map, or that it is touching another line, it’s easier to return the height to the base level and use the Pen tool to revisit the line to make sure it’s perfect, then try Extruding again.

Once you have reached the edge of the map, repeat the process on the other side

Great! You have created a valley using contouring. To finish the valley, use the Fill Bucket tool to fill each of the lines with the same Short Grass Voxel.

Finally, tidy up any Voxels that you think look a bit out of place.

Moving The Bases

Once you have created your landscape you can reposition your bases to the hilltops you made. To do this, first select one of the flags and move it to the hilltop.

Do the same with the Locator. Make sure that you move the Locator “start1” to the same hilltop as the Prop “flag1”.

Select the Eyedropper tool. Clicking a Voxel with the Eyedropper tool selected will equip your Pen tool with the Voxel type automatically selected. Click the white material that forms the old base. Then select the shape tool, and the Paintbrush modifier. Paint a square of the same size as the original base under flag1/start1.

Use the Eyedropper again to select the blue plastic that surrounds the original base. Again, use the shape tool with the Paintbrush modifier to replicate the original base by drawing a coloured border around your white square.

Now select the Fill Bucket tool and the Grass (Short) Voxel from the Library. Fill the old base with the Grass Voxel to remove it completely.

Test the level and you should find that you now spawn at the blue base that you moved to the hilltop.

Move the red base to the opposing hilltop using the same technique.

Creating Template Voxel Meshes

Now that we have a fantastic topology for our game we can get to work on building the village. 

Start by moving your character to an empty space within your map. To do this, hover your cursor over a clear, flat location and press R. Your character will appear where your cursor is. You will use your character for a sense of scale when building your Voxel Meshes.

To create a new Voxel Mesh, use the Library to navigate to Voxel Meshes. You will see that one already exists in here – your terrain. Click Create New Asset to create a new Voxel Mesh. Name the new Voxel Mesh “House”.

Select the Voxel Mesh in the Library.

Click anywhere on your map. You will see that every new Voxel Mesh starts as just a single 1x1x1 block. By ensuring that the Voxel Mesh is selected in the Hierarchy menu (on the right), you can build on this block and it will all be part of that particular Voxel Mesh.

Select the Shape tool, this time with the Add modifier selected. Select the Brick (Medieval) Voxel. Draw a floorplan for your house with a reasonably sized rectangle. It doesn’t need to be huge, as this is just a small peasant house in a medieval village.

Press Enter to add the floor bricks. Before deselecting the rectangle, turn on the Eraser modifier for the shape tool. Bring in the sides by one block each. Press Enter and you now have a floorplan for your house.

Select the Extrude tool and Extrude the floorplan up to above the height of your character.

To make the roof, use the Shape tool to draw a line of Voxels across one end of your house one Voxel wide. Select the Steps modifier. Now increase the height of the line and you should see that it automatically creates a sloped roof shape. Press Enter to add the blocks.

Classic peasant houses tend to use “thatch” which is a natural roofing material made from hay. Use the Library to select the Hay Voxel. You can type “Hay” into the Library Search Bar to save time.

Select the Hay Voxel, then select the Pen tool. Make sure that the Add modifier is selected and set the size of the Pen tool to 1 x 1 x 1. Create a single block layer of Hay resting on your sloped roof. You might want to add a small overhang to either side of your roof also.

Once you have marked up your roof, you can use the Extrude tool to extend it to the other side of the house.

Make sure to add overhang to the roof on either side to give the house a way for any rainwater to run off. No-one wants soggy peasants.

Great! To finish your house, use the Shape tool with the Eraser modifier to remove blocks for doors and windows. Remember, you are making a game which includes some combat, and that these buildings will form major parts of cover. Windows can offer a major advantage to clever players, as they give partial cover. Think about the aesthetics (how it looks) as well as how the impact on gameplay when you’re shaping and adding detail to buildings and features.

Add some finishing touches to your house, such as some grass around the bottom so that it feels embedded within your level. Make sure to add the grass to your House Voxel Mesh, and not the Terrain Voxel Mesh.

Great! You have made a house template. Creating a village is now simply a case of adding a few houses to your level. Select the House Voxel Mesh in the Library.

Add some houses to your level. If you look in different directions when you add them you can add houses at different angles. In your research document, you might notice that medieval villages didn’t tend to have an ordered grid system (they didn’t have town planners like we do now) – buildings were made where their owners wanted them to be. So feel free to dot them around your landscape in small clusters of two or three. Remember to follow the line of your level.

Test your game often and get a feel for your village. You can move, rotate and delete buildings that don’t feel quite right as you wish.

Recap

Great work. You have established a small village in a valley. In this tutorial you practiced the following techniques:

  • Sketching out a level map.
  • Using contours to create a believable topology.
  • Making use of a variety of Advanced Voxel tools such as Shape, Pen, Eyedropper and Extrude.
  • Changing the function of the tools using a mixture of modifiers.
  • Creating a new Voxel Mesh to make a reusable building template.

Adding Polish

This is just the beginning of your map. You can continue working with the techniques established in this tutorial. Here are some further phenomena you might want to consider adding:

  • Your cottage is made using Brick (Medieval), but there is a more suitable Brick (Cottage) in the Voxel menu. Use the Fill Bucket tool to change the brick to one template, and you will see it replaces this for all templates.
  • Add some more detail to your house Voxel Mesh such as a chimney and paint a floor material
  • Create another house template, and dot these around your map also. Adding variety to the buildings on your map will make your world more believable and immersive.
  • A village would usually have some simple amenities such as a place to congregate and socialise, and a place to buy things. What other buildings could you make? Use your research document for inspiration.
  • Use some of the more decorative Voxels throughout your level. Add Grass (Wild) and Grass (Meadow) throughout to create variety. Think about how these phenomena would occur in the real world when choosing where to place them.

Next up: Props

Now that you’ve had a look at some of the more advanced techniques in level building it’s time to think about dressing your level. To do this, you will be using the Props Library. Head over to the next tutorial to discover more.

Advanced Level Design #2: Props