• Register

Clover is the unicorn apprentice of Grand Swirllock the Bearded. She needs to learn the 10 basic combat spells every mage must master to survive fights against the monsters of Equica.

Post tutorial Report RSS Making An RPG Town Scene: From Gimp To Unity

As an indie in college I still have a lot to learn. I'm documenting my methods and lessons so novices can learn and practice with me. Here I'm writing about making a map using MS Paint & Gimp then importing it into Unity for use with the 2D Toolkit.

Posted by on - Basic Mapping/Technical

With my world map charted out it's time to start putting my plans into practice. I'm using the techniques I used to create the battle scene. I start with colored blocks indicating walls, land, and obstacles. Next I do some sprite work to have things to fill space with. After I have blueprints and pieces I line everything up and put it into Unity so I can add collision boxes where they're needed.

See a more detailed breakdown of making the game's forest town, Timber Grove, from sketch to in-game (along with some pictures) below.


It always starts on graph paper. I call it dreaming because it's like writing the design document, this is the fun and easy part where I just make up what I want in the game. I'm not making these plans for a team so there's no reason to be neat or detailed. I just need something I can look at and understand exactly what I envisioned in the first place.

I need a scale to go by so I use the player avatar as a basic unit. Approximately 32x32 pixels is about Clover's size so I make the floor tiles that size and even do a Sonic inspired checkerboard pattern to it's easy to tell where each one is and count them at a glance.

Another thing to keep in mind is having the map be number to the power of 2. That should be true for all sprites because of how they are manipulated by code and stored in memory. I made sure to limit the size of my maps to 1024 sq pixels so that I can have tons of them loaded one at a time without worry of memory overload or making the game file size too big.

I've been tinkering away at making sprites for the forest town and still have some animated ones to do. Namely moving flowers and a pixie fountain (warp and healing point). I placed the buildings first to match the sketch then put in the decorative elements like trees, stumps, rocks and the town sign.

I want the town to feel both spacious and crowded so in the sketch I made sure to leave open spaces that led nowhere, a clear route from one exit to the other, inviting open houses near the entrance the player will come through first, closed houses scattered and placed near things that actually are interactive, and enough NPCs to make it feel like ponies have lived stable lives here for a while.

I even made sure that no two houses looked the same, but they all looked similar enough to blend together and let the really important landmarks stand out (notably the shops). Also those pink & lavender boxes at the top are where I'll place the fountain asset when I make it. With that sprite being so big I wanted to chart out room for it in advance so I know not to put stuff there.

I want the player to walk straight up to the fountain when going from one town exit to the other so it will be placed midway between the stumps to the left and the building to the right. The squares are evenly placed so it does not represent the exact placement of the object, but does give me an idea of how much space I should leave open.

The tileland version of Timber Grove (what I call the black & green grid with decoration sprites) is just a template I use as a layer in Gimp for placing the real game objects. That means first separating each and giving them all transparent shadows so they look nice when I place them in the world.

Having each tree be an object in the game would take up way too much RAM when the game is running so I need to make a static image of everything in the scene that doesn't move. I open a bunch of decoration object images in Gimp then copy/paste them onto the final image I'll be using for the game.

The final image is a Gimp project with 3 layers. One for the tileland template (at the bottom so I can place things over it), one for the 1024 sq pixel grass tiles that will be cut when the image is reduced to the object layer size (remaining invisible until I click the eye-icon that makes them cover up tileland), and the object layer where I'm placing trees and such.

Copy/Paste grass tiles for the middle layer.

The goal is to match the object layer to what I have in the template but in a careful way that takes into account which objects are closer to the bottom. Items further down are technically in the foreground so they should cover the stuff behind them. When making tileland it's about feeling spaces out and here it's about having that layout make physical sense.

This is what it looks like to only have the object layer showing.

Once the PNG image is flattened and saved I drag it into my Unity folder and make box colliders for walls and doors for entrances. All the techniques I used before for overworld traversal.

I still need a few more assets before I'm satisfied with the look of the town but I almost have the feel down perfectly. Some animated flowers and wandering NPCs will make the town come alive. In addition to that this particular town will have 3 houses and 2 shops you can enter. I'll be making those maps the same way I did Timber Grove proper. Tileland, floor tiles, and object sprites. I just need to also make a back wall for the room to show that it's an enclosed space and I'll have the surrounding area be a black void just as I've seen in other RPGs so the player knows to focus on the colored area.

Things look pretty bare until all the pieces come together. When it finally does though, I get the swelling feeling of pride from knowing I have a new scene in my game. An interactive game world of my creation exists and I can play in it. All that's left is to make more and build a complete and flowing world.


If you liked this post you can follow my great adventure from dreamer to developer at yotesgames.com where I post my progress and lessons daily.
- Tony Yotes



Reply Good karma Bad karma+1 vote

the images on this tutorial do not seem
to load

Reply Good karma Bad karma+1 vote

Really cool tutorial! Thanks for sharing :)

Reply Good karma Bad karma+1 vote

What RPG developer tool kit did you use for your game. I am debating between side scroll and actual role play. I am new to game design and would like the ropes on how you developed your game.

Reply Good karma Bad karma+1 vote
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.

Follow Report Profile
Adventures in Equica: Unicorn Training
iOS, Android
Send Message
Release date
Game watch
Related Games
Related Engines
Unity Commercial
Related Groups
Android Fans
Android Fans Hardware & Tech with 481 members
Unity Games
Unity Games Hobbies & Interests with 1,778 members