[Stage] How to code Animations

[Ryon]

Last & Final Update To tHis Stage Until i learn Propper Animation

You need your animations seperate. from the stuff in your SFF.

I recommend using Fighter Factory 3 to open up the SFF.

this is the ideal way to have your sff. (or at least MY ideal way)

Background Sprite (group 0, image 0)

Midground Sprite (group 1, image 0)

Foreground (group 2, image 0)

animation object 1 (group 3, image 0)

animation object 2 (group 3, image 1)

animation object 3 (group 3, image 2)

This way each little piece of the stage is broken up into groups. the way groups and image work is basically organization. each group is allowed to have any number of images, and images are not restricted to 0 1 2 3 4 5, you could have image 0 , then image 10, then image 5000. thats perfectly fine.

just as long as you remember what number you put your ok. So consider your (Group, Image) To be your reference points.

This is your basic stage coding, to display a single image from the SFF to Mugen.

[bG 0] ; This is the label for the code/sprite

type = normal ; This is the kind of sprite, its either normal single sprite, or anim animation set

spriteno = 0, 0 ; This is where you use your "reference points" from your SFF to implement the image. (group no, image no)

layerno = 0 ; This is used to tell how it should appear -1 = Behind, 0 = Same Layer as player, 1 = Infront of player

start = 0, 0 ; This is the start position of the image, on the stage. If you align the stage properly in the SFF, you can leave this to 0,0.

delta = 1,1 ; This is used to tell the image how to move itself when the character is walking, leaving it to 1,1 it wont move it'll stay in its position, if you use a lower value or higher value it will slide when the player walks.

l=====================================================================================l

Now this is a example of how the basic stage would look if you used the back/mid/fore ground images like i mentioned above.

[bG Background] ; Displayed behind all characters and objects

type = normal

spriteno = 0, 0

layerno = 0

start = 0, 0

delta = .9,1 ; This delta in the X axis, is .1 lower than normal, the reason why is so when the character moves around on the midground, the background will slide a little bit, giving the feeling that its part of a faraway background.

[bG Midground] ; Displayed behind all characters and objects, BUT infront of the background.

type = normal

spriteno = 0, 0

layerno = 0

start = 0, 0

delta = 1,1

[bG Foreground] ; Displayed infront of all characters and most objects (unless there coded otherwise, nothing you can do)

type = normal

spriteno = 0, 0

layerno = 1 ; The layerno here is 1, which means it appears in front.

start = 0, 0

delta = 1.1 , 0 ; The delta in the X axis, is .1 higher than normal. the reason is because the object is closer to the player so when the character moves this object will move faster as if your viewing the fight from behind a object. If you want a better example, set to cups on a table, one on the edge, and one in the middle. now bring your face down to table level, and move your head from left to right almost half way around the table, you will notice how the cup near the edge appears to move faster than the cup in the middle of the table, This is a real life perspective that the delta is used for.

l======================================l

Now for how to code animations

[bG Animation 1]

type = anim ; type = normal for single sprite, type = anim , for animation set

actionno = 0 ; spriteno is replaced with actionno, or else you get error. your action number needs a "reference point" just like spriteno.

layerno = 0

start = 0, 0

delta = 1,1

[begin Action 0]

3,0 ,0,0 ,5

3,1 ,0,0 ,5

3,2 ,0,0 ,5

Now [begin Action 0] is animation set 0, and the number (0) is your reference point which you use in the actionno = . This is a explanation of what those numbers under Begin Action mean.

Group No , Image No, X Position, Y Position , Time

If you recall above i set group 3, image 0 1 and 2, to be animation sprites? well we are gonna use those.

We dont need to make it move a position, but other wise you could use the X and Y to move it around.

The time code tells you how many ticks that sprite will be shown in the animation. higher number to show longer, lower number to make really fast. 0 (is like infinite) -1, is like infinite. 1 ~ whatever, will display it at that speed. so for the example i used 5 ticks.

[begin Action 0]

3,0 ,0,0 ,5

3,1 ,0,0 ,5

3,2 ,0,0 ,5

its easier to understand now yes?

well thats all there is to coding animations in stages. there are ALOT more advance triggers but you do not always need them.

so in short how do you make a animation on a stage?

you need type = anim, and you need actionno which points to a animation set

then you need the actual animation set itself, using the [begin Action #] code.

If you read in the Doc's folder a file named "bgs" it explains all about stages.

VIDEO FORM!

[Okami]

The docs is the most helpful since it includes extra items that are very helpful for making your stages. Especially functions like Sin/Cos.

[Vibrant]

You should have added how to add transparency and subs to the animation

[Ryon]

this is just a basic guide on making animations in a stage. i'm not teaching them how to make complicated fancy animations. that they have to look into the docs for.

[Sou-Bot]

Thats a great explanation, ive seen it in your vid tut for SPS (making SP is a real pain in the brain and the ass) but i have to make one.... Anyway it would be very very nice if you make a video tutorial about adding animations in you stage, for example i have TV in my stage and i want to add animation on its screen, how i can do that ?.

[Ryon]

funny you say TV with aanimation on the screen. i have a stage just like that, that i NEVER released. i'll work on it.

[Sou-Bot]

Im gonna wait for it, ive been looking for tuts on youtube and other places but never found someone explains things like you do, you're the best.

[Ryon]

thank you. its my last and greatest gift to the community. i'll try to do it tomorrow.

[lyr]

What do you mean by last??? It that going to be your last tutorial?

[Ryon]

no its a series of tutorials i'll make as i go. and when i'm finished with the tutorials, i'll probably finished with mugen creation.

[Ex✭Cᴀʜᴍ]

Nice Tutorial Ryon....... I dont watch the videos but the those examples are clear and simple to understand the basic of stages. +1 for you Bro.

[Ryon]

Stage Animations Tut

[Sou-Bot]

Thats so cool...it looks great, thank you so much for this tutorial, it helps a lot, it doesnt look that hard at all to make it happen, im gonna give it a try right noooow....

[cmxwll]

On 6/17/2012 at 9:53 PM, Ryon said:

 

You need your animations seperate. from the stuff in your SFF.

 

I recommend using Fig

 

 

hter Factory 3 to open up the SFF.

 

this is the ideal way to have your sff. (or at least MY ideal way)

 

Background Sprite (group 0, image 0)

Midground Sprite (group 1, image 0)

Foreground (group 2, image 0)

animation object 1 (group 3, image 0)

animation object 2 (group 3, image 1)

animation object 3 (group 3, image 2)

 

This way each little piece of the stage is broken up into groups. the way groups and image work is basically organization. each group is allowed to have any number of images, and images are not restricted to 0 1 2 3 4 5, you could have image 0 , then image 10, then image 5000. thats perfectly fine.

just as long as you remember what number you put your ok. So consider your (Group, Image) To be your reference points.

 

This is your basic stage coding, to display a single image from the SFF to Mugen.

 

[bG 0] ; This is the label for the code/sprite

type = normal ; This is the kind of sprite, its either normal single sprite, or anim animation set

spriteno = 0, 0 ; This is where you use your "reference points" from your SFF to implement the image. (group no, image no)

layerno = 0 ; This is used to tell how it should appear -1 = Behind, 0 = Same Layer as player, 1 = Infront of player

start = 0, 0 ; This is the start position of the image, on the stage. If you align the stage properly in the SFF, you can leave this to 0,0.

delta = 1,1 ; This is used to tell the image how to move itself when the character is walking, leaving it to 1,1 it wont move it'll stay in its position, if you use a lower value or higher value it will slide when the player walks.

 

l=====================================================================================l

Now this is a example of how the basic stage would look if you used the back/mid/fore ground images like i mentioned above.

 

[bG Background] ; Displayed behind all characters and objects

type = normal

spriteno = 0, 0

layerno = 0

start = 0, 0

delta = .9,1 ; This delta in the X axis, is .1 lower than normal, the reason why is so when the character moves around on the midground, the background will slide a little bit, giving the feeling that its part of a faraway background.

 

[bG Midground] ; Displayed behind all characters and objects, BUT infront of the background.

type = normal

spriteno = 0, 0

layerno = 0

start = 0, 0

delta = 1,1

 

[bG Foreground] ; Displayed infront of all characters and most objects (unless there coded otherwise, nothing you can do)

type = normal

spriteno = 0, 0

layerno = 1 ; The layerno here is 1, which means it appears in front.

start = 0, 0

delta = 1.1 , 0 ; The delta in the X axis, is .1 higher than normal. the reason is because the object is closer to the player so when the character moves this object will move faster as if your viewing the fight from behind a object. If you want a better example, set to cups on a table, one on the edge, and one in the middle. now bring your face down to table level, and move your head from left to right almost half way around the table, you will notice how the cup near the edge appears to move faster than the cup in the middle of the table, This is a real life perspective that the delta is used for.

 

l======================================l

Now for how to code animations

 

[bG Animation 1]

type = anim ; type = normal for single sprite, type = anim , for animation set

actionno = 0 ; spriteno is replaced with actionno, or else you get error. your action number needs a "reference point" just like spriteno.

layerno = 0

start = 0, 0

delta = 1,1

 

[begin Action 0]

3,0 ,0,0 ,5

3,1 ,0,0 ,5

3,2 ,0,0 ,5

 

Now [begin Action 0] is animation set 0, and the number (0) is your reference point which you use in the actionno = . This is a explanation of what those numbers under Begin Action mean.

 

Group No , Image No, X Position, Y Position , Time

 

If you recall above i set group 3, image 0 1 and 2, to be animation sprites? well we are gonna use those.

We dont need to make it move a position, but other wise you could use the X and Y to move it around.

The time code tells you how many ticks that sprite will be shown in the animation. higher number to show longer, lower number to make really fast. 0 (is like infinite) -1, is like infinite. 1 ~ whatever, will display it at that speed. so for the example i used 5 ticks.

 

[begin Action 0]

3,0 ,0,0 ,5

3,1 ,0,0 ,5

3,2 ,0,0 ,5

 

its easier to understand now yes?

well thats all there is to coding animations in stages. there are ALOT more advance triggers but you do not always need them.

 

so in short how do you make a animation on a stage?

you need type = anim, and you need actionno which points to a animation set

then you need the actual animation set itself, using the [begin Action #] code.

If you read in the Doc's folder a file named "bgs" it explains all about stages.

 

VIDEO FORM!

 

men my animation is not showing up on my stage

here is what I code:

[BG Animation]

type = anim

actionno = 0

layerno = 0

start = 0,0

delta = 1, 1

 

[Begin Action 0]

3,0,0,0,4

3,1,0,0,4

3,2,0,0,4

3,3,0,0,4

3,4,0,0,4

3,5,0,0,4

 

but the animation is not showing up

I am sure that I type the correct group and index
please help me it would be great

[Dissidia]

Check if the sprites are positioned correctly in Fighter Factory, or edit the start numbers for position alignment if you have to.

[cmxwll]

I coded the start with 0,0 because I arrange the sprites in it's sff file, but when I launch my mugen and open that stage, nothing happens, no animation nor the sprite itself is present

[cmxwll]

I already figured it out. The file itself is the problem. I already solved that but now I have another. The animation is working but it has a white bg even though it had its mask = 1. What do I need to do to remove the white bg?

 

[Dissidia]

Good to know that you were able to solve your problem.

 

As for the white bg, care to share an example on how they look in game?

[cmxwll]

I use shrek's swamp as bg and I put a dancing shrek as an animation but all I see is the dancing shrek covering the whole bg with white

Note: I can't insert pictures don't know why

[Dissidia]

Pictures will have to be uploaded at an image hosting site like Imgur.

 

Well it could be that the Shrek dancing sprite isn't indexed properly.

[cmxwll]

what do you mean indexed?

you mean the sprite group index?

 

[Dissidia]

By indexed, I mean all sprites have to be indexed to 256 colors and has to be either PCX or PNG. Other formats will not work. If you're using 1.1 and decide to make the stage 32-bit, then you don't have to do any indexing at all.

[cmxwll]

ahh ok.. but what do you mean by not indexed properly?

I used Photoshop cs6 to index colors and save as .pcx file... I already done that a couple times now for basic stages but when I tried for animations, a white background always show