Lección 5: Animación Interactiva

Anteriormente, usamos el módulo ultrasónico para hacer que GalaxyRVR evitara obstáculos automáticamente en su camino.

En esta actividad, combinaremos el módulo con un escenario para crear una animación interactiva de un rover recorriendo alegremente la superficie de Marte.

Objetivos de Aprendizaje

  • Aprender a dibujar sprites y editar fondos.

  • Comprender conceptos básicos de programación como los eventos y las estructuras de bucle.

  • Familiarizarse con el entorno de programación de la APP y las operaciones básicas para crear una animación simple que simule un rover marciano.

Agregar Nuevos Sprites

  1. Primero, Conectando la Aplicación a GalaxyRVR.

  2. Elimina cualquier sprite que no necesites.

    ../_images/6_animate_delete.png

  3. En la esquina inferior derecha de la interfaz, toca el botón Elegir un Sprite para ver cuatro opciones.

    ../_images/5_create_sp.png

  4. En pantallas pequeñas, es posible que necesites cambiar a otra pantalla para ver este botón.

    ../_images/5_create_sp0.png

Las cuatro opciones son:

  • Subir Sprite —Cargar un sprite desde tu dispositivo.

  • Sorpresa —Seleccionar un sprite aleatorio de la biblioteca.

  • Pintar —Dibujar tu propio sprite.

  • Elegir un Sprite —Seleccionar de la biblioteca de sprites.

A continuación, usaremos Elegir un Sprite para seleccionar un sprite y Pintar para dibujar uno.

Elegir un Sprite

  1. Toca Elegir un Sprite (ícono de lupa) para abrir la biblioteca de sprites.

    ../_images/5_sp_list.png

  2. Busca y selecciona GalaxyRVR de la biblioteca.

    ../_images/1_choose_galaxyrvr.png

Pintar un Nuevo Sprite

  1. Toca Pintar (ícono de pincel) para crear un nuevo sprite. Dibujaremos un sprite de Marte.

    ../_images/5_create_custom.png

  2. Usa la Herramienta Círculo para dibujar un círculo que represente el planeta.

    ../_images/5_create_custom1.png

  3. Usa la Herramienta Puntero para mover el círculo al centro del lienzo. Este paso es importante porque las coordenadas y movimientos del sprite se basan en su centro.

    ../_images/5_create_custom2.png

  4. Usa la Herramienta Bote de Pintura para rellenar el círculo de rojo.

    ../_images/5_create_custom3.png

  5. Selecciona la Herramienta Pincel, aumenta el tamaño del pincel y agrega textura con un color de relleno adecuado.

    ../_images/5_create_custom_pen.png

  6. Si el color no se ve bien, cambia el color de relleno y usa la Herramienta Bote de Pintura nuevamente.

    ../_images/5_create_custom5.png

  7. Selecciona nuevamente la Herramienta Pincel, establece el tamaño en 2, cambia el color a negro y dibuja cráteres en Marte.

    ../_images/5_create_custom6.png

  8. Usa la Herramienta Bote de Pintura para rellenar los cráteres con un color adecuado.

    ../_images/5_create_custom7.png

  9. Una vez terminado, vuelve a la Interfaz de Código.

    ../_images/5_create_custom8.png

  10. En pantallas pequeñas, haz clic en el ícono para regresar a la Interfaz de Código.

    ../_images/5_create_custom8.1.png

  11. Ahora verás el sprite de Marte en el escenario. No olvides renombrarlo.

    ../_images/5_create_custom9.png

Escenario

  1. Haz clic en Fondos para modificar el fondo. El fondo blanco predeterminado se cambiará para simular un cielo nocturno.

    ../_images/6_jump_backdrop.png

  2. Ingresa a la interfaz de Fondos.

    ../_images/6_jump_backdrop_page.png

  3. Dibuja un rectángulo en el lienzo.

    ../_images/6_jump_rect.png

  4. Usa la Herramienta Bote de Pintura para rellenarlo con un color oscuro.

    ../_images/6_jump_fill.png

  5. Usa la Herramienta Pincel para agregar algunas estrellas.

    ../_images/6_jump_paint.png

Creando la Animación

Ahora que tenemos Marte y GalaxyRVR, y sabemos cómo animar sprites, creemos una animación de GalaxyRVR moviéndose en Marte. Podemos hacer que el sprite parezca moverse rotando Marte en la dirección opuesta, creando el efecto de que GalaxyRVR se desplaza sobre su superficie.

  1. Primero, Conectando la Aplicación a GalaxyRVR.

  2. Ajusta el tamaño y la posición de ambos sprites.

    • Coloca el sprite GalaxyRVR en (0, 0) y posiciona Marte para que GalaxyRVR parezca estar sobre su superficie.

    ../_images/6_jump_place.png

Sprite de Marte

  1. Selecciona el sprite de Marte. Su tarea es rotar en sentido antihorario, creando la ilusión de que GalaxyRVR avanza.

    ../_images/6_ssp_mars.png

  2. Arrastra un bloque de bandera verde. Toda animación comienza con la bandera verde.

    ../_images/6_jump_mar_flag.png

  3. Arrastra un bloque forever para mantener la animación ejecutándose continuamente.

    ../_images/6_jump_mar_forever.png

  4. Arrastra un bloque turn y un bloque wait para hacer que Marte rote continuamente.

    ../_images/6_jump_mar_turn.png

  5. Ahora haz clic en la bandera verde y verás a Marte rotando en sentido antihorario.

Sprite GalaxyRVR

  1. Selecciona el sprite GalaxyRVR. Su tarea es animarse como si se estuviera moviendo, aunque en realidad no se esté desplazando.

    ../_images/6_ssp_rvr.png

  2. Arrastra un bloque de bandera verde. Toda animación comienza con la bandera verde.

    ../_images/6_jump_mar_flag.png

  3. Arrastra un bloque forever para mantener la animación ejecutándose continuamente.

    ../_images/6_jump_mar_forever.png

  4. Arrastra un bloque next costume y un bloque wait para que GalaxyRVR se anime continuamente.

    ../_images/6_jump_mar_next.png

  5. Arrastra un bloque when distance. Esto se activará cuando el módulo ultrasónico detecte un obstáculo (por ejemplo, tu mano).

    ../_images/6_jump_when.png

  6. Arrastra dos bloques glide y cambia el valor y del primero para que el sprite salte hacia arriba y luego baje, creando un efecto de salto.

    ../_images/6_jump_glide.png

  7. El código completo para el sprite GalaxyRVR debería verse así:

    ../_images/6_jump_mar_rvr_all.png

Ahora, haz clic en la bandera verde para iniciar la animación. Simula un obstáculo colocando tu mano frente al módulo ultrasónico, y el sprite GalaxyRVR saltará para evitarlo.