CraftyJS: Animación del movimiento

IMPORTANTE: Los métodos de animación en CraftyJS cambiaron a partir de la versión 0.6, con lo que este artículo es sola válido a partir de dicha versión (y hasta nuevo cambio)  :-)

En el artículo anterior ya habíamos finalizado nuestro laberinto, sólo nos quedaba el detalle del personaje principal que era un cuadrito amarillo y que ahora substituiremos por un personaje animado.

Esto implica que tendremos una serie de frames (al que llamaremos reel) que crearán los efectos de movimiento a la derecha, izquierda ,arriba y abajo. Para ello cargaremos el mapa de sprites con el que ya habíamos trabajado en el artículo anterior y cogeremos el frame que queremos que muestre nuestro personaje al aparecer en pantalla (antes de moverse):

Crafty.sprite(32, 'assets/furniman.png', { ladron:        [0, 0]  });

Ya podemos imaginar que con el mapa de sprites anterior crearmos cuatro reels que irán cambiando cuando cambie la dirección de nuestro personaje. Por lo que lo primero que tenemos que preguntarnos es ¿Cómo saber hacia que dirección se mueve nuestro prota?

NewDirection

De esto no hemos hablado, pero CraftyJS lanza una serie de eventos que podemos interceptar mediante el comando .bind.  Cuando una entidad que usa el componente Fourway (o multiway) cambia de dirección, lanza el evento global NewDirection que interceptaremos y al que le preguntaremos hacia qué lado vamos.

Este evento devuelve una clase con los atributos x e y cuyo signo puede ser positivo y negativo.

Todo esto lo definiremos en nuestro componente:

Crafty.c('Personaje', {

    init: function() {

       

   this.bind('NewDirection', function(direccion) {

  

         if (direccion.x > 0) {this.animate('derecha',    -1);} else

        if (direccion.x < 0) {this.animate('izquierda',  -1);} else

         if (direccion.y > 0) {this.animate('abajo',       -1);} else

        if (direccion.y < 0) {this.animate('arriba',      -1);} 

        else {this.pauseAnimation();}

      })

}); 

Vemos que este trozo de código es harto intuitivo.  Si vamos a la derecha, animamos la derecha, si vamos a la izquierda animamos la izquierda... y si no nos movemos, detenemos la animación. Si no hiciéramos esto nuestro muñeco seguiría moviéndose a pesar de estar parado.  O_o

Decir que animate lo que hace es crear un 'reel' (o serie de frames) para la animación de ese componente y definir el número de veces que imprimirá la secuencia. (Es fácil imaginar que -1 significa hasta el infinito y más allá). - Jolín, mira que me repatea la gente que dice esa gilipollez y ahora estoy yo aquí con lo mismo -).

El caso es que tenemos el reel, pero el reel no tiene nada...

Reel

Un reel básicamente lo que debería contener es una secuencia de frames que conforman la animación. (vamos, el concepto del zoótropo).

Sintaxis:

.reel( nombre, duración, posX, posY, númeroDeFrames)

• La duración se expresa en milisegundos.
• La posX y posY son la fila y columna que ocupa el primer frame (fila y columna relativa, medida en frames y no es píxeles.  (más datos aquí)
• El número de frames es eso. Los cogerá de manera secuencial. (Si ponemos este parámetro en negativo iremos marcha atrás).

Así que ahora que crearemos la entidad, le indicaremos que es una animación de sprites, definiremos su imagen de inicio (definida anteriormente al cargar el mapa)  y daremos contenido a los reel.

    Crafty.e('2D, Canvas, Fourway, SpriteAnimation, Personaje, ladron)

     .attr({ x: 100, y: 10, w: 32, h: 32 })
     .fourway(4)

     .reel('arriba',     500, 0, 0, 2)
     .reel('abajo',      500, 2, 0, 2)

     .reel('derecha',  500, 2, 1, 2)

     .reel('izquierda', 500, 0, 1, 2);

Fijaos que le hemos dicho a Crafty que la entidad que estamos creando tiene el comportamiento SpriteAnimation y que su Sprite antes de moverse es el que habíamos definido para ladrón.

Y ya no necesitamos nada más... nuestro muñeco se moverá ahora con plena libertad...

Veamos como queda aquí.

El código es éste:

Y es más... veamos como quedaría todo esto si lo aplicamos a nuestro juego del laberinto aquí.
Además podemos bajarnos el código aquí o aquí

CraftyJS: Sprites

Mmm... creo que el tutorial se está haciendo muy farragoso y al final no se entenderá nada, así que voy a tratar el contenido de este tema de manera independiente: El fantabuloso mundo de los

Sprites

Retomemos nuestro laberinto, pero ahora démosle color:

Como veis he dividido el mapa en cuadritos (que corresponden con el array que definíamos aquí). Como veis cada cuadrado tiene un dibujo que es una simple imagen (jpg, png...).  Pues bien, el dibujo en sí mismo, es lo que llamamos sprite. En la imagen sólo sale el escenario, pero es fácil deducir que nuestro personaje será también un sprite o una sucesión de ellos para crear el efecto de la animación.

Mapa de Sprites

Hemos dicho que los sprites son archivos gráficos que podemos cargar uno a uno o bien todos de golpe metidos en un archivo. Al contenido del archivo le llamaremos mapa de sprites y será algo de este tipo (tan grande como queramos):



Crafty.sprite

En CraftyJS la sintaxis para definir un sprite es esta:

Crafty.sprite( tamaño de la celda,  fichero, {mapa}, interespaciado)

Tamaño de la celda (opcional):

Medido en pixels, podemos darle sólo la anchura (x) o bien la anchura y la altura (x,y). Esto implicará que a la hora de definir el mapa nos referiremos a él en posición absoluta o relativa, ejemplo:

Como se indica, este parámetro es opcional. Si no definimos el tamaño, y quisiéramos referirnos al cofre en el ejemplo de arriba deberíamos acceder a la posición [64,64] (teniendo en cuenta que cada celda es de 32x32 pixels). Si definimos el tamaño (32,32) accederemos al cofre en la posición [2,2]. (La primera posición es el 0).

Por otro lado vemos que podemos especificar sólo la anchura (en cuyo caso se asumirá que la celda es cuadrada) o la anchura y la altura, lo que sugiere que aunque es menos habitual las celdas no tienen porque ser cuadradas.

Fichero: No tiene más historia. La ruta en la que se encuentra nuestro sprite o mapa de sprites.

Mapa:  Aquí está el meollo de la cuestión. El formato es:

 {nombre del mapa: [columna, fila, ancho, alto]}

Ejemplo para acceder al cofre sin haber definido tamaño de celda:

       Crafty.sprite('/dir/nombrefich.ext', {cofre: [64,64,32,32]});

Ejemplo para acceder al cofre habiendo definido tamaño de celda:

      Crafty.sprite(32,'/dir/nombrefich.ext', {cofre: [2,2]});

Ejemplo para acceder a todos los dibujos de Rajoy habiendo definido tamaño de celda:

 

     Crafty.sprite(32,'/dir/nombrefich.ext', {rajoyx8: [0,0,4,2]});      

 NOTA: Cuidadito aquí, aunque hemos cogido 8 casillas, estas se redimensionarán al tamaño de nuestra entidad que puede ser de 32x32 o cualquier otro tamaño.

Ejemplo para coger varios sprites a la vez:

     Crafty.sprite(32,'/dir/nombrefich.ext',{
            arriba:[0,0],
            abajo: [2,0],
            dcha:  [2,1],
            izda:   [0,1]

     });



Interespaciado: (opcional). Definimos interespaciado como el espacio que hay entre celda y celda, vamos, algo así como el margen. Podemos definir sólo las x o bien las x,y. Si no ponemos nada se asumirá que es 0. Si no ponemos las y se asumirá que coincide con las x.

Y oiga, ¿Todo esto como se usa?

Es muy sencillo. Al fin y al cabo, lo que arriba hemos denominado 'nombre del mapa'  no es más que un componente, así que, como tal, se usa.

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

Un ejemplito por el amor de dios...

Si queréis ver como queda, se podría ver aquí. Notad que aunque el tamaño de las celdas del mapa de sprites sea de 32x32, nuestro componente es de 100x100.

Si aterrizáis por primera ve por aquí quizá deseéis saber cómo ejecutar esto.

Retomando el juego...

Ahora vamos a trasladar todo esto a nuestro juego y vamos a seguir desde aquí.

Tomaremos el mapa de sprites que hay al principio de este documento y lo guardaremos en la carpeta /assets con el nombre de furniman.png. 

Ahora sólo debemos cargarlo y asignar cada sprite a un componente que será usado cuando creemos las entidades. ¿Y dónde lo haremos? ¿Recordáis la escena 'Loading' que espera a que esté todo cargado para iniciar el juego?

Crafty.scene('Loading', function(){

  Crafty.e('2D, DOM, Text')

    .text('Cargando...')

    .attr({ x: 110, y: 140 })

    .textFont({size:'13px'});

  Crafty.load(['assets/furniman.png'], function(){

   Crafty.sprite(32, 'assets/furniman.png', {

spr_muro:   [0, 2],

        spr_suelo:   [1, 2],

spr_tesoro: [2, 2]

    });

  Crafty.scene('Game');

  })

});

Ahora haremos que en el fichero de los componentes, éstos hereden los sprites que hemos definido, sin embargo si recordáis, teníamos entidades para los muros, pues nos interesaba que se detectara la colisión contra ellos, pero no teníamos nada para el suelo. Ahora el suelo deberá tener un dibujito y por tanto también tendrá que ser una entidad. 

Crafty.c('MuroMarron', {
   init: function( ) {
      this.requires('Actor, Pared, spr_muro');
  },
});

Crafty.c('Suelo', {
   init: function( ) {
      this.requires('Actor, spr_suelo');
  },
});

Crafty.c('Tesoro', {
  init: function() {
    this.requires('Actor, spr_tesoro')
  },
 
  /* ...  */

});

Ya sólo queda pintarlos en la escena del juego. Fijaos especialmente en el tesoro que cuando lo cojamos y desaparezca debajo tendrá que tener un suelo!!!

Crafty.scene('Game', function() {

// Colocamos cada cosa en su lugar

  for (var x = 0; x < mapa[0].length; x++) {

    for (var y = 0; y < mapa.length; y++) {

        

      if (mapa[y][x]==0) {  Crafty.e('Suelo').en(x,y);             }        

      if (mapa[y][x]==1) {  Crafty.e('MuroNegro').en(x,y);    }

      if (mapa[y][x]==2) {  Crafty.e('MuroMarron').en(x,y);  }

      if (mapa[y][x]==3) {

         Crafty.e('Suelo').en(x,y);

         Crafty.e('Tesoro').en(x,y);

       }

    }

  }

//Colocamos el personaje principal en el mundo.

 Crafty.e('Politico').en(1, 8);

});

Y con esto ya lo tenemos todo!

Si queréis ver el resultado pinchad aquí.
Si queréis bajaros los fuentes pinchad aquí o aquí

Apuntes de Fonaments físics de la informàtica (UOC)

Actualizado Enero 2017

Sí, lo sé.  Mis apuntes están de puta madre. Sin embargo esta vez voy a compartir unos que empiezan muy bien, pero que flojean en el último tema: 'òptica i fotónica'.  La verdad es que iba tan apurado de tiempo que tuve que dedicarme al escaneo manual con boli y libreta de apuntes, y sinceramente... eso paso de colgarlo.

El caso es que os comparto los documentos de 'Fonaments físics de la informàtica' (05.611) del 'Grau d'Enginyeria Informàtica' de la UOC (Universitat Oberta de Catalunya), por si queréis aprovecharlos. De hecho, no estaría mal que si alguien los completa, me los comparta aquí para que pueda colgarlos. Supongo que lo agradeceríamos todos. La verdad es que bastante gente se descarga mis apuntes, lo cual me llena de una hondo orgullo y satisfacción y ruptura de cadera.

 Apuntes de Fonaments físics de la informàtica (UOC) formato word

 Apuntes de Fonaments físics de la informàtica (UOC) formato pdf

Además podéis descargaros PAC's de la asignatura aquí

También exámenes resueltos aquí

Por cierto, si queréis colaborar en tener un buen repositorio para la asignatura, mandadme vuestras PAC's y Exámenes corregidos y los iré incluyendo en beneficio de los futuros estudiantes.

Debéis mandar un correo a   furnimanQUITAESTO@terra.com  (evidentemente quitando el QUITAESTO) :-)

CraftyJS - Escenas

En este punto, podríamos decir que ya hemos programado todo nuestro juego. Sin embargo es un poco triste, que después de sufrir financiando nuestro partido, una vez lo consigamos no salga ni un triste mensaje.

Una solución sería poner un mensaje felicitándonos sobreimpresionada. Esto ya lo sabemos hacer, lo vimos aquí, pero sería más elegante tener una pantalla nueva.

Los juegos se componen de menús, pantallas y créditos. Incluso hay juegos que las pantallas difieren mucho unas de otras (tanto que pueden ser un juego nuevo). Es cada uno de estos casos estamos hablando de:

Escenas

Así pues, vamos a dividir lo que teníamos hecho en tres escenas:

• Una inicial de carga por si nuestro juego tarda mucho en cargarse y que ya os anuncio que ni la vamos a ver...   :-)
• La propia pantalla del juego
• La pantalla de fin de juego, albricias y felicitaciones.

Estas escenas las crearemos en un fichero nuevo llamado scenes.js que NO deberemos olvidar incluir en nuestro index.html:

<!DOCTYPE html>

<html>

<head>

    <script src="lib/crafty.js"></script>

    <script src="src/game.js"></script>

    <script src="src/componentes.js"></script>

    <script src="src/scenes.js"></script>

    <script>

       window.addEventListener('load', Game.start);

    </script>

</head>

<body>

</body>

</html>

Pantalla Final

Yo creo que con esto queda la escena autoexplicada:

Crafty.scene('Victory', function() {

//Ponemos el texto

  Crafty.e('2D, Canvas, Text')

    .attr({ x: 10, y: 150 })

    .textFont({size:'13px'})

    .text('Felicidades! Has conseguido financiar tu partido!');

  this.restart_game = this.bind('KeyDown', function() {

// Llamamos a la escena del juego

      Crafty.scene('Game');

  });

}, function() {

    this.unbind('KeyDown');

});

Como se puede intuir esto pone el mensaje y espera a que se pulse una tecla para mandarnos a la escena 'Game'.

----------------------------

Pantalla 'Game'

// Escena principal 'Game':  Crea las entidades del mapa y del político.

Crafty.scene('Game', function() {

// Colocamos cada cosa en su lugar

  for (var x = 0; x < mapa[0].length; x++) {

    for (var y = 0; y < mapa.length; y++) {

            

      if (mapa[y][x]==1) {

          Crafty.e('MuroNegro').en(x,y);

      }

      

      if (mapa[y][x]==2) {

         Crafty.e('MuroMarron').en(x,y);

      }

      if (mapa[y][x]==3) {

         Crafty.e('Tesoro').en(x,y);

       

      }

    }

  }

//Colocamos el personaje principal en el mundo.

    Crafty.e('Politico').en(1, 8);

});

Como se ve, aquí dibujamos el mapa y plantamos el personaje en el mismo. No tenemos nada más que hacer ya que todos los comportamientos están definidos en las entidades.

----------------------------

Pantalla Loading...

Crafty.scene('Loading', function(){

  Crafty.e('2D, DOM, Text')

    .text('Cargando...')

    .attr({ x: 110, y: 140 })

    .textFont({size:'13px'})

  Crafty.scene('Game');

});

Y esta es la pantalla de carga que no veremos nunca...  :-)

___________________________________________________________________

Victoria!!!!

Hay un tema que queda pendiente. Y es cómo llamamos a la escena de victoria. 

Aquí vimos como hacer que el tesoro se destruyera al pasar por encima de él. Lo que haremos ahora será preguntar si queda algún tesoro y si no queda ninguno llamaremos a la escena de victoria. Por lo tanto modificaremos el componente Tesoro en el fichero componentes.js.

Crafty.c('Tesoro', {

  init: function() {

    this.requires('Actor, Color')

        .color('yellow');

  },

    

  recogido: function() {

     this.destroy();

     // Si no queda ningún tesoro ya hemos terminado.

     if (!Crafty('Tesoro').length) {  

Crafty.scene('Victory');

     }  

  } 

});

__________________________________________________

Código completo

Sólo queda explicar el fichero inicial game.js.  Lo único que hace es definir el tamaño del canvas y llamar a la escena 'Loading'. Hago en él una cosa rara y es sacar fuera la tabla del mapa como global, para que se a accesible también desde el fichero de escenas, ya que la escena 'Game' la usa. Ya se que no es muy ortodoxo, pero es lo que tiene saltomatacaballear.

Ah se me olvidaba...  si queréis ver como queda....  PINCHAD AQUÍ!!!!

Cambiar la versión de .NET Framework de un proyecto existente (VS 2010)

Esto me ha pasado por ejemplo instalando Crystal Reports para Visual Studio:

Empecé un proyecto en Framework 4 Client Profile y al usar el componente de Crystal me daba un error puesto que éste debe correr en la versión completa.

Para cambiar la versión del .NET Framework debemos:

• 1) Ir al Explorador de soluciones (CTRL + ALT + L) y pulsar con el botón derecho del ratón sobre el nombre del proyecto seleccionando la opción de Propiedades.

• 2) En la opción de compilar, seleccionaremos Opciones de compilación Avanzadas

• 3) Seleccionamos la versión del Framework deseada e incluso nos descargamos una nueva.

• Aceptamos y cruzamos los dedos para que no surjan incompatibilidades.

NOTA:  Especialmente si tenemos imágenes como recurso o usamos el archivo de configuración del proyecto, pueden darse incompatibilidades. Microsoft da aquí una serie de indicaciones, pero no me preguntéis porque no me he tenido que pelear con ello.

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:

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.