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.Click through each step at your own pace. Open the starter pack alongside this lesson so you can edit it as you go. Every step ends with a small "Try it" challenge to make sure you've understood.
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.
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.my-first-stage.def in Notepad. Find the [Info] section near the top and change author = "Your Name Here" to your actual name. Save the file. Congratulations you've just edited a MUGEN stage.
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.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.name = "My First Stage" to something fun like "Volcano of Doom". Save the file. (We'll see this name appear on the stage select screen at the end of the lesson.)
Now the fun bit. Each [BG ...] block in your .def is one layer of artwork. The most important setting on every layer is deltait 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
delta from 0.5, 0.5 to 0.2, 0.2. Save. (You'll see the change after we import the stage in Step 7 the background will scroll more slowly, making it feel further away.)
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.[BG AnimatedThing] block, paste it below, rename it to [BG AnimatedThing2], and change start = -50, 80 to start = 80, 80. Both torches will share the same animation that's fine.
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 |
[BG] layer with a different delta, (c) change the camera bounds so the camera scrolls further. Show me what you make!
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.
