[-Mapping-] Designing Towns and Cities: Port Town

Announcement

Crystal Fantasy takes 1st as the 2013 2nd Quarter Contest Winner!!! See the Community Announcements section.

Note for Tutorial Threads

New threads (tutorials) here will go into a moderation queue. You will not see your thread appear when you create it. A moderator will decide if it will be approved or denied.

[-Mapping-] Designing Towns and Cities: Port Town, Detailed tutorial covering good mapping habits and techniques

Rating

Options

mark333 View Member Profile	Mar 25 2010, 06:59 PM Post #1
Type: Designer Alignment: Neutral Good	How to Design Towns and Cities: Part I This is my first tutorial on mapping, in which I will cover many basic mapping techniques that I use in my projects and specific tips for designing the cities and towns of your RPG Maker game. For an example I will be using a sea-side port town from one of my current projects; it is a medium sized city with a surrounding wall and docks. Whether you are new to mapping or experienced, hopefully this will provide insight and help you improve your skills. Things you will need: RPG Maker VX; RTP or Mack tiles (either will do); pen and paper (ESSENTIAL) Before you begin your map... Spoiler: I have a series of things that I do before I start designing any maps in my game and things I keep in mind when I start working. I will be refering to these throughout, and it’s in everyone’s best interest that you research and memorize these topics. There are plenty of tutorials on the forums for many of these. 1. Merge your tilesets. Think about what you need and don't need. There is usually no need for tileset swaps, and unless you are doing a grand, epic, 50-dungeon game, you probably won't use everything in the RTP or Mack tilesets. So why not combine them? In my project, I have no world map. So I edited the RTP file and replaced everything used for world maps with Mack tiles that I wanted to implement. Don't have a dessert town? Take out the dessert styles. Not doing a fire dungeon? There's a ton of free spots open now. This is an easy task that will expand your possibilities by quite a bit. 2. Edit your tiles. There are a lot of times I see a tile and thing, "wouldn't it be better if it were ______". For example, I wanted the Mack stairs going up to have a shadow so it looks like their getting darker as the go up. So I went into photoshop and did it. It took 20 seconds. Open your graphics editor and change things whenever you don't like them. Doors too high? Edit them down a few pixels. Trees the wrong color? Go ahead and edit those too. This is what helps you really secure the image you're going for, as apposed to letting the RTP decide on your game for you. Never be a slave to RTP. 3. Use shadows. Shadows are important, and you don't need to stick to the squared-off ones in the RTP. Make you own, and most importantly, make two copies, one passable and one impassable. When you place a shadow, unlike the auto-shadows, it changes the passage settings of the tile below it like any other upper layer tile. Sometimes you will want passable tiles and sometimes you will want to prevent the player from walking on walls. Make two and use them wisely. For when to use them: there are plenty of tutorials on the subject already, all over this forum. 4. Use tiles conservatively. If you use every tile on every map, every map will feel the same (plus your game will look like a mess). Use lots of details, but be careful about which ones: are there certain plants that only grow deep in the forests? Are there building materials that are only used smaller, country towns? More on this in the next section. 5. Don't zoom out too much. Try and design as much of your map as possible on the 1/1 zoom level: this is where the player will be and you should be mapping with the player's perspective in mind, always. Capturing a feeling and deciding on tone... Spoiler: What do you think of when you think about a town? Any town, real or imaginary. You don't think, "that town had a lot of brick houses". You think, "that town felt warm and friendly", or, "that city seemed really cold and impersonal". Why not look at town and city mapping the same way. Make a list of words that describe your town's feel and tone. For my harbor town, I choose words like vibrant, exciting, breezy and laid-back. Write as many words or phrases or feelings as you want. When you're done, we're going to make a palette, just like in art class. Make a new map, small in size. Here is my example palette: I simply laid out everything I am going to use: my house and roof designs, the city wall, the water, the docks, the road tiles, the details, even the cracks in the houses. When you pick your options, think about your words and phrases you wrote. The blue roof feels breezy to me; the ocean and the bright brick wall are vibrant; the barrels and crates imply work and excitement; the cracks imply age and carelessness. Match up your words to your tiles in the same way, and if there are any that don't fit or go against your tone, take them out. Remember, using a smaller selection of tiles ensures the uniqueness of this town in your game. Laying out the foundation... Spoiler: This is where we make the basic shape of our town. Zoom out (just for now) and map it out. Think about what the towns barriers are: a wall? a tree-line? a fence? a cliff? Mine is a wall and the sea. I put the sea on the right side and a wall around the top, bottom and left sides. Very simple layout. At this point, it is also good to think about map transfers. How will the player know where the transfer points are? They should feel very natural in any case. Using fences and trees are good options. For my map, there is only one transfer; the town entrance. It's marked by the town square in from of it. Think about how the player will know where to go in your own town. Next, think about roads. If using dirt paths, I keep them 1-tile wide and very natural and winding. When using a road, I go for 2-tiles wide and make sure they are squared off but still a bit random. Remember: towns are not built on grids in RPG's. Grids are uninteresting and tiresome. Here's my foundation and road structure. Fitting houses inside the roads can be troublesome if not well thought out: I make my houses usually 5 or 7 tiles wide, so I made sure my roads left enough space for at least a 5-tile-wide house and a tile of space on each side. When making a town that is completely paved, always use at least two types of road tile to make your streets clear. I made a town square and an alley-way on my map in this example: Notice how the town square is a clear signal of the towns entrance: the player doesn't have to think to know how to leave the town, because it's clearly memorable. Think about how memorable and unique the different parts of your town will be, as well. Constructing the city... Spoiler: It's finally time to start planting houses. I usually start by making a list of all the buildings I require, like item shops, armories, etc (that pen and paper is coming in handy, isn't it?). This way I know I'm making enough buildings to meet the player's requirements. If you have any special buildings that you want to look unique or stand out, plan these out now. When you start plopping down your houses, there is an important trick that allows for more realism: overlapping. Here is an example: First of all, look at the blue roof. Houses overlapping onto the road add to the faux 3-d effect of RPG Maker tilesets. Second, look at how the stone house overlaps the other behind it. It makes them feel close, which is common in cities. However, overlapping by more than 2 tiles will look squished and awkward, try and stick to one. If you look closely though, you'll notice the weirdest thing; you can't get into that blue-roofed house! Why did I do this? When I make bigger towns, I don't want to do too many useless interior maps. So, I make some houses overlap completely so that the entrance would be assumed to be on the back of the side (which is impossible to access in this style of graphics). You'll see more of this in later examples—just know that it's a great way to add size to your city without too much work. Now we fix it up a bit. You probably noticed how sloppy that last screen-shot was. If you didn't, study this part good. You can't just trust the autotiles to behave naturally without your help. Using shift-clicking and shift-left-clicking to copy and paste exact tiles, I'm going to fix this up. I took away the sand on the border of the water, took out the road border where it meets the wall and goes behind the house, added support for the docks, and added shadows (impassable ones on the water!). These are all very important in mapping, so experiment until you start to get the feel of making things more realistic. There are also many tutorials on these details, so look for them on the forums if this is confusing. This is the single most missed feature of the amateur map. The second half... Spoiler: This is where we add details to the city. Why is it called the second half? Because adding detail to your maps is not an extra flourish, it is where at least half of your energy should be going and is the part of mapping that will make or break you as a respectable map designer. There are several things to think about here. 1. Make it random. In this town at least, people leave things about. Check out the randomness of it all. Make it a bit sensible: I left spaces without houses for crates and shipments, I make sure log stacks are by houses for firewood, etc. 2. Block off passages. I know, you want the player to be able to explore, but that doesn’t mean wide open spaces. If you block off passages, the player gets to search out the way around. Check out this little alley; you can only get to it from the south road. Making players go around things, if done tastefully, is an effective way to get them to actually explore your town instead of whizzing through it. It also lengthens your playtime very naturally and adds realism. I even made roads to other parts of the town that are blocked off (everything the player needs to access is in this area so I don’t need any other parts of the town, but this implies that the town is much bigger without me having to design pointless maps). 3. Use events. I used sparkles to make the water look more beautiful and imply more sunlight, adding to the vibrant effect I wanted earlier. You can use animals in forest towns, butterflies in country towns, waterfall effects; anything that moves is a plus. Townspeople are another great event to add. If you have the patience, I recommend making custom move routes for people as well—no one walks around randomly. Make people walk around the streets, or walk between crates as if they’re working. It’s really easy and adds a lot of realism, especially when you get a bunch of them going on their own. Thank you for reading! Well I hope you liked it, here is a final version of my map for reference. Remember, most of your work is done on the micro side of things, not macro, and add details and realism and block paths and ... well, you read the thing, so you know what to do. Go make a sweet map! Spoiler: This post has been edited by mark333: Jun 2 2010, 09:33 PM -------------------- Spoiler: Spoiler: "All efforts ought to be directed at the present time to the search for that which we will call ‘inspired simplicity’. The greater the number of those who will dedicate themselves to that, the more will disarray be avoided. —The reason why we have in the last twenty-five years attained the greatest confusion from the creative point of view is that very few composers concentrated their efforts toward this goal, and also because musical creation has relied too much on the unique value of the most unexpected and sometimes least appropriate means of expression to convey the inventive idea." —Béla Bartók

Joerao View Member Profile	Mar 26 2010, 02:12 AM Post #2
... Type: Musician Alignment: Neutral Evil	This is great! Very well done tutorial. Laying out the palette on another map is an interesting idea. Not sure about the sparkles in the water, though...if it were in a game, it'd make me think there's some sort of secret there. -------------------- Aakaash Rao Note by Note Studios: Custom Music for Games

mark333 View Member Profile	Mar 26 2010, 02:15 AM Post #3
Type: Designer Alignment: Neutral Good	They tend to look better in motion, and although it's hard to see from the small screen resolution, there are a lot more all along the harbor so they don't look so "rare and mystical" lol but again, it's a personal preference. Thanks for the compliments and tips, I'm new to tutorial writing. -------------------- Spoiler: Spoiler: "All efforts ought to be directed at the present time to the search for that which we will call ‘inspired simplicity’. The greater the number of those who will dedicate themselves to that, the more will disarray be avoided. —The reason why we have in the last twenty-five years attained the greatest confusion from the creative point of view is that very few composers concentrated their efforts toward this goal, and also because musical creation has relied too much on the unique value of the most unexpected and sometimes least appropriate means of expression to convey the inventive idea." —Béla Bartók

theTru3n00b View Member Profile	Mar 26 2010, 02:29 AM Post #4
NewbsterEventPro Type: Designer Alignment: Lawful Evil	Where did you get those 'cracks'?

mark333 View Member Profile	Mar 26 2010, 02:33 AM Post #5
Type: Designer Alignment: Neutral Good	I hope you're talking about the ones in the pictures haha ... I kid, I kid. They're part of the basic RTP, find them in TileD next to the vines for walls, etc. I used the two parts of a crack that's meant to be two tiles high, but it seamlessly appears to be coming from the ground or the roof. This post has been edited by mark333: Mar 26 2010, 02:35 AM -------------------- Spoiler: Spoiler: "All efforts ought to be directed at the present time to the search for that which we will call ‘inspired simplicity’. The greater the number of those who will dedicate themselves to that, the more will disarray be avoided. —The reason why we have in the last twenty-five years attained the greatest confusion from the creative point of view is that very few composers concentrated their efforts toward this goal, and also because musical creation has relied too much on the unique value of the most unexpected and sometimes least appropriate means of expression to convey the inventive idea." —Béla Bartók

theTru3n00b View Member Profile	Mar 26 2010, 02:38 AM Post #6
NewbsterEventPro Type: Designer Alignment: Lawful Evil	Thank you very much. I can use this . I'll be sure to cred

Demuirge View Member Profile	Mar 26 2010, 11:48 AM Post #7
Extreme Jumpstyler Type: Designer Alignment: True Neutral	This has got to be one of the better mapping tutorials I've read. The pallete is indeed an interesting idea, one that I might use from now on. The only thing that kind of looks out of place (to me) is the northern part with the pillars. I'm guessing it's a kind of meeting place, but I reckon it would be better off without the pillars. After all, it is a port town. Apart from that, I love it and am expecting another tutorial from you -------------------- Signature made by Speedy@ Awesome Greek/English Collaborations Spoiler: Mohombi feat. Katerina Stikoudi - Coconut Tree (starts at around 1:30)

mark333 View Member Profile	Mar 26 2010, 01:37 PM Post #8
Type: Designer Alignment: Neutral Good	Thanks for the feedback, everyone, I really appreciate it. I will look at the pillars for sure, to be honest I've been trying to find a good way to map a city for weeks (there are virtually no tutorials out there on the subject) and I finally had a breakthrough, so I immediately set out to make a tutorial to share the method since there's not a lot of help out there for city design yet. Although it worked for my tutorial, the map will probably be looked over a few more times before it's finalized. I'm thinking my next one will be a castle town, but I also want to do one on dungeon creation because that is also a lacking subject (as far as creating puzzles and planning). -------------------- Spoiler: Spoiler: "All efforts ought to be directed at the present time to the search for that which we will call ‘inspired simplicity’. The greater the number of those who will dedicate themselves to that, the more will disarray be avoided. —The reason why we have in the last twenty-five years attained the greatest confusion from the creative point of view is that very few composers concentrated their efforts toward this goal, and also because musical creation has relied too much on the unique value of the most unexpected and sometimes least appropriate means of expression to convey the inventive idea." —Béla Bartók

Kail200X View Member Profile	Mar 29 2010, 12:12 AM Post #9
Type: Spriter Alignment: Lawful Good	This is really nice, Mark333! In VX, I never know where to even begin with maps. This'll really help me out with my towns! -------------------- My DevBlog Cooltastic Christian gif :U Spoiler: Which FF dude am I? Spoiler: Which Final Fantasy Character Are You? I support... Spoiler:

DeadBox View Member Profile	Mar 29 2010, 01:00 AM Post #10
My mother never saw the irony in calling me a son-of-a-bitch Type: Writer Alignment: Neutral Good	This helps A LOT!!! Thx!!! Now I know to make stuff random So now everything wont look PERFECT =] thx bud! I should have guessed =P I knew something wasn't workin right for the feel and mood XD thx again -------------------- .:Creator Of:. \| Graphix Topic \| Story Topic \| Game Topic \| Direct Demo (x MB) \|

bulls View Member Profile	Mar 29 2010, 10:08 AM Post #11
You will be worse than dead! Type: Writer Alignment: Chaotic Neutral	Nice love it. I want moar tuts. Like nao xD. --------------------

mark333 View Member Profile	Mar 29 2010, 02:14 PM Post #12
Type: Designer Alignment: Neutral Good	Aww looks like I did alright lol. Thanks everyone, more tutorials will come. I'm thinking of a few possibilities: a country town, a bigger city, or a cave dungeon. What do you guys think I should work on? It will probably be done in a few weeks when I get a few essays out of my way. I'm leaning towards a dungeon one but want to work out some stuff first. I've yet to find a really solid dungeon tutorial. -------------------- Spoiler: Spoiler: "All efforts ought to be directed at the present time to the search for that which we will call ‘inspired simplicity’. The greater the number of those who will dedicate themselves to that, the more will disarray be avoided. —The reason why we have in the last twenty-five years attained the greatest confusion from the creative point of view is that very few composers concentrated their efforts toward this goal, and also because musical creation has relied too much on the unique value of the most unexpected and sometimes least appropriate means of expression to convey the inventive idea." —Béla Bartók

Senapho View Member Profile	Apr 7 2010, 01:51 AM Post #13
Jack in, Mega-Man! Type: Designer Alignment: True Neutral	Wow this is an awesome tutorial, I hope you make another one soon. I would stay away from dungeons, I've seen a few since my time here (2008) and also theres the point that dungeons can be generated with ease. I would go for a valley map or something. This post has been edited by Senapho: Apr 7 2010, 02:14 AM -------------------- My project:

mudducky View Member Profile	Apr 9 2010, 03:59 PM Post #14
Lurking... Type: Undisclosed Alignment: True Neutral	Probably the best mapping tutorial I've come across, this is because you give great detail on planning the map in advance, I never considered half of these points myself but know clearly why I should now. Thank you, and the result looks good! -------------------- Want help with learning the RPG Maker VX events? Support. Check out these projects! They are not placed in top ranking order or anything like that.

Celianna View Member Profile	Apr 9 2010, 07:03 PM Post #15
Type: Artist Alignment: Chaotic Evil	This is a very good tutorial and I hope people will learn from it. I totally agree with your point to make a special area in the map so that people can find their way around more. If it's just the same old houses, with the same old streets, you get lost pretty fast. By adding an area in there that is different (but still fits in the map), people use this as a mental checkpoint, so I'm glad you added that in there!

Clucky View Member Profile	Apr 9 2010, 08:10 PM Post #16
Those who fight never win. Type: Designer Alignment: Chaotic Good	How do you make your dock have no shore on the right side? I keep doing mine but it keeps coming out like this... Click below spoiler. Spoiler: -------------------- Spoiler:

Celianna View Member Profile	Apr 9 2010, 08:17 PM Post #17
Type: Artist Alignment: Chaotic Evil	It was in the tutorial, more specifically this part: Now we fix it up a bit. You probably noticed how sloppy that last screen-shot was. If you didn't, study this part good. You can't just trust the autotiles to behave naturally without your help. Using shift-clicking and shift-left-clicking to copy and paste exact tiles, I'm going to fix this up. I took away the sand on the border of the water, took out the road border where it meets the wall and goes behind the house, added support for the docks, and added shadows (impassable ones on the water!).

Clucky View Member Profile	Apr 9 2010, 08:24 PM Post #18
Those who fight never win. Type: Designer Alignment: Chaotic Good	QUOTE (Celianna @ Apr 9 2010, 09:17 PM) It was in the tutorial, more specifically this part: Now we fix it up a bit. You probably noticed how sloppy that last screen-shot was. If you didn't, study this part good. You can't just trust the autotiles to behave naturally without your help. Using shift-clicking and shift-left-clicking to copy and paste exact tiles, I'm going to fix this up. I took away the sand on the border of the water, took out the road border where it meets the wall and goes behind the house, added support for the docks, and added shadows (impassable ones on the water!). How do i shift click? or shift right click? -------------------- Spoiler:

Celianna View Member Profile	Apr 9 2010, 08:29 PM Post #19
Type: Artist Alignment: Chaotic Evil	QUOTE (Clucky @ Apr 9 2010, 11:24 PM) How do i shift click? or shift right click? You hold the shift button on your keyboard while you right click on a tile that you want to copy. Then you click somewhere else on the map with the left mouse button without letting the shift button go.

drew6464 View Member Profile	Apr 9 2010, 08:41 PM Post #20
Mt. Revenant! Check it out! Type: Spriter Alignment: Neutral Evil	Nice tutorial! This will help me greatly, and I'm sure everyone else who comes across this. -------------------- My project: I SUPPORT: Spoiler: This is my first game. It was closed down, but I will be remaking it as my third game under the title of "10 Prodigies: Ressurection." I Support: I don't really want my Lvl 179 MapleStory account anymore. Or my MineCraft Beta account, or my WoW, or my........ heck, just click here for all my free accounts.

« Next Oldest · RPG Maker VX Tutorials · Next Newest »

1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)

0 Members: