|Posted on April 18, 2020 at 9:05 AM|
- Start by installing stage0 in your Mugen (full or clean version, as you wish. Note that I will quote only the clean version later on), if it has not been done already.
- 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" :
- Browse to the correct path, and load the SFF :
- You can 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.
1. The button defining which file you're working on. The sprites in our case. Other buttons concern AIR file, SND, DEF, CNS, etc. We won't take care of them.
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. We 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. 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. For example, mario006 to mario009 are sprites of Peach. We could place them at Group number 3, and number them from 0 to 3. During the tutorial, when I write "sprite 123,45", it means that it's the sprite which is placed in group 123, with the number 45.
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.
We will now start modifying the stage's SFF and DEF file to build our own stage.
3.1 - Setting the floor
- Go on the second sprite of the SFF (sprite 0,1), and press the "Change" button (button 4 on the screenshot).
- Browse to find sprite mario000.pcx, which is the floor of our stage, and click on "Open".
- 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 SFF rather than in the DEF 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 :
- Press the save button (button 6 on the screenshot) and launch Mugen to see how it looks like now :
- As you can see, there are several problems. There is magenta at the bottom of the screen (from DebugBG), so we will have to align the floor Y-wise. The characters are not standing perfectly on the ground either. We will have to change this value too, once the floor is aligned. Therefore, it's time to open the DEF file to start recoding some things.
For now, we will act on the floor's sprite. Search for this piece of code in the stage
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. We'll get back to this 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, second value (185 here) is the Y-axis.
- 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.
- 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 :
tile = 0, 0
- We 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 :
start = 0, 203
- However, even though the floor is well placed, the characters are now floating in the air :
- As said in chapter 2, the value relative to the position of the players on the ground is the zoffset parameter in the [StageInfo] part of the DEF file. Change the value until you find something that suits you. I personally set it to (open the spoiler if you want to see my value) ...
Spoiler, click to toggle visibilty
- I also set the shadow intensity to 0, as this stage won't have any shadows. We obtain something like this
3.2 - Setting the sky
We will now follow the same process to change the background of the training stage into the sky. I won't explain everything again, just refer to what you did on the floor sprite :
- In FF, go on sprite 0,0.
- Press the "Change" button.
- Browse to mario001.pcx (the sky sprite) 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 768 pixels once again, the center is 384. Just for convenience, I used 0 for the Y axis. If everything was done correctly, you should have something like this in FF :
- Save your SFF file and launch Mugen, and you'll see something like this :
While it looks okay and proves everything is correct for now, it's not quite what we want. You can see that the top of the screen corresponds to Y axis = 0. We are going to change the sky's Y axis in order to get a full portion of it.
Open the DEF file once again and search for the code relative to the sky, which means sprite 0,0 :
- Start by cleaning the code of the unnecessary stuff (I'll come back to it later) : remove trans, tile, tilespacing and window lines.
- We are now going to change the Y axis of the sky sprite. Try random values and look at what it does. Note that the Y axis is going from top to bottom, so if you want the sprite to go up, you have to input negative values. For example, if I set it to -220 like this : "start = 0, -220", it will result in something like this :
- As you can see, I put the sky too high, so there's a zone which doesn't contain any pixels, hence it appears in magenta due to debugbg. The value I set it too is -190. With this value, some portion of the sky is hidden by the floor, but I think it's high enough anyway.
IMPORTANT : As you may have noticed, the code relative to the sky is placed before the code relative to the floor. It was done on purpose. Mugen parses code from the top to the bottom of the file, so the first sprites to be displayed are those written at the beginning of the file, and the last ones to be displayed are those at the end of the code. To resume : arrange your code -> further elements are at the beginning of the file, close elements are at the end.
3.3 - Setting the bounds
Now you're 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 heigth 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 high values (but always keeping their absolute value the same). In this example, I set them to +/- 300.
- Then, after saving, launch Mugen and go to one corner (the one you want) of the stage. As you can see, the stage is much wider, or rather, too wide :
- That's why it's important to always check the corners, as it's easy to miss a one pixel wide vertical line, especially if you didn't set debugbg to 1. Of course, I overdid it in the example, but it was just to make a point. Set the boundleft and boundright values to a value you feel is okay for the width of the stage. I used +/- 220.
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 ingame. 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.
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. For example, setting the boundhigh to -220 will lead you to something like this :
- After some tests, I set the boundhigh value to -185. Finally, we have a [camera] section with these values :
boundleft = -220
boundright = 220
boundhigh = -185
With all the work accomplished till now, we have a very basic functionnal 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. I called it "Mario Tutorial - Basic Stage" and added my name as author. Of course, you call it as you wish.