Cybaster's Complate Stage Creation tutorial
Note 1 - This tutorial was written by Cybaster in 2009 and may contain some dated information, such as using images in .PCX format. Nowadays, it is more recommended to use images in .PNG format, remembering two important points:
A) For 8-bit images, the order of colors in the palette can be inverted in relation to the order of colors in the .PCX format
B) Mugen 1.0 onwards supports 24bit images (16bit color + 8bit alpha)
Note 2 - All comments and language used in the tutorial are the responsibility of the author.
Note 3 - I highly recommend the usage of the Automatic Stage Creation Tool to build the very basic foundation on the stage. But this tutorial will explain everything about how a stage for Mugen is about.
Original tutorial content:
Hi everyone, with this tutorial, I'll try to teach various aspects of stage making. I tend to often see the same mistakes in stages (bad symmetry, colorloss, etc.), or people not knowing how to do things as simple as making an animation or making a sprite transparent. This is what motivated me to write this tutorial.
DISCLAIMER : this tutorial is very long, but don't be scared. There are many screenshots and explanations, even on very basic stuff, so that everybody can get a hand on it, even those who have never created a palette for a sprite or those who have never opened Fighter Factory in their life. It's an interactive tutorial, where you create a stage on your own while following the various steps. Once you reach the end of the tutorial, you should be able to grasp most of the concepts of stage creation and start being creative on your own.
This tutorial is "open-source", post it wherever you want, translate it if you want, use parts of it in your explanations, etc. Some credit would be nice if you use it, but I don't really care, as this was mainly written to help out newcomers and people who have problems creating "good" stages.
Here is a list of the various tools you will need during this tutorial.
- Notepad (or Notepad++) : just a text editor to write your code. Alternatively, you can use the text editor in Fighter Factory.
- Fighter Factory (aka FF) : it will allow you to build the SFF. If you can, don't use the FF Ultimate version, as it is not made for stages. Use the old FF. Here is a link to make your life easier : LINK.
- The Gimp (or Photoshop, or Paintshop Pro) : the program to do all the graphical stuff. Use the one you're most used to. The Gimp has the advantage of being free, and can be downloaded at this address : GIMP
This tutorial is composed of several chapters :
1. Applying a palette to a sprite
2. Let's analyze a template
3. Let's create a basic stage
3.1 - Setting the floor
3.2 - Setting the sky
3.3 - Setting the bounds
4. Adding depth - Deltas
5. Animating the stage
5.1 - Adding a moving mushroom - Velocity
5.2 - Adding clouds - Transparency
5.3 - Adding Princess Peach - Creating Animations
5.4 - Adding Sinusoidal Movement - The Grand Finale
6. Common Mistakes to avoid
7. Additional Stuff
7.1 - Avoiding colorloss
7.2 - Other Animation Codes
7.3 - Foreground Images - The BlackJack Method
7.4 - BG Controllers
7.5 - Misc. Stuff - Parallax
During this tutorial, we will build a simplified version of my "Mario in the Sky" stage, using several images. Download these images, they are the ones we are going to use to create the stage. I'd advice you to follow the various steps while reading the tutorial, to see if you succeed in doing everything I've written.
Download the images here : THE LINK TO IMAGES
As you can see when opening the archive, most of the graphical work was already done.
- mario000 : the ground.
- mario001 : the sky.
- mario002 : background elements.
- mario003 to mario005 : various clouds.
- mario006 to mario009 : Princess Peach on a cloud.
- mario010 and mario011 : Flying Mario.
- mario012 : a mushroom.
- mario013 and mario014 : two sets of mountains.
The sprites are cropped (doh!) but don't have any palette. Applying a palette is the first thing we are going to do.