NOCIONES BÁSICASParallaxing background elements give the illusion of depth for elements that appear to face upwards or downwards.
Existen dos parametros distintos para lograr este efecto, ambos son excluyentes el uno del otro:
1) XCALE = top_xscale, bottom_xscaletop_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.
Use xscale if the sprite has already been preprocessed for perspective distortion.
Este efecto es el que usa la mayoría de los juegos cps2 que tienen efecto de parallax: SF, darkstalkers, etc.
>Así se ve el sprite en el sff
>y así se vería in game
>las flechas indican la dirección en la cual se contrae la imagen
2) 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 preprocessed for perspective distortion. For example:
>Así se ve el sprite en el sff
>y así se vería in game
>las flechas indican la dirección en la cual se expande la imagen
PROGRAMANDO ...Para el desarrollo del presente tutorial utilizaremos como base el stage de Honda de SF II, porque tiene todos los elementos que necesitamos. Iniciaremos identificando los parámetros básicos, y desarrollando primero la formula para aplicarla al factor de XCALE, y luego trasladarla al factor WIDTH
1) XCALE = top_xscale, bottom_xscale[BG my_parallax_element]
type = parallax
spriteno = 3, 0
xscale = 1, 1.75
mask = 1
Nuestro parametro xcale, esta compuesto de: top_xscale y bottom_xscale. The first and second xscale parameters scale the horizontal delta of the background element's top and bottom edge, respectively. (The deltas for the rest of the element are linearly interpolated between these two values.) For instance, if we specified delta = .78, .75, then the top of the sprite would move at .78 * 1 = .78 pixels per camera unit, and the bottom would move at .75 * 1.75 = 1.3125 pixels per camera unit. xscale is responsible for creating the parallaxing effect in the horizontal direction.
El factor "top_xcale", siempre sera igual a 1 a los efectos de simplificar los cálculos, entonces todas las veces deberemos determinar el valor de "bottom_xscale".
Previamente identificaremos los elementos básicos que debemos conocer del stage:
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.
Otro punto importante, del cual no hablamos hasta ahora, pero que es fundamental, es la dimension del stage, la cual dependerá obviamente de los sprites . A partir de la versión 1.0, al darse soporte a mayores resoluciones (el winmugen soportaba únicamente 320x240), se introdujo un nuevo parámetro, el localcoord, el cual sirve para “decirle” al engine, cual es la resolución en pixeles del stage que esta mostrando en pantalla.
Según los mugen docs:
localcoord = width, height
Dimensions of the coordinate space of the stage. Defaults to 320, 240 if omitted.
A nosotros nos interesa el segundo valor del parámetro localcoord: “height”, ya que es el que afectara directamente al zoffset. Sí nuestra “height” en pixeles es 240 (localcoord=320,240) nuestro zoffset, que estará representado por la línea del char, podríaen principio asumir cualquier valor dentro de ese rango.
Habiendo definido los conceptos básicos, comenzaremos a trabajar. Para ello partiremos de la fórmula desarrolada por VID:
bottom_xcale = ((1-xdelta)*B/A+1)/xdeltaPrimeramente, deberemos determinar la resolución de los sprites. En nuestro ejemplo, por tratarse de un stage LR, esta será: 320 x 240. El numero que nos interesa es 240, porque es el cual afectará al zoffset. En el Excel, la resolución surge de una lista desplegable, de la cual, el archivo automáticamente tomará el valor del parámetro “heigth” para realizar los cálculos; no obstante puede ser ingresado manualmente
Localcoord= 320,240
Seguidamente, deberemos consignar el valor del zoffset, el cual dependerá de: a) el material de origen en caso que sea un port, b) gusto del programador, o c) del efecto buscado. No obstante puede considerarse solo a modo de idea un rango entre 4/5 y 5/5 del factor “altura”, esto no es un regla general, y dependerá de cada caso. Siguiendo con nuestro ejemplo, como se trata de un stage porteado, respetaremos los valores del juego de origen.
Zoffset = 216
El mismo criterio aplicado al zoffset, será utilizado para el valor del xdelta. En nuestro stage, respetando la fuente original:
Xdelta = 0. 67
Posteriormente, se deberá determinar la altura en pixeles del sprite que representa el piso, y al cual quiere aplicarse el efecto. Importante es que este completamente recortado, ya que los pixeles de la mascara son computados para el calculo de los deltas.
h = 66 pixeles
Solo resta determinar los últimos valores:
h = A + B
Donde:
B= Heigth – zoffset
B = 240 -216
B = 24
A = h – B
A = 66 – 24
A = 42
Si han seguido los pasos en el Excel, el archivo automáticamente calculará los valores de A, B y en consecuencia el xcale (bottom_xscale).
Caso contrario, toca calcularlos y comenzar a reemplazarlos valores en la ecuación de VID:
bottom_xcale = ((1-xdelta)*B/A+1)/xdeltabottom_xcale = 1-0.67)*24/42+1)/0.67
bottom_xcale = 1.773987207
Nuestro código quedará entonces así:
[BG FLOOR]
type = parallax
spriteno = 3, 0
delta = .67, 1
xscale = 1, 1.77398720682303
mask = 1
2) WIDTH = top_width, bottom_width
top_width: consignaremos los pixeles reales del sprite, o bien reescalados (en mas o menos). A dicho valor lo multiplicaremos por el factor bottom_xcale, calculado previamente conforme lo explicado con antelación.
Entonces:
top_width= 696 (real pixels)
bottom_width= top_width * bottom_xcale
bottom_width= 696*1.77398720682303
bottom_width= 1234.6951
