The Mugen Fighters Guild - Update to the stage tutorial

Cybaster

Update to the stage tutorial - What do you want to see ?

#1 September 14, 2012, 05:35:13 pm

Limited time to use Infinite power !

So, I'm in the process, during my free time, of updating my stage tutorial : http://mugenguild.com/forum/topics/complete-stage-creation-tutorial-104470.0.html
Instead of writing it in a forum style, I have decided to write it in Latex language and compile everything in a big PDF file, so you can have it on you offline in a convenient format.

Here's the current summary :

Spoiler, click to toggle visibilty

Quote

Part 1 - The Basics 1
1 Introduction 3
1.1 Why this tutorial ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2 The tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3 Let’s get started ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2 Applying a palette to a sprite 7
2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2 Applying the palette with Photoshop . . . . . . . . . . . . . . . . . . . . . . 8
2.3 Applying the palette with The Gimp . . . . . . . . . . . . . . . . . . . . . . 13
2.4 Applying the palette with Fighter Factory . . . . . . . . . . . . . . . . . . . 13
2.5 Congratulations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3 Template Analysis 15
3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.2 Basic Info and Camera definition . . . . . . . . . . . . . . . . . . . . . . . . 15
3.3 Bounds and Scaling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.4 Shadow and Reflection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.5 Music and SFF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4 Let’s create a basic stage 21
4.1 Fighter Factory Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.2 Setting up the floor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.3 Setting up the sky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.4 Setting up the bounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Part 2 - Intermediate coding 35
5 Adding depth - Deltas 37
5.1 Fancy Mario games background . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37
5.2 Mountains . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
6 Animating the stage 43
6.1 Adding a moving mushroom - Velocity . . . . . . . . . . . . . . . . . . . . . 43
6.2 Adding clouds - Transparency . . . . . . . . . . . . . . . . . . . . . . . . . . 45
6.3 Adding Princess Peach - Creating Animations . . . . . . . . . . . . . . . . . 49
6.4 Adding Sinusoidal Motion - The Grand Finale . . . . . . . . . . . . . . . . . 52
7 Common Mistakes to avoid 55

Part 3 - Miscelaneous and Advanced coding 57
8 Additional Stuff 59
8.1 Avoiding colorloss . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
8.2 Other Animation Codes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
8.3 Foreground Images - The BlackJack Method . . . . . . . . . . . . . . . . . . 63
8.4 Hiding parts of an element . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
8.5 Moving the ground or the camera . . . . . . . . . . . . . . . . . . . . . . . . 65
8.6 Stage Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
9 Background Controllers 67
10 Parallax 71
10.1 VIB’s Tutorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
10.2 Winane’s Tutorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
10.3 Miscelaneous Stuff . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Part 4 - Mugen 1.0 and Mugen 1.1 coding 77
11 Mugen 1.0 Coding 79
11.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
11.2 New [Info] parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
11.3 New [Camera] parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
11.4 New [PlayerInfo] parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
11.5 New [StageInfo] parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
11.6 New [Music] parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
12 Mugen 1.1 Coding

I tried to make things clearer, corrected a lot of typos, etc.

- I still have to write the part about applying a palette with The Gimp or Fighter Factory. I've never done any of those, so this will be something new to me.
- I have to write the part about Stage Interaction. Just thought about it a few minutes ago.
- I'm in the process of writing the Mugen 1.0 stuff and explaining the new code in it.
- I haven't started writing anything about Mugen 1.1 yet.

That being said, do you have any ideas or suggestions about things that can be added to the tutorial ?
Did you follow it and see a few things that weren't clear at all ?

Basically, tell me what you want to make it even better.

JeanBureau

Re: Update to the stage tutorial - What do you want to see ?

#2 September 14, 2012, 06:35:25 pm

1) happy to see you finally got back with an avatar and banner that suits you.

2) VERY happy that you bring that up since a few month ago I contacted GOH about eventually make a list of advanced graphic tips to help people creating better looking stuff (i was supposed to do this with EXshadow)

3) I'll think about it right now

------------------------------------------
suggestions (not assuming you're gonna do it by yourself, different people can fill the whole thing, i'm just giving the headings)

- explain or talk about 3D coding ?
- how to have smooth edges sprites using multiple layers (be able to use anti-aliasing when cutting a sprite)
- how to use a "tint" sprite to create ambiance or harmonize the overall look of the stage
- explaining the usefulness of "window" code
- Comprehensive explanation of BG controllers (pretty sure there are a lot of shit to say)
- give at the end, a list of "Model stage" as in "stereotypical" or classic because recurring (for example, fighting on a train rooftop, an elevator going up or down, a 3D stage, a stage using multiple well coded bgctrls, a stage with excellent management of many depth layers, a stage using multiple changing lights and trans/sub effects, etc etc)

- loading new suggestions...

My stages exhibition
https://www.youtube.com/watch?v=FO2YZO7ut5I

Find them at: http://www.trinitymugen.net/forum/index.php?action=tpmod;dl=cat294

You are free to use the materials in the stages I released before 2014. Credits are always appreciated.

Last Edit: September 14, 2012, 06:53:22 pm by JeanBureau †

Cybaster

Re: Update to the stage tutorial - What do you want to see ?

#3 September 14, 2012, 06:44:39 pm

Limited time to use Infinite power !

That's indeed a very nice idea.

A short tutorial about particleFX and the video softwares you use to loop the effects, how you create some types of FX and the code you use to get some effects would be a very nice addition as a new chapter on making stages look nice.

Until now, the tutorial only focused on coding, not so much on external editing, but that could be handy.

MellyInChains

Re: Update to the stage tutorial - What do you want to see ?

#4 September 14, 2012, 06:48:38 pm

i'm a gay trans lady
to hell with this site, find me at mffa or w/e

welp i think later on today i'll give stage making a shot, so i'll let ya know how much this helped i s'pose. seems straightforward enough

Cybaster

Re: Update to the stage tutorial - What do you want to see ?

#5 September 14, 2012, 07:20:41 pm

Limited time to use Infinite power !

@MelvanaInChains: thanks.

@JeanBureau: nice suggestions.
- The window parameter has been explained.
- I have a short chapter on BGCtrls, but I'm linking to Tamez' video tutorials, which are much more complete than anything I could write IMO.
- I'll do the 3D coding one, good idea.
- Others seem easy enough to do too. Good ideas here.

JeanBureau

Re: Update to the stage tutorial - What do you want to see ?

#6 September 14, 2012, 07:25:25 pm

(det∇ϕ(x))²-µ(λ+µ/θ)/∂Ω said, September 14, 2012, 06:44:39 pm

That's indeed a very nice idea.

A short tutorial about particleFX and the video softwares you use to loop the effects, how you create some types of FX and the code you use to get some effects would be a very nice addition as a new chapter on making stages look nice.

I actually posted awhile ago, 2 or 3 tutorials to explain what I use and how I do it.

how to loop PI3 effects (i think xX-Nero-Xx has a method as well, maybe even shorter than mine but I have Vegas Pro so I might as well use it lol)
http://mugenguild.com/forum/topics/tutorial-how-loop-particle-illusion-animations-5-mins-138006.0.html

Usage of tints
http://newagemugen.pro-forums.ca/t1398-stage-trick-enhance-the-ambiance-with-the-right-tint

Short list of my personal Tools
http://newagemugen.pro-forums.ca/t1382-list-of-tools-to-make-good-stages

---------------------------

Quote

Until now, the tutorial only focused on coding, not so much on external editing, but that could be handy

I believe Having a decent documentation about graphic design without being too technical neither could bring a big difference (hey I'm not a Photoshop geek you know, i just fuck around... like everybody)

If people are unable to use any image editor at least a little bit, they automatically find themselves stuck because:
---> They HAVE TO recycle = use sprites existing in other stages and have been used over and over and over....
---> Even if they fortunately obtain new original sprites, they are unable to harmonize the whole thing (bad color + brightness/contrast clash)
it can be avoided just by knowing basic things such as creating a glow, changing colors and contrast, cutting smoothly (just looking at Margatroid's OMK stages: The guy abuses the technique (which is good) to make his stages elements looks great. There is not a single sharp edge in his stages).

----
I'm thinking MAVERIK, Margatroid, EX, and Tamez have their stuff to add.
Pretty sure Maverik uses an automatic tool to code 3D stages
Marga has proven he uses mothafuckin powerful tools lately
EXshadow.... do I need to comment about this guy ? lol. Vietnam veteran of stages.
Tamez ---> BgCtrls

MellyInChains

Re: Update to the stage tutorial - What do you want to see ?

#7 September 17, 2012, 04:05:18 am

i'm a gay trans lady
to hell with this site, find me at mffa or w/e

well so far it seems easy enough to follow, using your tutorial method, even if i made it look terrible and weird on purpose, but i was able to get a feel of the commands and such pretty easily by tweaking stuff around

now my main question is, is there anything there defining how to make a background image such as a general sky backdrop not move at all when the rest of the stage does, or is that all concerning delta and i just didn't see it? i guess a better example would be if a character was launched way up into the air and, say, a building or something drops way down in the camera view but the sky stays static, if that made any sense at all

Cybaster

Re: Update to the stage tutorial - What do you want to see ?

#8 September 17, 2012, 08:02:39 am

Limited time to use Infinite power !

MelvanaInChains said, September 17, 2012, 04:05:18 am

even if i made it look terrible and weird on purpose,

As for your question, you probably just want to use delta=0,0 (or something like 0.2,0.2, depending on the size of your sprite and how much you want it to move).
This way, you can place an effect/sprite that takes exactly the size of the screen, place it perfectly, and make it static even if the camera moves (useful for a sky, as you want, but also snow or rain effects).

Do not even ask

Re: Update to the stage tutorial - What do you want to see ?

#9 September 17, 2012, 09:36:45 am

The Absolute Worst

Make sure to note to never ever use x/yscale under [StageInfo] for 1.0 stages if you're jigsawing your stage together. Having to readjust all of the pos for all of the elems when I discovered that is hella time consuming.

XGargoyle

Re: Update to the stage tutorial - What do you want to see ?

#10 September 22, 2012, 07:16:18 pm

Hedgehog Whisperer
Red Bull addict

Your entire tutorial is focused using Fighter Factory, and despite being the most popular tool to create sff files, there's the possibility of corrupting the sff file. I would suggest covering the creation of the sff using sprmaker. It's not as difficult as people think, and it has lots of advantages such as no sff manipulation and faster creation of stages/characters.

For example, the workflow I do when creating stages is the following one:
1. Rip the sprites
2. Recreate the stage completely in photoshop

One sprite per layer. Animated sprites are grouped for easier management. Sprites are placed on their respective places.

By recreating the layout in photoshop, it gives me important data as full stage width/height (in this case 640x320) and most important, I could keep the same axis position for all the sprites (which will save me a lot of time and headaches during the creation process)

The "finished" stage will look as this:

Once I have this file, I extract each layer to a separate file and then apply the background color into the palette, resulting in sprites as this one:

This method is similar to the jigsaw one, the idea is to set the same axis for every sprite, no matter if the sprite covers the whole screen or it's a part of it to avoid color limitation.

With this, I already have the required material to generate the SFF.

3. Create the text file to feed into Sprmaker
Use a previous file as a base, and replace the old data by the new one. The sprites in my stage were 640x320, so the axis to use in all the sprites will be 320, 320 (no need to recalculate the axis for each element as in your tutorial or manually guessing their place in FF)

On 1.0 standards, the sff will look like this:

Spoiler, click to toggle visibilty

Code:

[Output]
 ;Filename of the SFF file to create (required).
filename = testament.sff
[Option]
;input.dir =
sprite.compress.5 = lz5
sprite.compress.8 = rle8
sprite.compress.24 = none
sprite.decompressonload = 1
sprite.detectduplicates = 0
sprite.autocrop = 1
pal.detectduplicates = 1
pal.discardduplicates = 1
[Pal]
;No manual palettes for this stage
[Option] ;You can set option states at any time
sprite.usepal = -1   ;Use -1 to add and use self's pal (autopal)
;Sprites
;Accepts 8-bit .pcx files
;group,itemno, fname, axisx, axisy
[Sprite]
;SKY
   0, 0, sky_bg.pcx,   320, 320
;CLOUD M
   1, 0, cloud_middle.pcx,   320, 320
;CLOUD L
   2, 0, cloud_left.pcx,   320, 320
;MOON
   3, 0, moon.pcx,   320, 320
;CLOUD R
   4, 0, cloud_right.pcx,   320, 320
;MOUNTAIN
   5, 0, mountain.pcx,   320, 320
;CASTLE
   6, 0, castle.pcx,   320, 320
;FLOOR
   7, 0, floor.pcx,   320, 320
;STAIRS
   8, 0, stairs.pcx,   320, 320
;LAMP
   9, 0, lamp_00.pcx,   320, 320
   9, 1, lamp_01.pcx,   320, 320
;SOLDIER S
   10, 0, soldier_s_00.pcx,   320, 320
   10, 1, soldier_s_01.pcx,   320, 320
   10, 2, soldier_s_02.pcx,   320, 320
;SOLDIER M
   11, 0, soldier_m_00.pcx,   320, 320
   11, 1, soldier_m_01.pcx,   320, 320
   11, 2, soldier_m_02.pcx,   320, 320
;SOLDIER L
   12, 0, soldier_l_00.pcx,   320, 320
   12, 1, soldier_l_01.pcx,   320, 320
   12, 2, soldier_l_02.pcx,   320, 320

As you can see, axis is the same one per every sprite. By using this format, sprmaker will automatically crop the sprites (saving me time in doing them on Photoshop)

Using a text file is faster than creating the stage on Fighter Factory.

4. Create the SFF

I create a .bat file with the required code to execute sprmaker, allowing me to just double click on the batch file everytime I want to generate the sff. Just open notepad and save the file with the ."bat" extension, and you're ready.
The code I use is sprmake2 -c -f -V sff2testament.txt > output2.txt
sff2testament.txt is the file that contains the sff information, output2.txt is just a text file that displays the output. It serves me to check if there's an error during the generation and if there were duplicate files/palettes.

With these 4 steps, I have created a sff file, and now it's just a matter of creating the DEF file.

Bounds for the screen will be half the stage's original resolution. In the original game 320x224, so boundleft/right will be 160, unless there are weird delta values for the floor base sprite.

All the sprites are already placed in their right spot, so in most cases, the "start = " will be the same for all the bg elements. In my case, the resolution on the original game was 320x224, and the floorlevel was 20 pixels height, this will result in all the sprites in the DEF using the same "start = 0, 244", which at the end is a big time saver, as I only need to calculate the deltas and the animation timing, but the rest is already made through a wise SFF construction (instead of trial and error if following your tutorial

)

Also, with this method, it's faster to create different stages from the same game, as usually they keep the same basic parameters for screen sizes, and deltas for every background. By having the original text file to generate the SFF I can use it as a template for the remaining stages, as I only need to replace the sprites, instead of creating a new SFF in FF and requiring the manual placing of every new sprite.

I hope that message was useful. Feel free to add it on your tutorial.

XGargoyle: Battle posing since 1979
http://xgargoyle.mgbr.net
http://www.pandorabots.com/pandora/talk?botid=e71c0d43fe35093a <-- Please click that link
http://paypal.me/XGargoyle <-- Donations welcome!

JeanBureau

Re: Update to the stage tutorial - What do you want to see ?

#11 September 22, 2012, 11:30:22 pm

Quote

(no need to recalculate the axis for each element as in your tutorial or manually guessing their place in FF)

---> onion skin feature in FF.

Cybaster

Re: Update to the stage tutorial - What do you want to see ?

#12 September 22, 2012, 11:32:40 pm

Limited time to use Infinite power !

I'll add this Koakuma.

Thanks XGargoyle for the very insightful post.

This will be a sure addition to the tutorial, for people who want to test some new things and speed up their creation process.

Beware most people are still graphical people. Having to deal with large text of files that you then have to compile to finally "hope" you'll get a correct SFF is not what people are used to, since the new generation is more about WYSIWYG.
But yeah, I bash crop and redo a lot of stuff in command line in Linux, so I know this can be much faster than doing everything by hand in Photoshop.

However, latest versions of Fighter Factory don't corrupt SFFs anymore, contrary to before. It's a much more reliable software now.

this is still very tedious, especially when you have a lot of non aligned sprites.

Do not even ask

Re: Update to the stage tutorial - What do you want to see ?

#13 September 22, 2012, 11:38:19 pm

The Absolute Worst

If you need an image as an example of why it's generally not a good idea, I think I can dig around to find one.

XamΣeta

Re: Update to the stage tutorial - What do you want to see ?

#14 September 22, 2012, 11:50:52 pm

IG @tanooki_ninja

I have an inquiry that recently came to my attention.

With SFF2, can stages now benefit from palette swapping like characters do through remappal or something similar?

If the case is yes, then I would like it to be discussed in the new updated tuto.

"We need other people in order to create the circumstances for the learning that we are here to generate" RIP Adam Yauch aka MCA
www.instagram.com/tanooki_ninja

Do not even ask

Re: Update to the stage tutorial - What do you want to see ?

#15 September 23, 2012, 12:08:10 am

The Absolute Worst

Yeah, it can. You set up the pals in the sff txt file and then have the same sprite loaded into sff in different groups as many times as the pal changes.

For example you have a lake that "animates" by changing its own palette

Code:

[Pal]
1,1, bonkbg.png
1,2, bonklake1.png
1,3, bonklake2.png

[Option]
sprite.usepal = 1,1
[Sprite]
3,0, bonklake0.png, 192,24

[Option]
sprite.usepal = 1,2
[Sprite]
3,1, bonklake0.png, 192,24

[Option]
sprite.usepal = 1,3
[Sprite]
3,2, bonklake0.png, 192,24

sprmake2 will automatically remove the duplicates, but have the same one sprite under those groups with it's pal changing in each different one.

XamΣeta

Re: Update to the stage tutorial - What do you want to see ?

#16 September 23, 2012, 12:33:13 am

IG @tanooki_ninja

Now that's what I call feedback right there.

Mother Fucking Lovely. Thanks a bunch Koakuma.

"We need other people in order to create the circumstances for the learning that we are here to generate" RIP Adam Yauch aka MCA
www.instagram.com/tanooki_ninja

Cybaster

Re: Update to the stage tutorial - What do you want to see ?

#17 September 23, 2012, 01:09:04 am

Limited time to use Infinite power !

Fuck, it looks like I'm a dinosaur here. I should really start digging and playing more with SFFv2. I know the theory for chars (but never used it) and didn't even know you could do this for stages. This will be added to the stage tutorial for sure.

XamΣeta

Re: Update to the stage tutorial - What do you want to see ?

#18 September 23, 2012, 02:50:36 am

IG @tanooki_ninja

Yes, this sorta thing should allow for silky smooth transitioning from day to night or vise versa...and may even help out contain BOTH day and night stages in one single SFF.

Think Darkstalker stages and others from the CPS2 and CPS3 era of games as an example.

"We need other people in order to create the circumstances for the learning that we are here to generate" RIP Adam Yauch aka MCA
www.instagram.com/tanooki_ninja

JeanBureau

Re: Update to the stage tutorial - What do you want to see ?

#19 October 02, 2012, 05:51:33 pm

I just posted a new tutorial for smooth edges sprite. Not sure if it's what you want to put in your pdf but it doesn't cost me anything to post it in case.

http://mugenguild.com/forum/topics/how-get-perfectly-smooth-looking-sprite-no-hard-edges-144921.0.html

Cyanide

Re: Update to the stage tutorial - What do you want to see ?

#20 October 03, 2012, 03:23:53 am

Legendary XIII
I am the eye of the storm to come!

Anything that teaches people MORE about how transparency actually functions. I see too many where people are unsure about why things are see through, or why bits are fuzzy, or how to make something NOT see through. This means learning to actually manage a palette rather than assuming black is the BG colour and running with it.

I should do that myself as a seperate by itself troubleshooter actually.

In M.U.G.E.N there is no magic button

They say a little knowledge is a dangerous thing, but it's not one half so bad as a lot of ignorance.

Links to this post

Update to the stage tutorial - What do you want to see ? (Read 2645 times)

Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?

Re: Update to the stage tutorial - What do you want to see ?