Maklo

Spriter's Resource

68 posts in this topic

This is a basic resource topic designed to help beginner spriters.

Sprites

Mugs

These aren't all of the mugs present in FE games, but it's most of them and they are more than enough as far as splicing goes. (I may add missing ones eventually)

FE1

FE2

FE3 Book 1 and 2

FE4 Both Generations

FE5

FE6

FE7

FE8

FE8 Prototypes Seeing as how these are prototype portraits they may not be the best for referencing. (Though, as far as I can see they aren't that bad).

Misc.

Tutorials

Recoloring: The Eraser Method by Maklo (Image)

[spoiler=Basic Splicing Tutorial by Maklo]

Basic Splicing Tutorial

Before you start splicing, you need to pick the portraits you are going to use, of course.

When doing so make sure to pick portraits who are roughly the same size and are facing

the same direction. Picking characters who have matching sizes and poses will make the

splicing process a lot easier, so make sure to choose carefully whne picking parts for splicing.

Note:

Before doing any sort of spriting you should turn "Draw opaque" off. This can be done by

choosing the select tool and clicking the part the arrow is pointing at in the picture below.

ToolBox.png

When I say "basic splice" I am referring to a splice that uses a body, aface and hair from

three different mugs. No more, no less. In this example I will use Cath's body, Tate's face

and Nino's hair.

PortraitSet.png

Step 1

First Step is to seperate the parts you need from the parts you don't need.

Step1.png

Step 2

Next we clean up the parts we are going to use. This can be done in a few ways.

Personally, I use the eraser method to recolor part I don't need to white. Be careful

when doing this however, some sprites use the same colors for hair and eyes like

in Tate's case.

Step2.png

Notice how I left a bit of Cath's chin. It's good to leave this as it will make placing the head

on the body easier.

Step 3

Next we will make sure that all of our parts have the same skin and outline colors. First

thing is to get the colors you need. It is a good idea to keep a reference of different skin

colors so that you don't always have to go digging through your mugs every time you need

a skin color.

Step3.png

It would be a good idea to make a copy of your parts so far after this step. That way, in

case you make a mistake, you don't have to fix up your parts a second time.

Step 4

It is generally a good idea to start by splicing the face and body together first. We'll start

by placing Cath's body over Tate's neck. I used Cath's chin as a guide for where Tate's

chin should be.

Step4.png

Step 5

Next we will add the hair. Before starting make a copy of the right side of the mug's jaw

(from the mug's point of view). This part is a bit tricky to explain. I guess the easiest way

is to just try and put the hair on and see how it looks. A couple of things to note however,

first the bottom of the ear should be on the same level as the bottom of the nose while the

top of the ear should line up with the eyebrows. Second, the height of the head should

be between 48 and 55 pixels, roughly, so if the mug isn't around this height then you

probably placed the hair too low or too high.

Step5.png

Once you have placed the hair on, place the part of the face you copied over the original part.

The purpose of this is that sometimes the hair may cut into part of the mug after splicing.

It won't always do this; in fact, sometimes you will have to add some hair instead of

cutting some off.

Alternatively, you may just want to break the hair up into two parts and splice them

individually, though the method I previously explained is probably easier and cleaner.

Step 6

Alright, so we have our sprite mostly down. Next, we have to fill in any missing parts. In this

case, that's pretty much just the forehead.

Start by filling in the empty spaces with the first skin color.

Second, using the third skin color, add a single pixel to the parts of her hair that touch her skin.

Third, use the second skin color and add pixels next to the third skin color pixels you just added.

Step6.png

^ The three aforementioned steps

In general, you need to add shading/anti-aliasing in any place where two different parts of a

mug are touching.

Examples:

-Where hair touches the forehead or armor/clothing.

-Where a cape covers armor/clothing.

This part may be a bit difficult to understand, so I will show a zoomed in version of the mug

with color coded changes.

The light blue denotes where I placed the second skin color. The red denotes where I placed t

he third skin color. The dark blue denotes other changes I made.

Step62.png

On the left is an example of the correct way to shade and on the right is an example of a common

mistake that most beginners make. Admittedly, it is a bit exaggerated, but it still works as an

example. Notice how in most cases the red parts are the same length as the light blue parts.

This is called pillow-shading amd should be avoided (NOTE: Some parts are unchanged between

these two soomed in versions).

And while I'm on the topic of pillow-shading I may as well adress another kind of pillow-shading

that even some of the better spriters do.

Step63.png

Within the two red circles are parts that demonstrate how to anit-alias on lines that are at a 45 degree angle.

This kind of line if I wasn't clear.

diagonalline.png

Step64.png

To shade like this instead would be a form of pillow-shading. It isn't really as obvious, though

unless it is used quite heavily. Even so, you should still avoid shading like this.

Original anti-aliasing.

Step65.png

It should be noted that there are some FE mugs that have this kind of anti-aliasing. In some cases

it is because the part that is being shaded has four colors. On other mugs that use it, it is done

pretty lightly. Personally, I still think it looks bad. A pretty good chunk of FE mugs don't do this so

you probably shouldn't either.

Step 7

At this point the mug is more or less finished. All that is left to do is recolor it. There isn't really

much to actually recoloring the mug. Just keep in mind that if it's going to be in a hack it has to

have 15 colors plus a background.

One thing that you will almost always encounter is that your finished splice will have more than

15 colors, so make sure to take that into consideration when choosing your colors.

FinishedProduct.png

Finished product.

Since there isn't much to talk about recoloring I figured I would just talk about colors in general.

This isn't really necessary for splicing, but it's pretty good for any artist to know a little about

color theory.

Colorwheel.png

This is a color wheel. A color wheel is a useful tool that let's an artist know how certain colors will

work with each other.

In simplest terms, colors that are directly opposite of each other (like yellow and blue, for example)

will contrast each other. Colors that are very close together (like pink, magenta and purple) will blend

well together. You can use this to your advantage to create certain "moods" with your mugs or

if you want a certain part of the mug to stand out thenyou could use contrasting colors.

There is actually a bit more to color theory, but I won't go into it further. If you are curious then

look it up on wikipedia. The article on wiki doea a sufficient job of explaining different moods

as well as the colors associated with them.

Differentcolorschemes.png

A few examples of color schemes. From left to right: A scheme that blends well, a scheme with

contrasting colors and a scheme that uses both.

Lord Glenn's Custom Icon Tutorials v1.0 & v2.0

Seph1212's Blinking Frames Tutorial (Video)

Primefusion's Mapping Tutorial Part 1

Luminescent Blade's Advanced Splicing Tutorial

Luminescent Blade's Advanced Splicing Tutorial (Dropbox Version)

Posting your images

If you want to get advice on your sprites, it would be a good idea to post them on this forum. You could just attach your files to the post, but it would be tedious for viewers to look at your sprites, so they probably won't even bother. This is why we use image uploading sites. When you upload an image to an image uploading site it will give you a link to your image. You can then put this link in between IMG tags so that your image will be viewable within your post.

List of Image Uploading sites (They are all free unless otherwise stated).

Photobucket: You will need to make an account for this one. Make sure to save your finished sprites as PNGs before uploading them to photobucket. Otherwise they will be JPEG'd.

Imageshack: As far as I know you don't need to make an account for this site, but I think your images will be removed after some time. *This needs to be confirmed*

Dropbox: This one is probably the easiest to use. You will need to make an account for this one. I don't use it for uploading sprites as last time I tried it JPEG'd my sprites even though they were PNGs. I didn't look into it much though so its possible I did something wrong. Nevertheless, I recommend this site anyways because its convient for quickly backing up files.

Gyazo: Real simple. You just start up the program, click and drag your mouse over your sprite and it will give you a link to use. No account needed.

Min.us: An account is optional for this site. It's seems pretty easy to use. You just have to drag and drop the file you want uploaded onto your browser.

Imgur: Another optional account site. Simple easy to use. More or less works the same as Min.us.

*Feel free to suggest anything that is not there. Just post the name of the site and a short description.*

Links of Potential Interest

FESS Spriting Resources

Spriting Dictionary

Contributors

Maklo

-Recoloring: Eraser Method

-Basic Splicing Tutorial

Lord Glenn

-Custom Icon Tutorial v1.0

-Custom Icon Tutorial v2.0

Seph1212

-Blinking Frames Tutorial

Primefusion

-Mapping Tutorial Part 1

Luminescent Blade

-Advanced Splicing Tutorial

*Credits for the mugs are mentioned on their respective pages.

----

As a side note: If you would like to contribute something just post it or PM me.

Credit will be given for any contributions, of course.

Suggestions, contributions and comments are welcome.

Edited by Maklo

Share this post


Link to post
Share on other sites

A note on imageshack: they've recently made it so, unless you have an account, your image will not be viewable on all sites. I don't know if they've since removed this policy (it was enacted earlier this year), though. Also, imageshack images aren't removed after a certain amount of time, but they are removed if the image is inactive for a certain amount of time... I think...

I use min.us. No account is needed, and its links work everywhere. Note, however, that, unlike imageshack, min.us will not automatically convert .tiffs to .pngs (if you use those).

Edited by Sploder

Share this post


Link to post
Share on other sites

Also, Gyazo works for posting WIPs. You can post and upload a WIP in like, 10 seconds via Gyazo. You wouldn't have any access to it from then, unless you download your own picture.

Share this post


Link to post
Share on other sites

Oh yeah, imgur.com is another free image-hosting site I've used now and again. No account needed.

Share this post


Link to post
Share on other sites

Oh yeah, imgur.com is another free image-hosting site I've used now and again. No account needed.

imgur has the option to allow account creation, and that's what I use.

It's also good if you have a lot of pictures to upload at once.

Share this post


Link to post
Share on other sites

Customing tutorials by Asvel! (Unfortunately, I don't know where to contact this person, so if anyone objects I will remove these images.)

mug_spriting.png

mug_spriting2.png

Sadly I haven't found a larger version of the second one.

Share this post


Link to post
Share on other sites

Not sure how I missed this being pinned.

Custom Weapon Icon Tutorial

Spoiler

Table of Contents:

- Chapter 1: Getting Started

- Chapter 2: Setup and Line art Phase

- Chapter 3: Flat Colors and Shading

DISCLAIMER:

This tutorial will showcase a way to construct Fire Emblem style weapon icons from scratch. NOTE: This tutorial is largely focused on creating weapon icons in the style used in the three GBA titles. Icons in the style of FE4, FE5, or FE11 can be constructed in a similar manner, though shading conventions and the exact palette used in those respective games may be different. Icons for FE9 and FE10 are not covered in this tutorial.

Please bear in mind that this guide is not 100% accurate to the exact way that Intelligent Systems stylizes their weapon icons. Many icons are inconsistent with one another within the same game, so there may be a few things that my personal style may not completely reflect upon (for whatever reason). I have tried to be as objective as possible in this, limiting the use of as much of my personal stylings as possible.

Also, while I realize that weapon icons aren't the most impressive sprites conceivable, they really give your other sprite works (such as battle scenes or statsheets) some unique flair and are instrumental in avoiding reusing old, bland icons from the games for weapons that aren't suited for them (especially if you're creating new weapons in a hack).

CHAPTER 1: Getting Started

Before getting into creating a weapon icon from scratch, as a spriter, you'll want to have a few resources before beginning.

- MS Paint or equivalent program

-- I've written this from an MS Paint perspective, as it's largely the most common program that spriters are using. While I personally use Jasc/Corel Paint Shop Pro (depending on the version), a high-level image editing tool is NOT required to sprite weapon icons, though these steps can be adapted for most other programs.

- Reference set of game-used icons

-- I personally use Ice Dragon's NA!FE8 Symbols sheet as my reference set whenever I need to check something against how an icon appears in one of the games. While it doesn't have ALL of the icons from the three GBA titles, it has enough that it should get you by. (You can always go to each individual game's page on SF's main site and reference/download any of the other icons that you need.)

- Weapon icon palette (Possibly OPTIONAL)

-- Depending on what you are individually spriting weapon icons for (be it a mock battle scene, mock statsheet, or as icons to be inserted into a hack), this may or may not be required. For icons being inserted into a hack, this is a mandatory step. I've provided the FE6/7/8 weapon icon palette here, as it will need to be used to ensure that your icons are game-insertable (assuming that the palette hasn't been altered intentionally). If you're working on an icon that is for mock-up purposes, you are free to use whatever colors you choose, though sticking to the official style and palette does help if you wish to transition to doing work for a hack.

CHAPTER 2: Setup and Line art Phase

To start spriting a weapon icon, begin with a 16px by 16px box colored in a color of your choosing that isn't part of the palette you plan to use for the icon. Avoiding colors that are similar to the ones in the palette also helps, in order to distinguish colors in the icon from the background. If you're looking for a good starting background color, the one used in Ice Dragon's reference set is a place to start.

(For the entirety of the tutorial, I have provided images in both regular magnification and 8x zoom flavors, so that you can see what the icon would actually look like, as well as actually seeing what I've done in each step.)

WeaponIconTutorial-1.pngWeaponIconTutorial-1z.png

Now, depending on what I'm spriting, I either free draw or have a reference image pulled up. Now is the time to decide, and have that ready to go. For this tutorial's sake, I'll be free drawing a Lance-type icon. Always remember to keep in mind what kind of icon you're spriting and remember that the reference set is always there if you need to see examples of existing icons.

At this point, begin by selecting the black color of the palette (RGB 40, 56, 32) as the primary color. You'll likely want to zoom in on the image for better control (8x is probably the best way to go). Once the size is to your liking, select the Pencil tool and begin placing individual pixels in line art fashion. Consult the reference set of icons for basic shaping and design structures if you find that placing pixels by instinct isn't looking quite right.

Weapon icons CAN use the entire 16x16 canvas, though icons in FE6/7/8 tend to avoid this unless it is absolutely necessary. For the most part, the official icons stick to the inner 14x14 pixels (1 pixel border around the outside of the area), though they will stray and touch a side here and there (for best results, consult the reference set).

I finished free drawing (once I got something interesting and close to what I wanted), and came up with this as my icon's line art:

WeaponIconTutorial-2.pngWeaponIconTutorial-2z.png

Depending on what you're spriting and how your creative flow is, it may take tens of minutes to even an hour to get line art shaped how you want it.

CHAPTER 3: Flat Colors and Shading

With your completed line art ready to go, begin filling areas with the lightest shade that you want to go in that area. The reference set should provide you with enough general pairings of shade sets (for instance, the white shade, the light blue shade, and the darker gray-blue often tend to be paired together for blade shading) to get an idea of what the lightest shade will be for an area of the icon. If anything design-wise starts to appear off as you're filling in the flat colors, remove them (by Penciling the background shade over them) and alter the line art until you feel that you're ready to add the flat colors again.

WeaponIconTutorial-3.pngWeaponIconTutorial-3z.png

(As you can see, I slightly altered the butt of the spear between Image 2 and Image 3 once I decided that, design-wise, the lance didn't really fit what I was aiming for.)

Once everything looks right with the line art and the flat colors, begin adding in the other shades in the shade sets, while trying to match the shading conventions shown in the reference set. At this stage, you may realize that some of Intelligent Systems' conventions are shaky and in need of improvement. If you choose, now would be the time to stray from their conventions and shade things more naturally. Whatever you decide to do, make sure the icon looks right at normal zoom before you finish. If anything looks odd or needs fixed, jump back to Chapter 2 and work on the line art and flat colors (unless it's merely a shading issue, whereby you can just play around with the shading pattern or colors).

And now, we have our finished result:

WeaponIconTutorial-4.pngWeaponIconTutorial-4z.png

As you can see, I've shaded the middle of the lance's tip with the darker gray-blue shade and shaded the bottom of the tip with the lighter blue shade. The "wings" to the sides of the shaft are shaded in reference to the shading on the Poison Sword icon (darker gray-blue matching to the brown and red matching to the reddish-grey color). The piece in the center of the wings is shaded in reference to the color scheme pairing on the outside of the Bolting tome. The shaft is shaded instinctively using the red shades found on the Poison Sword icon. Once the inner shading is done, make sure that you edit the outline shading by incorporating the brown shade in places (generally for wood, such as lance shafts (unless they have brown in them, in which case I personally use the other outline shading color to avoid blending the inner shading with the outline shading)) or by using the dark purple shade. It would be a good idea to use the reference set here for examples, depending the kind of icon you're working with.

Different types of icons have different general patterns and structures, so use examples as a guide if you're working with an icon that fits a bit outside of the spectrum given here (magic tomes and staves, item icons, new weapons that might fall under a new designation, etc.).

Hopefully, someone finds this useful. Weapon icons aren't the most challenging sprites to make by far, but you'd be surprised at how much detail you can actually fit into a 16x16 sq. pixel box. And, always remember that the reference sheet is there for shading and design examples, if you need them. As with most kinds of spriting, practicing by continuing to update older icons and spriting new icons will only allow you to get better. Your icons might not perfect when you start, but as you work on them more, they'll start to get flashier and better proportioned.

 

Custom Icon Tutorial v2.0

Spoiler

Welcome to the Custom Icon Tutorial v2.0! In this tutorial, you will (hopefully) learn how to make custom weapon icons of your very own without having to rely on reusing pre-existing icons for things that they don't fit. As opposed to v1.0 which contained a single example of making an icon, v2.0 will contain multiple examples of types of icons to cover more cases.

What's new in Version 2.0?

  • Downsizing to GBA-sized icons
  • More difficult physical-style icon
  • Custom magic tome icon

Table of Contents:

  • Preface: Introduction & Useful Tools and References
  • Chapter 1: A Whirlwind of Light - Downsizing FE9/FE10 to GBAFE Icons
  • Chapter 2: Adventures in Customing II - Hammering out an Axe Icon
  • Chapter 3: Working with the Spirits - Writing a Magic Tome

List of Links:

(In the event you miss a link in the tutorial, each link will be duplicated here.)

Disclaimer:

This tutorial showcases a way to create Game Boy Advance-style Fire Emblem weapon icons. Weapon icons for the other titles can be created in a similar manner, but require different palettes and shading styles. (For the case of icons for Path of Radiance or Radiant Dawn, icon size also changes.) This tutorial will not cover those styles.

Please note that I will try to make this guide match as much to the existing style that Intelligent Systems has used; however, after years of spriting weapon icons, my own style and shading conventions may influence the final products slightly. I have tried to limit this as best as possible during the tutorial sections.

Also, I cannot guarantee that any icons you produce on your own will match standards of quality. As with other facets of spriting, creating weapon icons takes practice and more practice. The more you practice, the more you improve.

PREFACE: Introduction & Useful Tools and References

Spriting weapon icons is arguably the easiest type of spriting in the Fire Emblem style. Just because making weapon icons is easy doesn't mean that there isn't value in doing it. Weapon icons are invaluable in giving your works a touch of their own uniqueness and flair. This prevents the overuse of Intelligent Systems's icons as placeholders for weapons that they just don't fit. For instance, when making a mock battle scene to showcase a battle sprite or a battle template, why use old weapon icons when you can have something that you made by hand there instead? And, weapon icons are almost obligatory in well-created hacks, especially if your project is trying to be its own unique Fire Emblem title, not tied to Intelligent Systems's works except in name. Needless to say, weapon icons are a fundamental part of Fire Emblem spriting.

Being the easiest type of sprite to create in this sub-discipline means that the requirements for making weapon icons are quite simple. In order to create a weapon icon, you'll need the following things:

  • A paint program
  • A copy of the existing icon sheet for FE6/FE7/FE8
  • A palette for the icons (if you so desire)

The paint program is self-explanatory. All you'll need for making weapon icons is a default program like Microsoft Paint. Now, this doesn't mean that you can't use your preferred program of choice. You're free to use Paint.net, The GIMP, Paint Shop Pro, Photoshop, or even Usenti. I personally use Jasc Paint Shop Pro 7 for all of my spriting, but the steps in this tutorial will be tailored towards a Paint user.

As you're making icons, you'll often want to compare your outline or final icon to an icon that Intelligent Systems used in the GBA games to make sure that proportions make sense or as a shading reference. For that, I use Ice Dragon's FE8 Symbols Sheet (NA). Now, this particular sheet doesn't necessarily contain all of the icons that Intelligent Systems has made (Al's Sword isn't on there, for instance), but it contains a wide number of the available icons. If there is a specific icon not on the sheet, you can always go to the game's page on Serenes Forest and grab the icon from there.

The last bullet is somewhat optional, depending on your reason for spriting weapon icons. I figure that most of you are here to make icons for hacks/projects/etc., in which case you're going to need the palette used in the GBA games. I've uploaded this reference palette which contains the 15 colors used in-game for weapon icons. Now, you're completely free to come up with your own reference image later (I use a different one, personally), but this can be used to first start out. If you're simply working on a mock battle scene or a stat sheet or anything of that variety, you can omit the the palette and use whatever colors you want. Granted, an icon in the correct palette looks more authentic than one without, and if you ever get the urge to use the icon in a hack, you'll need the palette anyway.

The main strategy for spriting weapon icons can be represented as such:

1) Create the size box and begin outlining your icon,

2) Fill the outlined area in with solid shades, adjusting the outline when necessary, and

3) Shade the filled areas, repeating Step 2 if adjustments need to be made.

I'll touch on these steps as I proceed through the three examples in the remainder of the tutorial.

CHAPTER 1: A Whirlwind of Light - Downsizing FE9/FE10 to GBAFE Icons

Subtitle: Alternatively, converting 24x24 or 32x32 non-FE icons to GBA icons

As listed by the steps above, the first thing one must do to make a custom weapon icon is to start with a 16 x 16 square pixel box, with a background color. The more contrasting this color is to the colors in your weapon palette, the better. If you don't have a preference, the color used in Ice Dragon's Symbols sheet is a good place to start. For this tutorial, I've provided 1x and 4x images so that it is easier to see the details as well as what the icon looks like at its natural resolution.

CustomTome1-1x.pngCustomTome1-4x.png

When working on any kind of icon, I usually find it best to start by zooming in. In my case, using Paint Shop Pro, I zoom the whole way to 32x. For Paint users, the most you'll be able to zoom in is 8x (unless they've upped it in Vista or XP), but that should still suffice. This way, it's significantly easier to place individual pixels on the smaller canvas.

This chapter is dealing with downsizing, or in layman's terms, taking a weapon icon that's larger than the GBA size and making a custom icon that creates the weapon that's sized for the GBA games. This is not limited to icons from Path of Radiance or Radiant Dawn however. It is entirely possible to use an icon from, say, Tales of Eternia, and downsize it into a GBA-sized icon. With this in mind, find a picture of the icon (preferably one with its colors in-tact and such) to use as a reference for the design, coloring and shading of the final icon. For the tutorial, I asked people to name a Path of Radiance or Radiant Dawn weapon, where I'd use the first response for this section. The weapon that was selected was Creiddylad from Radiant Dawn.

Now, in general, icons can us the entire 16 x 16 square pixel canvas, though a fair number stick within the inner 14 x 14 square pixel range. Some of the more unwieldy weapons (axes, larger lances or swords, etc.) will often touch the edges of the canvas in places, due to their design and the overall goal of keeping the icon relatively centered in the canvas. Since this is a tome though, I have less to worry about on those fronts, as tomes use a standard design for their boundaries.

So, with that in mind, add the boundary of the tome to the canvas, either by manually drawing it on or by grabbing a tome from the symbols sheet and clearing out the inside design.

CustomTome2-1x.pngCustomTome2-4x.png

Now, if this had been an icon like, say, the Bolt Axe, we would have had to manually draw the axe's outline first before adding any details to it. An example of a non-tome can be found below Creiddylad's tutorial.

Since we're downsizing an existing tome, the next step is to begin placing the main details of the tome's design inside the space for the tome. The main feature on Creiddylad is the four "feathers" and the area of light in the center. Now, there is still a large amount of trial and error involved in getting the patterns to look right and such. And, with still images, the trial and error that I actually went through in these examples isn't emphasized very well.

Downsize3-1x.pngDownsize3-4x.png

Once you get a pattern that relatively matches the source image, add the next sets of details to the image. In the case of Creiddylad, I added shading to the "feathers" and circle of light in the center. And, I also added the lighter pixels extending out from the center circle up until they reach the edges of the "border" between the center and "feathers".

Downsize4-1x.pngDownsize4-4x.png

From here, it's just constantly adding details. In the next step, I add the blue lines continuing from the center and the darker blue-gray pixels around the blue areas.

Downsize5-1x.pngDownsize5-4x.png

And then, lastly, I add in some of the light blue-gray pixels to finish the icon off.

Downsize6-1x.pngDownsize6-4x.png

One of the main issues you might run across when downsizing is lack of colors that match the source image. In cases like that, you need to just use the closest color or a color that works in its place. For instance, on the actual Creiddylad tome, the light extending from the circle in the center is a pale yellow color. There is only one yellow color in the standard GBAFE palette, so I used the light gray color in its place.

Now, this works for tomes nicely, but actual weapons are a different story. So, to accommodate that, I'll also do a walkthrough of downsizing the Crystal Shell from Tales of Eternia to GBAFE size.

The first step, as above, is to start with the 16 x 16 square pixel box, filled with a background color.

CustomTome1-1x.pngCustomTome1-4x.png

Now, since I've done two icons similar to this (Gloves and Gauntlets for FE4R), I'm going to pull those up as references for myself as I do this. On top of those, the above GIF file is also pulled up so I can see what it is I'm downsizing.

Start by adding in the outline of the icon. If you make some lengths of pixels too large, then shift what you have around to change the size. I start working by providing 95% of the outline of the Crystal Shell, leaving out part of the area near the thumb, since I'm not quite sure how I want to fill it in yet.

DownToE2-1x.pngDownToE2-4x.png

Next, start on the easy to add features, as well as important "landmarks" in the icon. For this specific example, this involves adding the border of main part of the glove to the icon, as well as adding in the shading for the fingers and the "underneath plating" that is below the main part of the glove. I also added initial placements for the three spikes extending from the front of the glove.

DownToE3-1x.pngDownToE3-4x.png

Then, it's a matter of adapting the inner areas of the main part of the glove through trial and error (in which I spent a good 30 minutes playing around with the placement of shades and light source shading). In this final step, you also must add in some of the purple outline color in place of the black outline color, for blending purposes. I also change the shape of the front spikes to make them look more like spikes. And, with that, the Crystal Shell is done:

DownToE4-1x.pngDownToE4-4x.png

CHAPTER 2: Adventures in Customing II - Hammering out an Axe Icon

Unlike the Custom Icon Tutorial v1.0 where I free drew a physical weapon, in this chapter, I'm going to mesh that tactic as well as the downsizing tactic from the previous chapter to make this example icon. Since it was requested, you'll be getting an axe icon, though a less than traditional one. The image reference (pulling in the downsizing tactic) for today is the Blaze Axe from Radiata Stories.

As an added bonus in this chapter, there will also be linked videos with my progress working on the icon for this chapter recorded. That way, as opposed to me saying "trial and error" without showing the intermediate steps where I refined parts, with a video you can see my exact steps to get a better feel for the process.

Custom Axe Icon Pt. 1:

Custom Axe Icon Pt. 2:

"Finished Icon":

CustomAxe1-1x.pngCustomAxe1-4x.png

As I said at the end of the second part of the video, I wasn't really sure where to go with the flame shading. I got some feeback and improved the shading a bit. Here's the finished version of the icon:

CustomAxe2-1x.pngCustomAxe2-4x.png

CHAPTER 3: Working with the Spirits - Writing a Magic Tome

In this final chapter, I'm going to free draw a magic tome, since it's quite hard to find reference images to base the designs on (perhaps barring things like FE4's Holy Weapons). So, one last time, start with the regular 16 x 16 square pixel box, filled with a background color of your choosing. I again use my blue background color.

CustomTome1-1x.pngCustomTome1-4x.png

Next, either pull up the reference sheet and manually sprite the boundary of the tome over the background or copy it and remove the the outer color and tome design.

CustomTome2-1x.pngCustomTome2-4x.png

I polled a friend, and he suggested that I sprite an Ice-based tome for this example. Looking at Fimbulvetr's icon, the majority of the background is blue, so I grabbed that color and filled in the interior of the tome with it. For Fire-based tomes, the interior color is generally red or brown. Wind tomes generally feature the dark green color as the interior color. Thunder tomes ofter use brown or the black outline color as the background color. The GBA Light tomes use brown as the interior color, while FE9/FE10 would use the dark blue-gray color as their interior color. Dark tomes generally use a mix of the black and purple outline colors as well as the brown color in places. (You'll note that it's slightly hard to see the blue color that's in the interior of the icon due to the blue background. While I happen to like this background color, it does conflict heavily with the blue color.)

CustomTome3-1x.pngCustomTome3-4x.png

The next stage of designing a tome is determining the base pattern that you want the tome to have. This stage will likely be one of the longer steps in tome designing. Since this is an Ice-based tome, I needed to make the design follow suit. Using the light green color on the palette (as it is often paired with the blue color), I added the following design to the tome:

CustomTome4-1x.pngCustomTome4-4x.png

Once the base design is relatively set (enough that there's nothing else to do with it, without just changing it around), the next step is to add shading and other colors to the design. At this point, this step is primarily trial and error, playing around with related color sets until you get something that is discernible at 1x zoom, yet is still shaded when zoomed in. After playing around for about 15 minutes to a half an hour, I finally settled on the final design (tweaking the design here and there, as well as adding in the "inner outline" (the area immediately inside the regular outline).

CustomTome5-1x.pngCustomTome5-4x.png

Hopefully, the Custom Icon Tutorial v2.0 has covered more types of icons and allowed you to further grasp the art of the weapon icon in general. In fact, if you want a test of your abilities as you progress though this (or after reading), try performing the same icons that I've done and see how they come out. Maybe you'll end up making an icon that's more representative of the source or is a great-looking creation of your own. Remember, while weapon icons might not be the most challenging type of sprite in Fire Emblem's style, they do have their importance. And, always remember that the reference sheet is there for shading and design examples, if you need them. Lastly, don't forget that practice is the key to this art. Tweak your older icons, sprite new ones when you have time, and just keep at it. As you do, you'll steadily improve your works, making them more detailed, better proportioned, and of sterling quality.

 

Edited by Lord Glenn

Share this post


Link to post
Share on other sites

doop

Edited by I have opinions

Share this post


Link to post
Share on other sites

I could probably go on forever. . .but I'll start with something that shouldn't take too long to explain.

How to make your own palette.

Share this post


Link to post
Share on other sites

How to make your own palette.

Oh, well, there's no real way to explain how to do that. You just make your own colors using the color editor in paint (Or whatever program you use for spriting/art/whateves). Of course, having a good knowledge of color theory and which colors/shades looks good will really help. Only way to really get good at that is to practice making your own colors, and comparing them to existing FE colors (Probably 7, most of 8's are too saturated.), unless you're not trying to go for FE colors, in which case, just compare to whatever game's colors you're going for.

Just takes practice.

Edited by seph1212

Share this post


Link to post
Share on other sites

Oh, well, there's no real way to explain how to do that. You just make your own colors using the color editor in paint (Or whatever program you use for spriting/art/whateves). Of course, having a good knowledge of color theory and which colors/shades looks good will really help. Only way to really get good at that is to practice making your own colors, and comparing them to existing FE colors (Probably 7, most of 8's are too saturated.), unless you're not trying to go for FE colors, in which case, just compare to whatever game's colors you're going for.

Just takes practice.

It also helps for custom pallettes is just starting with FE colors and editing them slightly.

Share this post


Link to post
Share on other sites

Finally got around to fixing a few things for the mapping tutorial so here it is:

A general mapping tutorial meant to help steer people in the right direction.

Part I: The Great Outdoors

Introduction
 

Spoiler

 


Maps are an important part of any Fire Emblem game. They set the mood of the chapter

and in general can make the playablility of a chapter that much higher.

Good maps are just as important as well made portraits and can really detract

from a game if done inadequately. In this tutorial we'll be covering the basics

of mapping as well as the do's and don'ts.

Note that this is more of a guideline (Though some things are pretty much required) and

should be treated as such.

To show how we get from point A to point B I'll be using this map to showcase

the principles I'll be lecturing about.

1OutdoorTutorialBase1.png

You may ask, "What's wrong with it? It gets the job done." Maybe. But honestly, this map is lacking and would really detract from any enjoyable experience to be had.

So let's go through things step-by-step.


 

Exhibit A: Tile Spam
 

Spoiler


Tile spam will be defined in this tutorial as an excessive amount of the same tile

placed in a consecutive manner. Wordy, I know. Basically, it's slapping down a lot

of the same tile over and over.

Tile spam is a very common issue among aspiring mappers. Seeing the same tile over

and over makes the map very boring and uninteresting.

Fortunately, it's also one of the easiest issues to overcome (At least in my opinion).

Here are two techniques that should be used together to help overcome tile spam.

1) Using multiple grass tiles.

If you look at the tile set:

2Multi-GrassTilePic.png

You'll notice I've circled a few grass tiles. You shouldn't be using just one grass

tile in your maps. To help get rid of tile spam, trying using a combination of all of them.

3MixedUpGrass.png

You may notice that when I mix in some of the other tiles, it breaks up the monotony

and now things look more like a blank canvas rather than an ugly pattern. This is good.

Use this in conjunction with...

2) Light grass

4LightGrassPic.png

The light grass is used to show that clumps of the grass have grown in a non-uniform

manner(Which is completely natural, only humans cause grass to grow uniformly).

Try adding some light grass to the map to cut out more tile spam.

5BadLightGrass.png

So you've got your light grass and you think all is well, right?

Well, no. You see, there's a problem. All the grass is square-ish in appearance.

Grass does not grow in straight lines naturally (Again, only humans grow grass in a straight lines).

So what to do? Try this technique instead.

6LightGrassOutline.png

Use the square light grass to create an outline of how you want your grass to look.

Then, you'll want to use the border grass tiles (The ones that are mostly dark grass with a little bit of light grass on the sides)
and add those tiles all around. Like this:

8LightGrassBetter.png

See? Much smoother. Notice that there are indeed some straight lines left.

This is because nature is pretty random and kind of does as it pleases. Leaving a couple straight lines will help account for this.

I've actually got one more tip on tackling tile spam, though it isn't required and not all outdoor maps do this.

3) Cliffs

9Cliffs.png

Cliffs add vertical height to your map and can add that extra "Umph" to take it from drab to fab.

So let's use them.

10BadCliffs.png

Hmm....Hopefully you notice that just like the light grass, these cliffs are

unnaturally straight. Last I checked, cliffs were jagged and went all over the place.

Let's do the same:

11BetterCliffs.png

There we go. Now I don't have to run to the bathroom to hurl.

NOTE: For design purposes, you'd actually want to add clifs before adding in

light grass. However, since it's kind of optional I decided to talk about it last.

That concludes basic tile spam for grass.

"But, Prime! What about those forest tiles? Aren't those spammed?"

Yes, those forest tiles are indeed spammed. However, I'm going to talk about forests a little

later along with a few other things.

Right now we should chat about roads.

 


Exhibit B: Roads
 

Spoiler


12RoadTiles.png

While in modern times roads are generally straight, we need to remember that Fire Emblem is anything but modern.

In the ye' olde days roads were foot paths that were worn down over time. They were inconsistent, broken up, and

generally wandered all over the place.

The roads in the example map are straight, uniform, and uninteresting. So let's apply some of the basics I was

talking about.

13BetterRoads.png

Notice I removed some of the light grass to accomodate the roads. Don't be afraid to change parts of your map

design. You want your map to look as natural as possible.


 

Exhibit C: Mountains
 

Spoiler


Ah, mountains. The bane of many mappers. They can make or break a map and will seem very daunting at first. Don't worry we'll go through this section pretty slowly.

14Mountains.png

Everything within either the red box-shape-thing, or the circle are your mountain tiles. Before we jump right in though

I should probably explain a few things.

Mountains follow a peak-valley-peak-valley type of flow kind of like this:

15PeakValleyFlow.png

Because of this, shadows are formed on the right side of where ever a peak has reached it's pinnacle.

It's important to note that the transition from light to shadow is smooth and never direct.

You would never want to make your peaks like this:

16BadTransition.png

It's much too drastic and unrealistic. Instead use the peak tiles:

17PeakTiles.png

To create a smooth transition from light to shadow.

18SmoothShadowTransition.png

But mountains aren't just one peak and that's it. Like I said, they follow

a peak-> valley -> peak flow. What are the valley transistion tiles?

19ValleyTransition.png

Those are. Use them to make more interesting, dynamic mountains:

20PeakValleyPeakMountains.png

Well, we're getting somewhere. Hopefully you've noticed things are looking way too

straight. When's the last time you saw a straight mountain in real life? I'm guessing never.

In fact, mountains go in many different directions. Sometimes they split or merge at the peaks, other times

they do so at the base. Make sure to make it look as natural as possible.

21NewMountains-1.png

Notice that I used some "Pure Shadow" tiles. As in, tiles that are just shadow and aren't for transition.

You'll find them here:

22ShadowMountainTiles.png

Make sure you don't spam them!

Ideally, you would make your mountains before anything else on the map. However, I didn't think it would be a good idea to start off with what is arguably the most challenging aspect of outdoor maps.

In addition, remember that mountains aren't required for every outdoor map. Think about context and if the region your map is made for would have mountains or not.


 

Exhibit D: Forests

Spoiler

 

This section goes hand in hand with tile spam but should probably be saved for towards the end of

map creation. Remember how I said the forest tiles were spammed too? Find all of them here:

23ForestTiles.png

See how some of the tiles are "fuller" than others? What I mean by that is some of the tiles

have more trees in them than others. These should be placed together with other forest

tiles to create a big clump of woods.

24ForestTileExhibition.png

Each tile has a specific purpose. Some are meant to be placed on the edge of a dense

forest (Whether it be top, bottom, left, or right) while others should be in the middle.

Play around with them to get a feel for how they flow.

However, we've got a couple issues going here.

1) Forests don't grow in a rectangular pattern

2) Certain parts of the forest should be more dense than others. Or conversely,

certain parts of the woods should be "thinned out" in comparison to other parts.

The first seems rather obvious, we'd do something like this:

25Lessrectangleforest.png

However, the second part may not be quite as obvious and like I said has two options.

Option 1 is to use the thicket tiles:

26Thickets.png

To show that the forest gets denser as a unit moves further into the woods.

27ThicketDemo.png

Option 2 is to break the forest up and show that there are clearings where

trees haven't grown in as much.

28ForestClearingsDemo.png

As you can see, the forest has been thinned out more. Which option you choose really has to do with context.

Do you want your forest to be a natural barrier to direct the flow of the map? As in, do you want to make it so that the forest stops units from proceeding?

Or, do you want the forest just to slow units down?

These are things to think about if you plan to have a large expanse of trees in your map.

 

 

Exhibit E: Empty Space

Spoiler

 

Another section that goes together with tile spam but I felt was better left

for the end of the tutorial.

Empty space is basically an area of your map where there isn't much to look at.

It's barren and uninteresting. So where's the empty space in our map?

29EmptySpace-1.png

All over the place really. So what can we do about it? Frankly, the possbilities

are nearly infinite. We could add rivers or lakes. Or maybe incorporate forts, homes, and

villages. A few more mountains would certainly do the trick. It's really all about

how you want your map to feel. Is it a map by the sea? Or is it in a very mountainous region?

Think about these things as you decide how to proceed. For now I'm going to give a few

general suggestions to fill in the gaps.

Adding some forts and houses is a very basic and effective way to help reduce the amount of empty

space.

30FillSpace1-1.png

But wait! Trees don't have to be just for large forests, they can stand in small clumps here and there too!

31FillSpace2-1.png

Notice how I also added a road up at the top.

Perhaps we should do something with that funny looking pond? Some moving water would add a nice touch.

Hang on, before I jump straight into water, let me point a couple things out.

There's a difference between the water tiles. Some are meant for oceans and large lakes while others should be used for rivers.

The ocean and lake tiles:

32OceanTiles.png

The river tiles:

33RiverTiles.png

NOTE: The tiles in the upper right corner of the picture are

actually meant for oceans/lakes. (Very wide rivers too I suppose)

So let's try using some of the water tiles:

34WaterDemo-1.png

There, looks a bit better doesn't it?


 

References
 

Spoiler

 

Just like spriting, having good map references really helps you to understand the principles behind mapping and also offers some good inspiration.

Serenes Forest has a large collection of maps from each Fire Emblem game. Check out the home page here.

Just choose the game you want to look at on the left and look for the chapter maps link. References are your friend! Don't be afraid to compare your map to others.

 


Conclusion

Spoiler

 

So this concludes the outdoor mapping portion of this tutorial. Remember that

good mapping takes practice and effort. It's not something you'll just pick

up overnight. Just keep working at it. Show off your work and let others help

steer you in the right direction. I hope you learned something in this tutorial.

If you follow these guidelines, I'm positive you too will be able to take a map

like this:

1OutdoorTutorialBase1.png

And turn it into something like this:

34WaterDemo-1.png


 


Have fun and watch out for part II where I talk about indoor maps!

Part II will have to wait I guess. It seems I've hit the image limit for a post.

For now, here's a link: Part II: To the Castle!

Edited by Primefusion
Fixing spoilers

Share this post


Link to post
Share on other sites

I dunno if this should be used for beginners, but...

For Photoshop users. Those of us who don't have MS Paint. This should work for Gimp as well provide that it has the Index Colors option. I dunno though, I never used Gimp. It refuses to run on my computer.

The Photoshop/possibly Gimp Tutorial of slightly more complex splicing than putting A's head on B's shoulder

Edited by Luminescent Blade

Share this post


Link to post
Share on other sites

Whaaaaat

gyazo the message. 'm using googledocs to host a pdf file and it's working fine for me D:

Bah. I can't see issues with it. If anyone has similar issues I'll host it on Dropbox or something but I dunno if you can view the PDF in browser, then.

Edit: Dropbox link wheee Ah what the hell here's the dropbox version anyway. Apparently no in-browser viewing but oh well

It's kinda shitty anyway

Edited by Luminescent Blade

Share this post


Link to post
Share on other sites

Go install adobe acrobaaaat

Unless you did already in which case

Idunnowhathappen

Share this post


Link to post
Share on other sites

Now that there's a bunch of posts after mine, here's the next part of my mapping tutorial.

Mapping Tutorial Part II: To the Castle!

Introduction
 

Spoiler

 

Welcome to Part II of my mapping tutorial. Just like part I, we'll be taking a very simple map and improving it through some basic

rules and concepts. In this part I'll be covering the basics of indoor maps.

Here's what we'll be working with:

1IndoorBase.png

If you read part I, you should hopefully be spotting things to improve already. Plenty of the concepts from outdoor maps

carry over into indoor maps. However, there's also a few new concepts I'll be introducing here.

 

Exhibit A: Tile Spam and Empty Space

Spoiler

 

Just like part I, I would like to talk about tile spam first because it's a very common problem with new mappers.

If you've read part I, hopefully you're first thought is to use different grass tiles as well as some of the dark grass to help

take out some of the tile spam. So let's do that:

2BetterOutside.png

Alright, our outside is looking a little better now. (Note: I'll just be touching on outdoor topics. Read Part I: The Great Outdoors for more help)

But, what about the inside? How do we make it look better?

Let's check out our floor tiles:

3BasicFloorTiles.png

You'll notice that a lot of them have black lines (For lack of a better phrase. These are actually shaded tiles)

on the top and/or left side. I'll talk about those later. For now, focus on the tiles without shading.

4BadfloorTiles.png

You would not want to do something like this. Why? You've got no transition from one type of floor tile

to the next (Something I'll be covering later on). So that really restricts us to two different floor tiles.

5TileSpamFix1.png

Okay, so we've broken that up. But what else can be done? Well, we're indoors so we could add some more walls, some pillars,

quite a bit really. Let's point a few kinds of tile out first though.

Here's the basic wall tiles:

6BasicWallTiles.png

Now pillars:

7Pillars1.png

The ones I circled in red may look like pillars, but are actually considered walls by the game. If you use those

for a hack, units won't be able to walk on them.

The ones I circled in blue are pillars units can stand on to gain a defense and avoid boost.

You'll also notice that there are some tiles that have pillar bases at the top of the tile. Right now, the pillars

in the example map lack bases.

So let's add more stuff.

8LessTileSpam.png

This might be a good time to talk about wall joints.

9WallErrors.png

See how the areas I circled don't really connect? They lack joints that put them together.

10WallJoints.png

Each joint has it's own purpose. Some are to be used when the wall is two or more tiles thick,

while others are for simple one tile walls. Other still are meant to be at the end of a wall. Check it out:

11BetterJoints.png

Now we're getting somewhere. But I've got a question for you.

Do things look a little...flat? Check out Exhibit B to find out the correct answer!

 

Exhibit B: Shading

Spoiler

 

So the question was: Do things look a little flat?

If you answered yes then you're correct!

This is caused by a lack of shading. (And you thought you could escape shading by making maps instead of sprites fufufufufu.)

Remember when I was talking about those floor tiles with black lines (Aka shading)? I'll point them out again:

12ShadingTiles.png

There you go. So, here's some basic principles to follow for shading:

Let's go through the shading process step by step. First, we want to shade all the walls, pillars, and chests on the right side.

131Shadingontheright.png

Next, we need to shade on the bottom of all the walls and chests (That door just beneath the throne too).

132Shadingonthebottom.png

Hmm, but what about the walls in the corners? They need shading on both the right and bottom sides. There's tiles for that:

133CornerTiles.png

So let's shade the corners of walls and chests (and shade stairs if they're facing down, forgot to mention that).

134RightandBottomCheck.png

Alright, so it's looking better. Let me ask you another question: Does the shading by the pillars seem cut off?

To fix this we would need some sort of half shaded tile. Luckily, they exist:

135HalfShadedTiles.png

Certain ones have certain purposes (I'm always saying that, aren't I?). We want the one that has just a little bit of

shading in the upper left corner of the tile.

136PillarShadingBottomRight.png

Subtle, but important.

So here's the map in it's entirety:

13IndoorsShaded.png

See? Isn't everything looking much more defined? Yes is the correct answer.

But wait! The outside of the castle needs shading too. Use these fancy grass tiles for the job:

14GrassShading.png

Use those tiles I circled in red to shade the outside.

15ShadedOutdoors.png

Notice that the outer walls require shading on the right and bottom sides, just like walls inside. Oh, and

the walls in the corner require shading too where appropriate:

16Wallswithshading-1.png

Use the ones with shading on the left side of the tile!

17OutdoorsShaded.png

But do the shaded walls by those stairs look funny to you? It would make more sense if there were some pillars

so that those kind of shadows would be possible. Find those kinds of pillars here::

18FancyPillars.png

Notice that some of the tiles I circled are pillars, while others are bases. Remember, pillars need bottoms!

And here's those pillars in action:

185AddedPillars.png

Now the shading makes more sense since the pillars would be able to create that kind of shadow.

In addition, wall caps (Those gray, brick looking wall tiles) need some shading when they're in a corner. Here's the tiles

I'm talking about:

186HalfShadedWallCaps.png

Let's put them to use:

187ShadedWallCaps.png

Look in the corners of walls and you'll see that I've shaded them. But things are a little different when

the wall is next to a pillar brace.

188ShadingNexttoBraces.png

See how the wall cap is shaded all the way from top to bottom? Do this when next to a pillar.

Where are the tiles you ask? Here:

189FullShadedWallCaps.png

Thanks go to Feaw and Hero of Time for reminding me to shade wall caps.

There's one other thing I should talk about, the throne room.

19BadThroneRoom.png

See how it's got carpet all over the place? (I won't point out where the carpet tiles are, it's pretty obvious)

Well, because there's carpet going all the way to the wall, the room looks very flat without shading.

Never have a room that is all carpet because you won't be able to do any shading. Instead,

do this:

19ThroneRoomShading.png

Leave a one tile perimeter around the carpeting (At least one tile). You've got to have shading or else

the room will look flat.

There's a lot of shading to remember in this section so here's a quick check list:

Walls - Shade on the bottom and right side

Chests - Shade on the bottom and right side

Doors - Shade on the side the door is facing

Pillars - Shade on the right and bottom right sides

Stairs - If the stairs are facing down, shade on the bottom. Otherwise don't shade.

Walls - Shade them when next to a corner or wall.

Wall Caps - Use half-shaded walls for corners. Use full shaded walls when next to a pillar brace.

 


Exhibit C: Height Errors

Spoiler

 

Height errors are another common problem in indoor maps. We all have them from time to time.

What are they exactly? It's where the implied elevation from stairs and the height of the walls

don't agree. Let's look at an example:

20HeightError.png

See how the stairs go three tiles up? To be consistent, the walls would need to decrease in height by three tiles.

But they don't and this is a problem. Let's look at one way to fix this.

21HeightErrorStep1.png

Look at how the walls are 2 tiles high, and then when you go up the stairs the walls become 1 tile high.

Note that those pillar bases which are half a tile don't add to the height, they simply help with perspective.

But wait, the rest of the castle isn't of the same height, it looks funny still. Let's change that:

22HeightFixingStep2.png

The upper right portion of the map is now consistent with it's height. But I didn't fix the rest of the map. Why?

I've got other ideas in mind:

23HeightFixStep3.png

Varying the height is a great way to add pizazz to your map and really make it interesting.

But there's still a problem:

24OutdoorHeight.png

The height of the ground doesn't agree with the building. If that wall broke, a unit would be able to go

from the outside in without going up in height. But look at the entrance in the bottom of the map.

Units need to go up two tiles worth of stairs to get inside. This is a more subtle height error, but an

error nonetheless (Thanks go to Feaw for pointing this out).

But what to do? I've got an idea:

25HeightErrorFixStep4.png

I moved the breakable wall over 1 tile and then added enough stairs to be consistent with the other side

of the map. Now it's correct and still looks like units can come in from the outside at the top of the map.

Here's the finished product:

26HeightErrorPurge.png

Let's follow the general flow of what's happening here. If a unit stands outside the castle, they'll

see the walls are 3 tiles high. If they move up the staircase (Which is 2 tiles high) and into the castle,

the walls will be 1 tile high. (3-2=1 simple math yay)

So the unit continues moving along, up the map, and comes to a staircase leading to the right. They go down the

one tile high staircase and now the walls are 2 tiles (As are the pillars, 1+1=2). If they move to the throne room

they'll have to go up a 1 tile staircase. The throne's walls are 1 tile high. If they move towards the chests,

there will be another 1 tile high staircase and so the walls within the chestroom will be 1 tile high as well (2-1=1).

See? As the stairs go up, the walls will decrease in height.

It's important to get rid of all height problems in a map. If you don't, the map won't make sense.

I should also say that if you use stairs, you can also change what kind of floor tile you use because you've

got a transition from one level to the next. Check out how I've got one type of tile on one side of the stairs

and then a new type on the other side.

 

Feaw talks about Wall Patterns

Spoiler

 

Have you been wanting to spice up your wall patterns? Feaw has some great tips, check them out:

On 5/30/2011 at 3:57 PM, Feaw said:

Now, for my promised wall decoration/variety tutorial.

1 tile high walls.

Spoiler

 

walls1high.png

As you can see, there are a lot of possible patterns possible. Not all of them work for both ways (shaded or not shaded), but you can always improvise or use the different types according to the situation.

 

 

2 tile high walls.

Spoiler

 


walls2high.png

Now, it gets a little bit trickier. Some patterns just won't look right for 2 tiles high walls. But, there are still several possible ways to do them.

 

3 and 4 tile high walls.

Spoiler

 


walls34high.png

Now it gets even trickier. 3 tiles high walls can still be done in a few ways, but you have to think more.

 

As for the 4 tiles high walls... I only know 2 ways to get them done.

The right one is used in FE6's chapter 16. It cannot be used with shading since the big window tiles lack any shadowed tiles.

That's where the left version comes in. It's used in FE8's chapter 16. Although that one is only 3 tiles high, but I added the top row to make it 4.

This one CAN be used with shading, so you have almost no choice to use something like this for that situation.

Keep in mind, there are waaaaaay more possible patterns and ways to do walls, but I listed the most used ones. So be creative and make your own patterns to make your maps more interesting.

If you're having trouble, I recommend looking to the official maps from the games.

That's basically all there is.

 

Thanks, Feaw!


Conclusion

Spoiler

 

This concludes part II of my mapping tutorial. Remember: Shading and height are very important issues that need to

be addressed for your map to make sense mechanically. Shade properly and count your tile height.

If you follow this simple ideas I've laid out, I'm confident that you'll be able to take a map like this:

1IndoorBase.png

And turn it into something like this:

26HeightErrorPurge.png

Happy mapping!

 

 

Edited by Primefusion
Fixing spoilers

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.