Tiles... they (usually) aren't that hard, guys.

[Knux]

I agree with the suggestion of Toxic Seahorse tiles. I was going to attempt that tileset once, so I'd like to see how you go about it.

Also, this is what I was able to find regarding the tiles:

http://www.spriters-resource.com/snes/m ... eet/36750/
http://www.vgmaps.com/Atlas/SuperNES/Me ... ahorse.png

[NemZ]

Well, I suppose that settles that.  Quite a mess of a map, but I guess that makes it a solid tutorial.

And I do mean mess.  Whomever ripped this thing left it out of alignment a pixel or two so it's going to be a little work just to straighten it all out before I can properly separate it.

EDIT:  After a quick replay I should note that I had forgotten the stage had parallax scrolling shenanigans involved, so I can't really fault the map creator on that one. In fact all things considered I have to say whomever it was did a pretty good job!

[Knux]

And that's without saying that the animations for the flowing water in the background and below the floor aren't available.

[NemZ]

Okay... This is going to be quite a thing!  I'm not exaggerating at all when I say this might be the trickiest conversion I've ever attempted.  That said, USUALLY it's not hard.  But sometimes it can be.

Lesson 3: Separation and Rough Draft

So we're looking at Toxic Seahorse from MMX3.  (it's actually much bigger than this obviously, links above for the full version)



Giving it a quick look over we can determine there are essentially 3 parts to the level, 2 slightly different interiors and an exterior water zone.  The primary gimicks of the stage are flowing water and glowing lights, so we want to keep those in here somehow... which means that's two dedicated palettes right there that need color cycling effects for animation.  That leaves just two palettes to do everything else we need done... a tall order!  Take special noted that the waterfall/damn area is used in two sections so however we end up covering that will need to be compatible with two different areas, so almost certainly we're going to have compromise pretty hard there.

But let's worry about that later.  Before we can do anything further we need to extract tiles from the map so we can work with them in a more orderly fashion.  Usually I do this in Tiled, a very fast and easy tileset manager which is good both for pulling tiles out and for building maps back out of existing tilesets.  In this case however, with the slight misalignment issues I mentioned earlier I had to do it the slow way with photoshop. When forced to work this way I find it helps tremendously to turn on a 16 pixel grid (under the view menu) then just move the image to align it as needed and copy/paste rectangular selections to a new layer, then arrange them as you go.  

Preferably your final result should be organized into related sets and broken up by areas where they'd need to load, like so (taking the liberty of cutting out the backgrounds on a few to keep it simpler for now):



Next we need to start downsampling.  The SNES obviously has a much larger available color palette and can also have as many as 8 active pallettes with 16 colors each so we're going to have to do some major cutbacks to force it down to NES standards.  Before you do anything else I strongly suggest you make a copy of the image on a new layer, then lock the one on top and turn it's visibility off.  This way you'll always be able to compare it to the original with just a single click, which will be VERY handy later.

I find the fastest way to do downsimpling is just to use a selector tool (with tolerance set to 0) and manually pick a few colors that are close together in shading on a sprite and just paint them all with the closest NES color available.  Generally I start by just picking out the darkest areas on all tiles right up front and making them all black (or whichever colors on each are closest whatever you want to use as a common color if NOT black).  After than I do the highlights, usually just 2-3 colors this time.  Finally I decide how to break up the final 2, and as this is where most of the detail is you might need to try a couple of options on separate layers before deciding which you think is the best balance.  

At this stage you don't have to be super picky about how many colors are on each tile... that we'll get to later.  For now the goal is just to rough it all in.  This really just comes down to your own taste, as very often there just won't be a color that is anywhere near what you want.  This was especially an issue with the very low-saturation wall interior sections, and I also went ahead and just ignored the water filter overlay for section 2.  Here's what I worked out in my rough pass:



Well, it's a good start.  Good enough some might just stop here and say close enough... but we aren't going to be lazy like that, are we?  Heck no!  

Next lesson we'll make the sacrifices to cut it down to just 4x4 which will sadly require losing even more accuracy and detail.  Remember to save your working photoshop file with the layers intact, as you'll definately want the reference when it's time to bring those details back as best we can!

That's all for now, but go ahead and discuss how you would cut the colors down further.  I'm especially interested in what you guys can come up with for tackling that waterfall!  If anyone has a more specific question on something I may have described too vaguelly just let me know here as well.

I expect this to run about 8 parts in total.  Along the way we should reach the point where following these steps you could make your own NES-ized recreation of the original map rip, then a working NES stage, then everything necessary for texturing of a MM8BDM stage... and finally some advice for making completely origianl tilesets.

[Magnet Dood]

Looking at the separated tiles does make me wonder: can the Game Boy Color support the colors in some of the tiles? As far as I know, the GBC could use more colors at a time on its screen.

[NemZ]

GBC working with appropriate cartridges can do up to 56 colors at once (8 4-color background palettes and 8 3-color sprite palettes) and has the same overall total palette options as the SNES, more than 30k total colors.

For contrast, the NES can have at max 25 colors on screen at once and only has a functional palette of ~56 colors total.

[NemZ]

...nobody even going to try?  Disappointing, guys.  

Lesson 4: Strategic Palette Use

Okay, let's pick up where we left off and start trimming this all down to fit the NES limitations.  I've also added a few labels to keep it all straight:



As I said in earlier parts, we only have 4 palettes to work with here (with an option to swap them mid-level).  I also said that the animation effects I want to make a priority will require two of them, labeled #1 (water) and #2 (backgrounds with glowing lights).  Obviously these will require some palette swaps, but the mechanic stays the same so it makes sense to just set these aside as-is.

With palette 1 the water in the outdoor area is going to need some touching up, and that needs to start with addressing the angled dividers in the downflowing areas.  There's just no room for anything but black there as the rest will be cycling for animation, and I also cut it off to fit the 16x16 square.

Regarding Palette 2, all the little touches of falling green water just can't happen.  In fact there is still one too many colors just for the blue areas as it is, so we have to lose some of that definition.  As it's a background it makes sense to go darker, so the lightest color goes away.  I also switched it to a bluer color so that the green water we DO keep will stand out a little more.  In the underwater areas of palette 2 (with one color swapped) I only filled in the remainder of the 16x16 blocks with black and removed a few areas that just wouldn't work... we'll have to get back to that later on with an alternate to the angled slopes.

After that it gets tricky, and we only have 2 options open in each case.  Here's where I went with it, with the rest of my choices explained below:



Looking it over I noted that areas marked A and D are the same across both non-underwater areas, so it makes sense to me to fuse those together into one palette.  The original had little yellow lights there, which works well with the largely yellow pipes.  I know the pipes look a bit crappy at present, but that's fixable in the next step.  Looking to the underwater area, a slight tweak to the same pallette would cover the areas marked E.

With only one palette left that means we're forced to do a similar arrangement with areas B and C (and the palette swap).  In both cases I recolored the green water leakage and gave up on the lights because of color limitations, then used a switch in color focus to differentiate the two different sections as much as possible.  The actual colors were altered, partially because the bluer background would clash with the blue bricks and partially to work with the outdoor areas.

Speaking of the outdoor areas G and H, we're already out of palette options so these must use the existing options.   Getting green trees and blue skies in area G is why the interior colors are as they are now.  Making H use the dark blue of 2 rather than grey or brown as it is in the original stage is a choice to help push it into the background, which otherwise would clash with the outdoor platforms in group A.  Making it just a blue/black is to insure it works with the purple in the underwater section as the dam graphic needs to work there as well.  This however also means it's possible to add flashing lights there, and I plan to work some into the mix in the next lesson.

Finally all that's left to work out in the underwater area is what to do with area F.  We're somewhat forced here due to the colors we need to still have access to for the outdoor dams in the hidden areas, but I went with a middle shade of aqua for the edges that would stand out against the background without going obnoxiously bright, basing it more on what the colors looked like with the water filter over everything.  The yellow pipes sadly have to go, but it's a good place to put the sky blue I suppose.  Kinda have my hands tied at this point by all the other pieces that depend on it being this way.

So next time I'll get down to the nitty gritty details, reworking these tiles one pixel at a time to bring back as much detail as I can manage (where those saved layers will really pay off) and also to correct some of the problems created by removing colors, such as all the green water from the #2 backgrounds.  We'll also finally get rid of the last few impossible areas, such as the side sections by the ladders.  By the end of next lesson it will be possible to rebuild the whole stage map in 8bit form!

In the meantime, keep in mind that we've passed the point where there are any right answers.  What would you guys have done differently, and why?

[Magnet Dood]

Frankly, I'm not a big fan of the waterfall/dam things in H being such a deep blue color. I realize they're supposed to be put in the background, but I think it would look better in brown or maybe a slightly lighter shade of blue. They're supposed to be outside, after all- shouldn't they look a tad brighter?

[NemZ]

Why not fire up your graphics software of choice and try it out, then share the results?  

On further reflection I do agree there's probably a better way to do it, but I'm still interested to see what you come up with.

[Magnet Dood]

This is kind of the way I imagined it. I made the background brighter by using the brightest blue from the water for the sky and one of the greens from the sewer sludge for the bushes and trees/clouds. For the dam brickwork, I took the colors from the brown/yellow bricks off in sector B. This allowed me to put in the pipework again on the building. I wanted to re-add the detail to the on the waterfall thing going diagonally down, but it never looked right when I tried it.

I'm still not too sure on how palettes work, but I technically didn't add any new colors into it, so I thought it was fine as a result. Would this work, or no?

[NemZ]

Nope, sorry.  Palettes don't work that way.  Everything in a given area of a stage has only 4 palettes (3x4+1 common color, usually black... so 13 colors max), and any individual 16x16 pixel square can only use 1 palette... no mixing and matching between them allowed.  Here are the palettes used in the previous lesson, broken up into groups.



So the waterfall for example has 3 shades of blue and the common black.  I haven't gone into animation yet, but all three of those colors are going to be set to a cycling pattern to animate the water, leaving black as the only color available that isn't moving... hence the dividers have to be solid black.  The sky/trees area would have to be a different palette unless you want it to also be flashing between colors, much in the same way that when you charge the megabuster the 1ups flash because they are using the same sprite palette as mega man himself.

As to the color choices keep in mind again we only have 4 sets to work with in a given area.  The water takes 1, the pipes/wall frames take 1, the blue backgrounds with (eventually) flashing lights take 1, and the interior of the walls + background bricks take 1.  That's all 4, with no good break points to load or change them out so the dam background MUST somehow work with just those available colors.  Further, the same background must look identical when used in the water area, which means it MUST also work with the 4 palettes we're using there.  That's a whole lot of limitations to work around, and the dam area is by far the most challenging part to deal with because of it.

...or so I initially thought.  In looking at it more closely I noticed that the blue backgrounds don't show up for a while in the second area and there's one room between the dam and blue background sections so technically there is a possibility we could sneak in another palette change.  Further, that big open underwater area is just plain not going to work with a NES Mega Man engine (I'm trying to stay in the mindset of 'romhack' for this project thus far... conversion to MM8BDM will come later) so that whole section would need to be heavily reworked, and that can easily free up a palette to keep the dam both consistent between the two areas and brighten it all up a bit.

Specifically, this palette and this rearrangement of the stage map:

[NemZ]

Lesson 5: Refining Details.

So... not sure how else to really tackle this other than just showing you before and after side by side, along with the source material (new stuff in quote box to set it apart):

A lot of this step just comes down to having an eye for detail, and that can really only be learned through practice.  If there are any specific areas you'd like to see discussed more thoroughly by all means ask.

One big reason for the differences are that some areas on the original just don't work with NES color limitations.  Things simply have to fit neatly into 16x16 chunks, there's no getting around that.  Take the ladders for instance... the top of the side platforms can't have that silver bit so high, so that had to be squared off though I carried a stripe of black between the two to try and keep them linked.  The ladders were also a weird size and that needed to be narrowed, as 2-tile wide ladders are okay (7, 8 and mm&b justifying it) but 3 with the slides not climbable just doesn't fly.  Likewise the corners of the 'frame' walls had to be squared off, but I moved the diagonal deeper in to keep that general feel intact.

With the pipes, clearly changing the shading pattern does a world of good in making it much sharper and distinct.  In particular I noted the presence of a second smaller pipe as the most interesting detail and made color choices that, while less true to the source gives a pleasing sharpness and emphasis to it.  In this area in particular, as well as the frame above and the bricks to the left, I want to draw special attention to the importance of making the common black color more a part of the design and how much sharper and cartoon-like this makes everything, a key part of maintaining the classic Mega Man style.

With the large blue background graphic I actually deleted half so that the reference showed through directly next to it, then mirrored the finished result.  While time consuming, this part section was just an exercise in bringing back the sharpness that the earlier color simplification obscured.  One technique used the most in this section is using parallel lines at a progressively variable spacing to emphasize a feeling of roundness.

Going back to the bricks, I made a judgement call here to make them a more regular as they just didn't feel classic megaman-y enough.  I also decided to swap the colors of the exposed bricks to match the other area to better tie them together as being the same stuff.  Artistic license, but I think it works.  I might take another shot at the 'lights' in the brick that still aren't quite distinct enough for my tastes though.

Perhaps the most obvious change is the dam area, owing to the extra pallette swaps I discussed the other day.  Adding new shading options there makes the sky work MUCH better, and as a consequence also means I can bring back the yellow pipes in the underwater area as well as letting me kill those troublesome sky blue bricks that were just plain weird earlier.  Still on the underwater area, In refining the non-bacground bits of rock that you're supposed to be able to actually stand on I felt it needed to be more separated from the purple.  The original was brown, but giving it a violet shading job ties it together while keeping it visually distinct... chalk the color difference up to distance and water opacity.  I didn't make all the brownish rocks in this style though to keep it pushed back into the background, and they needed to be squared off anyway as we can't have parallax effects here.

Oh, and one last thing... the outside dam area had those foreground pillar areas that simply can't work in NES, so I reworked those a bit by getting rid of the perspective and fleshing out that exposed section to fill the full width of the column for that area where the player will pass through it.  The NES certainly CAN do foreground tricks like that, but it does so by putting the sprites behind the tile layer (hence why such stages tend to use a solid colored background everywhere, as in airman or toadman), and doing that would kill far, far too many other sections of the map to make that a worthwhile.

Next time:  Some original new tiles to fill in a few gaps and the completely rebuilt stage map.  After that we'll get to animation and finally adapting it to MM8BDM.

[NemZ]

Lesson 6: Rebuilding the Stage

A lot of work this week, though perhaps not much to say about it.  I started by going back to Tiled and importing the full stage map, then just painting over it directly with my new set of tiles.  Along the way I found several gaps I just missed the first time, as well as seeing that a few things just weren't working.

To be perfectly honest I'd usually skip this whole step as it's quite time consuming, but for the sake of the tutorial I did it this time.  Not that it's at all a bad practice... it definately showed me a few things I skipped the first time and helped work out a few issues I'd otherwise have missed... but usually I'd leave that testing process to the person actually making the map and just patch fix as needed.

Here's the new tiles that fill in holes in the set:



Mostly corners, but a few are originals to help with the small new room.

And the full set rearranged a bit to get rid of some redundancies and making it smaller overall:



And here's what the map looks like in full (huge):

(click to show/hide)

So, various changes and the reasons I made them:

The most obvious is the reworking of how the 'secret' area above the waterline is accessed, which needed to be done to control access to the area so the extra palette change could happen as well as because a NES Megaman game doesn't offer that kind of free scrolling as the original requires.  Basically the frog armor is still needed to destroy the fans, but doing so now opens a new room that allows access above the water line (which is now mined, explaining contextually why you can't just jump up).  I also moved the path 'reconnect' point to this room leading into the strange little alcove area of the original which didn't seem to serve a purpose... possibly originally the hunter room but they decided two minibosses in a row was too much?

I just kind of roughed in a puzzle idea to get to the new K-ride area on the idea of using a frost shield to float under the wall and above the mines, but it's just a placeholder... the area needed something there to show for itself.  Not entirely sure that would even work, but oh well.

The loss of the free-scrolling area also led me to add a bit of contextual wall kibble along the edge in the initial resivoir drop area.  The second screen is necessary to finish the full palette swap for the new area.  Likewise on the other end the miniboss room is used for the same purpose, though I also brought a little of the half-loaded palette into the room so that the water draining can be moved in here with just a simple 'suction' sprite above the new drain pipe to sell the loss of water physics because obviously the NES can't handle it the same way the SNES game originally did in the next room with a transparent color overlay.  I did make a couple of blue outlined bricks to sell the effect on the initial drop though.

In the dam area, the 'column interior' idea just wasn't working.  it stood out far too much and wasn't immediately clear what it was, so I just ended up cutting it out entirely.  The fences also proved unworkable... there's just no way to have them overlap properly with another background in the way, and they're too distracting even to be assumed as being just the far side of the walkway.   I'm hanging on to the tiles in both cases anyway for the 8BMMDM conversion later.

Another minor change was adding a dither to the farther back waterfalls so they get pushed back into the distance... they were a little too much otherwise, especially in the first vertical area.  I also made a blue version for the final stretch, which is not in the original but I thought it helped tell the place's 'story' in that the water on this side of the reservoir has been purified.

One more minor issue, the palettes just can't handle the sort of half-size tiles that were originally used for some of the thin wall areas (now replaced with columns) or the small pipes along the ceiling when they cross over the blue areas (simply left off).  I also skipped the very small arches indicated in a few spots coming off the brick backgrounds in a few areas... just wasn't feasible, sadly.

Next time: animation!

[NemZ]

Lesson 7: Animation

Okay, time to breathe a little life into these backgrounds for that finishing touch!

Here's the full tileset including animation alternates.  I'll be referring back to it as I go through the various animation types.



The essence of animation is visible change, obviously.  If you think back to the very first part of this series each tile is influenced by two sources of information, the palette (what colors are available) and the pattern table (which colors go where).  Thus, any change to either of these two items will cause a visual difference in how the tile is displayed on screen.  Of the two, changing the palette is far less taxing on the system so most games use this for the vast majority of animation effects.

The simplest change we could make is just to change one color, and this is exactly what we're going to do animate the lights in our deepest backgrounds.  when that one color on the palette changes every tile using it will update simultaneously (or at least as fast as the tv/monitor's scan rate can manage) to the new color choice.  In this case we want a simple pulsing animation for the lights on both our dark blue interiors and the underwater... things... which we will accomplish in a 4-step cycle.  We just set it up to rotate in stages through pale yellow, light orange, dark orange, and then light orange again  (light green/royal green/aqua/royal green for the underwater things).  When put on repeat this produces a fairly smooth loop with a soft pulsing.

Another very common effect we'll be making use of is cycling multiple palette colors at the same time, specifically just juggling the same three in sequence to create flowing water effects.  By changing them systematically in the order darkest > lightest > middle > darkest we can create a sense of movement even though the patterns stay perfectly still because the eye wants to follow the highest contrast area (where darkest and lightest touch) which will be shifting.

There are plenty of other ways this can be used that we won't be needing for this stage by combining these effects that we won't be using for this map, but which can easily be seen at work in MM2, for example.  Take Airman's stage, those fluffy clouds gently puffing in and out; what's actually happening there is that the two darker edges of the cloud are being palette cycled progressively towards white and then back to create that effect, essentially a more subtle version of the lights earlier but using two colors for the effect rather than just one.  The gears and pistons churning away in Metal Man's stage are actually using a similar technique to the water animation, specifically there's one color stuck on brown, the black background, and then the last two colors are flicking back and forth between brown and black (basically on or off) to create the illusion of movement.  The same technique is used in the 'screens' on Dr. Wily teleporter room, though in that case they cycle between through 1 on > 2 on > both on > both off > repeat.

Here, see for yourself.  Aside from highlighting the different pallette colors in the metal sample these tiles are straight from the game.





When things get more complicated however we need to consider changing the pattern tables rather than just the pallettes.  This type of animation is used very sparingly in NES games because it's much harder on the processor and is likely to produce lag, but some later games made use of it more freely due to additional help from various special chips built into the cartridges.

In this case, we need a little more effort to make the propellers look convincing.  Just flipping the propeller vertically is a good start, but it still needs another frame to sell the movement otherwise it just looks like it's twitching back and forth rather than spinning.  One more frame, with two 'forward' blades about halfway between the two and a vague shadow for the blades that would be coming around further back, makes for a surprisingly smooth animation with just 3 frames total on a cycle.

These sorts of effects are always saved for impressive details and usually used sparingly.  The GB games tend to indulge in these more often since otherwise animation would be impossible as there's only one pallette to work with, but otherwise the megaman series doesn't use the technique very often.  For more extensive examples I'd point you to Natsume's Shatterhand (check out those fans and water effects) or Sunsoft's Batman: Return of the Joker, or the extremely impressive use Irem's Metal Storm makes of it for pseudo-parallax effects.

Of course there's one more type of animation involving background tiles that no Megaman-based discussion would be complete without... the large boss or miniboss.  There are hardware limitations which limit the maximum size a sprite can be, but by combining a mobile background with a few sprites above it for action and extra colors some fairly impressive enemies can be created.  The miniboss of the stage isn't that big in X3, but it's still a good opportunity to play it up for the true NES experience.  To pull this off you need a large area with no tiles so that background scrolling can be used to move the miniboss without interrupting the rest of the screen, then a few well-placed sprites to round it out.  You do need to take some care not to use too many of them and to space them out vertically as too many sprites on one horizontal line cause flickering.

Finally, here's a few screenshots I mocked up from the stage map with the animation fully implemented so you can see it in action:









Next time: MM8BDM conversion

[Beed28]

That last image is impossible on the NES. If you did that, then the entire room would end up moving with the miniboss:



The floor, however, can remain stationary due to how the NES can do split screen involving scanlines, or something like that (see the status bar in Super Mario Bros. 3 for an example of NES split screen). The later NES Mega Man games did this with the floor in rooms in which you fight huge minibosses or bosses. But no matter what, you absolutely cannot have a background above the floor at any cost, walls included, or they will move around with the boss. Thus, having a completely solid black background below is the correct way to do the room.
EDIT: I only just noticed about the part where you actually said that you needed no background tiles so you wouldn't interrupt the screen, but the animation you provided contradicts that very statement, so my edits of the animation still stands clear.

The map would have to be changed to take this in consideration: