Como programar un buen parallax por Darek

[Darek]

Bueno como lo había prometido en este tutorial les voy a enseñar como programar un buen parallax, so prepárense porque en este tutorial he intentado abarcar todo acerca del parallax, asi que busquen una silla cómoda, una buena luz y a leer se ha dicho!!

Entonces, empecemos…

Pero, primero deben saber que este texto esta dirigido a aquellas personas que ya cuentan con el conocimiento básico de programación de escenarios, si aun no sabes nada de escenarios, te serviría comenzar por leer este tutorial:
http://www.mugenimperiolatino.com/index.php?topic=993.0

Y bueno, una vez aclarado, comencemos con esto…

1.- ¿Qué es un parallax?

Como primer paso vamos a explicar que es un parallax, ya que muchos se confunden y piensan que es un efecto 3D, lo cual es completamente falso, un parallax no hace que un escenario sea 3D, lo que hace el parallax es dar un efecto de profundidad, como si fuera un trapecio, la parte de adelante se mueve mas rápido que la de atrás… veamos algunas imágenes para que quede mas claro.

Como vemos en la imagen, el sprite al cual le ponemos el parallax ahora tomara una forma de trapecio, dándole deltas distintos a cada nivel, lo cual ocasiona que la base mayor se mueva rápidamente, mientras que la base menor se mueva lentamente.

Apréndete los conceptos de base mayor y menor, ya que los utilizaremos a lo largo del tutorial.

Veamos el parallax en acción, para esto usemos el escenario de Kung Fu Man, el cual ya incluye un parallax.

¿Ven el movimiento del suelo? Yeah, eso es un parallax, todo el suelo se mueve a distintas velocidades, dando como resultado un efecto de profundidad, ¿bonito no?.

Ahora veamos el mismo escenario sin el parallax:

En el gif podemos ver como todo se mueve a la misma velocidad, no es feo pero le quita lo espectacular ¿cierto?

Y bueno ahora que ya vimos que es un parallax, veamos como programar un parallax.

[Darek]

2.- Entendiendo el parallax

Para empezar, revisemos el código que nos proporciona la documentación de Mugen respecto al parallax:

[BG my_parallax_element];Descripción del código
type = parallax ;Al igual que los demás sprites, el parallax lo definimos en este apartado.
spriteno = 10, 0;Sprite al cual le vamos a aplicar el parallax, Numero/Grupo
xscale = 1,1.75;Formato del parallax, ver mas adelante.
yscalestart = 100;Formato del parallax, ver mas adelante.
yscaledelta = 1.2;Formato del parallax, ver mas adelante.

El parallax al igual que las animaciones y sprites normales, los programamos con código, solo que en ves de usar un type=anim o normal, usamos un type=parallax.

Asi mismo, al igual que los demás tipos (animacion/sprite normal), el código del parallax acepta las opciones extras (delta, tile, velocity, tilespacing, mask, Start etc.)del código, con excepción de algunas reglas:

1.- El parallax solo puede estar compuesto por un sprite, NO puedes usar un actionno (animación) en el código del parallax.
2.- Un parallax no puede ser transparente, esto es que los parámetros trans, addalpha están deshabilitados.

Ahora que ya sabemos esto, vamos a desglosar los parámetros específicos del parallax.

Para programar este efecto contamos con dos parámetros esenciales, uno es “xscale” y el segundo es el “width”

• Xscale se compone de dos valores, el primero es el multiplicador de la base menor del sprite, el segundo parámetro es el multiplicador de la base mayor del sprite. Esto significa que estos parámetros se van multiplicar por el delta que le demos al sprite….

Veamos un ejemplo:

[BG my_parallax_element]
type = parallax
spriteno = 10, 0
xscale = 1,3
delta=0.5,1

En este ejemplo de código, tenemos que el sprite en su base menor se va a desplazar a una velocidad de 0.5 (1*0.5=0.5) pixeles por unidad de cámara, mientras que la base mayor se moverá a una velocidad de 1.5 pixeles (3*0.5=1.5) por unidad de cámara. En otras palabras, el fondo/base mayor se moverá mas rápidamente que el techo/base menor; osea lo que vimos anteriormente en los gifs.

• En cuanto al width es casi lo mismo, solo que en el primer parámetro especificamos el ancho del sprite (en pixeles) y en el segundo la escala del ancho del sprite, lo que da por resultado el mismo efecto, con excepción de que lo que hará este parámetro, es aumentar el tamaño del sprite en la base mayor dando el efecto de que eso se mueve mas rapido/esta mas cerca que la base menor.

¿Entonces que debo usar Xscale o Width?

Bueno esta pregunta no tiene respuesta XD, ya que tú eres el creador y la respuesta recae en ti, puedes usar el parámetro que quieras, en mugen no hay reglas; mas sin embargo si hay recomendaciones, las cuales te ayudaran a decidir que parámetro usar:

1.- Si vas a usar Xscale asegúrate de que el sprite al que le vas a aplicar el parallax, sea más grande que el ancho del escenario, ya que xscale te va a reducir el tamaño en la base menor, con lo cual quedaran bordes descubiertos.
2.- Con Widht es distinto, este no reduce el tamaño de la base menor, ya que recuerda que lo que hace este parámetro es escalar la base mayor.
3.- Por ahí vas a leer que algunos autores recomiendan usar Widht solo cuando tu sprite esta compuesto por tiles, esto en mi experiencia es falso, width trabaja perfectamente con sprites únicos, incluso lo prefiero a xscale en ese aspecto.
4.- Si tu sprite esta compuesto por líneas rectas o cosas geométricas, es mejor que uses xscale ya que width te los puede deformar.
5.- Respecto al punto anterior, recomiendo usar widht cuando tu sprite no cuenta con cosas geométricas, por ejemplo un sprite de tierra, pasto o de varios colores que no guardan relación entre si, width puede ser tu elección.

Algunas imágenes para que quede claro el punto anterior:
Si tu sprite es asi, usa xscale.

Y si tu sprite se ve algo como esto, puedes usar width.

Pero recuerda, tú eres el creador, asi que puedes usar lo que quieras…

Ahora veamos el resto de parámetros del parallax.

• yscalestart, es la escala inicial que le daremos al sprite en el eje Y, osea en altura, esta dada en porcentaje, por lo general lo dejamos en 100% para que no nos reduzca el tamaño del sprite.
• yscaledelta, es el sumando de la escala, el valor que le demos aquí se sumara a el valor de yscalestart por cada unidad de cámara.

Un ejemplo:

[BG my_parallax_element
type = parallax
spriteno = 10, 0
yscalestart = 100
yscaledelta = 3

Por ejemplo con este código tenemos que la escala en Y(altura) del sprite sin que se mueva la cámara es de 100, cuando la cámara se mueva una unidad hacia arriba o abajo, será 103, cuando se mueva otra será 106 y asi se ira sumando, esto sirve para dar el efecto de que la cámara se va angulando respecto al escenario, ósea entre mas se mueva podremos ver partes que no se ven si estuviéramos en el suelo. Toma en cuenta que este parámetro se suma al delta en Y del escenario.

Y bueno ahora que ya entendimos como funciona el parallax, pasemos a lo que todos estan esperando, como programar el parallax…

[Darek]

3.- Nociones sobre el parallax

Si ya estás enterado del tema y haz buscado tutoriales por la web, te habrás dado cuenta que son escasos los tutoriales que hablan sobre el parallax y de su programación, asi que en este tuto vamos a intentar cubrir todas las dudas que hay sobre este tema…

Para este apartado les voy a mostrar como programar un parallax en cualquier escenario, sin importar de que juego sea o que tipo de sprite usemos, asi mismo lo vamos a programar con el sprite del suelo, mas sin embargo esto no significa que el parallax sea solo aplicable al suelo del escenario, ustedes pueden usar parallax en lo que quieran!!

Ahora la ultima línea, no significa que a todo le pongas parallax, hay cosas que se ven bien con parallax, pero otras se pueden ver terribles, usa tu criterio y decide si es necesario implementar un parallax.

¿Qué es un buen parallax?

Hay un montón de creadores que recién comienzan con el parallax, que ya sea por la simple emoción o por vaya  a saber que razón, le ponen parallax a sus escenarios, generalmente mal programado, asi que para que nos quede claro veamos las diferencias de un buen parallax y un mal parallax.

Un buen parallax es aquel que:

• Hace que el movimiento sea natural y acorde al escenario, un suelo que se mueve mucho puede ser terrible ya que no es natural/normal.
• No permite que los personajes se deslicen, un mal parallax hace que cuando uno de los personajes se mueva el otro se deslice en el escenario, lo cual también es terrible…

Para ejemplificar esto usemos los videos de ¿Scal?, en fin veamos el ejemplo:
Ejemplo de un MAL parallax, nota como los pies de Vice se deslizan sobre el suelo cuando Yamazaki se mueve.

Bad parallax in MUGEN

Ejemplo de un BUEN parallax, nota como ninguno de los personajes se desliza sobre el suelo.

Good parallax in MUGEN

Aunque si eres observador y tienes algo de experiencia en esto, notaras que si se desliza un poco XD!, bueno pero sirve para ver lo que no tenemos que hacer… si leíste y recuerdas lo que dijimos en los apartados anteriores, el parallax le da distintos valores de delta a cada píxel del sprite, eso ocasiona que si los players no están en el píxel que hace que el delta se mueva un píxel por unidad de cámara, los personajes se deslizaran sobre el suelo.

Ahora seguramente te preguntaras ¿Cómo diablos voy a saber que píxel contiene un delta 1,1 o 2,2?

Bueno para eso vamos a usar formulas matemáticas que dejen el delta correcto en los pies de los personajes.

• Como nota, he leído varios comentarios que dicen que el parallax debe ser forzosamente calculado con formulas matemáticas, lo cual también es falso, el parallax puede ser calculado a simple vista y con valores random, en mugen todo es prueba y error, y esta no es la excepción.

• Otra nota es que el “evitar que los chars se deslicen sobre el suelo” solo aplica cuando programemos el suelo con parallax, por obvias razones. :P

Y bueno dejemos de aburrirnos con teoría y pasemos a lo práctico, a programar el parallax… 

[Darek]

4.- ¿Programando el parallax?

Primero les voy a mostrar como programar un parallax con Xscale, después con Width, aunque en realidad ambos son casi iguales. Toma nota que las siguientes formulas son para escenarios LowRes, para escenarios HighRes se usan pequeñas variaciones que aclarare mas adelante…

Antes de proseguir, es recomendable que tu sprite este recortado y coloques tu sprite de forma centrada (sobre todo en el eje X) en tu SFF, asi te evitaras un dolor de cabeza cuando tengas que reacomodarlo con el parámetro Start, ya que simplemente lo puedes dejar en 0, pues el sprite esta centrado en el sff. Esto lo puedes lograr usando el botón centrar en Fighter Factory.

Ok sigamos con el tutorial…
Usando Xscale:

Si recuerdas Xscale esta compuesto por dos parámetros:

• Xscale se compone de dos valores, el primero es el multiplicador de la base menor del sprite, el segundo parámetro es el multiplicador de la base mayor del sprite. Esto significa que estos parámetros se van multiplicar por el delta que le demos al sprite….

Por lo general el primer valor debe ser menor que el segundo, esto para que de el efecto de que la base mayor se mueve mas rápido que la menor.

El primer valor casi siempre se deja en 1, ya que eso equivale al delta en X que estamos usando (1 x # = #), dejando asi el campo libre para que solo nos preocupemos por calcular el segundo valor, ósea el movimiento de la base mayor. Entonces tenemos que…

Xscale=primer valor (multiplicador del techo/base menor), segundo valor (multiplicador del fondo/base mayor).
Xscale= 1, X

Usamos 1 por lo que ya aclaramos en el párrafo anterior, ahora solo nos resta calcular “X”, para eso vamos a usar la formula de VIB, que nos dice que…

x = ((1-d)*B/A+1)/d

Donde:
X= segundo valor que queremos encontrar
1= es una constante
D= delta que estas usando en tu sprite
A= Parte del sprite que esta por encima de los pies del personaje
B= Parte del sprite que esta por debajo de los pies del personaje
H= Solo como referencia es altura del sprite, A+B= H

Para que queden más claros estos últimos valores, veamos una imagen.

Ahora vamos a sustituir los valores en la formula…

Obteniendo el Delta...

Primero vamos poner los deltas, el que nos importa en este caso es el delta en X, lo recomendable es que uses un delta menor a 1 en escenarios Lowres y un delta menor 2 pero mayor a 1 en Hires, resumiendo:

Lowres= Delta menor a 1.
Hires= Delta menor a 2, pero mayor a 1.

Si vas a crear un stage sacado de un juego, deberías obtener el delta del sprite en el juego, si es original puedes optar por inventarlos.

Pero recuerda que tú eres el creador, si quieres probar con otros valores, adelante.

Para este caso, supongamos que tenemos un valor delta de 0.7

Bueno, con esto ya tenemos el valor de d, ahora vamos a sacar los demás.

Obteniendo el valor de B...

Antes fijate en esta imagen, revisa los valores y entiende el porque de ellos, despues continua leyendo...

Primero sacamos “B”, esto lo hacemos con el zoffset, en la imagen el escenario usa un zoffset de 215, con eso y sabiendo que la altura de la pantalla es como máximo 240, podemos obtener “B”

B= Altura de la pantalla – Zoffset
B= 240-215
B=25

Obteniendo el valor de A...

Ahora saquemos A, para eso vamos a usar el zoffset que existe en el límite superior del sprite del suelo. Esto lo podemos obtener al jugar con el valor del zoffset, cámbialo hasta que logres que el char se coloque en el limite superior del sprite… es recomendable usar un char con pie plano para esta tarea, KFM es una buena opción. No te olvides de regresar el zoffset a su valor correcto al finalizar.

Como vemos en la imagen en ese nivel el zoffset es de 165, luego entonces con eso podemos sacar A, pero primero necesitamos sacar H, (recuerda que H=A+B)

H= Altura de la pantalla – Zoffset en el limite superior del sprite
H= 240 – 165
H= 75

Luego entonces…

H= B+A
75=25+A
A= 75-25
A=50

Con eso ya completamos todos los valores que necesitamos para nuestra ocasión asi que vamos a sustituir..

D= 0.7
B= 25
A= 50

x = ((1-d)*B/A+1)/d
x = ((1-0.7)*25/50+1)/0.7
x= 1.6428571428571428571428571428571

Una forma fácil de obtener el resultado, es pegar la ecuación en la calculadora de windows, o lo puedes hacer manual si asi lo deseas. :P

Y con eso ya obtuvimos el valor de X, que remplazando en nuestro código quedaría asi…

[BG my_parallax_element]
type = parallax
spriteno = 10, 0
delta=0.7,1
xscale = 1.6428571428571428571428571428571

Si hiciste todo correctamente hasta ahora, veras que tu parallax esta bien programado y los personajes no se deslizaran.
Usando Width:

Para width es el mismo procedimiento que xscale, las únicas diferencias es que en ves de usar 1 como primer valor, usamos el ancho del sprite, y para X, el resultado que obtuvimos en la ecuación, lo multiplicamos por el ancho del sprite, osea su formula es la siguiente…

x = (ancho del sprite) por ((1-d)*B/A+1)/d

Lo cual usando el ejemplo de xscale, seria:

X= 1600 x 1.6428571428571428571428571428571
-El sprite que mostre anteriormente tiene un ancho de 1600pixeles, lo puedes ver en la imagen que muestra Fighter Factory.

X= 2628.5714285714285714285714285714

Y el codigo quedaria:

[BG my_parallax_element]
type = parallax
spriteno = 10, 0
delta=0.7,1
width= ancho del sprite, X

osea

[BG my_parallax_element]
type = parallax
spriteno = 10, 0
delta=0.7,1
width= 1600, 2628.5714285714285714285714285714

Ese seria el valor exacto, y al igual que xscale, si hiciste todo correctamente el parallax estará bien programado y no se deslizaran los personajes.

Con esto llegamos al final de la programación del parallax, ahora veremos como podemos variar la formula de acuerdo a cada situación en especifico.

[Darek]

5.- Variaciones en el parallax

Si es para un escenario Lowres (Winmugen)
Lee el apartado numero 4 que esta arriba de este post.

Si es para un escenario Hires (Winmugen)

El procedimiento es el mismo solo cambia lo siguiente:

• La formula correcta es:

Para Xscale:
x=((2-d)*B/A+2)/d

Para Width:
X= ancho del sprite en pixeles * ((2-d)*B/A+2)/d
 
• En ambos casos, “A” y “B” deben ser colocados al doble, es decir si A te da un valor de 20, pones 40. Lo mismo aplica para B.

• La constante cambia, en vez de ser 1, ahora es 2.

• El delta debería ser mayor a 1, pero menor a 2.

Si es un escenario LR exclusivo de Mugen 1.0

• Debes tener en cuenta la altura de la pantalla, ya que Mugen 1.0 maneja una altura de 480, a diferencia de los 240 de Winmugen.

• El zoffset es el doble de Winmugen

Si es un escenario HR exclusivo de Mugen 1.0 (No estas usando el Hires=1)

• Debes tener en cuenta la altura de la pantalla, ya que Mugen 1.0 maneja una altura de 480, a diferencia de los 240 de Winmugen.

• El zoffset es el doble de Winmugen

• El delta debe ser igual que un escenario LR, menor a 1.

*Un escenario que use la linea Hires=1 trabaja de la misma forma en Winmugen y Mugen 1.0. Solo sino incluyes esa línea, deberás variar los valores.

[Darek]

Y bueno después de 5 horas de redacción y 11 paginas de Word  , llegamos al final de este extenso tutorial, espero que les sea útil y esto aclare las múltiples dudas que existen detrás del parallax, asi mismo fomente mejores creaciones en el ámbito Mugen.

Si tienen dudas o comentarios con el tema o el tutorial, pueden preguntar aquí mismo o en la zona de “Problemas y dudas”
http://www.mugenimperiolatino.com/index.php?board=12.0

Btw, ya no lo volvi a leer porque estoy cansado de redactar, asi que si hay alguna falla en la redacción avisen para que sea corregido. :P

PD. Después les hablare de formas avanzadas del parallax, parallax invertido y parallax animado.

Saludos y hasta la próxima!! 

PD2. Abro el tema, lamento bloquearlo antes, pero necesitaba que los post fueran consecutivos. XD

Atte. Darek

[Kain09]

Me has dejado sin palabras.
Y lo mas increíble es que si entendí varios puntos que antes nomas no.
Y pues como siempre, se agradece toda esta información. 

[Dorgol]

Buen Tutorial viejo! con esto acabo de pulir mis conocimientos sobre el famoso parallax!!!



 

[rockman_zero]

Ya lo iba entendiendo, explicacion y toeria hasta que:

x = ((1-d)*B/A+1)/d
x = ((1-0.7)*50/25+1)/0.7
x= 2.2857142857142857142857142857143

ZAZ!!, como odio las matematicas...
Bueno, voy a hacer el intento.

[Darek]

Te falto leer la parte que le sigue:

Con eso ya completamos todos los valores que necesitamos para nuestra ocasión asi que vamos a sustituir..

D= 0.7
A= 25
B= 50

x = ((1-d)*B/A+1)/d
x = ((1-0.7)*50/25+1)/0.7
x= 2.2857142857142857142857142857143

Una forma fácil de obtener el resultado, es pegar la ecuación en la calculadora de windows, o lo puedes hacer manual si asi lo deseas. :P