This is the next installment, of DV's M.U.G.E.N Based Tutorials. This one, is going to be for those who are trying to get a few things right, with Stage Alignment or Axis Correction, in the stage that they just made. Or, is trying to learn the values, and what happens, when you fix one problem, only to run into another potential problem.
To assist in the making of this tutorial. I will be using ItalianStallion's stage, entitled "Marvel Space Battle". Since I found a number of errors, that can be easily corrected, by someone, who has some stage making/editing knowledge.
For starters, you will need to know a few basics. They are listed as follows.
1. You need to already have a good idea, on creating a stage. Or, having enough attention, to use what is here, to make your own. (MANDATORY!)
2. You need to at least have all things prepared, so you can begin working, or fixing up on your stage.
3. You must have the following items in your possession.
*Fighter Factory
*Stage Viewer
4. Calculator (unless you're good with guessing the correct number)
With this now covered, we can get started.
Chapter 1: Finding the "Middle" of the stage floor.
This is a really easy process, as it will require a bit of math, to actually figure it out. For those who are pretty much new to this, the "floor" is what your characters will stand on. With that said, we continue.
As explained, I am going to use ItalianStallion's stage, as an example, and break it down, bit by bit. The floor, for his stage, is at 1536 pixels wide, 84 pixels high. or, 1536x84. The only thing we are going to focus on, is the width of the stage.
Again, we are only focusing on the floor width. What we need to do, is figure out where the middle of the stage is. To find this out, simply use math for this. Open Calculator, and divide the stage width number, by 2. You will then get your answer. In the example of this stage, it would be like this 1536 ÷ 2 = 768
Now that you have the middle of your stage, in a "physical" manner. It is time for you, to actually get M.U.G.E.N to know where the middle is. At this point, you're ready to put it in Fighter Factory. Once you are ready to put it in, use 0 for both the Start X & Y axis, of the image. It is up to you, as to what group number you use, for your image.
In the demonstration, I.S.'s stage floor, is at x0,y20. Though, in the said image (which can be clicked), at the left menu, it is showing the original width & height, of the image used. This is where your answer from Calculator comes in handy. On the left menu of the Sprites area of Fighter Factory, click where it says "X Axis". You will see the number 0. Immediately change that number, to whatever your answer was. In this tutorial, for his stage, the answer was 768. Once you input the number, click on the input box, for the Y axis, and the image will move, to the specified pixel area you set.
This tactic alone, will save you LOADS of time, in actually trying to figure out, where to align the middle of the stage floor. Because it is "auto aligning" the pixel width for you, to where you set it.
If you plan on doing this, for background elements, such as a wall, or city like image, you will have to do the above. But, you will have to include the number of the pixel height of your image. That can either be manually adjusted. Or, you can use the above. Minus dividing the pixel height. (At times, manual adjusting is required. So don't rule this out, as a plausible option).
Now, with this set, we save the SFF file (Once you do click save, select "Individual Palette" so it can save the different colors in your stage, to it's own block in the palette grid). And then close & reopen the SFF file. you will then see that the colors of the stage, is added into the palette grid, on the right of the Fighter Factory window. Continue to add in all images into your SFF file (making sure to separate the images, into their own groups. UNLESS the image you plan on using, is going to be an animation), and repeat the save method, mentioned above. until you have a fully built SFF file.
--------------------------------------------------------------------------------------------------------
Chapter 2: DEF File Values
With the above established in the first chapter, and all images in your SFF file, it is now time to actually get a few things straight. Starting with the most important of them all. The "Boundleft & Boundright" values, of the stage. Like before, you divided the total number of your pixel width for your stage floor, by 2, and got your answer. And applied that answer, to the position it's currently in. BUT. This does NOT actually let M.U.G.E.N know, that it is the middle "dimension" that it uses, from that part of the stage. Based on Delta values.
To find this number, you will have to take the answer that you got, from your division, and subtract 168 pixels from the answer you got (in some instances, you can use 178, as the subtraction number), and then you will come out, with the Boundleft & Boundright values M.U.G.E.N needs, to determine, where is the "wall" for both ends of the stage. In I.S.'s Stage floor, since the number was 768, Subtract 168, and you have a total of 600. Or, it will look like this. 768 - 168 = 600. So, with this said, you have found your "walls" for the left & right side of the stage. The boundleft & boundright, would look something like this, in the DEF for his stage.
boundleft = -600
boundright = 600
Now, with this out of the way, it's time to at least get the stage built. Based on the values you have set, for Boundleft & boundright. Once you have that established, you run into another obstacle. with a background in place, you need to figure out, how high you want your stage to be. Or, how high you want the camera to move up, and how high you want the characters to jump, before the camera starts to follow them. For this, this is what "Boundhigh & boundlow" is for. boundlow is almost always set at 0. So, this never really needs to be changed. However, you will need to adjust Boundhigh, to however high you want the stage to move. Based on the background layer, that will act as the background that follows the camera upwards.
In I.S.'s Stage, he is using an image, that is tall enough, to promote super jumping. So, the boundhigh, will have to be set, at boundhigh = -180
Reason for the - symbol on anything going up, is because it is like saying "going left". So, you already know that this value, will allow the camera to move upwards. But, once again, you run into another obstacle. The camera refusing to move, in that direction high enough. This is where "Verticalfollow" comes in handy.
As described for the verticalfollow option:
--------------
;This is how much the camera will move vertically towards the
;highest player. Valid values are from 0 to 1. A value of 0 will mean
;the camera does not move up at all. A value of 1 will makes the camera
;follow the highest player.
;Typically .2 for normal-sized backgrounds. You may need to pull this
;value up for taller backgrounds.
--------------
In his stage, it is set, to .65. to compensate for the boundhigh, set at -180. the higher your boundhigh is set, the more you will have to add on to the vertical follow. in order, for the stage, to get the feeling, of true Super Jump. Since characters cannot do a "True Super Jump" (unless you happen to code it, to come as close as possible), what is done here, is to show that, you "manipulated" the background image, into "thinking that, the said character is jumping high. When in reality, the character is jumping no higher, than with the use of delta = 1,1
Now, with this known, and you have that set. You try your stage out. Only to find it, extremely jumpy, when the character, only does a very light jump. The camera moves up, when you don't want it. Or, have never even did a super jump yet. This is what "Floortension" is for.
As explained on what it is:
----------------------
Minimum vertical distance the highest player has to be from the floor,
;before the camera starts to move up to follow him. For extremely
;tall stages, a floor tension of about 20-30 coupled with a
;vertical-follow of .8 allows the camera to follow the action.
----------------------
For his stage, the Floortension, was set to 32 (though this is not an absolute number, that number can change, depending on what he finds, as to be the proper number required). As for normal distance. You have normal tension. It is as stated.
--------------
;Horizontal distance player is from edge before camera starts to move
;left or right. Typically 50 or 60.
tension = 50
--------------
Should you remove any of the said values, you will throw your stage "out of focus". So, it is your job, to make sure, that all said values, are set to your specifications. Based on what you put in your stage's SFF file, to be built. Yes, you will have many points of Trial and Error, before you actually get these values, the way you want.
The next set of values, do not need to be tampered with. As all stages created for M.U.G.E.N, use the following values.
;--------------------------------------------------------
[PlayerInfo]
;--- Player 1 ---
;Player 1 starting coordinates.
;p1startx is typically -70 and p2startx is 70.
;p1starty and p1startz should be 0.
p1startx = -70 ;Starting x coordinates
p1starty = 0 ;Starting y coordinates
p1startz = 0 ;Starting z coordinates
p1facing = 1 ;Direction player faces: 1=right, -1=left
;--- Player 2 ---
p2startx = 70
p2starty = 0
p2startz = 0
p2facing = -1
;--- Common ---
;Don't change these values.
leftbound = -2000 ;Left bound (x-movement)
rightbound = 2000 ;Right bound
topbound = -700 ;Top bound (z-movement)
botbound = 0 ;Bottom bound
;--------------------------------------------------------
[Scaling]
;No need to change these values
topz = 0 ;Top z-coordinate for scaling
botz = 50 ;Bottom z-coordinate for scaling
topscale = 1 ;Scale to use at top
botscale = 1.2 ;Scale to use at bottom
;--------------------------------------------------------
[Bound]
;Distance from left/right edge of screen that player can move to
;Typically 15
screenleft = 15 ;Dist from left of screen that player can move to
screenright = 15 ;Right edge
--------------------------------
The last hurdle in your stage, is the "Zoffset" value. This value determines where your characters stand, on the stage. To even be considered as a floor. The values for a normal stage, are as follows. With said explanation.
;--------------------------------------------------------
[StageInfo]
;Z offset for drawing
;Adjust this value to move the ground level up/down in the screen.
;It's the position where the players stand at.
;Up - smaller, Down - larger
;***
zoffset = 220
;Leave this at 1. It makes the players face each other
autoturn = 1
;Set the following to 1 to have the background be reset between
;rounds.
resetBG = 0
--------------------------------
As for a Shadow value, they do exist. And you can use this to your advantage, in the event you want to give your stage, a "touch of authenticity". Or, in lamen's terms, "as accurate to the original, as possible". Shadow values, are as follows. (These are the values used in ItalianStallion's stage. So it is for example purposes)
[Shadow]
;This is the shadow darkening intensity. Valid values range from
;0 (lightest) to 256 (darkest). Defaults to 128 if omitted.
intensity = 96
;This is the shadow color given in r,g,b. Valid values for each
;range from 0 (lightest) to 255 (darkest).
;Defaults to 0,0,0 if omitted.
;intensity and color's effects add up to give the final shadow
;result.
color = 0,0,0
;This is the scale factor of the shadow. Use a big scale factor
;to make the shadow longer. You can use a NEGATIVE scale factor
;to make the shadow fall INTO the screen.
;Defaults to 0.4 if omitted.
yscale = .3
;This parameter lets you set the range over which the shadow is
;visible. The first value is the high level, and the second is
;the middle level. Both represent y-coordinates of the player.
;A shadow is invisible if the player is above the high level,
;and fully visible if below the middle level. The shadow is
;faded in between the two levels. This gives an effect of the
;shadow fading away as the player gets farther away from the
;ground. If omitted, defaults to no level effects (shadow is
;always fully visible).
fade.range = 0,0
[Reflection]
;Intensity of reflection (from 0 to 256). Set to 0 to have no
;reflection. Defaults to 0.
intensity = 0
Knowing the ways of this, you would pretty much get the idea of how to do the basics on this part. Now, it's time to move on to the next area of the tutorial.
Chapter 3: Animations in Stages
This is fairly simple, and very easy, if you're paying attention to what you're doing. Animating an image, is simply using a group number, and adding more images to that said group number, that the sprite set is going to be occupying. The process, will be nearly identical to making a character move. Except with less coding involved. And you will see why.
[attachment=17]
In the picture above, from ItalianStallion's stage, you see the Sun (or star, or whatever you want to call it). This animation, is a looping animation. The animation itself, has about 16 images, to make it go, in the said loop. This will be required of you, to do a few things.
NOTE! (Skip this part, if you already did this. If you are new to animation adding, in a stage, then continue reading.)
Adding the starting image, that will be the start of the loop, in Fighter Factory. In I.S.'s stage, this group number 2. Since it is arranged for him, as he wanted (you can use whatever group number you want. It is not really mattering, in what order you set it for. As long as you know what you are doing). All numbers, start with 0 as the first number. 0 is 1, 1 is 2, and so on, and so on. As long as you know this, then you can apply the images, in the order you specify. In Fighter Factory, you will see two boxes for this, in the Sprites area of the program. The left is the "Group" (which is going to be what group order, the said images will use). And, you have the "Image" area, on the right (Which is defining how many images, will be attached to that said group order number). If you are only looking to use a single image, as a still image, then the only number that is needed for the Image area, is simply 0. and the type would be set in the DEF to "spriteno".
Adding the animation, is a piece of cake, once you know what number you want to use, as the group number. However, the tough part, is making it "animate" in M.U.G.E.N, and for me, I found out, that it's much easier than you think. Moving to the DEF file, you get all of your background controllers together (or [BG "insert object name here"] as it is listed). You already have the parts for the still images set. but now, it's time to make it move.
Once you know your group number for your animation, you need to tell M.U.G.E.N what it is, and what it is using, so it can animate, the way you want in the stage. This part, is also an easy one. As stated from the Animated Background Elements tutorial, created by elecbyte.
--------------
Animated elements
Animated background elements have a syntax similar to normal ones. The "type" parameter is "anim" instead of "normal", and you use the "actionno" parameter instead of the "spriteno" parameter. Animated BGs are always masked (meaning that color 0 of the sprites is the transparent color), and must have the animation action in the same file.
---------------
To break this down, whatever number the actionno is set to, you must have the "Begin Action" number, in the same suit. Otherwise, the stage will not play. Below, is an example of what is from ItalianStallion's DEF file, for the "nova" animation.
-----------------
[BG star]
type = anim
actionno = 2
start = 50, 0
delta = 0.3, 1
velocity = 0,0
tilespacing = 0,0
mask = 1
trans = none
[Begin action 1]
loopstart
2,0, 0,0, 3
2,1, 0,0, 3
2,2, 0,0, 3
2,3, 0,0, 3
2,4, 0,0, 3
2,5, 0,0, 3
2,6, 0,0, 3
2,7, 0,0, 3
2,8, 0,0, 3
2,9, 0,0, 3
2,10, 0,0, 3
2,11, 0,0, 3
2,12, 0,0, 3
2,13, 0,0, 3
2,14, 0,0, 3
----------
Notice the row of 5 numbers. Each one, represents an order. The first number, is the group order that you used for the image. The second number, is the images, associated with that group. The 3rd number, is the width placement, the 4th is the height placement, and the 5th is the speed of the animation. 1 will always be your fastest speed (sometimes it is omitted, if 0 is used. But, that is remaining to be seen). The higher the number, the longer the animation will "delay in time". meaning you will slow it down. It is separated by way of game ticks. 30 ticks = 1 second. By knowing this, you will get the desired effect that you seek, for the image you are animating.
The same applies for walking. But you will need to use "Velocity". And this is important, for characters, that have a walking, or running animation. Or, if you plan on using clouds, birds, planes, trains & cars in a stage. Or, practically anything that you want to be moving, left or right. Take important note however, that what I just said, only applies for a stage. For a character, the coding is different.
Setting the velocity with a number on speed, and a number of delay, is always a tricky thing. Based on the object you want moving left or right. A further example, can once again, be taken from elecbyte's tutorial on this subject. In the area of people walking in the backgound.
------------------------
-- Simple Example -
Suppose we want to make a person walk back and forth from (-300,0) to (300,0), right behind the main characters. We'll use background controllers to accomplish this task. First, define the walking animations. Say that the character's walking sprites are 10,0 through 10,3 and that they face to the right.
; Walk right
[Begin Action 10]
10,0,0,0,6
10,1,0,0,6
10,2,0,0,6
10,3,0,0,6
; Walk left
[Begin Action 11]
10,0,0,0,6,H
10,1,0,0,6,H
10,2,0,0,6,H
10,3,0,0,6,H
Now start the character off at the far left edge of his range.
[BGDef]
(.)
[BG Peregrinator]
type = anim
actionno = 10
id = 10
start = -300, 0
delta = 1,1
Let's give Peregrinator a comfortable ambling speed of 2 pixels per tick. The one-way distance for his walk is 600 pixels, which will take 300 ticks. In total, it'll take him 600 ticks to make the round trip. Using this knowledge, set up the background controllers appropriately: since the entire situation repeats every 600 ticks, we can set the global looptime to 600.
[BGCtrlDef Peregrinator]
; reset the whole deal every 600 ticks.
looptime = 600
ctrlID = 10
; Set velocity of 2 pixels/sec rightward at time 0.
[BGCtrl Walk Right]
type = VelSet
time = 0
x = 2
; Set velocity of 2 pixels/sec leftward at time 300.
[BGCtrl Walk Left]
type = VelSet
time = 300
x = -2
And that's it! You can make the walk look better by having Peregrinator slow down and display a turning animation at each end of his walk. This would entail use of the VelAdd and Anim controllers. If you want Peregrinator to stop and start at regular intervals as he goes from one end to the other, you could create more VelSet and Anim controllers with their own individual looptimes (to get the behavior to repeat at regular intervals).
--------------------------
With this basic knowledge, you now can make characters walk. If that is what you desire in your said stage.
Chapter 4: Preventing the "Hall of Mirrors" effect
By now, you're ready to go ahead, and start to piece this baby in the DEF file, so you can get started on your very first creation. You got everything there, and you fire it up in either M.U.G.E.N, or Stage Viewer as a test, only to find out, when you move left or right, you see multiple images, of other objects you put in your stage. This is what we call, a "Hall of Mirrors" effect.
This can get pretty annoying at times, and it makes you want to sometimes chuck your keyboard across the room, when you see it in places it should not be. There is a very simple solution to preventing this. You only need to select a solid color (preferably solid black. Or, with an RGB value of 0,4,0 or 0,8,0), and input it, into your SFF file, in it's own group order.
And by inserting it into the SFF, I mean you have to make a picture, that is just one simple, solid color. Preferably at 400x300 resolution. And, turn it into a .PCX file. Once you do this, THEN you can insert it into your SFF file. As an early warning.Do Not attempt to use this for a masking color (transparency). You are trying to keep other parts of the stage, to have this problem, from showing in the first place. Once you do have it in, make sure it is level with the middle of your stage. For that, you will have to manually adjust it. But, there is an alternative to this. That will be explained, in a bit.
As for placement in the stage, that will be explained, with the following below, taken from one of my stages, that has the said "solid black color", and it will explain what is "front to back" in regards to layers in M.U.G.E.N.
Quote:[BG black]
type = normal
spriteno = 2, 0
layerno = 0
start = -160, 0
delta = 0, 0
tile = 5, 5
mask = 0
[BG City]
type = normal
spriteno = 3, 0
layerno = 0
start = 0, 0
delta = .24, .24
tile = 2, 0
mask = 0
[BG station]
type = normal
spriteno = 1, 0
layerno = 0
start = 0, 0
delta = .54, .54
mask = 0
[BG slums]
type = normal
spriteno = 0, 0
layerno = 0
start = 0, 0
delta = 1, 1
mask = 1
Notice in the above, "[BG Black]" is the first one you see, in the Background controllers listing. This is because M.U.G.E.N views everything, from a "top to bottom" perspective. Anything at the top of the Background Controllers area, will be at the far back. anything that is under the BG controller you just put up, will be in front of it.
This is Extremely crucial, for knowing how to make a stage with layers. Example. I have 5 items. A wall, a sidewalk, a trashcan, a street, a car. they would go in this order.
Wall
Trashcan
Sidewalk
Car
Street
The Wall, is my last layer, while my Street, is my first layer. The street is the layer the characters will stand on. Any layers between the Wall and the Street, will appear behind the characters, unless you use "layerno= 1". Using this, will allow whatever layer that you have, to stand out either in front of the character. Or, in front of the next item, that you may have animated, to cross the one using the said extra controller.
As for solid color placement in the stage. That would immediately be set at the top of the BG Controllers area. Since you want your stages to be in front the solid color, as a safety measure on your part. To ensure that all you see, is the stage, and no "Hall of Mirrors" effect.
To coexist with this added factor. You want your solid black image, to be able to cover, all parts that might let the "Hall of Mirrors" effect slip through. For this, you would set the following.
Quote:[BG black]
type = normal
spriteno = 2, 0 (Spriteno does not have to be 2. It can be whatever you want it to be).
layerno = 0
start = -160, 0
delta = 0, 0
tile = 5, 5
mask = 0
As quoted above, spriteno can be whatever you set your solid color to be. What you also see, is the "tile" syntax. This will make a duplicate copy of the image. where you see "tile = 5,5" is where it has been tiled by 5 spots in width, and 5 in height. This is pretty much, an important syntax. Because you can specify how much of the back part of the stage, you want to cover. If you just so happen, to not align it right. This also means, that if you have a rather large image for the solid color, then you don't need to tile it. But it's still good to use this said syntax. It does not have to be set at what you see. Only set the number of tiles, depending on what you need.
Another important factor, to the solid color BG controller, is the way the Delta is set. As you can see above, it is set for "delta = 0,0". setting it for 0,0 will prevent it from moving at all, when you move in the stage. Simply put it, it will be stationary. This not only applies for just this, but this applies, that is occupying a group order spot. So, only use delta = 0,0 on an image, if you want it to just not move at all.
This works well, in conjunction with the "tile" syntax. Because if this is set to Delta = 0,0, and the controller for the color layer has a tile setting of.say for instance, 3,3. Then, you would have covered all of the stage's very back controller. Without further instructions.
