No prior MUGEN experience needed. By the end of this lesson, you'll have your own custom-built stage running inside MUGEN with a scrolling background and an animated torch and you'll understand every line of code that makes it work.
Before we touch any tools, here's the entire concept in a nutshell. If you understand these three things, the rest is just typing.
.sff. We use a free tool called Fighter Factory 3 to do this like zipping a folder.When you pick a stage in MUGEN, the dojo, the rooftop, the boss arena, you're not actually playing inside a 3D place. You're looking at a stack of flat pictures arranged at different distances from the camera.
The picture furthest away (the sky, distant mountains) barely moves when fighters walk left and right. The picture closest (foreground bushes, fence posts) moves a lot. Your brain reads this difference in speed and thinks "ooh, depth!" even though everything is flat.
This trick is called parallax scrolling, and it's been used in 2D games since the 1980s.
Things every MUGEN stage needs:
MUGEN/stages/.def file (the config, plain text).sff file (your bundled artwork)MUGEN/data/select.def so MUGEN knows it existsThat's literally it. Four things. Let's go get them.
How many files does a basic MUGEN stage need at minimum?
Scroll to the bottom of this page and download the My First Stage Starter Pack. It contains three files:
my-first-stage.def, the config file, fully commented in plain Englishmy-first-stage-bg.png, a placeholder background to replace latermy-first-stage-torch.png, a 3-frame animated torch sprite sheetMake a new folder anywhere on your computer (Desktop is fine) and unzip the pack into it. Open my-first-stage.def in Notepad (or VS Code if you have it) and just have a quick look. Don't worry about understanding it yet, we'll go through every section in Step 4.
.def file, Windows might try to open it with the wrong program. Right-click → Open with → Notepad.Click items in the correct order to open the starter file:
Why should you right-click and Open With Notepad instead of double-clicking the .def file?
MUGEN doesn't read PNG files directly. It reads .sff files, a special format that bundles many sprites together with ID numbers attached. We use Fighter Factory 3 (free, included in the workshop downloads) to create them.
The plan: two pictures, two ID numbers.
| File | Group | Image | What it is |
|---|---|---|---|
| my-first-stage-bg.png | 0 | 0 | Background |
| torch frame 1 | 1 | 0 | Torch (bright) |
| torch frame 2 | 1 | 1 | Torch (dim) |
| torch frame 3 | 1 | 2 | Torch (bright) |
Step by step in Fighter Factory 3:
my-first-stage-bg.pngmy-first-stage.sff in the same folder as your .def#FF00FF magenta) in the placeholder isn't a mistake, MUGEN treats that exact pink as transparent. Don't replace the magenta with white or your torch will have a white box around it.What Group and Image numbers would you assign to the background sprite?
Let's walk through the most important sections of my-first-stage.def. Open the file in Notepad and follow along, each block does one specific job.
1. The name on the stage select screen.
[Info] name = "My First Stage" ; >>> EDIT ME <<< displayname = "My First Stage" author = "Your Name"
2. The camera bounds, how far it can scroll.
[Camera] boundleft = -250 ; how far the camera scrolls LEFT boundright = 250 ; ...and RIGHT boundhigh = -100 ; ...and UP
3. Where the fighters spawn.
[PlayerInfo] p1startx = -70 ; Player 1 starts 70px LEFT of centre p2startx = 70 ; Player 2 starts 70px RIGHT of centre
4. Where the floor is.
[StageInfo] zoffset = 200 ; FLOOR is 200 pixels down from the top localcoord = 320, 240 ; the "virtual" screen size
;) is a comment. MUGEN ignores it. Use comments to leave yourself notes, your future self will thank you.Fill in the camera boundary values from the .def file:
What does a semicolon (;) at the start of a line mean in a .DEF file?
Now the fun bit. Each [BG ...] block in your .def is one layer of artwork. The most important setting on every layer is delta, it controls how fast that layer scrolls when fighters walk.
Drag the slider above to "walk" the camera left and right. Notice how the sky barely budges and the foreground races past, that's parallax!
Here's the actual code for the background layer in your starter file:
[BG Background] type = normal spriteno = 0, 0 ; Group 0, Image 0 start = 0, 0 ; >>> EDIT ME <<< delta = 0.5, 0.5 ; >>> EDIT ME <<< mask = 0 tile = 0, 0
If you want a mountain layer to feel far away, what delta would you use?
Static backgrounds are fine, but a flickering torch makes a stage feel alive. To animate something, we use type = anim instead of type = normal, and point it at an action defined further down in the file.
The animated layer:
[BG AnimatedThing] type = anim ; ← the magic word actionno = 10 ; ← which animation to play start = -50, 80 delta = 0.8, 0.8 mask = 1 ; magenta = transparent
The animation itself, each line is one frame, with this format: group, image, x, y, ticks. 60 ticks = 1 second.
[Begin Action 10] 1, 0, 0, 0, 6 ; show sprite 1,0 for 6 ticks (bright) 1, 1, 0, 0, 4 ; then 1,1 for 4 ticks (dim) 1, 2, 0, 0, 6 ; then 1,2 for 6 ticks (bright) 1, 1, 0, 0, 4 ; then 1,1 for 4 ticks, and loop forever
That's it, when MUGEN reaches the end of the action, it automatically loops back to the top.
3, 2, 3, 2). Want slower? Raise them. The numbers are frames, not seconds.Fill in the blanks about the animation frame format:
What happens when MUGEN reaches the last frame of a [Begin Action]?
The moment of truth. Here's exactly where everything goes:
The four steps:
MUGEN/stages/, create a new folder called myfirststagemy-first-stage.def and my-first-stage.sff into that folderMUGEN/data/select.def in Notepad. Scroll down to [ExtraStages] and add a new line:
stages/myfirststage/my-first-stage.def
mugen.exe, pick VS mode, and your stage will appear in the stage select screen!If something's wrong, and it usually is the first time, here's the troubleshooting cheat sheet:
| Symptom | What to check |
|---|---|
| MUGEN crashes on launch | Typo in select.def. Make sure the path is exactly stages/myfirststage/my-first-stage.def |
| Black screen in the stage | Your .sff isn't in the same folder as the .def, or the spr = line at the top points to the wrong filename |
| Pink box around the torch | mask = 0 on the animated layer, change it to mask = 1 |
| Fighters floating in mid-air | Adjust zoffset in [StageInfo], try 200, 220, 240 until they touch the floor |
| Stage doesn't appear in select | Did you save select.def? It catches everyone the first time |
Click items in the correct order:
Your stage shows a black screen. What's the most likely cause?
Download the three starter files and follow along with the lesson. Replace the placeholders with your own art whenever you're ready.
>>> EDIT ME <<< markers show exactly where to play.🛠️ Free In-House Dev Tools
Use these free browser tools alongside this workshop to create custom sprites, sounds, levels and colour schemes for your game. No installs. Free forever.
