Why a map?

For this project, I wanted to challenge myself to do something I hadn’t tried before. As an avid gamer, I tried to think of something unique and challenging, and I fell upon a game from my childhood — Metroid Prime (2002). Specifically, I thought of the three-dimensional map that is part of the protagonist’s heads-up display (HUD). Maps are a common element in many games, whether it’s a simple two-dimensional sprite or a fully fledged 3D one like in Metroid Prime and, more recently, Star Wars Jedi: Fallen Order (2019). They bear relevance to graphic design because they are part of the user interface, as well as having innate graphic elements like the map key. Additionally, I wanted to bring that element of interactivity into it.

Animated GIF of Fallen Order’s map in action.

Elements

There’s two major pieces to a three-dimensional map in a game — the map itself, and the legend (or UI). The map itself communicates the majority of the information, such as which areas have been explored or not, where the player currently is, objectives, secrets, and so on. The UI provides contextual information that allows the player to interpret what the map is saying.

Tool/Engine choice

For the project, I wanted to venture into something new, which is why I wanted to make it interactive. Creating a simple UI with Adobe Illustrator would not be difficult, and making a rudimentary 3D model for the map in Cinema 4D is something I knew how to do. Putting them together in Unity would add an extra challenge. I only had experience coding in Java, so C# was a new programming language for me — it took me a lot of time to create the scripts that allowed the user to manipulate the map.

Diagetics

Elements in media like games and films are often diagetic — that is, they exist in the world, with the characters, not just to the viewer. A diagetic map faces several extra challenges. How does the character have the map? How do they call it up at will? How do they manipulate it? I tried to consider these problems in the process of creating this map. In Metroid Prime, the map is part of the visor in the protagonist’s suit. For Fallen Order, it is projected by your robot companion. Obviously, I did not flesh out what the game would be about and what gameplay would be like, so I couldn’t properly implement contextual mechanics; but it’s good to think about all the same.

Hosted at https://simmer.io/@Izilthzhe/3d-map

Level Design for a 3D Map

A map needs to reflect real terrain to be useful. However, it needs to avoid visual clutter. In a game, that limits the environment. Consider trying to make a three-dimensional map of, say, an ant’s nest, or fantasy catacombs. Multiple rooms and floors tightly packed together would present a nightmare for anyone trying to make an easily readable map, so obviously one should avoid these environments unless they can solve the visual clutter problem. As I wasn’t sure how to tackle the problem, and was strained for time, I kept it very simple, though I imagine the map I made could be for some kind of three-dimensional platformer game.
The type of game also influences the level design, and thus also the map design. Generally, Metroidvania-style rooms and areas have single paths to get from one entrance to another, akin to a spiral staircase with doors on the way up and down. Whereas games like the Dishonored franchise have many ways to get from point A to point B in an area. Again, this increases map complexity, and depending on how the map is revealed and other game mechanics, can reduce player interest and exploration, since they can simply choose their path beforehand if the entire map can be seen from the start. Since exploration is often an important aspect of games, it’s crucial to make sure the player has to work for the information, rather than just having it given to them.

Sketch style

Below are renders of my Cinema 4D map model. As you can see, I created a specific sketch style and visual appearance that, as it turns out, cannot transfer directly into Unity. With enough time in Unity I might be able to replicate the effect, but I did not have time so the renders are here.

Future Thoughts

If I were to make this a full-fledged project, it would obviously require a lot more time and work. In it’s current state, it’s functional, but if I were to expand on it, I would add:

• Full player exploration – allow the player to move around the actual space and call up the map at will, like in a real game
• Player icon modeling – a visually distinct icon on the map showing where the player is
• Unreachable areas – areas/entrances the player cannot currently access
• Map complexity – new areas or zones that the player could eventually explore, along with associated markings
• Map details – Depending on the story context, the map might show a certain level of detail in it’s renderings of the environment.
• Setting context – when and where does the game take place? Does the map fit in the setting, both visually and functionally? I would want to implement this so the player can explore a more deliberately designed level.
• UI Interactivity – I refrained from adding buttons in the UI to hide or show certain parts of it because I knew I wouldn’t have time to implement them. But I would have, if I had time.