Sprites en Phaser

Hemos visto como crear rectángulos y otras formas geométricas simples, pero posiblemente también quieras cargar imágenes. En Phaser es muy sencillo. Recuerda en el tutorial de cargar recursos como cargábamos imágenes o audios. Si recuerdas era algo parecido a esto:

function preload(){
   ...
   game.load.image("MisterPhaser","img/MisterPhaser.png");
   ...
}

Al recurso, en este caso una imagen PNG, le asignamos un ID ("MisterPhaser" en el ejemplo). Ahora para añadir la imagen a la pantalla simplemente la añadimos, por ejemplo, dentro de la función create.

function create(){
    ...
    var sprite = game.add.sprite(300,100,"MisterPhaser");
    ...
}

Se añadirá el sprite con una imagen de ID "MisterPhaser" en las coordenadas X e Y indicadas

¿Qué es un Sprite?

No, no es la bebida. En Phaser un sprite podemos entenderlo como una superimagen o una "imagen con extras". A diferencia de una simple imagen que dibujemos en pantalla (que en Phaser también existen y se pueden hacer), un sprite contiene:

• Funcionalidad para el motor de físicas
• Funcionalidad para gestionar el input, la entrada de datos
• Funcionalidad para gestionar eventos
• Soporte para animaciones
• Y mucho más
</ul> Por defecto todas estas funcionalidades extras vienen desactivadas y requieren de configuración extra.




Input con un Sprite

Vamos a ver como manejar la entrada de datos de un sprite con la funcionalidad de entrada de datos. En primer lugar es necesario activarlo, poniendo inputEnabled = true. Después podemos añadir eventos:



sprite.inputEnabled = true;
sprite.events.onInputDown.add(function(){
    // el sprite ha sido pulsado on el ratón o tocado en una pantalla táctil
});

Manipulando el tamaño del sprite

Es posible que el sprite sea demasiado grande o pequeño para la pantalla a la que lo estas añadiendo. En ese caso usa las propiedades width y height.


sprite.width = 200;
sprite.height = 200;

Rotando el sprite

Puedes usar radianes o grado sexagesimales. Las operaciones con radianes son ligeramente más rápidas, pero mucha gente está acostumbrada a usar grados sexagesimales por lo que se incluye su soporte aunque debe realizar la conversión a radianes.


sprite.rotation = Math.PI/6; // En radianes
sprite.angle = 30; // En grados sexagesimales

Propiedades visuales

Los sprites vienen con un conjunto de herramientas para modificar el aspecto final. Podemos por ejemplo tintar una textura con tint y especificando un color en hexadecimal


sprite.tint = 0xAA0000;

También es posible cambiar la imagen del sprite una vez ha sido creado con loadTexture.


sprite.loadTexture("CocheDeMisterPhaser");

Otra propiedad interesante es smoothed. Si queremos un elemento Pixel Art es importante que esté en false, de lo contrario Phaser tratará de redondear las esquinas.


Propiedades del juego

Los sprites son los personajes, las balas, los coches, las cajas de Mario Bros, ... todo son sprites. Phaser ha añadido unas propiedades configurables, de cuyo uso únicamente decidimos nosotros, para albergar los datos específicos de cada sprite.

La propiedad data esta vacía y es totalmente configurable. Podemos crear, editar y destruir variables dentro de ella sin afectar al funcionamiento de Phaser. Además, incluye ya prehechas las propiedades damage, heal, health, maxHealth, setHealth.



sprite.data.nombre = "Teresa";
sprite.data.inventario = ["VISA", "Teléfono móvil"];
sprite.damage = 50;
sprite.maxHealth = 100;

</tbody></table>


El coche ha sido rotado, deformado y tintado