Ir al contenido principal

La mirada de Cori #4: Efecto Parallax

Bueno, acá estoy, nuevamente, con todos los ánimos para compartirte unos trucos, que utilicé, en esta entrada de mi blog. Hoy te explicaré para qué sirve la fórmula de la ecuación de la imagen 1.

Imagen 1: Fórmula paralaje.

Debes saber que en el efecto parallax o paralaje en español los objetos lejanos parecen moverse más lentamente que los objetos cercanos. En Scratch esto lo lograré con los bloques que se muestran en la imagen 1. Mira el vídeo Efecto paralaje o parallax para ver lo realizado.

Si deseo que el objeto se mueva, lo puedo realizar con el objeto sumar a x (en español latinoamericano es cambiar x, en esta entrada estoy usando español-España debido a un Bug dentro de Scratch en el momento de redactar esta publicación). Mira la imagen 2. Si colocase eso bloque en un bucle o repetición, haría que el objeto se moviera hacia afuera del escenario como en la imagen 3.

Imagen 2: Desplaza la imagen.
Imagen 3: Fondo saliendo fuera del escenario.

Necesito que el fondo tenga un tope, que no se mueva hasta salirse del escenario. Esto lo logré con una resta. Reste la posición del fondo. Si te interesa las matemáticas, estoy usando la relación: posiciónFutura = posiciónActualX + moverDistancia, donde mover distancia representa representa el bloque verde de la imagen 4. Para tener un tope solo hay que restarle la posición actual, así tener una distancia constante. Ahora ya me quedé como en la imagen 5

Imagen 4: Tope de 100.
Imagen 5: Fondo con un límite.

Ya logré colocar un tope al desplazamiento, ahora tengo que hacer que el fondo sea movible, pues es sencillo, en lugar del número 100, coloco el bloque de posición del ratón...¡listo,ya está!. 

Imagen 6: Distancia que depende de la posición del ratón.

Si bien ya tengo movimiento, estos son muy toscos. Para afinarlo, lo haré en partes más pequeñas, es decir, con algunas divisiones. Esto te lo muestro en la imagen 1.

Imagen 7: Paralaje de manera vertical.

No olvides hacer lo mismo con la orientación vertical. Te dejo la imagen 7.
Ahora sí, meta cumplida. Nos vemos en el siguiente proyecto. No olvides suscribirte a mi canal de youtube.

Comentarios