Categories
Advanced Tutorials

Advanced Level Design 2: Props

Preface

You have a rural medieval village, but it’s only a landscape and buildings that are empty shells. It might not feel like much, but you have a good starting point for a great level. The next step for you is to add Props.

Introduction

A Prop is a 3D Entity. Unlike Voxels, Props have been lovingly designed and modelled in 3D by Unit 2 game artists. There are literally hundreds to choose from and, on top of that, they can be rotated, stretched and positioned in infinite ways. This means there is a lot of creative freedom afforded to us with Props, and sometimes this can feel a bit daunting. But don’t worry, this guide will help you through and soon you will be a Prop master. 

If you’ve played around some of the games within Crayta, you may have experienced some clever uses of Props to give cover, create points of interest and hide areas of the level that you don’t want players to see. This tutorial will guide you through dressing your building, then expanding these ideas to dressing your level, and finally discovering some alternative ways of thinking about how you use Props.

Open Your Game

Start by reopening the level you created for Level Design Tutorial #1. 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 before continuing with this one (don’t worry, I’ll wait).

Hopefully you continued onto some of the extension activities and given your level a bit of “pizzazz” (like flower meadows ahh).

Finding Props – A Door

The first thing you are going to look at is dressing a building. Start by navigating your drone camera to one of your buildings, and use the selection tool (arrow) or the Hierarchy menu to select the building Entity.

You can tell your building is selected because it is highlighted in the Hierarchy and the Entity Editor is open for the Voxel Mesh which forms its base.

Using the Library on the left hand side, navigate to the Props section. The first thing we need to dress this house is probably a front door. There are a few different ways to find things in this menu, and some are more suitable than others. For the door, you can click the arrow next to Tags and choose the “door” Tag.

This will filter the menu to only include Props that have been “tagged” with the word “Door”.

As you can see, there is still quite a variety available to you. Another way we can narrow down the door we want is by using the list view which means we can see more Props at once. Click the list view button at the bottom of the Library menu.

This also expands the descriptive names of the Props, so it makes it even easier to find what you are looking for. 

In the Editor Your cursor will change to be holding the selected Door Prop. Position the door in the doorway to the house and left-click to place. 

Press ESC to change to the Select cursor.

You should notice in the Hierarchy menu that the door has been added as a child of the Voxel Mesh of this house. The good thing here is that if you now move or rotate the house the door Prop will stay in place and move with it.

Remove the filter from the Props Library by clicking the “-” next to the tag.

Adding A Window

Perform the same steps you used to find the door to find a window:

  1. Filter the Props Library to only display objects tagged with the word “window”
  2. Choose the Window (Narrow Wooden Frame)

Add one window Prop to your window hole. You may find it difficult to add a window into the gap you left for a window. This is because attaching something to mid-air is impossible. Instead, add it to a part of the window frame.

And then use the move tool to move it to the correct position.

Creative Control: Window Cover

You can choose to completely fill the window with a window Prop, but make sure to think about how this might be used for cover in the gameplay first. 

Every house has at least one window, so do you fill this hole, cover it completely, or half cover it.

Ask yourself, if I was a player inside the house, what can I see from the window? Where would an enemy need to stand to see who is behind the window? Are there any other gaps in this building that I can shoot through or be shot through? Finally, be careful to make sure the game is balanced – if a window offers one team an advantage how can give the other team an advantage too?

Select your window and press CTRL+C to copy, and CTRL+V to paste the Prop in the exact same position. Use the move tool again to move the second window.

You can open one of the windows by using the rotate tool. Select the window, select the Transform – Rotate tool, and then uncheck “Grid Snap”. 

Click and drag along the Z-axis (blue handle) to make the window open wide. The window will rotate around its centre point.

Once you are happy with the angle, use the move tool to move it into the correct position. 

You could leave it there if you don’t want your players using the inside of the buildings as cover. However, if you do, select your front door and uncheck collisionEnabled.

This means that players can now walk through the door and enter the house, and they can use the window for cover.

Dress the rest of the buildings in your level so that they all have windows and doors.

Dressing Your World

Dressing your world can feel a little bit daunting as there are lots of possibilities, and there are many Props to choose from. Also, whilst our research document can give us some ideas of general shapes of buildings and landscapes, it’s a little more challenging to pick out Props from imagery. How do you know which Props might be suitable for your level? This is exactly why Tags are so useful.

To start with, in the Props Library, expand the list of Tags.

There are many Tags. So far we have used Tags to find Doors and Windows, but Props are also Tagged with a theme. Our level is a fantasy, medieval, farming type village, which gives us a few different tags we can select to filter the Props to show only the suitable ones. 

Creative Control: Who Are These People?

Something worth considering when adding Props to your level is the story of the game. Everything in your level will tell your players something about this world and the people that inhabit it. If you fill it with farming gear it will feel like a farming village, if there are weapons everywhere it might feel like a barracks, and if there are crystal balls and skulls then maybe it’s a magical community. 

So far we have kept the level fairly simple, but now it’s time to further develop the narrative of the game through your choice of Props.

Placing A Point-Of-Interest – A Well

Use the Filter box at the top of the Library to enter the word “well”. You will see that it filters all the Props to only those with the word well in the name (WELL and JeWELLed).

Select the Well from the Props Library

Creative Control: Placing Props

When you need to position something in your level, it’s a good idea to think like an inhabitant. Whatever Prop you choose, stop and think where would it go in real-world medieval time? For example, it’s likely the well would be somewhere nearby the village, easily accessible. 

Then, think about the gameplay. A well offers light cover, and you can shoot through some parts of it. Make sure it gives both teams a fair opportunity.

Place the well in your level.

You can use some of the Voxel techniques you learned in Level Design Tutorial #1 (painting and adding Voxels) to make sure that the well feels like part of the level. Maybe there is some mud due to the loading of water, or unkempt grass and flowers that have sprung up because of the fertile soil around the base of the well. You can call this technique “bedding it into the level”.

Building A Story With Props

One of the great things about building your own game is that you can choose what the story of your game is. Just bear in mind the type of game that you are making, and some Level Designers find it helpful to use the type of game to drive the narrative of the level. Capture-the-flag is a combat game, so in this level you could build a narrative about a surprise attack – all the villagers have fled! Items in the level can appear as if they were mid-use, but have been left in a hurry, or dropped in the middle of a job.

Browse the Props Library, and pick some items that you could include as points-of-interest. Build them into the narrative of the level, by making them “dropped in the middle of a job”. Remember to use Voxels to bed the Prop into the level, so it feels like part of the world, rather than added on top of the world.

Here are a couple of ideas you might want to add:

Here are signs that a person was gathering hay when the combat erupted, and they dropped the wheelbarrow and ran. Notice you can build some additional cover and maintain the narrative at the same time. The wheelbarrow and the hay bales offer two sets of cover.

A woodchopper midway through chopping some wood.

Bury some of the logs beneath the ground, to make different sized logs. You can also rotate them, and position them in a natural way. I have also used log voxels to create a “chopping plinth”.

Not everything has to be “dropped in the middle of a task”. This wheelbarrow wasn’t in use, and this looks like the place it is kept because the grass doesn’t grow where it is usually stored.

Add some buckets to the well – it’s used for villagers to gather water, so it makes sense there are some buckets nearby. If one is on its side, the players can fill in their own story about why.

Barrels are nearly always acceptable to put in a medieval world.

Groups of barrels can offer some medium sized cover.

There is a road running through this medieval village, and perhaps someone in the village knows how to repair and build carts.

Like barrels, crates are very versatile, and will still fit the narrative here. Move and rotate one or two of them with Grid Snap unchecked to maximise the realism. These crates also offer players an aspect of “parkour” to the level – skilled players can use these to get onto the roof, which has excellent line-of-sight, but is very exposed.

A medieval village might have had one or two hunters, and they will be using bows in order to capture food for the town. Targets don’t always have to be for combat, it could be for training young hunters, or just for a pastime.

Don’t forget to playtest your game, to make sure that the cover feels suitable, and to check lines of fire and combat potential of your level.

Enclosing The Level With Scenery

Now that you have built a loose narrative for your level, the last aspect of this tutorial looks at building walls to your level, and disguising them using natural scenery. Scenery includes rocks, trees, plants and other natural phenomena that will make this feel like a living, breathing world. 

To enclose the level we will make the village situated in a clearing in a forest. To build the walls, use the Logs (Vertical) Voxel to encircle the entire level. You need to make the logs at least 8 Voxels high to ensure the players cannot jump over them.

Start by using the Extrude tool to make the sides 1 Voxel wider.

Use the shape tool to draw a Cuboid of Log (Vertical) Voxels along the perimeter. Use the blue handles to raise the height so that players cannot jump over it.

Test your game and make sure you can’t jump over the exterior wall.

Surround your level with a wall of logs.

Now to disguise this hideous wall! You are going to use some of the fauna that is available in the Props menu to hide this wall, although it will still ensure your players don’t fall off the edge.

Ensure you have the Props open in the Library. Use the filter textbox, or the Tags to find trees.

You can drag the edge of the Library out to make it wider, and see more tree Props.

It may seem like choosing any tree would work here, but there needs to be some consistency between the world you are creating and the things that inhabit it, and that includes trees. You can use almost any tree in a world set in the present day, but when it comes to historical places you have to be a bit more careful.

The village is generically medieval, and the style of buildings made in this tutorial fit into a very westernised, European style of medieval. As such, the best trees for this level are going to be ones that would have been commonplace, and grown wild, in medieval Europe. For quick reference, here is a rundown of the general area of origin for some of the trees in Crayta:

NameOrigin / Climate
AcaciaAfrica
AppleAsia, Europe, North America (after colonial period)
BambooAsia
BananaAsia
BaobabAfrica
CedarAsia / Europe (high, mountainous regions)
CherryEurope, West Asia, North Africa
CypressNorth America, Africa, Australia, Europe (warm, mediterranean regions)
Date PalmNorth Africa, Middle East
Douglas FirNorth America (introduced UK 1800s)
EucalyptusAustralia
FirEurope, North America, Asia
JoshuaNorth America
JungleJungles
Mountain AshEurope, North America, Asia
OakEurope, Asia, North America (after colonial period)
PalmTropical countries
SequoiaNorth America – California
TopiaryGardens in Europe 1500s onwards, everywhere modern day
Weeping WillowAsia, Europe, near fresh water
YewAsia, North America, Europe. This style is more likely to be modern day.

As such, we can nail down the varieties we can use here are:

  • Apple
  • Cedar
  • Cherry
  • Fir
  • Mountain Ash
  • Oak
  • Weeping Willow

This tutorial only uses Oak, as it is a common tree in woodland and offers good foliage for hiding things. You can use a variety, or pick one and stick with it.

Make sure you have Grid Snap turned off and Collision turned off whilst placing these first trees, as these will be mostly used to disguise the log wall.

Place an oak tree Prop next to the wall.

Use the move tool to move it back to embed the tree within the log wall. 

Now move the tree down so the foliage is poking through the wall.

Don’t worry about making it perfect at this stage. By replicating this around the wall the overall effect will feel like the edge of a very dense wood.

Continue to place trees along the log wall. You can copy and paste the tree and use the X axis handle (red handle) to move the tree across. Make sure to vary the position slightly (higher/lower, forwards/back) and rotate the trees randomly to give the illusion of a wall of foliage. Don’t forget to loosely follow the contour of your land.

Once you have completed one wall, put your camera at head height and check to see if there are gaps where the player can see the wall. If there are any really obvious sections of wall at person height then add another tree to cover them, don’t be afraid to lower the tree significantly into the ground to fill the wall with foliage.

You can safely ignore most of the higher sections of the wall, as these will be covered by trees in front of it.

Proceed to do the same across all the log walls in your level. To save time, you can make a copy of these trees to paste over the wall on the other side. Click the first tree on the Hierarchy menu – this was treeOak1 for me.

Then hold SHIFT and select the last tree you placed in the Hierarchy menu (treeOak33 for me).

You should see you now have all the trees along the wall selected. Press CTRL+C and CTRL+V to copy and paste them, and then use the move tool to move them to the opposite wall.

You can do this again, and use the rotate tool to fill the remaining two walls.

Check your walls for any missing trees or really obvious sections of log walls.

Fix any gaps by adding another tree or adjusting the ones you have already.

The effect in the end should look like your village is in a clearing in a forest.

To polish this effect, add some more trees on the ground just in front of the log wall. Remember, forests are rarely in a straight line, so vary the position and rotation of your trees a little bit (with Grid Snap turned off) to make sure that they simulate natural growth. 

You should also add one or two trees interspersed amongst the village – medieval villagers did not chop necessarily chop trees down if they didn’t need to.

Remember to vary the rotation of your trees.

Playtest your level to make sure that it feels like you are in a wood clearing. Check for a balanced gameplay, and for a world that feels real. Keep tweaking the level and make small adjustments to ensure that it is telling the story of the level as much as it can, and giving your players opportunities for an exciting and interesting challenge.

Recap

Great work. You have now started to build a world and an embedded story within the level. There are lots of inventive ways to use the Props in Crayta to add drama or intrigue to a level. How resourceful can you be? In this tutorial you practiced the following techniques:

  • Navigating the Advanced Prop Library of 500+ Props
  • Dressing a building in your level
  • Dressing your level
  • Using Props as points of interest to guide the action and balance the gameplay

Adding Polish

You can continue working with the techniques established in this tutorial. Here are some further phenomena you might want to consider adding:

  • Dress the inside of your cottages – who are these people? How did they live? Use your research document from tutorial 1 or go and investigate some more.
  • Add rocks and other natural phenomena around your level, think about how they might give players some cover or create visual obstacles, and what would naturally occur in the real world.
  • Explore the range of Props further. Some Props in the library could be used in different ways by sinking them into the Voxels like you did with the trees into the log walls – for example, you could use the top of a wardrobe as a decorative bar in a tavern.

Next up: A world beyond the boundaries

Now that you’ve dressed your level and developed a narrative it’s time to ramp up the mood of your level, and really embed the drama. In the next tutorial you will look at adjusting the skybox, global lighting and adding further lights to evoke mood throughout your level.

Advanced Level Design #3: Lighting, Skydome, and Fog