App Inventor: Módulo Intermedio
CLASE 05
Para obtener tu recompensa debes estar registrado en nuestra plataforma y publicar tu trabajo
🧠 ¿Qué aprendo?
- Conocer que es un sprite y como trabajar con animaciones
💡 ¿Qué es un Sprite?
🧠 En el diseño de videojuegos un sprite es un objeto que se sitúa en el escenario y que puede ubicarse y moverse de forma autónoma e independiente del resto. Puede ser un personaje del videojuego, un objeto que se recoge del suelo, un vehículo que se desplaza, etc.
💡 Los personajes de un videojuego suelen ser sprites animados compuestos por varios disfraces. Generalmente las imágenes se obtienen de archivos PNG o GIF de fondo transparente y de peso reducido.
📋 Ejemplo N° 1: Movimiento de bola
App Inventor 2: Learn coding and program apps online
💻Descripción
💡 Se trata de diseñar una pequeña animación donde con tu dedo deslizas una bola para que se mueve rebotando con los bordes de la pantalla. Cuando toques la bola la misma se detendrá.
💻Diseño
💡 Tu diseño tendría que verse más o menos así:
🆘 Propiedades de la pelota
💡 Ajustar el radio y color de la pelota tal como se muestra en la figura:
🆘 Propiedades del lienzo
💡 Ajustar el largo y el ancho del lienzo tal como se muestra en la figura:
🆘 Propiedades del Sonido
💾 Clic aquí para descargar el sonido Noink.mp3
💡 Ajustar las propiedades del sonido tal como muestra en la figura:
💻Programación
⚔️Desafío 01: Demuestra lo aprendido
💰Recompensa: 30 Monedas de Oro – 15 Cristales de Experiencia
🧠 Modificar el ejercicio anterior para detener el movimiento de la pelota con un botón y no así al tocar la pelota.
🆘 Pista: En la programación del botón añade el mismo código que utilizaste antes para detener la pelota al tocarla.
💡 Tu aplicación tendría que verse más o menos así:
📋 Ejemplo N° 2: Movimiento con botones
💻Descripción
💡 Esta aplicación permite mover una bola sobre un lienzo usando 4 botones: arriba, abajo, derecha e izquierda.
💻Diseño
💡 Tu diseño tendría que verse más o menos así:
🆘 Propiedades del lienzo
🆘 Propiedades del contenedor disposición horizontal
🆘 Propiedades de la pelota
🆘 Propiedades del botón left – right
🆘 Propiedades del botón up – down
💻Programación
🆘 Posición en la pantalla, coordenadas X – Y
⚔️Desafío 02: Demuestra lo aprendido
💰Recompensa: 30 Monedas de Oro – 15 Cristales de Experiencia
🧠 Modificar el ejercicio anterior para que en vez de una pelota se mueva un cohete, además de moverse el cohete debe girar a la dirección en la que se está moviendo.
🆘 Pista: En el diseño en vez de la pelota debes añadir el componente spriteImagen y en la propiedad foto colocar la imagen del cohete que se encuentra más abajo. En la programación debes añadir el código para que el cohete gire a la dirección en la que se moverá, por ejemplo si quieres moverte a la derecha la propiedad dirección tendría que valer 0 y si quieres moverte a la izquierda la propiedad dirección tendría que valer 180 (estos valores representan el giro en grados cual si se tuviera un transportador).
💾 Clic aquí para descargar la imagen de rocket.png
💡 Tu aplicación tendría que verse más o menos así:
⬅️ Al presionar IZQUIERDA:
➡️ Al presionar DERECHA:
⬆️ Al presionar ARRIBA:
⬇️ Al presionar ABAJO:
¡Estamos listos, a construir!
💰Recompensa: 10 Monedas de Oro – 5 Cristales de Experiencia
✅ En el siguiente enlace podrás ingresar a tu cuenta de App Inventor:
App Inventor 2: Learn coding and program apps online
➡️ RETO 01: Cohete en Movimiento
🧠 Modificar el Desafío 02 (el ejercicio de arriba) para que el cohete se mueva de manera automática al presionar uno de los botones de dirección, por ejemplo, si presiono una vez hacia arriba el cohete deberá moverse (con una velocidad de 10 por ejemplo) y girar hacia arriba hasta tocar el borde superior. Y así con los demás botones de dirección.
➡️ RETO 02: ¡Pong!
💻Descripción
💡 En este ejercicio vamos a aprender a diseñar nuestro primer videojuego con animaciones:
- Realizaremos el clásico juego del PONG, para controlar una paleta deslizando el dedo sobre nuestra pantalla principal
- Juego que utiliza el lienzo para crear animaciones y colisiones
- Lienzo es una zona de la pantalla donde podemos dibujar, trazar líneas, puntos círculos,… En inglés «Lienzo» es «Canvas»
💻Diseño
💾 Clic aquí para descargar los archivos del juego pong.zip
💡 Tu diseño tendría que verse más o menos así:
💻Programación
Recuerda
Los Sprites representan un personaje u objeto y se utilizan para que se pueda mover de forma independiente con respecto al fondo.