Unicorn Quest: Making An RPG Town Scene - From Gimp To Unity

    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 the break.

     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.