CraftyJS: Entidades

Una entidad es cualquier cosa que exista en nuestro juego y que tenga un comportamiento de cualquier tipo, aunque sólo sea visualizarse. Es decir, todo lo que no sea la imagen de fondo de pantalla será seguramente una entidad.

Para crear una entidad, Crafty tiene un evento que se llama simplemente e.

Veámoslo:

Crafty.e

Crafty.e('2D, Canvas, Color')
    .attr({
              x: 100,
              y: 10,
              w: 100,
              h: 100,
            })
     .color('blue');

¿Qué hace esto?

Esto nos crea una entidad en las coordenadas (100,10) de nuestro canvas o lienzo, con una dimensión 100 x 100 (o sea un cuadrado) y lo pinta de azul.

Realmente sólo la primera línea del código anterior pertenece a e. Esa línea crea una entidad a la que añade los componentes 2D, Canvas y Color. Un componente especifica un conjunto de datos y comportamientos que se pueden aplicar a una o más entidad. Es más, un componente puede requerir que exista otro componente previo y pueden ofrecer comportamientos combinados, pero eso ya lo iremos viendo.

El caso es que .attr es un método del componente 2D que inicializa sus propiedades.

Entre ellas tenemos x e y, que posicionan en nuestro canvas la esquina superior izquierda de nuestra entidad. La posición (0,0) del canvas está también en la esquina superior izquierda. La x es la componente horizontal y aumenta hacia la derecha. La y es la componente vertical y aumenta hacia abajo.
 

w es el ancho de la entidad y h su altura.

NOTA: También existe una componente z (cosa rara trabajando en 2D). Su única función es que cuando dos entidades se superponen, quien tenga la z mayor, se mostrará sobre el resto.

Otras de las propiedades de 2D son:

alpha: Indica la transparencia de una entidad. Toma un valor decimal comprendido entre 0.0 que es transparente y el 1.0 que es totalmente opaco.

 

rotation: Provoca que la entidad gire un número de grados determinado sobre su punto (x,y), es decir, sobre su esquina superior izquierda. (El punto de rotación puede cambiarse pero ya se verá). La rotación se efectúa en sentido de las agujas del reloj, si bien podemos poner valores negativos.

 

visible: Exactamente eso. Puede tomar los valores TRUE y FALSE.

Por último, como veréis en el ejemplo, el color puede definirse también dando la descomposición RGB.

 

 Veamos ahora el ejemplo:


Este código generará esta maravilla de ilustración:

 

Os recuerdo que para ejecutar este código debéis instalar Crafty y llamar el código desde un .html.
Los pelos y señales los encontrareis aquí.