2.2 - Estructuras de interacción básicas y de movimiento
Estructuras de interacción básicas y de movimiento
🎯 Objetivo de este tutorial
Vamos a construir un pequeño modelo de juego para entender:
Cómo moverse por la pantalla usando coordenadas.
Cómo detectar colisiones entre personajes.
Cómo usar mensajes (eventos) para que los objetos se comuniquen y cambien el escenario.
🐱🐚 Paso 1: Preparar los personajes
El Gato (Sprite 1): Es el personaje que viene por defecto al abrir Scratch. Lo dejaremos como está.
El Cangrejo (Sprite 2):
Ve a la biblioteca de objetos (el icono del gato en la esquina inferior derecha) y elige un Cangrejo (
Crab).Lo colocaremos en la pantalla para que haga de "objeto interactivo".
🕹️ Paso 2: Movimiento básico (Primer contacto)
Vamos a darle vida a cada uno con un comportamiento muy característico.
Comportamiento del Cangrejo (dar vueltas):
Al presionar la bandera, el cangrejo debe girar constantemente.
Código:
al presionar bandera por siempre girar 15 grados esperar 0.1 segundos
Esto simula que el cangrejo está "andando en círculos" por la playa.
Comportamiento del Gato (perseguir al ratón):
Al presionar la bandera, el gato debe apuntar siempre hacia el puntero del ratón y moverse hacia él.
Código:
al presionar bandera por siempre apuntar hacia [puntero del ratón] mover 5 pasos
Ahora, si mueves el ratón por la pantalla, el gato lo seguirá como un "perseguidor".
📐 Paso 3: Entendiendo el Sistema de Coordenadas (X e Y)
Scratch usa un sistema de coordenadas cartesianas para colocar a los personajes. Es importante entenderlo para moverlos con precisión:
El centro de la pantalla es el punto
(x: 0, y: 0).Eje X (horizontal):
Hacia la derecha: valores positivos (hasta 240).
Hacia la izquierda: valores negativos (hasta -240).
Eje Y (vertical):
Hacia arriba: valores positivos (hasta 180).
Hacia abajo: valores negativos (hasta -180).
⚠️ A diferencia de otros lenguajes, Scratch coloca el origen en el centro de la pantalla (no en la esquina superior izquierda). Esto facilita mucho el movimiento simétrico.
En el bloque ir a x: ( ) y: ( ) puedes escribir números directamente para teletransportar al personaje a cualquier punto exacto.
📦 Paso 4: Repaso de las categorías de bloques (El cajón de herramientas)
Para entender todo lo que estamos haciendo, repasemos cada grupo de bloques:
| Categoría | Función principal |
|---|---|
| Movimiento | Controlan la posición, dirección y giro (ej: mover, girar, rebotar). |
| Apariencia | Controlan cómo se ve el personaje (ej: mostrar, esconder, decir, efectos de color/tamaño). |
| Sonido | Reproducen efectos o notas musicales. |
| Eventos | Son los "disparadores" del programa (ej: al presionar bandera, al presionar tecla, al recibir mensaje). |
| Control | Son las estructuras lógicas (ej: por siempre, repetir, si... entonces). |
| Sensores | Detectan el entorno (tienen forma de rombo). Ej: ¿tocando color?, ¿tecla presionada?. |
| Operadores | Hacen cálculos matemáticos, lógicos (Y/O/NO) y manejo de texto (concatenar, longitud). También incluyen funciones avanzadas como seno, coseno o raíz cuadrada. |
| Datos (Variables) | Guardan números o textos para usarlos más tarde. |
| Mis Bloques | Permiten crear tus propias funciones personalizadas (programación modular). |
💥 Paso 5: Interacción básica (Tocar y desaparecer)
Ahora vamos a hacer que el gato y el cangrejo interactúen. La idea es que si el gato toca al cangrejo, este desaparezca.
Ve al código del Cangrejo.
Dentro del bucle
por siempreque ya tienes (o añade uno nuevo), coloca un condicionalsi.Usa el sensor
¿tocando...?y selecciona el Sprite1 (el gato).Si está tocando, añade el bloque
esconder.
Código del Cangrejo (ampliado):
al presionar bandera
mostrar // <--- MUY IMPORTANTE: Asegúrate de que esté visible al empezar.
por siempre
girar 15 grados
esperar 0.1 segundos
si <tocando [Sprite1] ?> entonces
esconder💡 Consejo: Siempre que uses
esconder, recuerda poner unmostraral inicio de la bandera. Si no, el personaje empezará invisible y no lo verás nunca.
📨 Paso 6: Comunicación avanzada (Mensajes y cambio de escenario)
Vamos a ir un paso más allá. En lugar de solo desaparecer, vamos a hacer que el cangrejo envíe un mensaje a toda la aplicación. Ese mensaje le dirá al fondo (escenario) que cambie de imagen.
Prepara los fondos:
Ve al Escenario (fondo).
Carga dos fondos distintos, por ejemplo, una Playa (Fondo 1) y una Calle (Fondo 2).
Envía el mensaje desde el Cangrejo:
Cuando el gato toque al cangrejo, además de
esconder, usaremos el bloqueenviar mensaje [...].Creamos un nuevo mensaje llamado, por ejemplo,
siguiente pantalla.
Código del Cangrejo (actualizado):
si <tocando [Sprite1] ?> entonces esconder enviar mensaje [siguiente pantalla]Recibe el mensaje en el Escenario:
Ahora ve al código del Escenario.
Agrega un bloque
al recibir [siguiente pantalla].Dentro, coloca el bloque
cambiar fondo a [Calle](o al siguiente fondo que tengas).
Configuración inicial del fondo:
Para asegurarte de que el juego empieza en la playa, en el escenario usa:
al presionar bandera cambiar fondo a [Playa]
▶️ Paso 7: Prueba final
Presiona la bandera verde.
Verás la Playa. El cangrejo da vueltas y el gato persigue al ratón.
Mueve el ratón para que el gato persiga y toque al cangrejo.
¡Magia!: El cangrejo desaparece y, al mismo tiempo, el fondo cambia de Playa a Calle.
📚 Resumen del tutorial 2.2
| Concepto | Aplicación |
|---|---|
| Movimiento | Usamos mover y girar para dar comportamiento autónomo. |
| Coordenadas | El centro es (0,0). X positiva a la derecha, Y positiva arriba. |
| Interacción | Usamos el sensor tocando para detectar colisiones. |
| Comunicación | Usamos enviar mensaje y al recibir para coordinar varios objetos (el cangrejo habla con el escenario). |
| Apariencia | Usamos mostrar, esconder y cambiar fondo para dar feedback visual. |
Con estas herramientas ya puedes crear escenas interactivas donde los personajes reaccionan entre sí y modifican el mundo que los rodea. ¡En el siguiente apartado profundizaremos en las variables para guardar la puntuación!
Comentarios
Publicar un comentario