El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta lección, crearás tu primer proyecto básico con Phaser. Aprenderás a estructurar un juego sencillo, cargar una imagen y mostrarla en pantalla. Este ejercicio te permitirá familiarizarte con la estructura básica de un proyecto en Phaser y sentar las bases para los siguientes módulos.

Estructura Básica de un Proyecto Phaser

Un proyecto típico de Phaser requiere:

Un archivo HTML para cargar el motor y tu código.
Un archivo JavaScript donde escribirás la lógica del juego.
Una carpeta para tus recursos (imágenes, sonidos, etc.).

Estructura recomendada:

/mi-primer-juego/
│
├── index.html
├── main.js
└── assets/
    └── logo.png

Creando el Archivo HTML

El archivo index.html es el punto de entrada de tu juego. Aquí cargarás Phaser y tu archivo JavaScript.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi Primer Juego con Phaser</title>
  <script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.js"></script>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

Explicación:

Se incluye Phaser desde un CDN.
Se carga tu archivo main.js donde estará la lógica del juego.

Estructura Básica en JavaScript

En main.js definirás la configuración y las escenas de tu juego.

// Configuración básica del juego
const config = {
  type: Phaser.AUTO, // Usa WebGL si está disponible, si no, Canvas
  width: 800,
  height: 600,
  scene: {
    preload: preload,
    create: create
  }
};

// Crear la instancia del juego
const game = new Phaser.Game(config);

// Función para cargar recursos
function preload() {
  this.load.image('logo', 'assets/logo.png');
}

// Función para crear objetos en la escena
function create() {
  this.add.image(400, 300, 'logo');
}

Explicación paso a paso:

config: Define el tipo de renderizado, tamaño de la pantalla y las funciones principales de la escena (preload y create).
Phaser.Game: Crea el juego con la configuración dada.
preload(): Carga la imagen logo.png y la asocia con la clave 'logo'.
create(): Añade la imagen al centro de la pantalla (coordenadas 400, 300).

Ejemplo Completo

Asegúrate de tener una imagen llamada logo.png en la carpeta assets/.

index.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi Primer Juego con Phaser</title>
  <script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.js"></script>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js

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

const game = new Phaser.Game(config);

function preload() {
  this.load.image('logo', 'assets/logo.png');
}

function create() {
  this.add.image(400, 300, 'logo');
}

Ejercicio Práctico

Ejercicio:
Modifica el proyecto para mostrar dos imágenes diferentes en la pantalla, una en la esquina superior izquierda y otra en la esquina inferior derecha.

Pasos sugeridos:

Añade una segunda imagen (por ejemplo, star.png) en la carpeta assets/.
Carga ambas imágenes en la función preload.
Añade ambas imágenes en posiciones diferentes en la función create.

Solución:

function preload() {
  this.load.image('logo', 'assets/logo.png');
  this.load.image('star', 'assets/star.png');
}

function create() {
  this.add.image(50, 50, 'logo');      // Esquina superior izquierda
  this.add.image(750, 550, 'star');    // Esquina inferior derecha
}

Errores comunes y consejos:

Error: La imagen no se muestra.
Solución: Verifica que la ruta y el nombre del archivo sean correctos.
Error: Las imágenes aparecen fuera de la pantalla.
Solución: Asegúrate de que las coordenadas estén dentro del tamaño definido en la configuración (width y height).

Tabla Resumen: Funciones Clave

Función	Propósito
preload()	Cargar recursos antes de iniciar la escena
create()	Crear y mostrar objetos en la escena
this.load	Acceso a métodos de carga de recursos
this.add	Añadir objetos (imágenes, texto, etc.)

Conclusión

¡Felicidades! Has creado tu primer proyecto con Phaser, cargado imágenes y mostrado objetos en pantalla. Ahora comprendes la estructura básica de un juego en Phaser y cómo trabajar con recursos. En el siguiente módulo, profundizaremos en los fundamentos de Phaser, como el bucle de juego y la gestión de escenas, para que puedas empezar a construir juegos más complejos y dinámicos.

Tu Primer Proyecto con Phaser

Estructura Básica de un Proyecto Phaser

Creando el Archivo HTML

Estructura Básica en JavaScript

Ejemplo Completo

Ejercicio Práctico

Tabla Resumen: Funciones Clave

Conclusión

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