Cómo agregar imágenes y efectos en Phaser

Agregando imagenes y efectos en Phaser.

Despues de haber terminado nuestro primer juego html5 con phaser aprendimos lo básico para empezar pero probablemente en nuestro juego queremos agregar imágenes, efectos y eso es lo que vamos a aprender en esta ocasión.

↻

Artículo original de 2014 · revisado en 2026

Esta entrada forma parte del archivo histórico del blog. Se ha limpiado su HTML y conservado el contenido original; cuando utiliza APIs antiguas, se indica el contexto para no confundirlas con las versiones modernas.

Phaser clásico · código histórico

Todo lo que utilizaremos en este tutorial son imágenes básicas que hice en Inkscaperecuerda iniciar Wamp Sever y probarlo localmente, presiona click derecho seleccionas "guardar como" abrimos  el script en nuestro editor de texto y estamos listos.

Trabajar con imágenes en Phaser es muy sencillo, antes de agregar una imagen necesitamos cargarla y para esto tenemos la función Preload  el cual es el lugar indicado para hacerlo, a continuación tenemos:

JavaScriptCódigo histórico

function preload () {
game.load.image("fondo","fondo.png");
game.load.image("edificios","edificios.png");
};

Mediante game.load accedemos a la clase Phaser.loader la cual  es la encargada de gestionar nuestro archivos y como en esta oportunidad necesitamos una imagen usamos el método image(“nombre clave” “ruta de la imagen”).

Este método recibe dos parámetros básicos  en primer lugar una “key” esto es un nombre clave para especificar el nombre de nuestros archivos y asi poder usarlo luego, el segundo parámetro es la ruta de nuestro archivo como  nuestra imagen se encuentra en la misma carpeta de el archivo html solo es cuestión de escribir el nombre del archivo con su respectiva extensión.

Ahora ya tenemos nuestros archivos cargados y listos para agregarlos y hacer que aparezcan en pantalla, tenemos dos variables declaradas, _fondo, _edificios las cuales inicializaremos en la función create.

JavaScriptCódigo histórico

function create(){
_fondo = game.add.image(0,0,"fondo");
_edificios = game.add.tileSprite(0,160,500,400,"edificios");
_edificios.autoScroll(-150,0);
};

Como aprendimos en el tutorial mi primer juego , para agregar objetos (imágenes,sonidos) usamos game.add, necesitamos agregar un fondo esto es una imagen que normalmente no necesita efectos u otra cosa aunque si podemos rotar o usar eventos del mouse, usamos:

JavaScriptCódigo histórico

game.add.image(posicionX,posicionY,”nombre clave”)

Los dos primeros parámetros son la posición en X y en Y, las coordenadas (0,0) en canvas apuntan a la esquina superior izquierda, como nuestra imagen y el canvas son del mismo tamaño y queremos que la imagen abarque todo el cuadro la ubicamos en  posición (x:0,y:0),  el siguiente parámetro es el nombre que le colocamos cuando cargamos la imagen.

Para hacer la cosa mas interesante agregaremos un pequeño efecto horizontal (scroll) utilizado en muchos juegos  uno de los mas nombrados por estos días el popular Flappy Bird, tambien se puede hacer vertical como en mi juego Archaic Roll,  hacer esto en phaser es sencillo:

JavaScriptCódigo histórico

_edificios = game.add.tileSprite(0,160,500,400,"edificios");
_edificios.autoScroll(-150,0);

Agregamos un tileSprite esto es una textura que se repite infinitamente, este método recibe 5 parametros en este orden: posición en X y Y, ancho ,alto, nombre clave, para dar un poco de movimiento la clase Phaser.tileSprite tiene un método llamado autoScroll(velocidad X , velocidad Y) que se inicia automáticamente y su dirección será hacia la izquierda por el valor negativo que pasamos al metodo. Felicidades con esto hemos conseguido un efecto genial que podemos implementar en nuestros juegos  para dar un toque muy profesional Hasta la próxima.

!

Demo histórico no disponible

El ejemplo original estaba alojado en Google Drive Web Hosting, un servicio retirado. Conservamos esta referencia para documentar el tutorial: https://googledrive.com/host/0B2Br6oKX-RFNUDlpS1BLNkJBUDA/ejemplo.html .

Contexto actual

El código de esta entrada pertenece a una versión antigua de Phaser. El concepto de input y eventos, sprites y recursos sigue siendo útil, pero para un proyecto nuevo conviene consultar la API de la versión de Phaser que estés utilizando en lugar de copiar literalmente estas llamadas.

ADVERTISEMENT

ADVERTISEMENT