Introducción a CreateJS!
08/03/2016
Presentación
Muy buenas a tod@s! Como publicación inicial comenzaré con una serie de tutoriales sobre CreateJS, una de mis librerías favoritas. Realmente se trata de una suite de librerías, open source, que juntas satisfacen estupendamente todas las necesidades de una aplicación web gráfica interactiva y multiplataforma. CreateJS vive principalmente en un Canvas de HTML5, donde carga contenido, manipula gráficos, presenta textos, reproduce sonidos y mucho más, todo usando Javascript.
A modo introductorio, aquí presento los distintos módulos que componen CreateJS:
EaselJS:La más atractiva y popular. Es muy vistosa, pues se especializa en la manipulación de gráficos en un Canvas de HTML5. EaselJS permite que fácilmente dibujemos líneas o textos, formas como círculos y rectángulos, colores y transparencias, transformaciones de escalado, rotación y mucho más.
Además, ofrece un excelente soporte para Sprites y SpritesSheets, lo que nos permite diseñar animaciones e implementar gráficos de videjojuegos fácilmente.
TweenJS: Interpolaciones y animaciones. Esta librería ofrece un mecanismo muy sencillo para realizar interpolaciones, es decir, calcular valores intermedios entre dos valores iniciales determinados. La forma en la que estos valores se calculan vendrá definida por una función matemática prediseñada que podremos elegir, abstrayéndonos de la complejidad del cálculo, y nos dará como resultado una herramienta muy potente para hacer "tweening" de cualquier objeto JS. Además, incluye la posibilidad de añadir un Plugin CSS el cual nos permitirá también interpolar propiedades CSS.
SoundJS: Control del sonido en la web. Esta librería ofrece de una forma simple y poderosa una API que nos permitirá trabajar con el Sonido en los navegadores de una forma tremendamente sencilla. Nos permitirá registrar sonidos, reproducirlos, loopearlos, pausarlos, etc. Además de su naturaleza multiplataforma, en las últimas versiones también se ha incluido soporte para los AudioSprites, es decir, la gestión de múltiples clips de sonido en un único fichero, una estrategia muy beneficiosa para el rendimiento y la eficiencia de las aplicaciones con varias pistas de Audio.
PreloadJS: Gestión de los archivos. Por último pero no menos importante, PreloadJS se encargará de realizar la cargar los gráficos, los sonidos y demás datos de nuestra aplicación a modo de preparación, es decir, pre-cargará todo el contenido para asegurar una ejecución más fluida y fiable. La integración de esta librería otorgará un empujón al rendimiento general mientras que a su vez nos ayudará a conseguir una gestión más adecuada de los recursos y del proyecto en general.
Cada una de estas librerías tiene una función muy concreta en la que se especializa. Podréis imaginar que en conjunto cubren bastante bien las necesidades de un producto Audiovisual. CreateJS tiene mucho potencial y cuenta con una documentación decente (aunque se echan en falta algunos ejemplos). Tiene soporte de Adobe y Microsoft, así como una excelente integración con Flash Professional.
Actualmente se utiliza principalmente para Publicidad Web, Minijuegos y entretenimiento en general, con una licencia MIT se puede usar incluso para proyectos comerciales sin coste alguno. Todas estas características convierten a CreateJS en una herramienta muy interesante y es por ello que aquí le dedicaremos unas cuantas entradas ;).
Setup
Lo primero que deberemos hacer será preparar nuestro html, documento que enlazará el css y todo el JS necesario para empezar a desarrollar el proyecto. Empezaremos por un html mínimo, lo único que necesitará, además de sus etiquetas indispensables (head, body, meta, etc) será un Canvas, y un par de etiquetas script. El esqueleto será algo así:
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Introducción CreateJS</title>
</head>
<body onload="init()">
<canvas id="canvas" width="500" height="200" style="background-color: black"></canvas>
<!--CREATEJS-->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
function init() {
}
</script>
</body>
</html>
Con este código tendremos un html con un <canvas>. El canvas necesita de dos atributos, with y height, para su ancho y alto respectivamente (en píxeles).
Cuidado! no confundir estos atributos width y height del canvas, con los width y height del css, son cosas distintas.
El canvas de html es transparente, así que para visualizarlo le daremos un estilo:
style="background-color: black"
En el html también hacemos la inclusión de la librería CreateJS completa:
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
La carga de esta librería nos permitirá usar todas las librerías de CreateJS en nuestros scripts; serán objetos que se registrarán dentro del objeto global createjs. Finalmente creamos otra etiqueta <script> en donde nos dispondremos a escribir el código JavaScript de nuestra aplicación. Empezaremos definiendo una función init() que será la función inicial que inicializará el resto de funciones futuras que escribiremos. Nótese que esta primera función init() es llamada gracias al atributo onload de la etiqueta <body>
Tendremos un html con un canvas negro:
Iniciar CreateJS
Con nuestro html listo, podemos proceder a pasar a experimentar con las librerías que CreateJS nos ofrece. Primero que nada, deberemos crear un Stage (escenario). En nuestra función init() definimos una variable:
var canvas = document.getElementById('canvas');
var stage = new createjs.Stage(canvas);
Aquí estamos construyendo un Stage pasándole como parámetro un canvas obtenido con getDocumentById(). De este modo tendremos en la variable stage un canvas "enriquecido", que es con el que createjs trabajará. El Stage funcionará como un Contenedor o Display List. Cada vez que generemos un objeto deberemos añadirlo al Stage y éste mantendrá un registro de los objetos (hijos) que posea, atendiendo a su posición, escala, color, rotación, etc. Todo esto a nivel lógico, si queremos que createjs renderize esta información, deberemos hacer que el Stage llame a su método update().
Un ejemplo en el siguiente apartado ;)
Añadiendo un círculo
El primer objeto que añadiremos será un Shape. La clase Shape nos permite dibujar objetos en el Stage haciendo uso de la clase Graphics. La clase Graphics nos permitirá crear vectores mediante el uso de una API sencilla. Veremos estos objetos en profundidad en los siguientes artículos. Por ahora, escribiremos el siguiente código para generar, añadir y visualizar un círculo rojo en nuestro canvas:
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
Inicializamos un Shape, accedemos a su atributo graphics (una instancia de Graphics) y ahí hacemos un par de llamadas a dos métodos para dibujar.
El primero, .beginFill(color), indica que lo que va a dibujar estará "relleno"; recibe como parámetro un color. El segundo, .drawCircle(x, y, radio), indica que lo que vamos a dibujar es un círculo; recibe como parámetro la posición del punto central y el radio del círculo. En este caso, el centro del círculo estará en el punto (0,0), es decir, se dibujará en el extremo superior izquierdo del Stage; siempre y cuando añadamos este Shape al Stage ;)
stage.addChild(circle);
Finalmente, lo renderizamos con:
stage.update()
Veremos que como resultado el círculo estará dibujado en la esquina superior izquierda. Podemos centrarlo en el canvas con un par de líneas más:
circle.x = canvas.width / 2;
circle.y = canvas.height / 2;
Recuerda que en la variable canvas tenemos guardado todo el elemento html. Esta variable posee muchos atributos con información útil, entre ellos el width y el height del canvas. Así que modificaremos la posición del círculo asignando valores a su punto x e y.
Aquí el código completo de este ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Introducción Createj</title>
</head>
<body onload="init()">
<canvas id="canvas" width="500" height="200" style="background-color: black"></canvas>
<!--CREATEJS-->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
function init() {
var stage = new createjs.Stage("canvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = canvas.width / 2;
circle.y = canvas.height / 2;
stage.addChild(circle);
stage.update();
}
</script>
</body>
</html>
Y eso ha sido todo para la introducción. En los siguientes capítulos profundizaremos más en las posibilidades de la clase Shape y Graphics para construir cosas más interesantes.
Aquí dejo un JSFiddle para que podáis toquetear un poco de forma rápida. Podeis probar a cambiar los parámetros del círculo, color, posición, alpha.. o usar drawRect(x,y,width,height) para dibujar un cuadrado, por ejemplo.
Demo