El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Cargando y Mostrando Imágenes

Siguiente ►
►

En esta sección aprenderás cómo cargar y mostrar imágenes en tu juego usando Phaser. Este es un paso fundamental, ya que la mayoría de los juegos dependen de recursos visuales para representar personajes, fondos, objetos y más.

Conceptos Clave

  • Assets: Son los recursos gráficos (imágenes, sprites, fondos) que usas en tu juego.
  • Preload: Fase donde se cargan los assets antes de que el juego comience.
  • Scene: Una escena en Phaser es una parte del juego (menú, nivel, pantalla de game over, etc.).
  • Métodos de carga y visualización: Phaser proporciona funciones específicas para cargar y mostrar imágenes.

Flujo Básico para Cargar y Mostrar Imágenes

  1. Preparar los archivos de imagen: Asegúrate de tener tus imágenes en una carpeta accesible (por ejemplo, assets/).
  2. Cargar las imágenes en la escena: Utiliza el método this.load.image en la función preload() de tu escena.
  3. Mostrar las imágenes en pantalla: Usa this.add.image en la función create() de tu escena.

Ejemplo Práctico Paso a Paso

Supongamos que tienes una imagen llamada player.png en la carpeta assets/.

  1. Estructura de Archivos

Carpeta/Archivo Descripción
index.html Archivo principal HTML
main.js Código principal de Phaser
assets/player.png Imagen del jugador

  1. Código de Ejemplo

class MyGame extends Phaser.Scene {
    preload() {
        // Cargar la imagen con una clave identificadora ('player')
        this.load.image('player', 'assets/player.png');
    }

    create() {
        // Mostrar la imagen en el centro de la pantalla
        // Parámetros: (x, y, clave de la imagen)
        this.add.image(400, 300, 'player');
    }
}

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

const game = new Phaser.Game(config);

Explicación del Código

  • preload(): Aquí se cargan todos los recursos necesarios antes de que la escena comience. Usamos this.load.image('player', 'assets/player.png') para cargar la imagen y asignarle la clave 'player'.
  • create(): Una vez que los recursos están cargados, se ejecuta esta función. Usamos this.add.image(400, 300, 'player') para mostrar la imagen en la posición (400, 300) de la pantalla.
  • config: Configuración básica del juego, incluyendo el tamaño de la pantalla y la escena a usar.

Tabla de Métodos Comunes para Imágenes

Método Descripción Ejemplo de uso
this.load.image Carga una imagen en la fase preload this.load.image('fondo', 'assets/bg.png')
this.add.image Añade una imagen a la escena this.add.image(100, 200, 'fondo')
setScale Cambia el tamaño de la imagen img.setScale(0.5)
setOrigin Cambia el punto de origen de la imagen img.setOrigin(0.5, 0.5)
setAlpha Cambia la transparencia de la imagen img.setAlpha(0.8)

Ejercicio Práctico

Objetivo:
Carga dos imágenes diferentes y muéstralas en posiciones distintas de la pantalla. Cambia el tamaño de una de ellas usando setScale.

Instrucciones

  1. Descarga dos imágenes y colócalas en la carpeta assets/ (por ejemplo, star.png y enemy.png).
  2. Modifica el código para cargar ambas imágenes.
  3. Muestra ambas imágenes en la pantalla, una en la esquina superior izquierda y otra en la esquina inferior derecha.
  4. Haz que la imagen de la estrella sea más pequeña usando setScale.

Solución

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

    create() {
        // Mostrar la estrella en la esquina superior izquierda y reducir su tamaño
        let star = this.add.image(50, 50, 'star');
        star.setScale(0.5);

        // Mostrar el enemigo en la esquina inferior derecha
        let enemy = this.add.image(750, 550, 'enemy');
    }
}

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

const game = new Phaser.Game(config);

Explicación

  • star.setScale(0.5) reduce el tamaño de la imagen de la estrella a la mitad.
  • Las posiciones (50, 50) y (750, 550) colocan las imágenes cerca de las esquinas de la pantalla.

Errores Comunes y Consejos

Error Común Solución/Consejo
La imagen no aparece en pantalla Verifica la ruta y el nombre del archivo.
Error: "Texture key not found" Asegúrate de que la clave usada en add.image coincide con la de load.image.
Imagen demasiado grande o pequeña Usa setScale para ajustar el tamaño.
Imagen no centrada como esperabas Usa setOrigin(0.5, 0.5) para centrar el punto de origen.

Resumen

  • Aprendiste a cargar imágenes usando this.load.image en la fase preload.
  • Mostraste imágenes en pantalla con this.add.image en la fase create.
  • Ajustaste la posición y el tamaño de las imágenes.
  • Practicaste con un ejercicio para reforzar el aprendizaje.

¡Ahora ya puedes llenar tu juego de imágenes y personajes! En la siguiente sección aprenderás a trabajar con texto para mostrar información en pantalla.

◄ Anterior
◄
Siguiente ►
►

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

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados