An Open World Hub
FAREWELL Space mOrocco
Project Details
-
Solo project spanning 5 weeks (4h/day)
-
Created in Unreal Engine 5
-
​(Game Animation Template)
-
-
Focus​ on World Design​
-
Note: Some assets comes from artstation
​​
What have I done here?
I have created a hub location​ for a third person, open world game. I wanted to create a space whose purpose was to transport the player between locations.
This is not the place where the action happens, but the place that makes the game world feel alive, trough it's world building and attention to detail.
I wanted to create a place that is both easy to navigate, but also invites the player to explore their surroundings and still make it fun to traverse, even if you return and do it multiple times.​​
PRE-PROD
Inspiration
​I think a lot about fascism. About how it feels like we are living in the pre-apocalypse. So I wanted to create a level that reflects that fear.
And I think that theme can be aptly illustrated the further away from the danger you think you are. The feeling that what is happening in the world does not concern you. It happens​ to other people, not here. Only until it does.
​
​​To portray this, the level takes its inspiration from the Star Wars tv-series Andor. I wanted to recreate the resort planet Niamos featured in the show ​because of what it represents:
"A luxurious place where you think you can escape the horror's of the world, only to realize that no such place exist.​"
​
Since I wanted to create a small bustling hub location that could fit in an open world game, Star Wars: Outlaws​ became the obvious reference game for this level.
Andor, 2022, Lucasfilm
References
Casablanca, 1942, Warner Bros. Pictures
Cleveleys Seafront in Blackpool, England
​​​The planet Niamos that I am using as reference is depicted as a sci-fi hotel resort and I started by looking at big resort complexes in exploited foreign countries.
Another thematic inspiration for the level was the movie Casablanca. A story that is also about hiding abroad from the fascist occupation.
I loved the city of Casablanca as a setting for the story and Morocco became the main inspiration for the levels enviroment - with a hint of Kenya and Malta.
​​
It was important to me that the posh exterior had a backside. Just off the main path is the servant space where the locals whose labor keeps these establishments afloat live. And Morocco's bazaars became a big influence.
​
The final inspiration was the Cleveleys Seafront in England, the actual location for Niamos in Andor. I tried to incorporate some of the same design elements from the area that was not in the show, to make it both new and familiar.
The Story
A hub without a functioning game loop will be pretty hard to playtest. My idea to solve it was to come up with three quests to give the player a reason to traverse the hub.
These three simple quests could be completed in any order to make sure I did not create a classic linear level. To not waste any time, I copied the Casablanca plot and adapted it to this Star Wars-like universe.
​
I imagine all these individual quests could trigger a sublevel or cutscene. The important thing for this level is to get the player to those locations in an enjoyable way.​
Questline
-
Bride the corrupt officer
-
Sell the cantina to the rival
-
Get the forged indentification
​​
All these goals are located on opposite ends of the level, forcing the player to traverse the whole map.
I imagine this questline as an early part of the game. Kicking off a rebellion-story. ​
The Pitch
The story begins 26 years after the Master Thief made the score of a lifetime and retired to run a cantina in Space Morocco.
​
Now, a former partner snows up and needs to escape from the Space Fascist. It is time to do the right thing, throw away the comforting cynicism and help the partner of world.
Size
I always start with the size of the level. I looked at all of Outlaws' different hubs and liked the size of the opening level, the Canto Bight Workers District.
Even if it is not an actual hub, I loved how it feels like a big sprawling space, but in reality is a relatively small location. That was a feeling that I also wanted to recreate.
That level does not have a map, so to analyze it I had to play it multiple times, draw and time myself to learn how they achieve that sense of scale.
​
I was surprised to learn that it only takes no more than 40 seconds to run from one side of the level to the other. But since I experienced that as sufficient when playing, I decided to copy the scale. This gave me a rough napkin sketch to start working from.​
Napkin Sketch based upon Star Wars: Outlaws
Player Rotation
To help the player orient the hub, I started out by incorporating Clover Design / 4-squares in the level.
Though this technique is most common in multiplayer maps, I had the idea to try it out - to see if it could help with player rotation in this hub.
This design could both help the player navigate between the different Point of Interests in the hub and also helped me define the different districts.​
​​
I grabbed the list of Outlaws POI and placed them as nodes on a flowchart together with my quest objectives and divided them into my three (originally four) districts.
​
​
The important thing was to make sure there were no dead ends. Every POI gives the player the option to visit the next POI with minimal effort - creating a nice flow everytime the player returns to this hub.
Clover design
Flowchart - First version
process
The sample houses and placeholder POI creates
an interesting look even in the early stages
The Blockout
-
The first step was to make sure the distance between the quest objectives was correct. To do this I put the napkin sketch into Unreal and ran across it, until the size felt comfortable.
​
-
I created a simple house that I used as a border for the paths and simple POI:s, to get some early playtesting of the hub’s size.
It was important that the sample house had round shapes, in case I did not have time to replace all of them, they would still contribute to the level's shape.
​
-
On multiple points in the hub you get a view of some other area that can be explored. To avoid exposing these via long, straight paths, elevation was added, both giving the player vantage points and for elevating landmarks.
The elevation also helped with the navigation: if the player was moving up, they could know they were moving away from the shore.
​
-
I gave the three quest objectives a corresponding landmark. Since I stumbled upon some nice meshes on Artstation in my research I decided to use those as landmarks to save time.
To make sure the landmarks were always visible when I wanted them to be, I added sightline-cylinders to make sure I never accidentally blocked the view.
​
-
It was also important that the landmarks were not always visible. If they disappear from view I think it enhances the hub’s explorability and makes the player notice the surroundings.
And if the player got lost they could run in any direction and in less than 10 seconds they will spot one of the landmarks again. This contributes to the hub’s finabilty.
The Whitebox
-
I wanted to go for a slightly realistic scale, to match my reference game. The transition between the districts should not feel too abrupt and I tried to balance the distance between what was believable and still interesting.
I looked at resorts, bazaars, back allies and even a zoo on Google Maps to find an interesting scale and tried to stay as close as possible in size - without making the level boring to walk through.
-
To make sure the traversal was never boring, I always relied on the 10 second rule, to always have some sort of reward for the player every 10 seconds. In this case: a vista, pickup, POI, quest objective or a crate to jump over.
-
To make my playtesting smoother I added a widget with the questline, so playtesters could play the level without my prompts.
The widget was first filled with sci-fi buzz words but was changed later for something easier to understand (like how Niamos became Space Morocco).
-
The main path was given streetlights to signpost the main path for the player. If they are walking along a dark back alley, they will now know that they are leaving the main path (and that could be exciting in itself)!
-
Each district was given a more clear color palette to signify their difference and I also created a few new house types to spice up the variation.
​
-
Finally, I added a clear and unique focal point in the hub’s nexus area, just outside the cantina in the shape of a memorial. This to make the player recognize the area, even if they were to return from a different angle.
All this to help the navigation. All the other areas where given different focal points (except the bazaar which was intentionally created as a little bit trickier to navigate)
The process of creating the level - documented by taking one snapshot every day
The seafront is visible from a vantage point in the bazaar
Sightline-cylinders make sure I never block
the view of the landmarks when building
Some casual parkour breaks up the pacing
The quest-widget gives player directions when playtesting
Focal points helps the player recognize the area,
even I they enter from a different angle
Overview
Welcome to Space Morocco
This is a map of the level’s final layout, with height differences and stairs marked.
​​​​​​​​​​​This is a version of the map with the four districts outlined, as well as the main path and the Points of Interest marked.
​
What follows in this section is a detailed breakdown of the hub's different districts, their inspiration, function and what they have to offer the player.
Embassies
Nexus
Bazaar
SEAFRONT
Hub Breakdown:
The Nexus
The player’s home is intentionally located in the middle of the three districts.
This is both practical for the player in the case of convenience and also thematically fitting since the main character (just like in most open world games) is a person who easily flows between different social classes.
The main focus in the nexus area is the cantina that the player owns in the game.
Since the cantina is so big, the player may not always realize that it is the cantina they are looking at, so I added a little outside café area and the memorial focal point (mentioned above) to make the area more distinct.
​
The purpose of the nexus area is to help the player orient itself around the hub. I imagine it as the place that is revisited the most and from here three clear paths lead the player to the other districts.
Smuggler
Cantina entry
Even if it would have been fun, I did not create an interior for the cantina. It has a back alley and a roof that is the player’s main access to the cantina.
The gameplay purpose of the roof access is for the player to get a vantage point of the rest of the hub as they enter or exit the cantina.
The three other landmarks as well as the nexus’ focal point is clearly visible from the roof and the round shape forces the player to look at one thing at the time.
​
​
​
​
​
​
​
​
​
​
​
There is also a thematic purpose of the player not using the regular door and instead is forced to use the cantina’s servant space, increasing the sense of familiarity with the place.
​
The back alley was added to increase the level’s discoverability. It is another servant space that makes the cantina feel a little more like a real place when we can see where the goods are delivered and trash is stored.
Here the player can also find a Smuggler that is the player's entry to the black market.
Hub Breakdown:
The Seafront
The seafront is the level's most open district, characterized by being the area next to the water. It is mainly made up of a long boardwalk next to some hotel residences.
When people come to Space Morocco, this is what they envision. A place where you could lounge on warm stone steps next to the ocean. The promise of the premise.
The shoreline works as a nice datum, helping the player orient themselves. But since the water isn’t always visible I also needed some other visual signifiers to help the player find the seafront.
That is how the wind catchers came into use. They are tall and have a unique look and they are also the only moving part of the level, making them even more eye-catching.
​​
​
​
​
​
​
​
The wind catchers are clustered around the rivaling cantina Arkie’s. In the questline this is where the player goes to sell their own canting to get the money for the escape.
Rival
The sunset and the shadows it’s casting also helps with orientation. It also has a nice symbolic meaning, with Space Morocco’s time as a safe place coming to an end. ​
​
This area is supposed to feel safer and more relaxed than the other ones. This is the polished front. It was mainly done by creating vast views, long sightlines and few hard corners. Here any hostilities will be easily spotted.
Small things like the shape of the steps leading down to the water helps with creating a calmer atmosphere, indicating that this is a place intended for sitting and socialising, with its irregularities making it harder to just stroll by.
In this district the player can find a merchant, a tailor that sells beach wear and a space-phone booth from which a contract broker can be reached.
Merchant
Contract broker
Tailor
Inspiration
Blockout
Final
Hub Breakdown:
The Embassies
This district is the entry point for people arriving to Space Morocco. All the different administration buildings and security forces are located here - making it a convenient spot for you to commit your daily white-collar crimes.
I found it important that all the administration buildings had a privileged location next to the water. That the colonizers claimed the best spot for themselves.
The main focus in the area is the grand administration building. It is big and odd, and its design inspired everything else I built in this level. The size of it got constantly bigger after each playtest to make it easier to spot.
But it also helped the narrative that this colossal, fascist administration building was towering over the whole level.
​
​
​
​
​
​
​
​
​
I created small, arranged pockets for interaction in this district, benches and terraces and so on, to indicate that this is a place where people meet. Meeting places in the other districts are a little more organic and fluid. Not as stiff.
​
This was designed as a place you had to go to but (not necessarily wanted to go to). The area is organized. Broad streets, lots of streetlights and clean colours. There are even small patches of well trimmed lawns here, with a small pond added as a focal point.
I have worked hard making the other areas interesting to explore, but here I wanted to create a feeling of you wanting to leave. It was done by having more ways to exit the area and few alleys to explore, with a little less nooks and crannies.
That the buildings are slightly taller helps to create a bit of uncertainty in an otherwise open area.
In this area the player can find a street food vendor, a ship mechanic and the landing zone from where the player can leave Space Morocco.
Landing
zone
Ship mechanic
Street food
Corrupt officer
Hub Breakdown:
The Bazaar
The bazaar is the hub’s shadiest location. Both figuratively and literally. It is located the furthest from the polished shoreline, tucked away from the public's view.
​
This is where the exploited people live and trade, and the district is designed to feel a little hostile for outsiders by limiting the field of view - forcing people to orient themselves via previous knowledge and not signs.
I wanted to create the feeling that one wrong turn could lead right into a robbery.
Forger
Armorer
Trader
Gambling den
The main landmark in the bazaar is a big antenna-like tower that is also visible from every other district. This is where the player can find the forger and other dubious characters.
The bazaar has a more cluttered feeling than the other districts. It is harder for the eyes to find a place to rest with all the market stalls, stairs, arches and exposed cables.
I did run the risk of losing both the player’s attention and orientation by adding so much visual noise. So after playtesting I removed all the planned back alleys and basically turned the bazaar into a couple of main streets. Leaving a few short dead ends to hint at a larger place.
The crowded feeling was still communicated and now more time could be spent decorating the streets I knew the player would always use.
A also did not place any of the white “fascist guard”-characters in the bazaar to imply that this is a place where not even they go.
​
I am very happy with the roof I placed above what was otherwise an outside area. It helped to create the bazaar-feeling I was going for. The enclosed space made the district feel a little more threatening in an otherwise open hub.
It also helped with world building, indicating that people could spend their entire day here and still be shaded from the sun.
But I left some hole in the roof to still give the player constant views of the tower and be able to orient themselves.
​
In the bazaar the player can also find an armorer, a trader and a gambling den.
Iteration
In the final image the landmark is much more visible, the path leading to it though the bazaar is more focused and the rooftops feels less samey and does not feel like playable space.
Here are examples of some of the changes I made to the level throughout the process.
-
Early on, players experienced a bit of visual fattige with all the buildings and roofs looking the same. So I started adding some deliberate visual noise to the level. I built some decorative house-pieces that were added to break up the silhouette.
-
The rooftops in Cairo became a huge inspiration. There, trash is cleaned by just putting it on the roof where no one can see it. A great piece of world building.
-
This was added to the bazaar, while the seafont got foliage added to the roofs of those buildings, indicating posh rooftop gardens.
-
Finally cables were added. It both added that vibe of messy cable-work that cities like Morocco have and it also served me as leading lines towards the quest objective.
-
​
-
Side paths were constantly cut. I first thought more paths could help the level feel bigger than it is, but in the end it made it harder for the player to remember where they are. I started thinking back to what we learned about city design from some GDC talks I’ve watched and decided to focus on making fun main paths.
-
I even had a segment that was really fun running through - but it was at the edge of the level, so I switched it with one of the main paths the player used more often.​​​
-
​​
-
The seafront was originally much more narrow and dense, but to give the space a unique identity the shoreline was straightened out to more resemble a real boardwalk.
-
To avoid visual fattige, rhythm was added in the shape of shadows from the railing, palm trees and finally the uneven stairs leading down to the water.
-
​
-
​Overall many small changes were made to the sightlines. Whenever a playtester would get lost I added some sort of obstacle to narrow their focus. Like on the roof for example:
-
Everyone was focused on the exit and missed the big administration building. A small corner was added to hide the exit, making the administration building more interesting.
-
-
​​Almost every playtester went straight to explore the back side of the cantina. A mistake from my side, who wanted the back alley to be a little bit of a secret.
-
But I realized I had unintentionally created that momentum with the round shape of the roof. After some work I managed to lead the player out of there and now finding the smuggler in the back alley feels more like a reward for exploring.
-
​
-
The level's final changes were made after I saw the top down map! It was ugly and a bit hard to read.
-
I realized just how much time you spend looking at the overview map in open world games, so making it nice and clean became a priority and it helped me see flaws in the actual level design like the amount of sprawling streets in areas I wanted to be clean.
-
Even in open worlds the player is likely to enter an area from the same place and that was used to hide certain paths - favouring discoverability.
Running in a straight line becomes more interesting due to the rhythm of the palmtrees, the railing and its shadows.
REflection
What could I have done differently?
The way I designed the blockout houses - with the big roofs, helped create an encapsulating world, but also made it hard to document the process. Making it really hard to get good pictures of the way I iterated on the player path for example.
​
Since I knew I was going to have a baby in the middle of the process, I could have worked smarter in some areas and prioritized differently:
-
I could have spent a day creating an easy modular house kit in the blockout stage. It could have helped me a lot later in the process. Now I had to scramble a little bit in the end to make each district look distinct.
-
And even if you don’t interact with it, I should have spent some time on what is outside of the playable space. Just some simple shapes could easily create a nice side scene that helps the player understand how big this resort is and get a little more sense of where it is located in the world.
-
My idea of facism closing in on this detached resort also got kind of scraped. I had a system for increasing the number of guards everytime the player returned to a location and it’s a shame I did not prioritize implementing it, since it would help the level’s worldbuilding.​​
What did I learn?
Overall I am very satisfied with the way this piece turned out. I wanted the level to be playable as early as possible and that was a good call. Being able to playtest and get feedback early on helped me nail the traversal bit and vibe even in the blockout stage.
I learned hands on how cutting some paths lead to a less cluttered map and how to make the remaining streets more interesting.
I have also never used pick-ups this deliberately before, so I learned how they became useful short term goals.
I think that having a clear idea of the theme helped me in the making of the level, even if everything does not translate to the player, I think they can still see there was intention.
Whenever I got stuck, it really helped going to Google Maps or some travel vlog, just to find that specific crossroad or alley that could get me inspired.
That is also where calling the level “Space Morocco” helped me to clearly define the vibe I was going for. I also think that picking inspiration mainly from the real world helped make the gameworld feel more like a grounded and real space.