domingo, 4 de agosto de 2013

CraftyJS: Texto

Para escribir textos con Crafty usamos el componente text.

Una entidad con ese componente será sólo texto, eso significa que no podemos poner texto en una imagen, debemos tener dos entidades, una para cada cosa. Sin embargo podemos usar un par de trucos como la propiedad z-index del componente 2D que permite definir qué esta encima y qué está debajo o el método .attach( ) también del componente 2D que permitirá pegar ambas entidades a fin de moverlas o rotarlas conjuntamente.

Por otro lado, trabajando en DOM (que no en Canvas), podremos usar la propiedades .css para definir elementos como la alineación del texto, aunque se ignorará la fuente y el color ya que lo controla el componente Text.

Método .text

Tiene un único parámetro que bien puede ser una cadena de texto o una llamada a una función que devuelva el texto. Veamos el ejemplo:

    Crafty.e('2D, Canvas, Text')
      .attr({ x: 20, y: 50 })
      .text("Odio los hola mundos");

    Crafty.e('2D, Canvas, Text')
      .attr({ x: 20, y: 100 })
      .text(function () { return "Mi posición es " + this._x +"," + this._y });

Método .textcolor

Dos parámetros, el primero de ellos especifica el color y el segundo la opacidad que es un valor que va de 0 a 1, siendo 0 transparente y 1 totalmente opaco.

    Crafty.e('2D, Canvas, Text')
      .attr({ x: 20, y: 150 })
      .text("Color #FF0000")
      .textColor('#FF0000');

    Crafty.e('2D, Canvas, Text')
      .attr({ x: 20, y: 200 })
      .text("Color #FF0000 opacidad 0.6")
      .textColor('#FF0000', 0.6);

Método .textfont

Define la fuente, el ejemplo es autoexplicativo:

    Crafty.e('2D, Canvas, Text')
      .attr({ x: 20, y: 250 })
      .text("20 px, negrita, cursiva, Courier New")
      .textFont({ size: '20px', weight: 'bold', type: 'italic', family: 'Courier New'});

NOTA: Por defecto CraftyJS usa un tamaño de 10 px y la fuente 'sans-serif'.

Para muestra un botón:

Vamos a recoger todo esto en un único fuente:

Y veamos como queda:



Para ejecutarlo referiros al primer capítulo de esta serie donde se explica que se necesita para correr CraftyJS.

Nada más por hoy.

No hay comentarios:

Publicar un comentario