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
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)
[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
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:
- 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.
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]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
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
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:
[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
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)
[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:
- 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
[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.
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
It'd be cool to remake all the SF2 stages in this manner. :charming:
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:
[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
[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!