El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta sección aprenderás a crear botones interactivos y menús en tus juegos con Phaser. Los botones y menús son elementos esenciales para la navegación, la interacción y la experiencia de usuario en cualquier videojuego. Veremos cómo implementarlos, personalizarlos y gestionar sus eventos.

Conceptos Clave

Botón: Elemento interactivo que responde a la entrada del usuario (clic, toque, etc.).
Menú: Conjunto de botones u opciones que permiten al usuario navegar o seleccionar acciones.
Eventos: Acciones que se disparan cuando el usuario interactúa con los botones (por ejemplo, pointerdown para clics).

Métodos para Crear Botones en Phaser

Phaser permite crear botones de varias formas. Las más comunes son:

Método	Descripción	Nivel de Personalización
Imagen interactiva	Usar una imagen y hacerla interactiva	Alta
Sprite interactivo	Usar un sprite con diferentes frames	Muy alta
Texto interactivo	Usar texto como botón	Media
Botón con UI plugin	Usar plugins externos para botones avanzados	Muy alta

En este tema nos centraremos en los métodos nativos de Phaser (imagen, sprite y texto).

Ejemplo Básico: Botón con Imagen

Paso 1: Cargar la Imagen

// En el método preload de tu escena
this.load.image('boton', 'assets/boton.png');

Paso 2: Crear el Botón y Hacerlo Interactivo

// En el método create de tu escena
const boton = this.add.image(400, 300, 'boton').setInteractive();

// Evento al hacer clic
boton.on('pointerdown', () => {
    console.log('¡Botón presionado!');
});

Explicación:

setInteractive() convierte la imagen en un objeto que puede recibir eventos de entrada.
pointerdown es el evento que se dispara cuando el usuario hace clic o toca el botón.

Ejemplo: Botón con Texto

A veces, un simple texto puede funcionar como botón.

const textoBoton = this.add.text(400, 400, 'Jugar', {
    fontSize: '32px',
    color: '#ffffff',
    backgroundColor: '#007bff',
    padding: { x: 20, y: 10 }
}).setOrigin(0.5).setInteractive();

textoBoton.on('pointerdown', () => {
    console.log('¡Comenzar juego!');
});

Consejo: Puedes cambiar el color de fondo o el estilo cuando el mouse pasa por encima usando los eventos pointerover y pointerout.

Ejemplo: Botón con Sprite y Efecto Visual

Si tienes un sprite con varios frames (por ejemplo, para estados normal y presionado):

// Cargar el sprite en preload
this.load.spritesheet('botonSprite', 'assets/boton_sprite.png', { frameWidth: 200, frameHeight: 80 });

// Crear el botón en create
const botonSprite = this.add.sprite(400, 500, 'botonSprite', 0).setInteractive();

botonSprite.on('pointerover', () => {
    botonSprite.setFrame(1); // Cambia al frame de "hover"
});
botonSprite.on('pointerout', () => {
    botonSprite.setFrame(0); // Vuelve al frame normal
});
botonSprite.on('pointerdown', () => {
    botonSprite.setFrame(2); // Cambia al frame de "presionado"
});
botonSprite.on('pointerup', () => {
    botonSprite.setFrame(1); // Vuelve al frame de "hover"
    console.log('¡Botón sprite presionado!');
});

Creando un Menú Simple

Un menú es simplemente un grupo de botones organizados. Veamos cómo crear un menú principal con tres opciones.

const opciones = ['Jugar', 'Opciones', 'Salir'];
opciones.forEach((texto, i) => {
    const btn = this.add.text(400, 200 + i * 60, texto, {
        fontSize: '32px',
        color: '#fff',
        backgroundColor: '#333',
        padding: { x: 30, y: 10 }
    }).setOrigin(0.5).setInteractive();

    btn.on('pointerover', () => btn.setStyle({ backgroundColor: '#555' }));
    btn.on('pointerout', () => btn.setStyle({ backgroundColor: '#333' }));
    btn.on('pointerdown', () => {
        console.log(`Opción seleccionada: ${texto}`);
        // Aquí puedes cambiar de escena o realizar acciones según la opción
    });
});

Explicación:

Usamos un array para definir las opciones del menú.
Creamos un botón de texto para cada opción y los posicionamos verticalmente.
Añadimos efectos visuales al pasar el mouse y al hacer clic.

Ejercicio Práctico

Ejercicio:
Crea un menú de inicio con dos botones: "Jugar" y "Salir". Cuando el usuario haga clic en "Jugar", muestra un mensaje en consola ("¡Juego iniciado!"). Cuando haga clic en "Salir", muestra ("¡Juego cerrado!").

Solución:

const opciones = ['Jugar', 'Salir'];
opciones.forEach((texto, i) => {
    const btn = this.add.text(400, 300 + i * 60, texto, {
        fontSize: '32px',
        color: '#fff',
        backgroundColor: '#007bff',
        padding: { x: 40, y: 15 }
    }).setOrigin(0.5).setInteractive();

    btn.on('pointerover', () => btn.setStyle({ backgroundColor: '#0056b3' }));
    btn.on('pointerout', () => btn.setStyle({ backgroundColor: '#007bff' }));
    btn.on('pointerdown', () => {
        if (texto === 'Jugar') {
            console.log('¡Juego iniciado!');
        } else if (texto === 'Salir') {
            console.log('¡Juego cerrado!');
        }
    });
});

Errores comunes y consejos:

Olvidar setInteractive(): Sin esto, los objetos no responderán a los eventos.
No centrar el texto: Usa .setOrigin(0.5) para centrar el texto en la posición dada.
No limpiar eventos: Si cambias de escena, asegúrate de limpiar o destruir los botones para evitar fugas de memoria.

Resumen

Aprendiste a crear botones usando imágenes, sprites y texto en Phaser.
Viste cómo organizar botones para formar menús interactivos.
Practicaste la gestión de eventos para responder a la interacción del usuario.
Los menús y botones son fundamentales para la navegación y la experiencia de usuario en tus juegos.

¡Ahora estás listo para crear interfaces interactivas y menús atractivos en tus juegos con Phaser!
En la siguiente sección aprenderás a mostrar puntuaciones y crear HUDs para mejorar aún más la experiencia del jugador.

Creando Botones y Menús

Conceptos Clave

Métodos para Crear Botones en Phaser

Ejemplo Básico: Botón con Imagen

Paso 1: Cargar la Imagen

Paso 2: Crear el Botón y Hacerlo Interactivo

Ejemplo: Botón con Texto

Ejemplo: Botón con Sprite y Efecto Visual

Creando un Menú Simple

Ejercicio Práctico

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