Would you like to react to this message? Create an account in a few clicks or log in to continue.

Underground Mugen community specializing in advanced Mugen stages, screenpacks & Graphics

You are not connected. Please login or register

AZ's Stage concepts

Go down  Message [Page 1 of 1]

11.0/older Hi Res Stage AZ's Stage concepts Wed Oct 24, 2012 4:29 pm



AZ's Stage concepts 49283851498_0631820187_o
First of possibly many stages i'll be creating blah blah blah I need your help.

aight, what I wanna do with this stage.

1. Transitioning, like first rounds pretty normal, second round...idk maybe some light rain, third round an all out lightning storm

2. i wanna add some birds in the first round, crows in the second, and wind that pushes the chars left/right a la 1:54, in the last round.

AZ's Stage concepts Rememb10

Thats it, thanks in advance.

21.0/older Hi Res Stage Re: AZ's Stage concepts Wed Oct 24, 2012 4:53 pm



AZ's Stage concepts OjtZ7W5
The first step and always first is creating your sprites. Basically, how you want to go about this, is adding pink to the parts you want transparent in the stages (it doesn't HAVE to be pink. Just a color that stands out among all the colors in your image in this case it'd be something like bright pink. After you apply pink to all these areas (parts of the stage you want transperacy like the sky. Open any stage in Fighter Facotry to get an example with pink behind the bg).

The step after this is indexing your sprites (once they're finished.) You want transitioning, you'd have to create a darker/lighter/whatever versions of the stage by recoloring them in an image program.

After your colors are applied refer here for a tutorial on indexing and sprite creating.

To make your sprite finalized, you do those instructions in gimp and save your file as an indexed (256 color limit) pcx file.

A suggestion for rain creating, create a plain black background, the size of your background ( or 640 x 480 with a 0,0 delta, but more about that later) and use the program "Sqirlz Water Reflections" to create rain. That's what I use, at least. People do their own rain many different ways. And once you have this program, you can play around with it to get a basic idea. It's not a hard program to figure out at all. Once you've created your rain animation in Sqirlz, it'll give you options to save it on the top right corner of the program. You want to save them all as image files and convert those to pcx's a la gimp. (You don't have to apply pink to these, just save them on the black bg and i'll show you how to code them into mugen with no transperacy issue.) Make sure the image files you save are png's, and you convert them to pcx by indexing them (don't worry about the color map on these. Just index and save as pcx)

Birds aren't a hard find to find sprited already for you. Preferably HR styled, for this one. Teros has open source birds on his site in his stages, as well as the birds in MOTVN/GLB's crossing.

I hope this helped. If you have questions during all these let me know here, or in xat.

Good luck az!


AZ's Stage concepts XqZWtLC

31.0/older Hi Res Stage Re: AZ's Stage concepts Wed Oct 24, 2012 6:54 pm



AZ's Stage concepts 49283851498_0631820187_o

AZ's Stage concepts Mountains1

AZ's Stage concepts Mountains2
Dl-ing squirlz now..

41.0/older Hi Res Stage Re: AZ's Stage concepts Wed Oct 24, 2012 8:25 pm



AZ's Stage concepts OjtZ7W5
Nice start. (I threw those in a spoiler.) Obviously the sprites still need some basic cleaning applied to them. Also remember the pink is removed in mugen, so i don't quite understand the second part. But the first looks good, it'll be nice and have good deltas along with it.

The next step will be to create your rain, and transition edits.

After your sprites are completed, you're going to want a basic template. Considering almost NOBODY makes a stage completely from scratch. Here's a link to Elecbytes training room (from Cybaster's tutorial)

While your SFF file contains the graphics, your DEF file contains all the code for the stage. Your .def file is opened and edited in notepad. I'll be dissecting parts of Cybaster's tutorial and putting my twist into it as well to help you out. I'll be explaining the mugen .def file.


name = "Training Room"
author = "Elecbyte"

- Name and author are the two only Info parameters which should be included, both using quotation marks "" as displayed above.

- Adding other parameters such as palettes or VersionDate just proves that you copied a character's Def file and that you have no idea of what you're doing.

- If you want to include other infos such as credits, I'd advice you to write it just before the [Info] line, using ";" to make it as a comment." a ; makes something disappear (or not be visible at all in your stage) So if you code something in, put a ; in front of the code it'll go away temporarily. This is also used at the top of your .def file to give "special thanks and credits"

startx = 0
starty = 0
boundleft = -95
boundright = 95
boundhigh = -25
boundlow = 0
verticalfollow = .2
floortension = 0
tension = 50

Quite a lot of information here.

- startx and starty are the position of the camera at the beginning of the round. You should keep them to 0, it's easier to build symmetry like that, and they usually go unedited.

- boundleft and boundright are respectively the left and right bounds of the stage. You should always have their absolute value being the same value. In short, you should ALWAYS have boundright = -boundleft. If you don't, your stage will not be symmetric, which means that a player will have an advantage over the other at the beginning of the fight, since one of them can be cornered more easily. This effect is less important on very wide stages, but a stage should always be symmetric, for the sake of clean coding and showing you know what you're doing. Your bound left should always be the negative value while your bound left is positive. For instance:

boundleft = -64
boundright = 64

There's always trial and error with the bounds to make them perfect. I'll use my Necro remix as an example:

AZ's Stage concepts Mugen011_zps3085e80f

In here my boundleft is -64, my right is 64. Remember, this changes dependent on the size of your background. If I increase my bounds to -104, and 104. I get this:

AZ's Stage concepts Mugen012_zpsdcc99863

Again, keep in mind these are just examples it won't be the same for your stage. For instance, if all your sprites are a similar size (mine aren't in Necro, Necro's background with the mountain is larger than the foreground a la the floor.) rather than continuing a part of your sprite it'll show the cut off (like my floor did) or it will drag on with empty space, which i'm sure you've seen. Bounds objective are to cover these and make them look right.

- boundhigh is the top bound, it define up to which point the camera will go. This is a value you have to check by going to the top of the stage in Mugen. It's basically the same as above, just with the top of the stage. This is found by trial and error as well.

- boundlow should be left at 0. Always.

- verticalfollow is a parameter which goes from 0 to 1. It defines how much the camera will follow a player each time he jumps. Its value depends of the behavior you want to give to your stage. If you'd rather have an MVC styled stage with the camera following the characters very quickly, set the value to something like 0.8. If you don't want the camera to follow the characters a lot, set it to 0.3.

- floortension defines how high a character must jump in order for the camera to follow him. I personally hate it when the camera moves each time a character jumps a little, so I always set it to a high value, something around 90. If you like the camera to move though, set it to 20.

- tension should be left at 50. It's the horizontal distance a character must be from the edge before camera starts moving.

;--- Player 1 ---
p1startx = -70         
p1starty = 0           
p1startz = 0           
p1facing = 1           

;--- Player 2 ---
p2startx = 70
p2starty = 0
p2startz = 0
p2facing = -1

;--- Common ---
leftbound  = -1000
rightbound =  1000
topbound  =  0   
botbound  =  0

All these values are generally the same in all the stages. DO NOT CHANGE THEM.

- leftbound and rightbound should NOT be lowered. If you want to make a really long stage, you need to increase these values or you can run into character problems (fireballs getting stuck in the corner, cornerpushes getting fucked up and leading to infinites, etc.) So I usually just don't do it.

- Some authors modify p1startx and p2startx value, so that it looks better at the beginning of the fight. DO NOT DO THAT. Some characters rely on distances to trigger special intros between them. If you change these values, the intro will be fucked up big time.

topz    = 0     
botz    = 50     
topscale = 1     
botscale = 1.2

Again. DO NOT CHANGE THESE. THEY ALL STAY THE SAME IN STAGES AS WELL. Modifying them scales the characters from mugen in your stage. It may look cool and all, but it's the fact that it doesn't scale hitsparks from the characters and other effects so it looks all fucked up. Don't change them, please.

screenleft = 15   
screenright = 15

This is the distance from the left/right edge of the screen that characters can move to. The usual value is 15, but Capcom games usually have a value of 24 for example. You should use a higher value if you don't want the characters to go near the borders of the stage, because there are walls for example. You should never use the leftbound and rightbound values (in [PlayerInfo]) to achieve this kind of effect.

zoffset = 190
autoturn = 1
resetBG = 1
Hires = 0

- zoffset is the position where the players stand at, it defines the ground level. Its value is usually around 220. You have to play with this value to place your characters correctly on the ground. Avoid setting too low, or the characters will be hidden by powerbars at the bottom of the screen. If put too high, the characters will clutter the screen and you won't see them when they jump.

- Don't touch autoturn, it makes the characters face each other.

- resetBG should be set to 1 if you want the stage to reset all its anims at the beginning of each round. However, if you have a sort of "story" going on, with animations depending on time, you should set it to 0.

- Hires is a new optional line introduced in Winmugen Plus. It allows to differentiate low-res and high-res stages. Set it to 1 if your stage is high-res. You can omit this parameter if your stage is low-res. Obviously your work in progress is Hires, so yeah.

intensity = 96
color = 0,0,0
yscale = .3
fade.range = 0,0

- intensity is the shadow's darkening intensity. Its range goes from 0 for invisible shadow to 256 for dark shadow. Make sure the brightness of the shadow matches that of the other elements in the stage. This is important and very easy to figure out.

- color is the color given to the shadow for red, green and blue channels. Value goes from 0 to 256 each time. For example, if you want a sort of red shadow, you set the value to 256,0,0. I usually never use this.

- yscale defines the length of the shadow. The bigger the value, the longer the shadow. Alternatively, you can use negative values if you want the shadows to go "into" the screen. I usually never use this either.

- fade.range defines the range to make the shadow visible when a character is jumping. If a character jumps very high for a long time, and you can still see his shadow in the sky, it would just look silly, this parameters defines how to make the shadow fade out. Read the DEF file for more information.

AZ's Stage concepts Image1

- The 1st image shows you how the shadows look like with the initial values.

AZ's Stage concepts Image2

- The 2nd image has an intensity of 200 and longer shadows due to an yscale of 0.5.

AZ's Stage concepts Image3

- The 3rd image has a light intensity of 50, making the shadows bright. The yscale was set at -0.2, which results in short shadows going "into" the screen. Finally, I didn't set the fade.rage parameter, so if a character jumps very high, the shadow doesn't fade.

intensity = 0

- Leave this value to 0 if you don't want any reflection. If you do want a reflection, put your shadow intensity at 0 and work with this (since you don't want shadows and reflections.

- Reflection should be used only on stages where the floor can logically reflect the players : some clean marble, water, etc. Don't use it because it makes the stage flashier, it's ridiculous.

bgmusic =
bgvolume = 0

- bgmusic defines the path to the music. Don't put a simple "sound/" without adding any music in it, or Mugen will crash. Either put a music, or don't write anything at all.

- bgvolume is the volume of the music. Value goes up to 255, no need to use 45678, as I've seen sometimes.

spr = stage0.sff
debugbg = 0

- spr sets the path to find the sprites (the SFF file). Usually, the DEF and SFF file should be in the same place, so you can just use "stage0.sff". If they're not in the same path, you'll have to use something like "stages/lowres/stage0.def", depending on where you placed it. You would have both of these in your mugen folder both the .def and .sff should have the same file name. "Spr" should be the name of your sff.

- debugbg allows you to easily debug your stage and find graphical glitches, as magenta will appear at places where there are no sprites. When creating a stage, always set this value to 1. Set it back to 0 when you have finished creating/debugging the stage because if you don't it'll lag mugen. And make sure you turn it off appropriately when testing certain sprites.



- Open the DEF file with Notepad, and set debugbg to 1. Save the file.

- Launch Fighter Factory, and open the SFF file of the stage by clicking on "Sprites - Open"

Like so:

AZ's Stage concepts Image1

- Browse to the correct path, and load the SFF of your stage (or in this case the template stage you're editing) MAKE SURE IT'S THE SAME SFF AND DEF FILE YOU'RE EDITING THAT WILL BE IN YOUR MUGEN

- You should now see that the sprites are launched. I will now explain various buttons you can see in Fighter Factory, in order for you to add or remove sprites, align them, etc.

Here are the most important buttons we'll be using during the stage creation process. There are many other buttons, which you'll have to discover yourself, by playing with them.

AZ's Stage concepts Image3

Number definition:

1. The button defining which file you're working on. The sprites in your case. Other buttons concern AIR file, SND, DEF, CNS, etc. Don't bother with those. Those are for characters and characters only.

2. The zone in which you can see your sprites. The cross in the middle defines the 0,0 axis (the origin). You can move the cross in the zone for better visibility, and you can interactively move sprites around the cross to change the axes of a sprite.

3. This button allows you to add sprites to the SFF, it adds the sprite just after the sprite you are on.

4. This button allows you to change the sprite you're currently on by another sprite of your choice.

5. Press this button to save your progress in a new file. You can use it to make backups.

6. Press this button to save your progress.

7. This button allows you to duplicate sprites. You won't be using it here. It's mainly for characters.

8. and 9. These buttons allow you to delete a sprite or a group of sprites.

10. This bar allows you to browse through all the sprites, you can see under it your position and the number of sprites in the SFF.

11. These blocks define the Group and Image parameters of the current image. You can use whatever group and number you want, but be
careful to never have two (or more) sprites having the same group and same number or it'll fuck up in mugen. The convention is to put all sprites of the same type in a single group, and number them from 0 to the number of sprites. These group numbers are your spriteno's in the .def

12. These blocks define the X-axis and Y-axis of the current sprite. You can see their position in zone 2, compared to the central cross.

13. You can see the size of the image here. It comes handy when you have to do some calculations for alignment.

14. These magnifying glasses allow you to zoom in and out of zone 2, in order to get a better view of the sprites.


- Go on the second sprite of the SFF (sprite 0,1), and press the "Change" button (button 4 on the screenshot).

Like so:

AZ's Stage concepts Image4

Browse until you find your floor sprite which should be an indexed .pcx file we covered that.

- You now see that the sprite was exchanged, and that our floor is the sprite 0,1, with axis=0,0. I personally prefer aligning my sprites in the def rather than in the sff file, at least concerning the X axis. At the bottom left of FF, you can see the size of the sprite : 768x37 pixels. What I want to do is center the sprite on the cross X-wise, so that I will just have to use an axis of 0 in the DEF file later on. The calculation is very simple, we just have to divide the width of the sprite by 2 to get the center : 768/2 = 384. We just have to change the X-axis of the sprite to 384 and we will have centered it. You can either move it with the mouse in zone 2, or just write down the correct axis in the right box. By doing so, you won't see the sprite move in zone 2. Don't worry, it's just a little glitch. Go to sprite 0,0 with the bar, and go back to sprite 0,1. You can see your sprite is well placed now. You must always divide your sprite width by two and make the sum your x axis. Using start values in your .def you can place your sprite wherever in the stage.

- Press the save button (button 6 on the screenshot) and launch Mugen to see how it looks like now. Make sure you specify your sprite no's in the mugen .def (a la your floor sprite as whichever group number it is in FF)

When you load your floor into mugen you're bound to find problems. You want to play with the start values to fix your floor as it should be, and if your floor cuts off at the left and right your bounds come into play (Like i did with Necro's stage.)


[BG 1]
type  = normal
spriteno = 0, 1
start = 0, 185
delta = 1, 1
mask = 0
velocity = 0, 0
tile = 1, 0
tilespacing = 0, 0

Let's analyze the code a little bit.

- type = normal is the usual parameter for regular sprites, you may also see type = anim. This is for animation code which we'll go over later.

- spriteno is the sprite number : group and number. 0,1 corresponds to our floor.

- start defines the position of the sprite at the beginning of the fight. The first value (0 in our case) is the X-axis in FF, second value (185 here) is the Y-axis in FF you can play with these to find the correct placement of your sprites.

- delta allows you to create depth in the stage, by making the elements move one between the others, as some elements our closer to the fight while other are very far. For the floor, the delta should ALWAYS be 1,1 for low-res stages, and 2,2 for high-res stages. If you fail to comply with this, the characters will appear to slide on the floor, which is not suitable at all. The further the element is in the background, the lower its delta must be, in order for it to look natural and realistic. The deltas are very important and are different for all Mugen engines.

- Velocity is what allows you to make the element move, tile and tilespacing allow you to tile your sprite. I will come back on these parameters later. For now, just change the tile to 0,0 :

Like so:


tile = 0, 0

- You now have to align the floor Y-wise. To do this, just change the second value of the start parameter until you find something that suits you. After several tries, it turns out the best value is Y=203. If it's lower than 203, you will see pink, if it's higher than 203, part of the sprite will be lost out of the screen. Hence, I just changed the code to. Remember this always changes according to your sprite. Gotta play with it, trial and error.


start = 0, 203

- However, even though the floor is well placed, the characters may look as though they're floating in the air. Playing with your zoffset fixes it.

Setting the sky (or background object in front of the sky. In your case the trees you cut up, and the sky will be behind this in your .def. The .def goes from closest objects coded at the top of the stage code, floors at bottom. Check some of my .defs fore reference.

- In FF, go on sprite 0,0.

- Press the "Change" button.

- Browse to (the sky sprite or in your case the trees) and click on "Open".

- The sprite has its axis at 0,25. We will once again center it X-wise. The sprite's width being 1023 pixels, the center is 511.

Save your SFF file and launch Mugen. Use the above information in both to edit it to your liking.

You will use the same placement technique for your remaining sprites. (DO NOT ADD ANIMATION YET WE'LL COVER THIS LATER)

This time you will have to use sprites
- Start by cleaning the code of the unnecessary stuff (I'll come back to it later) : remove trans, tile, tilespacing and window lines if you see any. Example:


[BG 0]
type  = normal 
spriteno = 0, 0
layerno = 0               
start = 0, 0
delta = 1, 1
trans = none
mask  = 0
tile  = 1, 0
tilespacing = 0,0
window = 0,0, 319, 239

- As you may see, your sky is showing pink or pink may still be showing. If you left debug on, this is to help detect parts that should be covered in your stage (Pink.) with correct start values, deltas and bounds you should be good to go.

Now you may be asking: "Damn, I have a huge floor and very wide sky, but my stage is small, how's that ?!" This is what we are going to correct now, which means setting correctly the bounds : the left, the right and the height one. We will set the left/right bounds, before setting boundhigh.

In the DEF file, go in the [Camera] part of the code, and change the values of boundleft and boundright to higher values if your stage/floor can be extended. Continue playing with them as shown above.)

Then, after saving, launch Mugen and go to one corner to see how it worked. You're going to have to keep doing this until you find the right value. A trick that I use to keep my .def launced simultaneously with mugen is to edit your .def while mugen is open in another window and save your .def edits and press "SHIFT + F4" to reload mugen with your changes.

Now we are going to set the boundhigh parameter following a similar process. However, usual characters can't go very high in the sky to allow you to check boundhigh. There are two ways of testing it, use the one you prefer :

1) Activate Debug mode by pressing Ctrl+D in game. Jump with a character and quickly press Ctrl+I when the character is in the air. He will then stand in the air. Repeat the process as much as you need until the character reaches the top of the stage.

2) Choose one character of your choice which will always be your test character (it's better if you use this method only in a Test Mugen). Open the CNS file of the character, and look for the [Movement] section at the beginning of the file. Set the number of air jumps you can perform to a very high number, as such :


airjump.num = 999        ;Number of air jumps allowed (opt)

You character can now jump like crazy, allowing you to reach very high portions of stages. Make sure you change it back when you're done. If you use this method.

Once you have chosen the method you prefer, set the boundhigh to a high value, and repeat the same process as for boundleft and boundright. It's all trial and error as well.

With all the work accomplished now, you have a very basic functional stage. It has a floor and a background. All the bounds are set correctly, the camera doesn't move all over the place when characters jump, etc.

In fact, we've already gone further than most beginners. If you want, you can start creating basic one layer stages with this process, that's what many beginners do anyway.

To finish this part, let's just change the name of the stage and add an author name, because it's not a "Training Stage" anymore. Name your stage and put your name in the author section. (See above in .def understanding for reference.)

There ya go.


AZ's Stage concepts XqZWtLC

51.0/older Hi Res Stage Re: AZ's Stage concepts Wed Oct 24, 2012 8:58 pm



AZ's Stage concepts RjBqV68
GLB wrote:Also remember the pink is removed in mugen, so i don't quite understand the second part.

AZ's Stage concepts Isthereapoblemquestionmark
AZ's Stage concepts Isthereapoblemquestionmark1
Is there a problem?

61.0/older Hi Res Stage Re: AZ's Stage concepts Wed Oct 24, 2012 9:30 pm



AZ's Stage concepts OjtZ7W5
Nah, I didn't mean THAT, I mean what exactly his second sprite entailed and where he placed it in mugen. What his idea for it was.


AZ's Stage concepts XqZWtLC

71.0/older Hi Res Stage Re: AZ's Stage concepts Thu Oct 25, 2012 9:59 am



AZ's Stage concepts RjBqV68
Oh all he gotta do is cut off the text then cover it later with a bridge scratch

AZ's Stage concepts QnnT425

81.0/older Hi Res Stage Re: AZ's Stage concepts Fri Oct 26, 2012 3:10 pm



AZ's Stage concepts 49283851498_0631820187_o
Well shit, AZ finally creating stages. :cheers:
AZ wrote:First of possibly many stages i'll be creating blah blah blah I need your help.

aight, what I wanna do with this stage.

1. Transitioning, like first rounds pretty normal, second round...idk maybe some light rain, third round an all out lightning storm

2. i wanna add some birds in the first round, crows in the second, and wind that pushes the chars left/right a la 1:54, in the last round.

Thats it, thanks in advance.

Transitioning the rain isn't that difficult. There's some coding you can borrow from my "Midnight Church" stage for both the rain and puddles.

type  = anim
actionno = 5
start = 0, 0
delta = 2, 2
mask = 1
[Begin Action 5]
15,0, 0,0, 2275 <- The very last number is the number of ticks the ripple will begin. So in about 2275, that's when the ripple starts animating.

loopstart <- The loopstart is where it loops from this point on, starting from 6,0.


type  = anim
actionno = 11
start = -160,0
delta = 2,2
layerno =1
mask = 1
[Begin Action 11]
15,0, 0,0, 2275 <- same as I said above for the ripple.

loopstart  <- Same as I said above for the loopstart

Hope this helps.


91.0/older Hi Res Stage Re: AZ's Stage concepts Fri Feb 21, 2014 10:14 am



AZ's Stage concepts 49283851498_0631820187_o
so i found my boat, and my drive to re-cut all these fucking pieces again and i have one question...

AZ's Stage concepts Vivpre1_zps77baa76d

Too lossy?

101.0/older Hi Res Stage Re: AZ's Stage concepts Fri Feb 21, 2014 10:51 am



AZ's Stage concepts 49283851498_0631820187_o
Loss doesn't matter much if you use dithering.


111.0/older Hi Res Stage Re: AZ's Stage concepts Fri Feb 21, 2014 2:40 pm



AZ's Stage concepts 2D2jZmR
Dithering is godly. Also, please finish this stage. We need someone around here who can actually finish a well made stage (apart from Diss).

AZ's Stage concepts KcsHGvO

121.0/older Hi Res Stage Re: AZ's Stage concepts Fri Feb 21, 2014 10:42 pm



AZ's Stage concepts OjtZ7W5
Dithering when jigsawing is priority especially on blues, blues tend to be extremely lossy in mugen. This sort of thing is better done in Photoshop though honestly.


AZ's Stage concepts XqZWtLC

Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum