El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta lección aprenderás qué son los grupos de sprites en Phaser, cómo crearlos, gestionarlos y por qué son fundamentales para organizar y optimizar tus juegos. También verás ejemplos prácticos y realizarás ejercicios para afianzar el conocimiento.

¿Qué es un Grupo de Sprites?

Un grupo de sprites es una colección de objetos (sprites) que puedes manipular y gestionar de manera conjunta. Los grupos permiten:

Organizar sprites relacionados (por ejemplo, enemigos, balas, monedas).
Aplicar acciones o propiedades a todos los miembros del grupo fácilmente.
Optimizar el rendimiento al manejar grandes cantidades de objetos.
Facilitar la detección de colisiones y la gestión de lógica de juego.

Tipos de Grupos en Phaser

Phaser ofrece varios tipos de grupos, cada uno con características específicas:

Tipo de Grupo	Descripción	Uso Común
`Phaser.GameObjects.Group`	Grupo genérico de objetos. No tiene física por defecto.	Agrupar sprites, UI, etc.
`Phaser.Physics.Arcade.Group`	Grupo con soporte para física Arcade. Permite colisiones y movimiento físico.	Enemigos, balas, objetos físicos
`Phaser.Physics.Arcade.StaticGroup`	Grupo de objetos estáticos con física. No se mueven, pero detectan colisiones.	Plataformas, paredes

Creando un Grupo de Sprites

Ejemplo Básico: Crear un Grupo Genérico

// Crear un grupo vacío
const stars = this.add.group();

Ejemplo: Crear un Grupo con Sprites Iniciales

// Crear un grupo con 10 estrellas
const stars = this.add.group({
    key: 'star',         // clave de la imagen cargada
    repeat: 9,           // crea 10 (1 + 9) sprites
    setXY: { x: 12, y: 0, stepX: 70 }
});

Explicación:

key: nombre de la imagen cargada previamente.
repeat: cuántos sprites adicionales crear (además del primero).
setXY: posición inicial y desplazamiento entre sprites.

Ejemplo: Grupo con Física

// Crear un grupo con física Arcade
const enemies = this.physics.add.group({
    key: 'enemy',
    repeat: 4,
    setXY: { x: 100, y: 100, stepX: 120 }
});

Añadiendo y Eliminando Sprites en un Grupo

Añadir un Sprite Existente

const coin = this.add.sprite(200, 150, 'coin');
stars.add(coin);

Eliminar un Sprite del Grupo

stars.remove(coin, true, true); // Elimina y destruye el sprite

Iterando sobre los Sprites de un Grupo

Puedes recorrer todos los miembros de un grupo para aplicar acciones:

stars.children.iterate(function (child) {
    child.setTint(0xff0000); // Cambia el color de todos los sprites a rojo
});

Ejemplo Práctico: Crear y Gestionar un Grupo de Enemigos

class MyScene extends Phaser.Scene {
    preload() {
        this.load.image('enemy', 'assets/enemy.png');
    }

    create() {
        // Crear un grupo de enemigos con física
        this.enemies = this.physics.add.group({
            key: 'enemy',
            repeat: 4,
            setXY: { x: 100, y: 100, stepX: 120 }
        });

        // Hacer que todos los enemigos reboten
        this.enemies.children.iterate(function (enemy) {
            enemy.setBounce(1);
            enemy.setCollideWorldBounds(true);
            enemy.setVelocity(Phaser.Math.Between(-200, 200), 20);
        });
    }
}

Explicación:

Se cargan 5 enemigos.
Cada enemigo rebota y se mueve con una velocidad aleatoria.

Ejercicio Práctico

Objetivo:
Crea un grupo de monedas que aparezcan en diferentes posiciones y haz que todas cambien de color cuando el jugador presione la barra espaciadora.

Instrucciones

Carga la imagen de una moneda.
Crea un grupo de 5 monedas en posiciones diferentes.
Detecta la pulsación de la barra espaciadora.
Cambia el color de todas las monedas cuando se presione la barra.

Solución

class CoinScene extends Phaser.Scene {
    preload() {
        this.load.image('coin', 'assets/coin.png');
    }

    create() {
        // Crear grupo de monedas
        this.coins = this.add.group({
            key: 'coin',
            repeat: 4,
            setXY: { x: 100, y: 200, stepX: 100 }
        });

        // Detectar barra espaciadora
        this.input.keyboard.on('keydown-SPACE', () => {
            this.coins.children.iterate(function (coin) {
                coin.setTint(0xffff00); // Cambia a color amarillo
            });
        });
    }
}

Errores comunes y consejos:

Olvidar cargar la imagen: Asegúrate de que la imagen esté en la carpeta correcta y el nombre coincida.
No usar children.iterate: Para aplicar cambios a todos los miembros, usa siempre children.iterate.
Confundir add.group con physics.add.group: Usa el tipo de grupo adecuado según si necesitas física o no.

Resumen

Los grupos de sprites permiten organizar y manipular colecciones de objetos de manera eficiente.
Existen diferentes tipos de grupos según el uso (con o sin física).
Puedes crear, añadir, eliminar y recorrer sprites dentro de un grupo fácilmente.
Los grupos son esenciales para manejar múltiples objetos similares, como enemigos, monedas o balas.

¡Ahora estás listo para gestionar grandes cantidades de sprites en tus juegos con Phaser!
En la próxima lección aprenderás sobre física e interactividad, donde los grupos serán aún más útiles.

Grupos de Sprites y Gestión

¿Qué es un Grupo de Sprites?

Tipos de Grupos en Phaser

Creando un Grupo de Sprites

Ejemplo Básico: Crear un Grupo Genérico

Ejemplo: Crear un Grupo con Sprites Iniciales

Ejemplo: Grupo con Física

Añadiendo y Eliminando Sprites en un Grupo

Añadir un Sprite Existente

Eliminar un Sprite del Grupo

Iterando sobre los Sprites de un Grupo

Ejemplo Práctico: Crear y Gestionar un Grupo de Enemigos

Ejercicio Práctico

Instrucciones

Solución

Resumen

Phaser - Desarrollo de Juegos con JavaScript

Módulo 1: Introducción al Desarrollo de Juegos y Phaser

Módulo 2: Fundamentos de Phaser

Módulo 3: Sprites y Animación

Módulo 4: Física e Interactividad en el Juego

Módulo 5: Mundo del Juego y Cámara

Módulo 6: Audio e Interfaz de Usuario

Módulo 7: Arquitectura del Juego y Gestión de Estados

Módulo 8: Características Avanzadas de Jugabilidad

Módulo 9: Despliegue y Optimización

Módulo 10: Proyecto Final