3.9 - Invitado: BomberMan con Edgar Llorente-Xnergic TCM

https://www.youtube.com/watch?v=oowzlaMMsCM&list=PL5tA44GpyFntFHtHd6Zxb2xQZpxwOfeu3&index=26

Creación de un juego tipo Bomberman con mapa de tiles

🎯 Objetivo de este tutorial

Vamos a explorar cómo se construye un juego al estilo Bomberman, entendiendo conceptos clave como:

Mapa de tiles: representar un escenario con pequeñas imágenes repetidas.
Listas como mapa: usar números para identificar cada tipo de tile.
Generación del mapa con clones: crear el escenario a partir de la lista.
Animaciones de personajes: según la dirección de movimiento.
Animación de bombas y explosiones: secuencia de clones con diferentes disfraces.
Detección de colisiones: impedir el movimiento a través de paredes.

🗺️ Paso 1: Concepto de mapa de tiles

En lugar de dibujar un fondo grande, dividimos el escenario en pequeñas celdas (tiles) de igual tamaño (por ejemplo, 16×16 o 32×32 píxeles). Cada tile es un sprite que se repite.

Ventajas:

Ahorro de memoria (un solo sprite reutilizado).
Fácil de modificar el mapa (cambias la lista, no el dibujo).
Permite colisiones precisas.

Preparación:

Dibuja varios disfraces para el tile: suelo, pared, caja, etc.
Asígnale un número a cada disfraz (ej: 0 = suelo, 1 = pared, 2 = caja).

📋 Paso 2: Crear la lista del mapa

La lista mapa contiene un número por cada tile, en orden de filas (de izquierda a derecha y de arriba a abajo).

Ejemplo de lista para un mapa de 15×15 tiles:

Posición	Valor	Significado
1	5	Tile con disfraz 5 (p.ej. pared)
2	0	Suelo
3	2	Caja destructible
...	...	...

Cómo crear la lista en Scratch:

Ve a Variables y crea una lista llamada mapa.
Rellénala manualmente o con un código que lea un diseño.

💡 En un juego real, esta lista se genera a partir de un nivel diseñado previamente.

🏗️ Paso 3: Generar el mapa con clones

Usaremos un único sprite (el tile) que se clonará una vez por cada celda del mapa. Cada clon se posiciona según su índice y cambia de disfraz según el valor de la lista.

Código del sprite "Tile" (generador del mapa):

al presionar bandera
borrar todos los clones
fijar [tamTile] a [32]  // tamaño de cada tile en píxeles
fijar [columnas] a [15]
fijar [filas] a [15]
fijar [indice] a [1]
fijar [inicioX] a ((-240) + (tamTile / 2))
fijar [inicioY] a ((-180) + (tamTile / 2))

repetir (filas) veces
    repetir (columnas) veces
        crear clon de [este objeto]
        cambiar [indice] por (1)
    fin
fin

Código del clon (al comenzar como clon):

al comenzar como clon
// Calcular posición según su número de clon (indice)
fijar [fila] a (redondear ((indice - 1) / columnas))
fijar [columna] a ((indice - 1) - (fila * columnas))
ir a x: (inicioX + (columna * tamTile)) y: (inicioY - (fila * tamTile))

// Cambiar disfraz según el valor en la lista
cambiar disfraz a (elemento (indice) de [mapa])

Nota: La lista mapa debe tener tantos elementos como columnas * filas.

🧍 Paso 4: Animación del personaje (orientación y pasos)

El personaje debe cambiar de disfraz según la dirección en la que se mueve, y alternar entre varios disfraces para simular la animación de caminar.

Organización de disfraces:

Agrupa los disfraces por orientación:
- Norte (arriba): disfraces 1, 2, 3
- Sur (abajo): disfraces 4, 5, 6
- Este (derecha): disfraces 7, 8, 9
- Oeste (izquierda): disfraces 10, 11, 12

Fórmula para elegir el disfraz:

// Obtener el número de disfraz base según dirección
// Usamos el cronómetro para alternar la animación
fijar [tiempoAnim] a ((cronómetro) * 4)  // multiplicamos para que vaya más rápido
fijar [pasoAnim] a ((tiempoAnim) mod (3)) + 1  // 1, 2 o 3

// Calcular el disfraz final
// Por ejemplo, para dirección Norte (base 0):
fijar [disfrazActual] a (base + pasoAnim - 1)  // ajustar según tus disfraces

Ejemplo concreto (dirección norte, base=1):

Base para norte = 1.
pasoAnim = 1, 2, 3 según el cronómetro.
Disfraz = 1, 2, 3 (alternando).

Código en el personaje (cada ciclo):

por siempre
    // Según la tecla presionada, fijar dirección
    si <tecla [flecha arriba] presionada?> entonces
        fijar [direccion] a [1]   // norte
        // mover hacia arriba (si no hay colisión)
        ...
    fin
    // ... similar para abajo, izquierda, derecha

    // Calcular el disfraz
    fijar [paso] a (((cronómetro) * 4) mod (3) + 1)
    fijar [disfraz] a (((direccion - 1) * 3) + paso)
    cambiar disfraz a (disfraz)

💥 Paso 5: Animación de la bomba (secuencia de clones)

La bomba tiene tres fases:

Bomba inactiva (parpadea).
Explosión (fuego que se expande).
Fin de explosión (desaparece).

Para lograrlo, usamos una cadena de clones:

La bomba principal crea un clon de la explosión al terminar su animación.
La explosión crea un clon de la segunda fase, y así sucesivamente.

Código de la bomba (objeto principal):

al hacer clic en [espacio] o al presionar tecla
// Colocar bomba en la posición actual del personaje
crear clon de [Bomba]

Código del clon de bomba:

al comenzar como clon
// Mostrar animación de bomba (cambiar disfraz cada 0.1 seg)
repetir [5] veces
    siguiente disfraz
    esperar [0.1] segundos
fin
// Al terminar, crear clon de explosión
crear clon de [Explosion]
eliminar este clon

Código del clon de explosión (tres fases):

al comenzar como clon
// Fase 1: fuego pequeño
cambiar disfraz a [explosion1]
esperar [0.2] segundos
// Fase 2: fuego grande
cambiar disfraz a [explosion2]
esperar [0.2] segundos
// Fase 3: fuego que se apaga
cambiar disfraz a [explosion3]
esperar [0.2] segundos
// Detectar colisiones con cajas o enemigos
... 
eliminar este clon

🧱 Paso 6: Detección de colisiones con el mapa

Para evitar que el personaje atraviese paredes, debemos comprobar si la celda a la que quiere moverse es un tile sólido (valor > 0).

Algoritmo:

Calcular la posición futura (X o Y) según la tecla presionada.
Convertir esa posición a coordenadas de tile (fila y columna).
Obtener el valor de la lista mapa en esa posición.
Si el valor es 0 (suelo), permitir el movimiento; si no, bloquearlo.

Código para el movimiento a la izquierda:

al presionar tecla [flecha izquierda]
// Calcular la nueva posición X
fijar [nuevaX] a ((posición x) - velocidad)
// Convertir a columna
fijar [columna] a (redondear ((nuevaX - inicioX) / tamTile))
fijar [fila] a (redondear ((posición y - inicioY) / tamTile) * -1) // ajustar según orientación
// Calcular índice en la lista
fijar [indice] a ((fila * columnas) + columna + 1)
// Comprobar si es suelo
si <(elemento (indice) de [mapa]) = [0]> entonces
    cambiar x por (-velocidad)
fin

Importante: Ajusta la conversión de coordenadas según cómo hayas colocado los tiles (si el origen está arriba a la izquierda o en el centro).

🧪 Paso 7: Probar y depurar

Presiona la bandera verde.
El mapa debe aparecer pintado con los clones.
El personaje debe moverse con las flechas y animarse según la dirección.
Al presionar espacio, se debe colocar una bomba que explote tras unos segundos.
La explosión debe eliminar cajas o enemigos (si se ha implementado).

Errores comunes:

El mapa no se pinta bien: comprueba que la lista tenga la longitud correcta y que los índices coincidan.
El personaje atraviesa paredes: revisa la conversión de coordenadas a índice.
La explosión no aparece: verifica que los clones se crean en el orden correcto.

📚 Resumen del tutorial 3.8

Concepto	Implementación
Mapa de tiles	Lista de números que representan el escenario, donde cada número es un disfraz.
Generación del mapa	Usar clones para pintar cada tile en su posición calculada a partir de la lista.
Animación del personaje	Seleccionar disfraz según dirección y cronómetro para simular pasos.
Animación de bomba	Secuencia de clones que pasan por fases (bomba → explosión → fin).
Colisiones	Convertir posición del personaje a índice de la lista y comprobar si el tile es sólido.

🧠 Ampliaciones

Enemigos IA: Añade enemigos que se muevan aleatoriamente y mueran al ser alcanzados por la explosión.
Power-ups: Mejoras como aumentar el alcance de la bomba o la velocidad.
Múltiples niveles: Cambia la lista del mapa para tener diferentes escenarios.
Sonidos: Añade efectos al colocar bombas y al explotar.

Con este tutorial, has entendido cómo estructurar un juego complejo en Scratch usando técnicas de programación avanzadas como listas, clones y detección de colisiones. ¡Este es el nivel de maestría que te permite crear cualquier juego que imagines

Buscar este blog

sotelo-SCRATCH