El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

El texto es un elemento fundamental en cualquier videojuego: se utiliza para mostrar puntuaciones, mensajes, instrucciones, diálogos y mucho más. Phaser facilita la creación y manipulación de texto en la pantalla, permitiéndote personalizar su apariencia y comportamiento.

En esta lección aprenderás:

Cómo crear y mostrar texto en Phaser.
Personalizar el estilo del texto (fuente, color, tamaño, etc.).
Actualizar el texto dinámicamente durante el juego.
Ejercicios prácticos para reforzar lo aprendido.

Creando Texto en Phaser

Phaser proporciona la clase Phaser.GameObjects.Text para mostrar texto en la pantalla. Para crear un objeto de texto, necesitas especificar la posición (x, y), el contenido y, opcionalmente, un objeto de configuración de estilo.

Sintaxis básica:

this.add.text(x, y, 'Contenido del texto', opcionesDeEstilo);

Ejemplo:

// Dentro del método create() de tu escena
this.add.text(100, 50, '¡Hola, Phaser!', {
    font: '32px Arial',
    fill: '#ffffff'
});

Explicación:

100, 50: Posición en la pantalla (coordenadas x, y).
'¡Hola, Phaser!': El texto que se mostrará.
El objeto de opciones permite personalizar el estilo (fuente, color, etc.).

Personalizando el Estilo del Texto

Puedes modificar varios aspectos visuales del texto usando el objeto de opciones. Los más comunes son:

Propiedad	Descripción	Ejemplo
`font`	Fuente y tamaño del texto	`'24px Verdana'`
`fill`	Color del texto (hexadecimal o nombre)	`'#ff0000'` o `'red'`
`align`	Alineación del texto	`'center'`, `'left'`
`backgroundColor`	Color de fondo del texto	`'#000000'`
`stroke`	Color del borde del texto	`'#000000'`
`strokeThickness`	Grosor del borde	`2`
`shadow`	Sombra del texto (objeto de configuración)	`{ offsetX: 2, ... }`

Ejemplo avanzado:

this.add.text(50, 100, 'Puntuación: 0', {
    font: '28px Comic Sans MS',
    fill: '#00ff00',
    backgroundColor: '#222222',
    stroke: '#ffffff',
    strokeThickness: 3,
    shadow: {
        offsetX: 2,
        offsetY: 2,
        color: '#000000',
        blur: 2,
        fill: true
    }
});

Actualizando el Texto Dinámicamente

En muchos juegos, el texto debe cambiar durante la partida (por ejemplo, la puntuación). Para ello, debes guardar una referencia al objeto de texto y luego modificar su propiedad text.

Ejemplo:

// Guardar la referencia al crear el texto
this.scoreText = this.add.text(16, 16, 'Puntuación: 0', { font: '24px Arial', fill: '#fff' });

// Más adelante, cuando la puntuación cambie:
this.score = 10;
this.scoreText.text = 'Puntuación: ' + this.score;

Consejo:
Siempre que necesites actualizar el texto, modifica la propiedad .text del objeto de texto.

Ejemplo Completo

class MyGame extends Phaser.Scene {
    constructor() {
        super('MyGame');
    }

    preload() {
        // No es necesario cargar nada para el texto
    }

    create() {
        this.score = 0;
        this.scoreText = this.add.text(20, 20, 'Puntuación: 0', {
            font: '32px Arial',
            fill: '#ff0',
            backgroundColor: '#222',
            stroke: '#fff',
            strokeThickness: 2
        });

        // Simular aumento de puntuación cada segundo
        this.time.addEvent({
            delay: 1000,
            callback: () => {
                this.score += 5;
                this.scoreText.text = 'Puntuación: ' + this.score;
            },
            loop: true
        });
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: MyGame
};

const game = new Phaser.Game(config);

Explicación:

Se crea un texto para mostrar la puntuación.
Cada segundo, la puntuación aumenta y el texto se actualiza.

Ejercicios Prácticos

Ejercicio 1: Mostrar un Mensaje de Bienvenida

Instrucciones:
Crea un texto en la posición (200, 300) que diga "¡Bienvenido al juego!" con fuente de 40px, color azul y fondo blanco.

Solución

this.add.text(200, 300, '¡Bienvenido al juego!', {
    font: '40px Arial',
    fill: '#0000ff',
    backgroundColor: '#ffffff'
});

Ejercicio 2: Contador de Clicks

Instrucciones:
Crea un texto que muestre "Clicks: 0". Cada vez que el jugador haga clic en cualquier parte del juego, incrementa el contador y actualiza el texto.

Solución

this.clicks = 0;
this.clickText = this.add.text(100, 100, 'Clicks: 0', { font: '32px Arial', fill: '#333' });

this.input.on('pointerdown', () => {
    this.clicks++;
    this.clickText.text = 'Clicks: ' + this.clicks;
});

Errores comunes:

Olvidar guardar la referencia al objeto de texto (no podrás actualizarlo después).
No actualizar la propiedad .text correctamente.

Consejos y Buenas Prácticas

Usa fuentes legibles y colores con buen contraste para mejorar la experiencia del usuario.
Si necesitas mostrar mucho texto, considera usar objetos de tipo BitmapText para mejor rendimiento.
Mantén las referencias a los objetos de texto que deban actualizarse durante el juego.

Resumen

En esta lección aprendiste cómo crear, personalizar y actualizar texto en Phaser. Ahora puedes mostrar mensajes, puntuaciones y cualquier información relevante en tus juegos. Practica los ejercicios y experimenta con diferentes estilos para dominar el manejo de texto antes de avanzar al siguiente tema: Manejo de Entrada (Teclado y Ratón).

Trabajando con Texto

Creando Texto en Phaser

Personalizando el Estilo del Texto

Actualizando el Texto Dinámicamente

Ejemplo Completo

Ejercicios Prácticos

Ejercicio 1: Mostrar un Mensaje de Bienvenida

Ejercicio 2: Contador de Clicks

Consejos y Buenas Prácticas

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