Start from 2D: How I Design 3D Levels Using the Wrap-around Method

Saar's Gamedev Diary #1

(No AI was used in the writing of this post or the design of this level)

Ah.. Level Design… One of the most difficult aspects of building a video game, yet one that many don't even know exists, let alone define. It wasn't long before I ran into this brick wall of a skill gap in my gamedev journey.

I found it to be the ultimate of blank-page problems, where instead of a blank 2D page, we have a blank 3D world that extends in all 3 directions forever, and must be filled with engaging, beautiful, coherent and intricate fun that's not too hard and not too easy; it also has to be educational, original, intuitive, and rewarding, did I forget anything? It's enormously challenging to start something like this, especially when our poor ape mind has so much trouble planning in 3 dimensions (two's great but three's a crowd hahaha).

In this post, we'll create a level together, from scratch, using a workflow I call "The Wrap-around Method" that can give rise to complex, "3D feeling" levels, while starting from a simple, 1D list of ideas.

Who am I?

I'm Saar, 31, a long time Software Engineer, Product Manager and Graphic Designer. I tried getting into gamedev during weekends and evenings, but after 3 years of my game getting nowhere, I decided to take things more seriously and switched to a part-time job to dedicate more time to this (this has been a great decision, I may write a separate post about it).

In these posts I'll share some of the experience and insights I've learned on this journey. My conclusions might change as I go along, but I feel like I already have some ideas worth sharing.

I honestly never thought I'd write all of this, but I found myself articulating a lot of these ideas to friends and one of them convinced me to write them down. Let's see how it goes 😁

Prologue - Level Design - What? Why? How?

What is Level Design?

Level design refers to the hidden art of creating the layout of a level and deciding what the player will do at each point in it. It is quite separate from game design (that is, designing the actual game mechanics) and environment design (making the level pretty). In larger productions these are often done by separate people.

Let's look at the game Portal as an example. The game design here would be creating the portal mechanics themselves, as well as the cubes, buttons, and enemies, which are also game mechanics. The level design would be to string these mechanics together in a 3D space to construct a level that uses these existing mechanics, up to the point where the level is fun and playable. Environment design would then be to make the levels look like a science lab, with textures, props, animations, etc.

Why Level Design and Game Design are the chicken and the egg

In order to build a game, we need to find a set of game mechanics that are fun and flexible. Fun in the sense that they are enjoyable in the moment-to-moment gameplay, and flexible in the sense that they can be used to create a varied enough game that keeps the player engaged with enough novelty to last a good few hours of content.

Finding a game mechanic that's fun is hard, but I'm not going to focus on that in this post. The flexibility part though - that's also tricky: the chicken and egg problem here is that to prove that a game mechanic is flexible, you must build good levels with it.

When I first started thinking of game mechanics for my game, I implemented some ideas and built a shitty level with them - and it just wasn't fun, and I didn't know why. Were the mechanics bad? Or perhaps I simply didn’t know how to build a good level given a fun mechanic? It can be hard to tell the difference.

Luckily, it is possible to learn level design separately, as we'll see in the next section, so I set out to do it. Once I knew how to do good level design, I'd be able to properly test and confirm/rule out game mechanics.

How to learn Level Design - build new levels in an existing game

But how do you practice level design? It's hard.

One thing you could do is create levels for an existing game - it will already have game mechanics that are objectively good (because a good game has been built with them). This way - if the result isn't fun, you know that the problem is the level design and not the game design.

I picked Neon White, a 3D first person platformer, which is the same genre as the game I was trying to build. It's an excellent game with well thought out mechanics, and brilliant level design.

Unfortunately, I couldn't find a level editor for it (in hindsight, I didn't look well enough 😅), so I set out on a "short detour" to recreate this game, or at least most of its core mechanics, in Unity. Essentially my goal was to create my own level editor that I could practice level design in.

After about a month's work (on evenings/weekends) I managed to get the basic mechanics of the game working, with soul cards, enemies and the UI:

https://www.reddit.com/r/NeonWhite/comments/1jncigi/i_recreated_neon_white_in_unity_in_order_to_learn/

NOTE: All the Neon White rights and assets belong to Annapurna and Angel Matrix, this is for educational purposes only, and is not endorsed/affiliated with them in any way.

NOTE: If there already is a level editor for a game in your same genre, you might be able to skip the part of creating your own - although it's a great educational experience in and of itself, and allows for greater flexibility (I'll discuss this in a future post about tooling).

OK, I have a level editor, What Do?

Now comes the hard part:

So lonely 💔

The whole wide world in front of our little cylinder collider of a player, and we have to fill it up.

This part hit me really hard, and I really had no idea where to start. How do I get from that empty world to something that looks so intricate and 3 dimensional as this:

Planning in 3D is hard. I'm not very good at it, being a long-time 2D graphic designer, and I find it really hard to grasp how to even start designing something that feels like a level in a 3D platformer.

What I did have are the core game mechanics.

Quick rundown of Neon White's mechanics

Neon White is a 3D first person platformer, with your standard jump, walk and look around.

You can walk more quickly when you walk on waterways or on the level floor which is often an "ocean".

You pick up "Soul Cards" placed around the level, each is both a weapon that can be used to kill demons, and also grants a platforming ability when you discard it.
For example, the card called "Elevate" is a pistol that can allow you to double jump when you discard it in midair:

There are multiple kinds of demons, but in this example we'll only see one - Balloon Demons which can be jumped on to grant a midair-boost up:

There are many other types of cards and demons, but these will do for our example.

Act I - Blank page to initial level - the Wrap-around method!

Step 1D - come up with a list of player actions

In a linear game, such as a platformer, even though the world itself is 3D, all players actually go through it in one dimension - the time dimension 🤯

You can basically take any 3D level in a linear game, and take a look at the sequence of actions the player takes chronologically - for example, in the second level of the original game called Pummel - video here, the actions (ignoring left/right turns, for now), are:

1. Go forward

2. Jump up to platform

3. Jump down to platform below

4. Pick up gun card

5. Shoot some enemies with it

6. Jump to platform in front

7. Jump to another platform in front

8. Jump to the final platform and finish the level.

The level doesn't seem very exciting when you put it this way, right?

But that's the magic of it - such a seemingly simple list of actions is really, in some sense, equivalent to the full level you see in the game.

So to start off - we'll think of a bunch of actions our player will perform in the level, and place them in some order. These actions will be combinations of our game mechanics in some way. For example:

1. Jump from Waterway to balloon

2. Balloon after balloon.

3. Balloon - double jump card - another balloon.

4. Jump down to balloon that's below the player

5. Two balloons one above the other

That's a nice short list of ideas for the level that we can work with.

(If you're wondering how I came up with all these ideas for combinations of mechanics, I have a good answer and will write another post about it soon, so stay tuned :D)

Now, we need to place them in our level.

Step 2D - arrange actions in a straight line (like a 2D platformer)

The next step is to place these ideas in some order, restricting yourself to a straight line, as if it were a 2D platformer.

Here is how it looks for our example (I marked the actions based on their number in the list above):

Doesn't look very exciting does it? It isn't a lot of fun to play either:

That's because it is actually pretty dull without any turns and with only forward movement. Can simple left and right turns be that important?

Let's add a few turns to the level to check this. We'll start with left and right turns, alternating, still leaving us with a rather linear level, but with just a bit more 3D-ness:

Here is how it plays:

To be honest? Still not the best level I've played but there is a noticeable improvement - the turns do make it feel like a 3D platformer level rather than a 2D platformer level, and add a bit of excitement.

But the predictable pattern of the turns here (left-right-left-right…) makes it still too dull. So let's take it up a notch.

Step 3D - wrap it around!

This is where the real magic happens: we want to take the linear path and wrap it around itself in some arbitrary fashion. Imagine that your level is a long shoelace drawn out by the user's path through it - then take that shoelace, crumple it and throw it on the ground (and the rest of the cake, too):

As you can see, I basically randomized the turns between each action. The first waterway now turns left a bit, then after the double balloon jump we take a sharp right, loop in around it, take a sharp left and jump below the obstacle, then the final stretch goes diagonally.

What we're left with is a level that already looks a lot less boring - the path loops and winds around itself, and doesn't reek of 2D as the previous iterations did. And how does it play?

This now really starts to feel like a 3D level. It still has problems, that's for sure, but look how far we've come:

Great - we can pat ourselves on the back - but what do we do now?

Act II - Solving the problems

Switch to Problem Solver mode as quickly as you can

The blank page moments are rife in level design. These are the really hard part of every creative endeavor, as they are really not flow-inducing (you don't know what to do next and since you're so far from a finished product, it's hard to know if what you're doing is even in the right direction).Therefore, they are hard to motivate yourself to accomplish.

When we think of 'creativity', we often think of the act of creating 'something out of nothing', with an unconstrained space of endless possibilities, whereas in practice, creativity flourishes when solving constrained, narrow problems.

When solving problems, we constrain our creativity by only working on a small, well defined problem, with limited options to try, but this is actually what makes us thrive as creators - as it is much easier to motivate through, and the limited options give rise to creative combinations of them in order to solve the narrow problem. That's part of the reason game jams work so well - they give you a theme, a constraint.

So, as artists, we should strive to switch to Problem Solver mode as soon as possible - to keep our motivation and reach our true creative capacity.

Fixing our level

Back to our level. Now that we have something that looks OK-ish, we can stop thinking in terms of 'what level should I create' or 'how do I fill up this huge empty space', and instead take a look at the flawed level that we already have and try to fix it until it's actually good! #problem_solving

And now that the level is 3D, some new problems arise quite quickly - problems that weren't there when it was just a straight line.

For example, can you see the issue with this jump here?

The problem is that it's not clear to the user that they have to turn right. There's the balloon in front, which seems way more enticing than making a sudden sharp right.

So our first problem to solve: make it more obvious that you have to turn right. We can solve this by hiding the bad path, blocking the way forward with a wall:

Now, when the player hits the first balloon, they have a wall in front of them and know they can't continue forward, and they'll be drawn to the right (though we'll only know this for certain when we playtest).

Amazing! We've solved our first problem. But there are more. Here is another rather sharp turn that the user might not realize they have to make:

To guide them, we'll make the turn a bit more rounded by adding a small structure and a pathway around it:

You can see our plain little level, that up until now was just a bunch of blocks, is starting to get architectural elements added to it! And this happened completely organically, as a means to solve a gameplay problem!

Now, another problem that arose when playing this newly built part:

It's not clear to the user that they have to jump down into the next balloon - their gaze is drawn to the right, while the balloon is forward and down:

How can we fix this? Again with some small architectural elements - here I added a simple railing to the right:

The player's gaze now automatically ignores the right option since there's a railing there, and since there's no railing in front, they go forward and try to see how to advance from there!

I solved another few similar issues, mainly around turns that were too sharp.

And in the final part of the level:

But now the walk down this path became a bit slow, so I added another waterway:

We set out to solve a turn that was too sharp, and ended up actually enhancing the gameplay of our level by adding a waterway! This fits right in the level and feels natural, and it arose very smoothly out of necessity and problem solving, rather than out of thin air in an empty level.

The fixed level!

Now that we've fixed all the problems (that we ran into ourselves, at least), the level is actually quite fun to play!

The magic here is in how just solving a bunch of problems that arose organically from the newfound 3D layout of our once 2D level, we can make it feel like a level that was designed with some grand 3D plan in mind from the start! (and it sure wasn't!)

So are we done? Hell no, now comes the fun part!

Act III - Shortcuts that write themselves

One of the core principles of Neon White is that it encourages players to finish levels fast.

The way you do this, usually, is by finding a shortcut - some way to cut through from one part of the level to another by utilizing some clever break of the normal level flow, such as jumping where you shouldn't have jumped and getting to that building from a completely different angle.

This kind of breaks our original 1D hypothesis, as the player should now have multiple paths through the level. But that's where the magic of the wrap around method really shines!

Take a look at the start of our level:

After wrapping the level around itself, that balloon we jumped down to ended up suspiciously close to the waterway we started from! This might seem like luck, but it actually happens quite a lot when wrapping the level in and around itself. And if it didn't, you can go back and wrap it even harder until two parts end up closer to each other! We can't reach it as is, but that's a problem we could solve!! #problem_solving_mode

So I swapped to Problem Solving mode, and figured out a way to change the level a bit to make the jump possible, introducing a double jump card right at the beginning so that a clever player would be able to use it to skip right to our low balloon (I had to add a different reason to use that card for normal players as well):

Here you can see the yellow path showing the double jump normal players would take, and the orange path highlighting the shortcut.

And here's how it plays:

So now we have a 3D level, complete with shortcuts and everything, that really does feel fun to play.

It’s not perfect yet, and we still have some steps to go, but it is already at the level where it can be given to playtesters (we'll talk about playtesting in another post).

Recap - The Wrap-around method

Boils down to:

1. Come up with a list of actions the player will take and sequence them in time (1D).

2. Place them in a simple line as if building a 2D platformer level.

3. Wrap the player's path around itself randomly.

4. Solve issues that arise from this new layout, ensuring players naturally take the path you intended.

5. Utilize parts of the level that are now close together to build shortcuts and 3D architecture.

While this method doesn’t cover all possible types of levels and/or game genres, I have found it really useful, and have already created more than 10 levels with it. I’m planning to continue evolving it as my journey continues.

Next up - making it beautiful

This post focused mainly on the process of getting from a list of player actions to a fun 3D level incorporating those actions.

This creates a level that's already pretty fun to play, but it is still missing a level of polish that adds to the enjoyment and immersiveness of the level - for example, the buildings and structures in our level don't seem to make much sense, and are not that exciting to look at.

Making the buildings and structures coherent adds to the feeling of intricacy and 3D-ness that we set out to create. It will make the level more fun, and can even contribute to the actual gameplay, as we'll see in the next post: