Imagen con transición

Hola @hugoruscitti quería saber si uno puede en pilas hacer que pase unas imágenes como que fuera una diapositiva. Lo quisier saber para hacerle una intro a mi juego pero que se pase imágenes ya que pesan menos que un video

Hola @VictorRico!, sí se puede hacer.

Te paso un ejemplo de una presentación hecha con 3 imágenes y más abajo te describo cómo la realicé:

Lo primero que hice fue crear 3 actores con las imágenes de la presentación así:

Se podría decir que las imágenes son como las páginas de una diapositiva.

Ahora, para que las animaciones se muestren una detrás de la otra usé animaciones
y la propiedad transparente. Es decir, cuando el juego inicia las imágenes están completamente
transparentes pero mediante animaciones las muestro en pantalla.

Por ejemplo, la primer imagen tiene este código:

class imagen_1 extends Actor {

  iniciar() {
    // hace que la imagen no se vea y esté en el centro de la pantalla.
    this.transparencia = 100;
    this.x = 0;
    this.y = 0;
    
    //muestra la imagen, espera 3 segundos y luego se vuelve a ocultar
    this.animar(Tipo.lineal).mostrar().esperar(3).ocultar();
  }

  actualizar() { }
}

Es decir, la imagen comienza completamente transparente, luego se muestra durante 3 segundos y desaparece.

Así que la segunda imagen se puede mostrar a partir del segundo 3 de iniciado el juego. Para eso la animación la armé colocando una pausa de 3 segundos antes de mostrarse.

Este es el código de la imagen 2:

class imagen_2 extends Actor {

  iniciar() {
    // hace que la imagen no se vea y esté en el centro de la pantalla.
    this.transparencia = 100;
    this.x = 0;
    this.y = 0;

    // espera 3 segundos (hasta que desaparezca la imagen 1) y luego es muestra
    // durante 3 segundos y por último desaparece
    this.animar(Tipo.lineal).esperar(3).mostrar().esperar(3).ocultar();
  }

  actualizar() { }
}

Por último, la tercer imagen es parecida, pero le añadí un efecto de zoom que me parece
que queda bastante bien.

Te paso el código para que lo puedas ver en detalle:

Por cierto, con este tipo de animaciones se pueden hacer muchas intros interesantes. Si
estás con tiempo por ahí podes tomar algunas ideas de las viejas intros de juegos
de nes. Hay varios “trucos” y efectos muy simples para tomar de ahí:

¡Saludos!

2 Likes