Apuntes de Iniciació a les matemàtiques per a l'enginyeria (UOC)

Siguiendo la tónica de compartir mis apuntes por si a alguien le facilita la vida las horas que he invetido, comparto esta vez los apuntes  (en lengua catalana) de la asignatura Iniciació a les matemàtiques per a l'enginyeria (05.614) que se imparte como asignatura optativa en diversos grados de la UOC (Universitat Oberta de Catalunya), así como en su @teneu universitari.

Espero que le valgan a alguien!   :-)

Descargar en formato PDF
Descargar en formato MSWord

Si optáis por la descarga en formato Word, pensad que se abrirá una sesión del Google Docs, que entre otras cosas es incompatible con las fórmulas de Word y no se verán. Se soluciona descargando el archivo.

Si no usáis MS Office, descargaros el PDF o tendréis el mismo problema.

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:

	Game = {
	// Inicializamos y empezamos el programa
	start: function() {
	// Iniciamos Crafty, definimos el canvas y dibujamos un cuadrado.
	Crafty.init(480, 320);
	Crafty.background('green');
	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 });
	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);
	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'});
	}
	}

view raw game.js hosted with ❤ by GitHub

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.