The Mugen Fighters Guild

Help => M.U.G.E.N Development Help => Tips, Tricks, Tutorials => Topic started by: Master Yoda on March 09, 2019, 10:58:22 PM

Title: Ultimate parallax tutorial (with tool)
Post by: Master Yoda on March 09, 2019, 10:58:22 PM
This tutorial is an extension of the original made by @VIB: http://mugenguild.com/forum/topics/parallax-tutorial-vib-116138.msg1119796.html#msg1119796
Thanks to @Odb718 for helping me with the translation: http://mugenguild.com/forum/topics/parallax-tutorial-translation-english-184639.msg2416662.html#msg2416662

The idea is to introduce you to the basic concepts, but you can calculate them automatically with this tool: http://mugenguild.com/forum/topics/parallax-calculator-tool-186212.new.html#new

1. PARALLAX BASICS
Parallaxing background elements give the illusion of depth to elements that appear to move in front of each other due to depth.
There are two different parameters to achieve this effect, both are mutually exclusive:

1.1. XSCALE
Code:
XSCALE = top_xscale, bottom_xscale
Our parameter xscale, is composed of: top_xscale and bottom_xscale.
The first parameter scales the horizontal delta of the background element's top edge.
The second xscale parameter scales the horizontal delta of the background element's bottom edge.
The deltas for the rest of the element are linearly interpolated between these two values. (The computer figures out the rest)
Code:
[BG my_parallax_element]
type = parallax
sprite = 3, 0
delta = .75, .9
xscale = 1, 2
mask = 1
For example, delta = .75, .1 and xscale = 1, 2 specifies the top of the sprite would move at .75 * 1 = .75 stage units per camera unit, and the bottom would move at .75 * 2 = 1.5 stage units per camera unit.

The "top_xscale" factor will always be equal to 1 for the purpose of simplifying the calculations, so all times we must determine the value of "bottom_xscale".

Top_xscale and bottom_xscale respectively scale the horizontal delta of the background element's top and bottom edge to create a horizontal shearing effect.

Use xscale if the sprite has already been made for perspective distortion.
This effect is the one used by most cps2 games that have a parallax effect: SF, Darkstalkers, etc.

> This is how the sprite looks in the sff
(http://i64.tinypic.com/nxvwub.png)

> and so it would look in game
(http://i67.tinypic.com/2qbuhxw.png)

> the arrows indicate the direction in which the image is contracted
(http://i68.tinypic.com/szx108.png)

1.2 WIDTH
Code:
WIDTH = top_width, bottom_width
Top_width and bottom_width respectively specify the top and bottom widths of a trapezoid that has the same height as the sprite used. The sprite will be distorted to match the shape and size of the trapezoid. The ratio of top_width to bottom_width affects the amount of shearing as the camera moves horizontally.
Use width if the sprite is not made for perspective distortion. For example:

> This is how the sprite looks in the sff
(http://i67.tinypic.com/1zzrsi9.png)

> and so it would look in game
(http://i68.tinypic.com/24xgbxv.png)

> the arrows indicate the direction in which the image expands
(http://i67.tinypic.com/1zmft54.png)

2. GENERAL PARAMETERS
For the development of this tutorial, we will use the SF II Honda stage as a base. It has all the elements we need. We will start by identifying the basic parameters, and first developing the formula to apply it to the XSCALE factor, and then transfer it to the WIDTH factor,
(https://i.imgur.com/RfN3kJI.png)
WHERE:
Another important point is the dimension of the stage. Which will obviously depend on the sprites. As of version 1.0, when supporting higher resolutions (the winmugen only supported 320x240), a new parameter was introduced, the localcoord. It's used to "tell" the engine, which is the pixel resolution of the stage that is showing on screen.
According to the mugen docs:
We are interested in the second value of the localcoord parameter: "height", since it is the one that directly affects the zoffset. If our "height" in pixels is 240 (localcoord = 320,240) our zoffset, which will be represented by the char line, could in principle assume any value within that range.

3. PROGRAMING OUR CODES
Having defined the basic concepts, we will begin to work. For this we will start with the formula developed by VID:
bottom_xscale = ((1-xdelta) * B / A + 1) / xdelta

3.1 DETERMINE THE LOCALCOORD
First, we must determine the resolution of the sprites. In our example, because it is an LR stage, this will be: 320 x 240. The number 240, will affect the zoffset.
Code:
Localcoord = 320,240
3.2 DEFINE THE ZOFFSET
Next, we must record the value of the zoffset, which will depend on:
I using the source material, in that case the SF II game.
[/list]
Code:
Zoffset = 216 

3.3 DEFINE THE XDELTA
The same criterion applied to the zoffset, will be used for the value of the xdelta. Again, using the original source: Xdelta = 0. 67
Code:
delta= .67, 0

3.4 DETERMINE THE HEIGHT OF THE SPRITE FOR THE FLOOR: "h" factor
Subsequently, you must determine the height of the floor.
In the Honda stage, the height is 66 pixels.
(https://i.imgur.com/s8m7pDB.png)
It remains to determine the last values:
h = A + B

Where:

B= Heigth – zoffset
B = 240 -216
B = 24

A = h – B
A = 66 – 24
A = 42

3.5 CALCULATE XSCALE
Code:
XSCALE = top_xscale, bottom_xscale

Replace the values in the formula
(https://i.imgur.com/wqCGj0N.png)

bottom_xscale = ((1-xdelta)*B/A+1)/xdelta
bottom_xscale = (1-0.67)*24/42+1)/0.67
bottom_xscale = 1.773987207

(https://i.imgur.com/5XUCkvX.png)

Our code will then be like this:
Code:
[BG FLOOR]
type  = parallax
spriteno = 3, 0
delta = .67, 1
xscale = 1, 1.77398720682303
mask = 1
Checking the result
(https://i.imgur.com/9fu812j.png)

3.6 CALCULATE WIDTH
Code:
WIDTH = top_width, bottom_width

For this case, we will follow all the points described above (3.1 to 3.5), only that we will need to calculate the bottom_width.

"top_width", it's similar to "top_xscale". The first is expressed in delta and the second in pixels of width of the sprite
"bottom_width", it's similar to "bottom_xscale". The first is expressed in delta and the second in pixels of width of the sprite

The "top_width" factor will always be equal to width in pixels of the floor sprite for the purpose of simplifying the calculations, so all times we must determine the value of "bottom_width".

Then:
top_width= 696 (width in pixels)
bottom_width= top_width * bottom_xscale
bottom_width= 696*1.77398720682303
bottom_width= 1234.6951 (pixels)
Code:
[BG FLOOR]
type  = parallax
spriteno = 3, 0
delta = .67, 1
width = 696, 1234.6951
mask = 1

3.7 POSITIONING AN OBJECT ON THE FLOOR WITH PARALLAX
In this case, you must determine the h1 factor.
(https://i.imgur.com/AghWs4Q.png)

WHERE:

Remembering that
X delta top= 0,67
X delta bottom= 1,1885
h = 66 pixels

Delta increased = 1,1885 - 0,67 =0,5185

Variation of the delta for each pixel unit= 0,5185/66= 0,0078

Delta objet= (Variation of the delta for each pixel unit * h1)+X delta top
                = ( 0,0078 * 19) + 0,67
                = 0,8193
Code:
[BG BATHTUB_FRONT]
type= normal
spriteno= 4,0
delta = 0.819285714285714, 1
mask= 1

3. USING THE TOOL
Determine your values of localcord, zoffset, xdelta and h. Add them in the excel file and magic.
Title: Re: Ultimate parallax tutorial (with tool)
Post by: O Ilusionista on March 09, 2019, 11:21:23 PM
Really thanks for your effort
Title: Re: Ultimate parallax tutorial (with tool)
Post by: Master Yoda on March 09, 2019, 11:29:14 PM
Really thanks for your effort

Thanks man!  :muttrox:
Title: Re: Ultimate parallax tutorial (with tool)
Post by: 2Dee4ever on March 09, 2019, 11:50:30 PM
I am going to study this further. Rather than just guessing for a lot of values. Thank you for taking the time to type it all out.
Spoiler, click to toggle visibilty
Title: Re: Ultimate parallax tutorial (with tool)
Post by: Master Yoda on March 10, 2019, 03:06:57 AM
I am going to study this further. Rather than just guessing for a lot of values. Thank you for taking the time to type it all out.
Thanks man!  :)  :iog:
Title: Re: Ultimate parallax tutorial (with tool)
Post by: Stone-Wolf on March 10, 2019, 03:53:58 AM
whoa, is just what i was looking for, thanks man
Title: Re: Ultimate parallax tutorial (with tool)
Post by: beterhans on March 10, 2019, 06:50:03 AM
I tested yesterday

For example, delta = .75, .1 and xscale = 1, 2 specifies the top of the sprite would move at .75 * 1 = .75 stage units per camera unit, and the bottom would move at .75 * 2 = 1.5 stage units per camera unit.

is not true

delta = .75, .1
0.75 is upline delta

xscale = 0.5, 1
xscale = 1, 2
xscale = 2, 4
have no difference.

Tested in mugen 1.1



Title: Re: Ultimate parallax tutorial (with tool)
Post by: Master Yoda on March 10, 2019, 03:51:34 PM
whoa, is just what i was looking for, thanks man

Your welcome! I hope you find it useful!

I tested yesterday

For example, delta = .75, .1 and xscale = 1, 2 specifies the top of the sprite would move at .75 * 1 = .75 stage units per camera unit, and the bottom would move at .75 * 2 = 1.5 stage units per camera unit.

is not true

delta = .75, .1
0.75 is upline delta

xscale = 0.5, 1
xscale = 1, 2
xscale = 2, 4
have no difference.

Tested in mugen 1.1

I see you have misinterpreted a couple of points:
The general idea is that in the line of zoffset your xdelta = 1 to avoid the displacement of the chars.
If you double or triple the values of the xcale will affect the xdelta of the zoffset. Let me exemplify it with the codes of the honda stage.

Normal code:
Code:
[BG FLOOR]
type  = parallax
spriteno = 3, 0
delta = 0.67, 1
xscale = 1, 1.77398720682303
mask = 1

So:
(https://i.imgur.com/5XUCkvX.png)

And your xdeltas:
xdelta top= 0,67* 1= 0,67
xdelta bottom= 0,67*1,77=1,18
xdelta zoffset= 1
(https://i.imgur.com/9fu812j.png)


Now let's duplicate the xscale values as in your example= *2

Code:
[BG FLOOR]
type  = parallax
spriteno = 3, 0
delta = 0.67, 1
xscale = 2, 3.547974414
mask = 1

So
(https://i.imgur.com/iaVmHwd.png)

But now your xdeltas:
xdelta top= 0,67* 2= 1,34
xdelta bottom= 0,67*3,54=2,37
As you can now check xdelta in your zoffset is equal to 2. Then the characters will slide across the floor
(https://i.imgur.com/HVwc0PI.png)

You can not change the values randomly in the formula and expect it to work.
The formula was specifically designed keeping in mind that the xdelta of its zoffset should be equal to 1 to avoid displacements of the characters.

Also always remember this:
The "top_xscale" factor will always be equal to 1 for the purpose of simplifying the calculations, so all times we must determine the value of "bottom_xscale".

Greetings!
Title: Re: Ultimate parallax tutorial (with tool)
Post by: beterhans on March 11, 2019, 12:41:12 AM


I understand your point but for me
No matter I change the value the stage will be ok no sliding will happen.

I wonder which version of mugen you are using?
1.0?

Title: Re: Ultimate parallax tutorial (with tool)
Post by: Master Yoda on March 11, 2019, 02:05:28 AM


I understand your point but for me
No matter I change the value the stage will be ok no sliding will happen.

I wonder which version of mugen you are using?
1.0?

I have tested in version 1.1 and you are right. The strange thing is that the MUGEN DOCS historically said the same thing:
xscale = top_xscale, bottom_xscale ; (float, float) top_xscale and bottom_xscale respectively scale the horizontal delta of the background element's top and bottom edge to create a horizontal shearing effect. For example, delta = .75, .75 amd xscale = 1, 2 specifies the top of the sprite would move at .75 * 1 = .75 stage units per camera unit, and the bottom would move at .75 * 2 = 1.5 stage units per camera unit. This example assumes the sprite axis is at the top of the sprite.
Maybe it's an error in the update of the engine.
In this case, the xdelta will not be affected by the top_x scale,

Anyway, always your top_x scale  will be equal to 1 (top_x scale=1), and you will have to continue calculating the bottom_x_scale in the same way.
Title: Re: Ultimate parallax tutorial (with tool)
Post by: beterhans on March 11, 2019, 03:59:06 AM
Anyway, always your top_x scale  will be equal to 1 (top_x scale=1), and you will have to continue calculating the bottom_x_scale in the same way.

by this way
you don't need to make 1st value of xcale to be 1
you can really input the upper delta into the 1st one and the botton delta into the 2nd one and it works
no calculating is needed.

you can view my video next to this post. it will be much easier.
Title: Re: Ultimate parallax tutorial (with tool)
Post by: Master Yoda on March 13, 2019, 12:58:07 PM
Anyway, always your top_x scale  will be equal to 1 (top_x scale=1), and you will have to continue calculating the bottom_x_scale in the same way.

by this way
you don't need to make 1st value of xcale to be 1
you can really input the upper delta into the 1st one and the botton delta into the 2nd one and it works
no calculating is needed.

you can view my video next to this post. it will be much easier.
I'm going to take a look at your video. :nuttrox:
Title: Re: Ultimate parallax tutorial (with tool)
Post by: MatreroG on March 14, 2019, 03:20:35 AM
All this is very useful and I think it will solve some of my problems.
Thanks.