En los ejemplos anteriores, hemos visto como crear una imagen. En el universo de Phaser, estas imágenes se denominan objetos del juego (o GameObjects). Existen muchos más y todos se utilizan de forma muy similar, por lo que si sabemos utilizar una, es muy probable que sepamos utilizar el resto.
Por esta razón, en Phaser, una de las primeras cosas que debemos saber, son los tipos de objetos que existen. De esta forma podemos saber cuál es el objeto más apropiado para realizar nuestro objetivo.
Objetos básicos
En nuestras primeras tomas de contacto, trabajaremos sólo con objetos básicos de Phaser, pero poco a poco, iremos aprendiendo más sobre objetos más avanzados que permiten hacer más cosas y se utilizan para casos más específicos.
Los principales serían los siguientes:
| Objeto | Descripción | Método para añadir |
|---|---|---|
Image | Imagen estática (en formato soportado por navegador). | this.add.image() |
Sprite | Imagen animada, basada en SpriteSheet (hoja con varias imágenes). | this.add.sprite() |
Text | Texto renderizado a traves de una tipografía. | this.add.text() |
Graphics | Conjunto de formas, trazos o dibujos personalizados. | this.add.graphics() |
Conviene que nos basemos en estos primeros tipos de objetos y no profundicemos demasiado en nuestros primeros pasos, ya que hay muchos tipos de objetos y nos pueden abrumar la cantidad de posibilidades disponibles.
Objetos multimedia
Dentro de los objetos multimedia, donde predominan distintos tipos de imágenes, tenemos imágenes estáticas, imágenes orientadas para realizar animaciones, imágenes repetibles como mosaicos y que se desplazan de forma animada, imágenes de renderizado eficiente mediante blitting, imágenes ajustables y videos:
| Método | Descripción |
|---|---|
this.add.image(x, y, key) | Añade una imagen (estática) en x, y. |
this.add.sprite(x, y, key) | Añade un imagen (animada) en x,y. Puedes crearla con Aseprite. |
this.add.tileSprite(x, y, w, h, key) | Añade una imagen (mosaico) en x,y de ancho w×h. |
this.add.blitter(x, y, key) | Añade una imagen (renderización eficiente usando blitting) en x,y. |
this.add.nineslice(x, y, key) | Añade una imagen ajustable (utilizando la técnica 9-slice) en x,y. |
this.add.video(x, y, key) | Añade un video en x,y. |
La idea en todos estos tipos de objeto es que utilicemos el que mejor se adapte a nuestro caso. Si la imagen que vamos a utilizar es estática y no tiene animación, no tiene ningún sentido que utilicemos sprite, y es preferible que usemos image.
Otros objetos básicos
Al margen de los anteriores, tenemos otros objetos sencillos como text, que nos permiten escribir textos en cualquier parte de la pantalla, utilizando una tipografía personalizada. Existen otros más avanzados como BitmapText o DynamicBitmapText, pero nos centraremos primero en los más sencillos.
| Método | Descripción |
|---|---|
this.add.text(x, y, text, options) | Añade un texto a la escena. |
this.add.grid() | Añade una cuadricula o rejilla. |
Por otro lado, tenemos grid, que es una forma sencilla de crear una simple cuadricula, rejilla o grid a lo largo de la pantalla.
Animaciones o transiciones
Mediante los tween podemos realizar transiciones o animaciones con cualquier objeto variando alguna de sus propiedades, siempre y cuando sea cuantificable. Por ejemplo, la opacidad de un elemento se gestiona a través una propiedad alpha que va de 0.0 (transparente) a 1.0 (opaco).
Con los tweens podemos gestionar una propiedad como alpha para que vaya desde un valor inicial a uno final en un determinado tiempo. Consiguiendo esa transición o animación. Lo mismo se puede hacer con la posición en horizontal x, la posición en vertical y, la escala o tamaño de la imagen, etc:
| Método | Descripción |
|---|---|
this.add.tween() | Añade un efecto suave de transición/animación a un elemento. |
this.add.tweenchain() | Añade una lista de tweens para ejecutar uno detrás de otro. |
this.add.timeline() | Añade una lista de eventos programados para ocurrir en el futuro. |
Luego, disponemos de tweenchain, que no es más que una lista de tweens encadenados, y timeline que es algo un poco más avanzado, para crear una línea de tiempo más avanzada y personalizada.
Objetos avanzados
En esta segunda parte tienes otros tipos de objetos algo más avanzados, que sirven para casos mucho más específicos. Ten en cuenta que hay algunos tipos de objetos que no he incluido en la lista, por ser muy específicos o demasiado avanzados.
Agrupaciones o contenedores
A medida que tu juego vaya creciendo, necesitarás organizar más y más tu código para que no sea difícil de leer y modificar. Para ello, existen unos objetos orientados a la organización de elementos que son muy similares, pero tienen algunos matices y diferencias:
| Método | Descripción | Objetivo |
|---|---|---|
this.add.container(x, y, childs) | Añade childs a un contenedor. | Realiza acciones sobre todos los elementos. |
this.add.group(childs) | Añade childs a un grupo. | Considerar múltiples objetos como si fueran uno. |
this.add.layer(childs) | Añade childs a una capa. | Controlar orden de renderizado. |
this.add.zone(x, y, w, h) | Crea una zona invisible. | Detectar colisiones o hacer comprobaciones. |
Por un lado, los contenedores nos permiten agrupar objetos y realizar transformaciones (mover, escalar, rotar...) como si fueran uno solo. Por otro lado, los grupos están diseñados para gestionar múltiples objetos a la vez, pero las transformaciones no les afectan. Por último, los layers o capas nos permiten controlar el orden de renderizado de los objetos hijos, algo especialmente útil cuando queremos que algo esté por encima de otro (menús, personajes, etc...).
Las zonas es una categoría algo diferente, ya que son zonas invisibles que se utilizan para detectar colisiones o hacer comprobaciones rápidas, pero no permiten incluir objetos en ella.
Formas gráficas
En algunos casos nos puede interesar crear objetos que realizen trazos, formas o simplemente dibujar algo. Para esto, tenemos el objeto graphics, que nos permite hacer prácticamente cualquier operación de dibujo. Luego, tenemos el resto de métodos (arcos, círculos, elipses, líneas, etc...), que son casos muy concretos y especiales, que conviene utilizar antes si encajan con lo que necesitas:
| Método | Descripción |
|---|---|
this.add.graphics() | Añade un elemento gráfico personalizado. |
this.add.arc() | Añade un arco. |
this.add.circle() | Añade un círculo. |
this.add.ellipse() | Añade una elipse. |
this.add.curve() | Añade una curva. |
this.add.line() | Añade una línea. |
this.add.star() | Añade una estrella. |
this.add.polygon() | Añade un polígono. |
this.add.rectangle() | Añade un rectángulo. |
Recuerda que graphics es el más potente de todos, pero también el más complejo. El resto son cómodos porque están ya implementados y son rápidos de utilizar.
Perspectiva isométrica
Phaser también tiene algunos métodos para trabajar en [perspectiva isométrica] y crear elementos que ya tienen esa perspectiva y podemos utilizarlos para componer y crear elementos más complejos. De momento tenemos métodos para crear cajas y triángulos:
| Método | Descripción |
|---|---|
this.add.isobox() | Añade una caja isométrica. |
this.add.isotriangle() | Añade un triángulo isométrico. |
Otros objetos
Además de todos los objetos vistos hasta ahora, tenemos algunos otros que merece la pena mencionar. Objetos para crear y manipular mapas de casillas o «tiles», trabajar con elementos del DOM y métodos más enfocados en operaciones 3D como mesh(), rope() o shader():
| Método | Descripción |
|---|---|
this.add.tilemap() | Añade un mapa de tiles creado con Tiled. |
this.add.dom() | Añade un elemento al DOM del HTML. |
this.add.mesh() | Añade un elemento complejo o 3D usando modelos Wavefront. |
this.add.particles() | Añade un emisor de partículas 3D. |
this.add.pointlight() | Añade un punto de luz en la escena. |
this.add.rope() | Añade un efecto de cuerda con vértices, estirable. |
this.add.shader() | Añade un shader a la escena. |
Pueden ser muy útiles, pero escapan un poco del punto de nivel en el que estamos y habría que tratarlos algo más adelante, cuando ya tengamos soltura con Phaser.
