Published on <a href="https://blog.prototypr.io/the-life-cycle-of-a-map-c1e05ae24dda?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Camila Gormaz <img alt="" src="https://cdn-images-1.medium.com/max/560/1*7hLUYDnrSgN7DNnEzv7fwg.gif">
When I started making maps for Long Gone Days, about two years ago, I would stare at an empty canvas for hours. If I had to draw a forest, I would start drawing a tree, just to remember I didn’t have grass tiles yet, and then I would stop to think if the characters have enough space to move since there will be a cutscene.
It was far from efficient.
During the first months I struggled a lot because I wasn’t even considering level design to begin with, but nowadays I can finally work with confidence with every new map. These are the things I learned.
<blockquote>NOTE: This is not a pixel art tutorial! For the process of drawing assets, please refer to <a href="http://lgdays.tumblr.com/tagged/wip">this section of our devlog</a>.</blockquote>
<h3>You are making a game, NOT an illustration</h3>
This might seem obvious at first, but many artists want to make everything as beautiful/cool as possible, and this doesn’t always work well with games. No matter what, level design should come first.
Let’s take as an example this map from Mother 3:
<img alt="" src="https://cdn-images-1.medium.com/max/948/1*9s4dqLitVS4iH1fHwImd7w.png">House interior (Mother 3)
In this scene, everything has warm colors, except for that bright blue pillow on the bed. So the player goes to check it out, because one would assume that if something stands out, it must be important.
<img alt="" src="https://cdn-images-1.medium.com/max/960/1*z55W_9xovbZb5k-biMjsiQ.png">Lucas inspecting a blue pillow (Mother 3)
And thanks to that, the player found out on their own that blue pillows allow you to take naps and restore your health. But, if this sort of invisible tutorial happened inside of Aeolia’s house, how many players would have missed it?
<img alt="" src="https://cdn-images-1.medium.com/max/960/1*AFoMx6zMC23gG1H-X5IdeQ.png">Aeolia’s colorful home (Mother 3)
In short, think about the purpose of the map, and build around that. And more importantly, don’t confuse the player.
<h3>Making a fast prototype</h3>
Making a prototype not only allows you to make sure the characters have enough space to move/fight/talk, but it also allows you to progress with the development. Making the assets for a map takes time, and you don’t want to rush it just to finish the dungeon.
<img alt="" src="https://cdn-images-1.medium.com/max/982/1*CVrofqZ92CnRt7trE7e2uw.png">
Our prototype maps start as something as simple as the image above. They are just collisions and events, and only the floor is visible. If you can manage to make a map feel interesting looking like that, it can only get better once it has the right art.
Now that you have an outline of the map, it’s easier to get started.
<h3>Looking for references</h3>
This is really important, even if it’s for something you see everyday. If you don’t have a big visual library of environments, things might look bland.
For example, if you are working on a map that needs a tree, probably the first idea that will come to your mind is one of a big round tree with green leaves and maybe some apples on it. If you go look for references, you could find a tree that would make your whole map more interesting:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*pDs8PcZbXa5q0wsq8QwpOw.jpeg">Dragon Blood Tree, Araucaria, Rainbow Eucalyptus, Baobabs.
Even for things like house interiors, and cities you see everyday, it’s always good to look for more. There might be cool ideas for wallpapers, tiles, furniture, even interior lighting. Don’t rely solely on what you know.
(P.S. Some of my favorite places to look for references and/or inspiration, are Reddit’s <a href="https://www.reddit.com/r/sfwpornnetwork/wiki/network">sfwpornnetwork</a> and <a href="https://www.airbnb.com/">Airbnb</a> for house interiors!)
<h3>Sketching a Map</h3>
With all the references ready, and knowing the purpose of the map, it’s time to start sketching. When there are a lot of tiny details, it’s easier for me to draw it on paper:
<img alt="" src="https://cdn-images-1.medium.com/max/580/1*gN6Yx2YEJRJWZ4pGZ9emnQ.gif">This was never intended to be shown, so it’s a bit messy, haha.
Then I would start tracing on top of it, and even add some filters, move stuff around, etc.
<img alt="" src="https://cdn-images-1.medium.com/max/500/1*iGhd1FklbI_1Bv-hjcCt_A.gif">And here’s how the counter looks once it’s finished.<img alt="" src="https://cdn-images-1.medium.com/max/540/1*Jqr8oVYGz7tr2_tVR9tSCA.gif">One of the first maps I ever created for the game (it has changed a bit since then, though)
For things that are simpler, I would just sketch digitally, as if I was sketching any regular drawing:
<img alt="" src="https://cdn-images-1.medium.com/max/790/1*0h_MzPHyZ1sAAprZnn2RGQ.png">Initial sketch of a train.
What I like about sketching digitally, is that by the time I finish the sketch, I already have the color palette sorted out. This is by far the fastest way to do it.
Other times I would just start with a concept, like the lights and shadows of the scene, and I would continue adding details. This seems to work better for non-explorable maps, like the ones shown during cutscenes.
<img alt="" src="https://cdn-images-1.medium.com/max/700/1*ApktNI-DHcl2WR8zL_n4yQ.gif">The map is still missing the interactable objects, but you get the idea.
Just like the game itself, the maps are constantly evolving. A lot of the maps that were in the <a href="http://store.steampowered.com/app/510540/Long_Gone_Days/">demo of Long Gone Days</a> have been scrapped or redesigned. Some of these changes were small, others don’t even share an asset in common.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6GOzL7jOED08CNeLK_3GgA.png">(Left) Shooting Range shown in the demo. (Right) New Shooting Range.
<h3>Thanks for reading!</h3>
I know there’s no right or wrong way to go when you are creating maps, but knowing these things have certainly helped me work faster. This is a general overview of the way I work, so if you have any questions, feel free to ask below!
You can follow the development of Long Gone Days on Twitter (<a href="http://twitter.com/lgdays">@lgdays</a>), <a href="http://lgdays.tumblr.com/">Tumblr</a> and <a href="https://www.facebook.com/LongGoneDaysGame/">Facebook</a>.
Until next time!
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=c1e05ae24dda" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/the-life-cycle-of-a-map-c1e05ae24dda">The Life Cycle of a Map</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Life Cycle of a Map

Top Stories