Ultimate parallax tutorial (with tool)

[sensei_yoda]

This tutorial is an extension of the original made by @[user id=4520]VIB[/user]: http://mugenguild.com/forum/topics/parallax-tutorial-vib-116138.msg1119796.html#msg1119796
Thanks to @[user id=10719]Odb718[/user] 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://www.infinitymugenteam.com/Forum_345/index.php?topic=47304.msg552627#msg552627

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: [Select]

XCALE = top_xscale, bottom_xscaleOur 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: [Select]

[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
[img resized=1 width=800 height=60]http://i64.tinypic.com/nxvwub.png[/img]

> and so it would look in game
[img resized=1 width=800 height=60]http://i67.tinypic.com/2qbuhxw.png[/img]

> the arrows indicate the direction in which the image is contracted
[img resized=1 width=800 height=60]http://i68.tinypic.com/szx108.png[/img]

1.2 WIDTH

Code: [Select]

WIDTH = top_width, bottom_widthTop_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
[img resized=1 width=800 height=73]http://i67.tinypic.com/1zzrsi9.png[/img]

> and so it would look in game
[img resized=1 width=800 height=51]http://i68.tinypic.com/24xgbxv.png[/img]

> the arrows indicate the direction in which the image expands
[img resized=1 width=800 height=51]http://i67.tinypic.com/1zmft54.png[/img]

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,

WHERE:

• h is the size of the sprite (in pixels)
• A is the distance between the top and the char line
• B is the distance between char line and bottom
• zoffset = is the vertical distance of the ground level from the top of the screen, given in pixels.

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:

• localcoord = width, height. Dimensions of the coordinate space of the stage. Defaults to 320, 240 if omitted.

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: [Select]

Localcoord = 320,240

3.2 DEFINE THE ZOFFSET
Next, we must record the value of the zoffset, which will depend on:

• the source material in case it is a port,
• taste of the programmer, or
• of the desired effect.

I using the source material, in that case the SF II game.
[/list]

Code: [Select]

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: [Select]

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.
[img resized=1 width=800 height=61]https://i.imgur.com/s8m7pDB.png[/img]
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: [Select]

XSCALE = top_xscale, bottom_xscale
Replace the values in the formula


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



Our code will then be like this:

Code: [Select]

[BG FLOOR]
type  = parallax
spriteno = 3, 0
delta = .67, 1
xscale = 1, 1.77398720682303
mask = 1Checking the result


3.6 CALCULATE WIDTH

Code: [Select]

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_xcale
bottom_width= 696*1.77398720682303
bottom_width= 1234.6951 (pixels)

Code: [Select]

[BG FLOOR]
type  = parallax
spriteno = 3, 0
delta = .67, 1
width = 696, 1234
mask = 1
3.7 POSITIONING AN OBJECT ON THE FLOOR WITH PARALLAX
In this case, you must determine the h1 factor.


WHERE:

• h1 is the distance between the top of the floor sprite and the base of the object's sprite (in pixels)

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: [Select]

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