SylentEcho

Stephen Rao

Blog

Additional Stuff

Posted on April 18, 2020 at 10:40 AM

7.1 - Avoiding colorloss

Sometimes, you want to use an image which has (much) more than 256 colors. Hence, when you convert it to indexed colors, the quality of the image goes down proportionally to the number of colors it had at the beginning. There are 3 methods to avoid colorloss.

 

Jiggsaw Method :

It consist in cutting the original image in many little pieces, then display all the pieces at the correct place in the stage. Each small piece having less colors than the original image, you lose less colors when you convert it to indexed colors. The optimal size for the tiles using this method is 16x16 pixels, since 16^2=256, hence a tile will contain 256 colors maximum, and you're sure to avoid colorloss. However, cutting an image into tiles of this size is insane and results in too many tiles. Using 25x25 or even 50x50 tiles if the image doesn't have too many gradients is often enough.

 

Here is a quote by XGargoyle about handling the Jiggsaw method with Photoshop :

XGargoyle said, 11 years ago

- Your psd file contains all the tiles arranged correctly, but each tile is a different layer

- Export each layer as a different 8-bit indexed pcx. Use photoshop's excellent tools such as batch automation, actions and scripts

- Each resulting pcx will have the same size (i.e. 800x1200) and they will consist on a tile placed somewhere and the rest is just the magenta background

- Now create the text file for sffmaker. Placing the axis is easy because you don't have to do any calculation at all. All the sprites will have the same axis

- Finally build the SFF and make sure the crop option is enabled in the command line (so your sprites are optimized and reduce filesize)

 

RGB Method :

It's the most common method nowadays, even though it has its flaws. It consists in separating the image into its 3 channels : red, green and blue (RGB), with a graphical software. Then, in Mugen, you can reconstitute the image by placing the images one over the other with transparency.

While this method ensure no colorloss and is very quick to use, it results in a white screen when characters use alpha ctrls.

 

For more information about this method, reffer to this topic by Jango : The RGB Method.

 

ImageSplitter :

 

A method using a tool developed by AokManiac13, after [E] told him about the algorithm.

To get the tool, go here : http://randomselect.piiym.net/ -> Download Tools -> General Purpose Tools -> ImageSplitter.

 

Using this command-line tool, you will get many uncropped layers, which you will just have to insert in the SFF, all with the same axes. Then, you just have to write the code for one layer and do some copy-pasting job to display the others.

 

The only problem with this method is that it may generate a high number of layers (something like 50), and Mugen may not be able to handle that properly without having your framerate go down drastically.

 

 

7.2 - Other Animation Codes

While we have learned how to code simple animations, there are other parameters you can add to achieve different kind of effects. Here's a short list of these parameters.

 

- Infinite time :

 

You may want an animation to stop on a particular sprite and display it indefinitely, until the end of the fight. To do this, you just have to set the time (number of ticks) of the sprite to -1, as such :

Code:

[Begin Action 123]

123,0,0,0,4

123,1,0,0,4

123,2,0,0,4

123,3,0,0,4

123,4,0,0,-1

Sprite 123,4 will be displayed for an infinite time.

 

- Turning the sprites :

 

If you have sprites you need to turn horizontally or vertically, you don't have to include them several times in the SFF after having modified them with Photoshop. You can do this simple rotation effect in the definition of your animation. Using "H" at the end of the line will turn the sprite horizontally, and using "V" will turn it vertically. You can use "HV" to do both :

 

[Begin Action WTF Flip]

10,2,0,0,5 ;Normal sprite

10,2,0,0,5,H ;Sprite with horizontal symmetry

10,2,0,0,5,V ;Sprite with vertical symmetry

10,2,0,0,5,HV ;Sprite with horizontal and vertical symmetry.

 

 

- Adding transparency :

 

We previously used the "trans" parameter in normal sprites to make the clouds transparent. However, when defining an animation, you may want to define the transparency within the animation itself. This is done by adding some other code at the end of the line :

Code:

[Begin Action WTF Trans]

10,2,0,0,5 ;Normal sprite

10,2,0,0,5,,A ;Additive transparency (identical to trans=add)

10,2,0,0,5,,A1 ;Additive transparency with background dimmed to 50% brightness (identical to trans=add1)

10,2,0,0,5,,S ;Substractive transparency (identical to trans=sub)

notice the two ",,". These are made because the code between the commas is made to flip the sprites, as we have seen in the precedent paragraph.

 

If you're using WinMugen or Linux Mugen (but not DOS Mugen), you can also define the transparency better as if you were using "trans = AddAlpha". This is done by using ASxxxDyyy, with "xxx" being the source, and "yyy" the destination, both values being between 0 and 256. If you want to make an animation fade out, you would use a code like this :

Code:

[Begin Action 16];Fading Out

16,0, 0,0, 4,,A

...

16,13, 0,0, 4,,A

16,14, 0,0, 4,,A

16,15, 0,0, 4,,AS200D256

16,16, 0,0, 4,,AS160D256

16,17, 0,0, 4,,AS120D256

16,18, 0,0, 4,,AS80D256

16,19, 0,0, 4,,AS40D256

16,-1, 0,0, 40,,AS40D256

The last line means that you're using and empty sprite.

 

- LoopStart :

 

This parameters allows you to define a point from which the animation will loop. An example being better than hundreds of explanations :

Code:

[begin Action 10]

10,0,0,0,5

10,1,0,0,5

10,2,0,0,5

10,3,0,0,5

10,4,0,0,5

LoopStart

10,5,0,0,5

10,6,0,0,5

10,7,0,0,5

10,8,0,0,5

10,9,0,0,5

The LoopStart is defined for sprite 10,5, which means the animation will loop from there. Hence, the animation will display the sprites from group 10 in this order :

0 1 2 3 4 5 6 7 8 9 5 6 7 8 9 5 6 7 8 9 ...

 

 

7.3 - Foreground Images - The BlackJack Method

 

You may have noticed in the tutorial a line of code concerning the number of the layer :

 

layerno = 0

 

This code was present in the sky or the moving mushroom for example.

 

Most sprites use this layer number of 0, which means that they appear behind the characters. However, you may sometimes want to include some elements in front of the characters. It may be a layers of snow as it can be an element on the ground closer to the screen than the characters. To do this, you just have to change the layerno to 1 :

Code:

layerno = 1

Sprites with layerno=1 follow the same rules as the sprites with layerno=0, which means that they appear in the same order as the order you've coded them in the DEF file. Hence, you should be careful if you have several items with layerno=1. However, these sprites will always appear in front of sprites with layerno=0, whatever the place where you code them in the DEF file.

 

Using a foreground element of this type, you can achieve effects of this type :

However, while this effect can be neat, it may sometimes clutter the fight and make the fighters disappear behind a huge foreground element, which is not suitable. A simple solution to this is to make the foreground element transparent. However, if you limit yourself to this, the foreground element will appear entirely transparent, and background elements will be seen through it, which is not very nice.

 

The good method is called the BlackJack method (the name of the guy who found this method) : you just copy-paste the code for your foreground element. You set the first one to layerno=0, and you give to the one with layerno=1 some transparency. Your code should go from :

Code:

[BG foreground]

type = normal

spriteno = 10, 0

layerno = 1

start = 0,0

delta = 1,1

trans = none

mask = 1

to this :

[BG foreground 1]

type = normal

spriteno = 10, 0

layerno = 0

start = 0,0

delta = 1,1

trans = none

mask = 1

[BG foreground 2 trans]

type = normal

spriteno = 10, 0

layerno = 1

start = 0,0

delta = 1,1

trans = add1

mask = 1

I used "add1", but you can use "add" or "addalpha" if you want. By doing this, the same stage now looks like this :

The sprite will appear as normally as before, but will be transparent when a character passes behind it.

 

Nono used an alternative version of this code by using "add" and "sub" at the same time, you can check it by looking at this topic.

 

 

7.4 - BG Controllers

These are very powerful tools I won't be explaining here. You should report to the Mugen Docs for more information. Look at here, Part IV for more information about Background Controllers.

 

Tamez also wrote in-depth tutorials about Background Controllers, explaining Animation Change, VelSet and VelAdd, click here for the link to the tutorial videos.

 

However, as pointed out by Mike Werewolf in his French translation of the Mugen Docs, there's a mistake in the simple example given at the end of the file. Here's a corrected version, just for you :

 

-- 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.

Code:

; 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.

 

Code:

[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

 

NB from Mike Werewolf : Elecbyte forgot a part of the code. As it is now, the code makes the peregrinator go from left to right and vice-versa, but the anim always stays the same, with the peregrinator facing right. Hence, in the secind phase of the BGCtrl (walk to the left), the peregrinator will be doing a moonwalk. To correct this, we will add a BGCtrl to change the animation in the middle of the walk :

Code:

[BGCtrl Turn to the Left]

type = Anim

time = 300

value = 11

 

However, following the same idea, with the previous code, the peregrinator will indeed use anim 11 from time=300, but when the BGCtrlDef womes back to the beginning of the loop, it didn't receive any other indication, hence it will continue using anim 11, and we will start getting the moonwalk at the second loop. We just have to add a new BGCtrl. The whole code for this part becomes this :

Code:

[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

[BGCtrl Turn to the Right]

type = Anim

time = 0

value = 10

; Set velocity of 2 pixels/sec leftward at time 300.

[BGCtrl Walk Left]

type = VelSet

time = 300

x = -2

[BGCtrl Turn to the Left]

type = Anim

time = 300

value = 11

 

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).

 

Finally, there is another mistake in the Mugen Docs. They specify that the syntax is :

Code:

[BGCtrl]

type = Enabled

However, having the "d" on the end will make mugen crash. It needs to be:

Code:

[BGCtrl]

type = Enable

 

 

7.5 - Misc. Stuff - Parallax

This is an effect you can apply to the floor, to make it move as the characters move. If you do it correctly, it can achieve nice effects, but is horrible if done badly. You can't go by eye with this method, and will have to use some Maths to code it properly.


Categories: None

Post a Comment

Oops!

Oops, you forgot something.

Oops!

The words you entered did not match the given text. Please try again.

Already a member? Sign In

27 Comments

Reply Sntdbida
9:23 PM on September 18, 2021 
quality custom essay essay writers cheap
Reply invedVed
2:40 PM on August 6, 2021 
cialis with dapoxetine mastercard cialis professional cialis asia cheap t jet 60 cialis online ’
Reply Chiffloh
5:57 AM on August 6, 2021 
cialis asia safest and most reliable pharmacy to buy cialis us pharmacy cialis cialis shipping ’
Reply GlyncAni
11:18 PM on June 12, 2021 
canadian pharmacy 24h
url=https://pharmacyken.com/ says...
legit canadian online pharmacy
canadian pharmacy in canada
Reply LactSwa
5:03 AM on May 30, 2021 
cialis without prescriptions uk https://ckacialis.com/ - cialis no prescription cialis soft
Reply GlyncGtv
8:53 PM on May 25, 2021 
mexican online pharmacy reviews list of canadian pharmacies prescription pricing
Reply BbshLact
10:10 AM on May 24, 2021 
coupon for viagra http://loxviagra.com/ buy viagra online amazon
Reply JebgGlync
1:48 AM on May 23, 2021 
legitimate canadian mail order pharmacy http://pharmacylo.com/ canadian pharmacy cialis
Reply LbsoroAto
6:53 PM on May 22, 2021 
cialis with dapoxetine usa https://ucialisdas.com/ cialis 20 mg
Reply RebfroAto
11:08 AM on May 20, 2021 
cialis 10 mg https://rcialisgl.com/ - cialis lilly price why buy cialis. com
Reply LbsoroAto
6:07 PM on May 16, 2021 
generic cialis https://ucialisdas.com/ - cialis super active real online store brand cialis sale
Reply FmrfGlync
5:29 PM on May 13, 2021 
generic cialis http://cialisee.com/ cialis soft tabs 20mg
Reply LebnGlync
11:08 AM on May 12, 2021 
Femara national pharmacies Nemasole
Reply AnooGlync
9:59 PM on May 8, 2021 
que pasa si un joven toma viagra https://llviagra.com/ - over the counter similar to viagra viagra australia website
Reply BbshLact
4:09 PM on May 8, 2021 
online prescription for viagra https://loxviagra.com/ - free viagra what are the side effects of viagra
Reply RebfroAto
9:48 PM on May 6, 2021 
cialis 60mg http://rcialisgl.com/ cialis 10 mg where to buy
Reply LebnGlync
9:16 AM on May 4, 2021 
Viagra Plus https://xlnpharmacy.com/ Starlix
Reply RfvbroAto
8:10 PM on May 2, 2021 
cialis for sale in toronto http://cileve.com/ viagra cialis melbourne site:au
Reply FbshGlync
4:11 AM on April 1, 2021 
https://thesisacloud.com/ - good thesis writing help me write a thesis good thesis writing phd degree
Reply BrfgLact
6:06 PM on March 30, 2021 
url=https://ljcialishe.com/ says...
canada cialis
url=https://cialisvja.com/ says...
which is better cialis or viagra
url=https://viagraonlinejc.com/ says...
viagra mechanism of action
url=https://viagratx.com/ says...
how do you spell viagra
url=https://buycialisxz.com/ says...
que es cialis