CutJS: Animación y creación de elementos 2D con HTML5

CutJS es una muy buena biblioteca escrita en JavaScript para el diseño y creación de elementos animados utilizando HTML5.

La principal característica de este proyecto es que funciona perfectamente en diversas plataformas, tanto de escritorio como móviles. Esta herramienta esta pensada para la creación de juegos sencillos, perfecto para el desarrollo de juegos para Facebook, Android, iOS, hasta Google Chrome Store.

elementos 2d animados con HTML5

Otro aspecto interesante de CutJS es que emplea Canvas de HTML5 para funcionar, sin embargo a diferencia de la implementación nativa, emplea un proceso o ciclo de vida que mejora el rendimiento de las animaciones, evitando el trabajo de realizar muchos de estos menesteres de forma manual.

Para que entiendan un poco lo sencillo que resulta animar y crear elementos con esta biblioteca un pequeño ejemplo que implementa una animación al recibir la acción del mouse, además de agregar una textura al objeto.

// Create new app
Cut(function(root, container) {

  // Subscribe to Cut.Mouse
  Cut.Mouse(root, container);

  // Set view box
  root.viewbox(500, 300);

  // Create an image node
  Cut.image("base:box").appendTo(root)
    // on mouse click on this node
    .on(Cut.Mouse.CLICK, function(ev, point) {
      // Tween scale values of this node
      this.tween().clear().pin({
        scaleX : Math.random() + 0.5,
        scaleY : Math.random() + 0.5
      });
      return true;
    });

});

// Register an image texture
Cut.addTexture({
  name : "base",
  imagePath : "base.png",
  cutouts : [
    { name : "box", x : 0, y : 0, width : 30, height : 30 }
  ]
});

CutJS se encuentra disponible para todos bajo licencia MIT.

Les recomiendo visitar la web del proyecto para ver unos cuantos ejemplos de uso, además de acceder a la documentación oficial para aprovechar al máximo esta muy buena iniciativa.

Web: CutJS

Categorizado en: