Radial Level Design
– Premise –
I wanted to write something like for a long time now. Talking about some of the process I’ve used in my career. This time, I’ll write about Radial Level Design. Most specifically the process I used to create London on Assassins Creed: Syndicate at the start of the project when we were only me as Lead Level Design and the Level Design Director Jo.
“What’s Radial Level Design?”, you’ll say. Or even, “What is this weird term?”
Well, this is what I’ll explain in the lines bellow. The goal is to share what I’ve learned on creating a city that exist in real life with all it’s landmarks and personalities in a video game.
Disclaimer: I’m not working at Ubisoft anymore so no image whatsoever will be taken from the actual game and I’ll even take a completely different city for the purpose of this explanation.
– The Process –
The first thing you have to keep in mind while doing a real city in a video game is that obviously, you won’t (well, most of the time I guess) be able to recreate that city as is. The goal though, is still to give a really good feeling of “I know this part!” to the player if they have already visited that city and to respect the city itself.
AC Syndicate was set in the Victorian London era during the Industrial Revolution. One thing that was really interesting and useful for us is that it’s during that time that a lot of stuff that we are still doing today came to be. Like, photography. That was so good for references purpose, even though most of the pictures were pretty much take 20-30 years later than our period in the game, points of interest in a city barely ever change though the years.
So, since I’m from Quebec, I’ll take the beautiful Quebec City as an example throughout this blog post and refer to the process we were doing.
Here is a google satellite view of a part of Quebec.
– Step 1: The Landmarks –
The first step is to take a map and identify the landmarks and/or all the points of interest.
Landmarks are the spots where every tourists go visit when they are travelling.
Points of interests (PoI) are less important part of a city that still attracts a lot of people.
One last thing that is also a point of interest in itself is a park. Nature/vegetation in a city is always something that creates a wow.
These areas are the pillars of the city. This is where the majority of the production time will be spent. These areas can’t really be bent or altered.
This is also the areas that the player will remember in a game and help him/her navigate in the city remembering where he/she is.
In the map bellow I marked the Landmaks with blue dots, the PoI in orange and parks in yellow.
– Step 2: The Main Roads and Water –
The 2nd step is to identify the main roads of a city and where the important water flows. I’m not talking about a tiny river here, I’m talking about a nice river or a lake.
Identifying where the main roads are will help you structure the city. The landmarks are where the attention will be gathered but the roads are the back bones, the spine of the city.
The rivers, on the other hands are good mainly to create guidelines to the players. How many times in your life as a gamer have you followed a river? That’s super easy to follow right? Also, sometimes, they are really useful as path blockers or end of map. How many game world end into the ocean at some point?
Another thing that can give a nice guideline to the players are railroads.
We don’t have a lot of important railroads in Quebec so I’ll skip that in the example.
On a side note, in London, on AC, it was on the contrary, really important.
In the image bellow, in blue are the rivers (not a lot!), in red, the main road.
There is also something pretty interesting in Quebec, the city is made on plateaus. The upper city and lower city are separated by a pretty big cliff. There is also another (even bigger) cliff going down the St-Lawrence river.
So, in this specific example, it’s pretty important to take that in consideration.
I represented that with the yellow lines.
– Step 3: The Districts/Neighborhoods –
Normally this part should be easy. You basically have to split the city into districts. If you are recreating a real city, this should be pretty straight forward.
The goal here is to create zones, not too much, not too little.
Note: This is related to the game you’re doing. Maybe you need 50 different zones, maybe you need 5. So either way, don’t hesitate to merge some or split some if needs be. Back on AC, splitting London into districts, we ended up with 11 at first. (I’ll talk about that later because you always end up with less.).
You can see in the image bellow that I ended up with 9 districts in white.
First interesting obvious point, just following the river/roads creates districts by itself.
Second interesting point I found that the game would probably be big enough cutting it after that big road to the left. There was just a park after that anyway!
Note: Even in conception, it’s important to think about the production of the game. What is useless now, will also be useless later. So don’t hesitate to cut stuff already.
We had the same thing happening on AC. There was one super cool landmark that was so off of the city that even if that was a really good one, we decided to cut it already at that state of conception.
– Step 4: The Cropping –
Alright, this is the most important part of the process and the hardest. This is also where the whole purpose of this process takes place.
Designing in Radial around the landmark areas after the cropping.
Right now, we have all that we need to create the city but obviously, it’s way too big for a game. Well at least, London was way too big as is, for an AC game. We had to cramp 50 square kilometers into 2×3 kilometers. That was a constraint we had for a lot of different reasons that I won’t explain here.
Note: Again, think about production here but it’s ok to think bigger. You’ll end up, I can assure you, cutting more and more during the production of the game.
So, what you do here is that you take the software that you want and you draw the global layout of the city taking every single landmark/PoI you’ve tagged above related to your main roads, rivers and other important thing you pointed out.
It’s time to go a little bit more micro and it’s time to bend reality.
Note: It’s important to remember that this is conception and that this step is strongly going to change for different reason in production. But this is just an example.
This is what I came with.
I left the step 3 map under to show the difference in size.
Everything that was on step 3 is still in but is also way closer.
If you see, there’s now a green line (I forgot that on purpose for the sake of the example). Sometimes, you’ll find new interesting things to add as you discover the city more and more.
Around Old Quebec there’s a huge wall, remnant of the construction of the fort, around the city. It’s pretty important! This is the green line.
You can also see that I went from 9 districts to 7.
Cropping everything forced some districts to disappear since they were not needed anymore.
Another point here is that district 5 has no landmark or PoI at all. I like the shape of it since it completes the global layout of the map but if cuts are needed in production, I would kick that one out or bend it to merge with 4 and/or 6. Could also do the same thing with 7.
– Step 5: Radial and Micro –
Now, it’s time to go micro and crop again, on a micro scale, if possible.
For the sake of the example I’ll take the part of the map at the top-right with a bunch of blue points (landmarks).
At this step, the radial design finally comes to life.
There I take a closer look at the map, mark the exact landmark (blue in the image bellow) and make some kind of circular shapes around them.
I usually make a tiny shape around the landmark itself (orange) so the facade around the landmark looks exactly how it’s in real life. It’s important.
Then, I draw another shape around the last one, a bit bigger (yellow), this is the back of the facades and it should respect shapes, since it’s still pretty close to the landmarks.
Sometimes, really often in fact, landmarks are really close to each other so it’s pretty important to create shapes around them all in one. You can see that on the left of the image. There are 4 landmarks really close to each other.
After doing this for all the landmarks in an area, you can chop in the meat. Everything between landmarks are filler. Something that is not important to do as is. It’s shown in the second part of the image bellow.
You can see here that, the right landmark is way closer. I chopped in the meat. Then, I draw the roads on a micro scale, leaving the mains roads that we had earlier in step 2 becasue they are still the back bones of the city and adding some more to make small areas, thinking about flow and other level design principles.
Then you rinse and repeat for all the landmarks, PoI and other marked areas of your city.
– Step 6: Finishing Up –
So at this stage, you’ll have a pretty detailed first draft of your city. For this step I won’t put an image because it’ll just look like a spider web with all the lines and circles but I’m sure you get the idea.
Now it’s time to put that in the game!
What I do normally is that I put the image I created in photoshop and export that so I can use it as a texture in a 3D software. I put that on a plane, scale it so it makes sense for the size of the main character and then I just create 3D shapes out of the image. Respecting everything that was made above.
Then you put that in the game editor, check the flow and the size, and tweak and check again and tweak again until it feels good enough.
At this point, it’s normal game development. Creating the vistas, the beauty shots, thinking about the flow again, going micro on the filler areas and so on. Then testing again and tweaking again.
– Ending notes –
So, like every single design process, this can be bent and changed, useful or useless. Everyone has his own way of designing things. I found that method was pretty good for planning ahead. It’s pretty straight forward and easy to do.
This is also a a method that can be used to create any kind of map in general. Obviously you will start from blank but building in radial around landmark is one pretty usual thing to do. With that, your layout, your world, will be structured.
Hope that gave you, readers, ideas for some future projects.
I would like to thank Jo Dumont, he’s the one that showed me this method back then.
Leave a comment if you have any opinions on this or have any questions!
Don’t hesitate to click on the little blue follow button on the top right of this page.
Also, follow me on Twitter https://twitter.com/JFGnorD