The Mugen Fighters Guild - [Tutorial] Non-Fighting Game Stages for M.U.G.E.N

So one day I was reading about someone who tried to make a stage tutorial (which caused much lulz and anger), when I decided that I might as well make my own stage-making tutorial. However, while I will go over the technical process, the main focus here is how to take a stage from a non-fighter and make it dynamic. I'll go over the process step by step. Also keep in mind that while I mainly talk about SNES stages, you can apply this to other platforms as well (it's just that I'm mainly familiar with SNES games lol)

STEP ONE: Choosing your stage

This part is a bit difficult. There are several criteria you want to look for. For starters, you generally want to avoid stages that are "flat." By flat, I mean stages like in Super Mario World. Generally speaking, the ground should have some depth to accomodate most characters. You also want to have a background that features enough elements to keep the background from looking boring. For example, if you have a background with few colors and few decorations, you'll have a difficult time making anything worthwhile from it. For this tutorial, I'll be making a simple stage from Ganbare Goemon 2, Kibi Douge. I generally like the Ganbare Goemon series because the artwork is usually very colorful and unique, making it a perfect source for stage making. I'm also picking this stage for this tutorial as there is no animation so it'll be easier for me to talk about.

STEP TWO: Break it down

At this point, you will be tempted to take a segment of the stage, loop it with the tile feature, and call it a stage. This is a trap, one which many stage creators (including myself at one point) have fallen into. What you are striving to do is convey the original by picking the items that stand out the most to you.

For example, here I picked the adjacent tree trunks, an elevated platform, and some leaves growing from one tree. Focus on these elements, rip them, and get ready to put them together. Make sure you gather enough elements, though. You generally want to shoot for a stage that's at the very least 420 pixels wide. For simplicity's sake, this stage is 376 pixels, which is decent for a bonus stage.

STEP THREE: Ripping and tearing

Now you actually have to rip the graphics. I'm not going to go into too much detail about this, since I'm assuming you're familiar with your emulator. In general, make sure that the emulator you're using can disable layers so that you have access the the background images. ZSNES is my favorite for SNES ripping although I've heard success stories with SNES9x. Visualboy Advance offers similar features in layer disabling. As far as NES stages go, it's not as easy, as there is no way that I'm aware of to disable layer short of using Artmoney. If you're using VirtuaNES (my favorite NES emulator), just take a screenshot, move your character a bit, and take another screenshot so that later, when you begin editing the stage, you can simply put the images together resulting in the illusion that he didn't exist there.

STEP THREE: Arrangement

Now comes the tricky part, which is putting it all together. I'm assuming you're all comfortable with the graphics program you're using for this project, so I won't go into making selections and stuff like that. I will say however that by far, my favorite editor at the moment is Photo Impact 12, as it does an excellent job at creating and organizing palettes. As far as the actual arrangement goes, however, I can't really come up with a set-in-stone answer for how to do this properly, as there aren't any real guidelines for how to make it dynamic. However, there are a few general tricks you'll want to consider.

1) Try to put more stuff on one side of the stage than the other. If you try to put equal amounts of stuff, you'll end up giving too much of a balanced feel, which will make it feel unorganic.

2) Don't stack multiple platform areas on top of each other. If you do that, you'll fool the player's eye into thinking he can jump on top of that.

3) In general, don't include items or enemy characters in your stages. There are several occasions where this may work (mainly when they're not walking on the same ground you are), but in general, you want to keep these to a minimum as it gives off the illusion that you can interact with them.

Keep in mind that there are exceptions to these guidelines, but in general, you will achieve a better look following these.

Once you've gotten all of your layers figured out, you want to make sure that at the very least, they will reach 240 pixels in height. This is the minimum requirement for M.U.G.E.N, but the maximum height of any given SNES snap is 223. Now in this case, we can compensate by pushing the ground up to cover this area, but in other cases where the layers are cut off, you'll need to do some editing. You will also need to edit if, for instance, you are trying to add vertical scroll to your stage.

STEP FOUR: Compiling the SFF

Congratulations, you've come this far. Now it comes to creating the actual SFF. Now it's quite easy to make an SFF with MCM, but as there are some compatibility issues, I suggest you use sprmaker instead and use MCM to figure out alignment as you analyze the previous sprite .

Since the stage I am making is a two-layer stage, I will make image 0,0 be the background layer. In this instance, the background is tiled, so I don't really have to worry about where the x-alignment is, and can leave the y-axis at 0.

Now that I'm doing the ground, things will be a bit trickier. The X value should be half of whatever the ground's width was. This is one reason why it's a good idea to have a stage with an even numbered-width, as you will need to trim off more of the stage to make it look decent in the .def file later on.

Then, simply drag the PCX over to where the background layer cuts off, making sure that you covered up the black spots.

To sum up, here's a quick and easy way to properly align your PCX files in general:

X: (width of .pcx in pixels)/2
Y (background images): (height of .pcx in pixels) - 240. Anything less than 0 should be aligned at 0, assuming that you will be covering up the rest with ground and that your stage has no vertical scroll.

Record the X/Y values that you have in MCM and create a .txt file as outlined in the sprmaker documentation.

I'm not going to go into detail as sprmaker's directions are very clear, but if you did everything right, you should have an .sff file in the folder you specified in the .txt file.

Whew, glad that's over. In this example, there's only two images, but when you get more practice, you can start incorporating more images.

STEP FIVE: Coding your .def

If you're a lazy guy like me, you can simply copy KFM's stage (or in this case, one of my older stages) and overwrite the values to match your stage. That works. So starting with [Camera], here are the things you edit:

boundleft & boundright: To find out these parameters, the formula is as follows

[(Ground's width in pixels) - 320] / 2

The number you get will be your boundright value. Your boundleft value is the negative of the boundright value.

boundhigh: The formula is a bit easier for this one.

(Total Height of the stage) - 240

If the total exceeds 0, you make it the opposite of the number (example: if the difference is 5, then boundhigh would be -5).

Moving onto [StageInfo]:

zoffset: You're going to need to tweak this one manually when you test it in mugen. The larger the number, the lower you are on the stage.

Then [Shadow]. Although you can mess around with these, the main thing to pay attention is to:

yscale: Try to keep the original game in mind. If there were no shadows, put in 0. Use negative to make a shadow behind the players and positive to make it fall in front. In general though, don't put a shadow behind a character unless there's a wall or something nearby, as it might look weird on characters who can jump high.

And finally, [BGDef]. Under spr, replace the name there with the .sff file you just made, and turn on debugbg = 1 for now for bugtesting.

While the docs do a good job of explaining how to make a stage, I'll just do a brief summary. For your background layer, make sure you have a low delta. While 0,0 works fine, it looks awkward for longer stages, so if you have a wide enough image, just give it a small delta of, say, 0.5 in both categories. And since there's nothing behind this image, I didn't include the mask parameter as I don't need to hide color 0. In this case, set tile to 1,0, so that the backdrop will loop.

For the ground, make sure that you set mask = 1 so that color 0 isn't visible. That's pretty much all there is to it.

VOILA, YOU'RE DONE

And here it is. Not particularly exciting, but the layout feels varied enough. As you get more experienced, you can work on bigger stages with more animations, and experiment with layout.

BONUS:

Just because I'm a silly person, you can download the stage I've used in my tutorial.

Download
MP3 ADX SPC

Links to this post

[Tutorial] Non-Fighting Game Stages for M.U.G.E.N (Read 9045 times)

Jango

[Tutorial] Non-Fighting Game Stages for M.U.G.E.N

IEatRamen

Re: [Tutorial] Non-Fighting Game Stages for M.U.G.E.N

maximum-shock

Re: [Tutorial] Non-Fighting Game Stages for M.U.G.E.N