PictoBlox: 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: Control por Teclado
PictoBlox: Learn coding and program robots online
💻Descripción
💡 En este ejercicio vamos a aprender a diseñar una aplicación con lo siguiente:
- Al pulsar las teclas de flechas izquierda y derecha el sprite animado se desplaza a izquierda y derecha respectivamente
- Al salir del escenario por la derecha aparece por la izquierda y viceversa
💻Diseño
🆘 Recursos
💡 Añadimos las imagen coco0.png en un nuevo Sprite (las demás imágenes de coco deben importarse al disfraz del sprite coco0) y la imagen de bg.jpg en nuestro escenario
💾 Clic aquí para descargar todas las imágenes

💡 Tu diseño tendría que verse más o menos así:

💻Programación

🆘 Que no se gire tu Sprite
💡 Recuerda activar la opción izquierda/derecha para que tu personaje no se gire

⚔️Desafío 01: Demuestra lo aprendido
💰Recompensa: 30 Monedas de Oro – 15 Cristales de Experiencia
🧠 Utiliza la información del ejercicio «Control por teclado» para crear una animación similar, solo que esta vez controlaras el movimiento de Doraemon con la tecla «A» para ir a la izquierda y la tecla «D» para ir a la derecha.
🆘 Pista: Solo reemplaza el evento de «al presionar la tecla derecha» por «al presionar la tecla d» para que tu Sprite se mueva a la derecha y de forma similar reemplaza «al presionar la tecla izquierda» por «al presionar la tecla a» para que tu Sprite se mueva a la izquierda.
🆘 Recursos: Añadimos las imagen doraemon0.png en un nuevo Sprite y reducimos su tamaño a 50.

Las demás imágenes de doraemon deben importarse al disfraz del sprite doraemon0.
💾 Clic aquí para descargar todas las imágenes

💡 Tu aplicación tendría que verse más o menos así:

📋 Ejemplo N° 2: Enviar y Recibir Mensajes
🧠 PictoBlox utiliza un sistema de envío y recepción de mensajes para sincronizar las acciones entre distintos sprites.
💡 Es decir: cuando en la secuencia de programación de un sprite situamos el envío de un mensaje con un identificador, entonces en otro personaje situado en el escenario podemos situar un bloque receptor que recoge ese mensaje y eso permite disparar una secuencia de acciones.

💻Descripción
💡 En este ejercicio se propone crear una animación con lo siguiente:
- Al llevar el puntero del ratón en los botones izquierda y derecha el sprite animado se desplaza a izquierda y derecha respectivamente
- Al salir del escenario por la derecha aparece por la izquierda y viceversa
💻Diseño
🆘 Recursos
💡 Añadimos las imagen coco0.png en un nuevo Sprite (las demás imágenes de coco deben importarse al disfraz del sprite coco0), después añadimos la imagen de buttonGo,png dos veces como dos Sprites diferentes (izquierda – derecha) y por último la imagen de bg.jpg en nuestro escenario
💾 Clic aquí para descargar todas las imágenes

💡 Tu diseño tendría que verse más o menos así:

💻Programación
🆘 Código Sprite Right:

🆘 Código Sprite Left:

🆘 Código Sprite Principal:

⚔️Desafío 02: Demuestra lo aprendido
💰Recompensa: 30 Monedas de Oro – 15 Cristales de Experiencia
🧠 Utiliza la información del ejercicio «Enviar y recibir mensajes» para crear una animación similar, solo que esta vez controlaras el movimiento de un Robot que pueda moverse de izquierda a derecha al colocar el mouse sobre sus respectivas flechas.
🆘 Pista: La programación es similar al ejercicio anterior. Para buscar al personaje debes escribir: robot y debes reducir su tamaño a 80 y para buscar el fondo debes escribir: stars.
💾 Clic aquí para descargar las imágenes de las flechas izquierda y derecha

💡 Tu aplicación tendría que verse más o menos así:

¡Estamos listos, a construir!
💰Recompensa: 10 Monedas de Oro – 5 Cristales de Experiencia
✅ En el siguiente enlace podrás ingresar a PictoBlox:
PictoBlox: Learn coding and program robots online
➡️ RETO 01: Cohete en el Espacio
💻Descripción
💡 En este reto debes crear una animación donde controles el movimiento de un cohete en el espacio. Las principales características de esta animación son:
- Nuestro cohete podrá moverse arriba, abajo, izquierda, derecha además de que tendrá su animación de vuelo
- Controlar el movimiento del cohete llevando el puntero del ratón sobre los botones arriba, abajo, izquierda y derecha
💻Recursos
💾 Clic aquí para descargar todas las imágenes de las flechas

💻Diseño
🆘 Pista: Para buscar al personaje debes escribir: rocket y debes reducir su tamaño a 50 y para buscar el fondo debes escribir: stars.
💡 Tu diseño tendría que verse más o menos así:

💻Programación
🆘 Código Sprite izquierda:

🆘 Código Sprite derecha:

🆘 Código Sprite abajo:

🆘 Código Sprite arriba:

🆘 Código Sprite Rocket:

➡️ RETO 02: Juego de Pong (Colisiones)
💻Descripción
🧠 La detección de colisiones es un tarea habitual en la programación de videojuegos. Consiste en comprobar si dos o más objetos se llegan a tocar, la detección de una colisión se utiliza para desencadenar acciones: explosiones o desapariciones de objetos, incremento de puntos, finalización de partida, etc.
💡 En este reto diseñaremos el juego clásico «Pong». El usuario podrá mover una barra usando las teclas de flechas (izquierda y derecha) para golpear una pelota de tenis que rebota contra las paredes. Si la pelota cae por debajo de la línea de la pala el juego se detendrá porque el usuario ha perdido. La animación tiene algunas características interesantes:
- Se utiliza las teclas de flechas izquierda y derecha para mover la pala.
- La pelota rebota contra las paredes y contra la pala siguiendo una trayectoria real.
- El contador de puntos se incrementa en una unidad en cada golpe contra la pala.
- Suena un audio cuando la pleota golpea la pala.
- El juego se detiene cuando la bola cae sobre la barra roja inferior.
💻Recursos
💾 Clic aquí para descargar todos los archivos de pong.zip

💻Diseño
🆘 Sube desde tu ordenador las imágenes ball.png, base.gif y paddle.gif para crear sobre el escenario los respectivos sprites

🆘 En la pestaña Sonidos del sprite ball sube los audios water_drop y error.

🆘 Para este ejercicio debes crear 1 variable:

💡 Tu diseño tendría que verse más o menos así:

💻Programación
🆘 Código Sprite padle:

🆘 Código Sprite ball:

Recuerda
Los sprites representan un personaje u objeto y se utilizan para que se pueda mover de forma independiente con respecto al fondo.
