Share
En este tutorial, exploraremos el conjunto de bibliotecas CreateJS. CreateJS es un conjunto de herramientas y bibliotecas de JavaScript para crear experiencias ricas e interactivas con HTML5. La suite CreateJS está dividida en cuatro bibliotecas..
La primera biblioteca que veremos es EaselJs. Empecemos!
EaselJS es una biblioteca para trabajar con el lienzo HTML5. Consiste en una lista de visualización jerárquica completa, un modelo de interacción central y clases de ayuda para que el trabajo con Canvas sea mucho más fácil. Ponerse en marcha con EaselJS no podría ser más fácil. Tendrá que definir un elemento de lienzo en su HTML y hacer referencia a él en su JavaScript. EaselJS utiliza la noción de un escenario que es el contenedor de nivel superior para la lista de visualización (el escenario será su elemento de lienzo). A continuación se muestra un fragmento HTML y el correspondiente JavaScript necesario para configurar EaselJS.
Para referenciar el lienzo anterior usarías lo siguiente.
Accentsconagua
var canvas = document.getElementById ("testCanvas"); var stage = new createjs.Stage (canvas); EaselJS viene con una clase de Gráficos que expone una API fácil de usar para generar instrucciones de dibujo vectorial y dibujarlas en un contexto específico. Los comandos son muy similares al HTML5 Canvas normal, mientras que EaselJs también agrega algunos de sus propios comandos nuevos. Si no está familiarizado con el lienzo de HTML 5 y los comandos de dibujo, es posible que desee ver el curso de Canvas Essentials que se lanzó recientemente. Normalmente, no utilizará la clase Graphics por sí misma, sino que accederá a ella mediante la clase Shape. A continuación se muestra un JSFiddle que usa esa clase de Forma para hacer algunos dibujos..
Como se puede ver en el código de arriba, los comandos son desechables. ShapeObject.graphics.setStrokeStyle (1) .beginStroke ("rgba (0,0,0,1) etc ... También puede haber notado una llamada a stage.addChild () dentro de las funciones. Cuando quieras poner algo en el lienzo, debes llamar stage.addChild (). Dentro de dibujar figuras () función, hay una llamada a stage.update (). Para poder ver tus cambios, debes llamar stage.update () Después de cada cambio al lienzo. Hay una manera de no tener que llamar repetidamente stage.update () y eso es mediante el uso de la Clase Ticker. El Ticker proporciona una emisión centralizada de pulsos o latidos en un intervalo determinado. Los oyentes pueden suscribirse al evento tick para recibir una notificación cuando haya transcurrido un intervalo de tiempo establecido. A continuación se muestra cómo utilizaría la clase Ticker para actualizar automáticamente la etapa..
createjs.Ticker.addEventListener ("tick", handleTick); función handleTick (evento) stage.update () La clase de Forma viene con una gran cantidad de propiedades que puedes ajustar como x, y posiciones, alfa, escalaX, escalaY y bastantes otros. A continuación se muestra una demostración que muestra algunas de estas propiedades..
Dentro de dibujar las formas () generamos 15 círculos con una línea dibujada a través de ellos, pudiendo encadenar los comandos de dibujo hace que esto sea muy simple. Luego aleatorizamos la posición de las formas, escala, rotación y alfa..
Puede adjuntar eventos a las formas como hacer clic, mousedown / over / out, etc., usando el en() método. En esta demostración, al hacer clic en una de las formas, se lanza una alerta y, con el mouseout, registramos un mensaje en la consola. Para permitir eventos del mouse en el escenario. mousedown / over / out etc, debes llamar stage.enableMouseOver (frecuencia) donde frecuencia es el número de veces por segundo para transmitir los eventos del mouse. Esta operación es costosa, por lo que está deshabilitada por defecto.
EaselJS viene con una clase de texto que hace que sea muy fácil crear texto y cambiar las propiedades de ese texto. Llama al constructor pasando el texto, una fuente y un color, es decir,. new createjs.Text ("Hello World", "20px Arial", "# ff7700") Al igual que la clase Shape, viene con una variedad de propiedades y métodos. A continuación se muestra una demostración que utiliza la clase de texto.
Al igual que en la última demostración, creamos 25 TextFields y aplicamos algunos valores aleatorios a sus propiedades.
La siguiente demostración es un juego del ahorcado creado con la clase de forma y texto que hemos analizado hasta ahora en este tutorial..
Para dibujar el verdugo utilizamos una combinación en lineTo (), mover a(), y para la cabeza usamos el arco() método. Dentro de drawCanvas () función, llamamos al claro() método en el hangmanShape.graphics que borra cualquier dibujo anterior que hemos hecho en esta forma. Cambiamos el color de TextFields dependiendo de si el jugador ha ganado o perdido su juego.
Puedes usar imágenes utilizando la clase Bitmap. Un mapa de bits representa una imagen, lienzo o video en la lista de visualización, se puede crear una instancia utilizando un elemento HTML existente o una cadena (Base64). Por ejemplo nuevo createjs.Bitmap ("imagePath.jpg").
<
Muy similares a las demostraciones anteriores, creamos tres mapas de bits aquí, y les damos algunas propiedades aleatorias.
Estamos usando la clase Shadow para crear algunas sombras. La clase de sombra toma como parámetros, el color, offsetX, offsetY y el tamaño del efecto de desenfoque, etc.. myImage.shadow = new createjs.Shadow ("# 000000", 5, 5, 10). Puede aplicar sombras a cualquier objeto de visualización para que esto también funcione para texto.
Un Sprite muestra un cuadro o secuencia de cuadros (como una animación) desde una instancia de SpriteSheet. Una hoja de sprites es una serie de imágenes (generalmente cuadros de animación) combinados en una sola imagen. Por ejemplo, una animación que consta de ocho imágenes de 100x100 podría combinarse en una hoja de sprite de 400x200 (cuatro fotogramas de ancho por dos de alto). Puede mostrar fotogramas individuales, reproducir fotogramas como una animación e incluso secuenciar animaciones juntas. Para inicializar una instancia de Sprite, debe pasar un SpriteSheet y un número de cuadro o animación opcional para jugar, por ejemplo, new createjs.Sprite (spriteSheet, "run"). Los datos pasados al constructor SpriteSheet definen tres partes críticas de información:
A continuación se muestra un código de ejemplo que inicializaría un sprite de "carácter".
var data = new createjs.SpriteSheet ("images": ["path / to / image.png"], "frames": "regX": 0, "height": 96, "count": 10, "regY ": 0," ancho ": 75," animaciones ": " caminar ": [0, 9]); character = new createjs.Sprite (data, "walk"); juego de personajes (); Aquí hay una demostración usando las clases Sprite y SpriteSheet. Necesitas hacer clic en el escenario, y luego puedes usar "A" para moverte a la izquierda y "D" para moverte a la derecha. Una cosa a tener en cuenta sobre esta demostración es que he codificado en Base64 las imágenes y que están incluidas en el recurso externo "imagestrings.js". Debido a que estamos utilizando un SpriteSheet e interactuando con el mouse, el lienzo se contamina con la política de imágenes de dominio cruzado (CORS). Mediante el uso de cadenas Base64 podemos superar esto. Si estuviera alojado en su propio dominio, usaría la clase Bitmap como de costumbre al pasar un elemento o ruta.
Dentro de preparar() función estamos creando la hoja de sprites. Para la tecla "imagenes" estoy pasando caracterimagen que es una cadena codificada en Base64. Para la tecla "cuadros", las imágenes de caracteres tienen 96 píxeles de alto, 75 píxeles de ancho y hay diez cuadros (imágenes separadas). A continuación se muestra la imagen que estamos utilizando para el hoja de sprites para que puedas visualizar como se ve.
Para la tecla "animación" definimos una animación "correr" que va del "cuadro" cero a nueve. Por último, creamos la personaje desde el hoja de sprites.
Cuando mueves el personaje a la izquierda o derecha llamamos personaje.jugar (). Y cuando dejas de mover al personaje que llamamos.character.gotoAndStop (0). Como solo tenemos una "animación" podemos llamarla jugar() y gotoAndStop () Si tuviera varias animaciones, usaría una combinación de estas dos ventajas. gotoAndPlay ().
La Clase de contenedor es una lista de visualización encajable que le permite trabajar con elementos de visualización compuestos. Por ejemplo, podría agrupar las instancias de mapa de bits de brazo, pierna, torso y cabeza en un contenedor de personas, y transformarlas como un grupo, al mismo tiempo que puede mover las partes individuales entre sí. Los hijos de los contenedores tienen sus propiedades de transformación y alfa concatenadas con su contenedor principal. A continuación se muestra una demostración que utiliza la Clase de Contenedor. Haz clic en el escenario para mover el contenedor por 20 píxeles..
Aquí estamos creando tres mapas de bits y agregándolos a la envase, Entonces podemos moverlos todos de una vez moviendo el envase, y aunque se encuentren en un contenedor, aún se podrían mover cada uno individualmente..
El método cache () del objeto de visualización dibuja el objeto de visualización en un nuevo lienzo, que luego se utiliza para los sorteos posteriores. Para contenido complejo que no cambia con frecuencia (por ejemplo, un contenedor con muchos niños que no se mueven, o una forma vectorial compleja), esto puede proporcionar una representación mucho más rápida porque no es necesario volver a renderizar el contenido en cada tic..
El objeto de visualización en caché se puede mover, rotar, desvanecer, etc. libremente, sin embargo, si su contenido cambia, debe actualizar el caché manualmente llamando updateCache () o cache() otra vez. Debe especificar el área de caché a través de los parámetros x, y, w y h. Esto define el rectángulo que se representará y almacenará en caché utilizando las coordenadas de este objeto de visualización. El almacenamiento en caché normalmente no debe utilizarse en el Mapa de bits clase, ya que puede degradar el rendimiento, sin embargo, si desea utilizar un filtro en un Mapa de bits entonces debe ser almacenado en caché.
Debido a restricciones de tamaño en las incrustaciones de JSFiddle, no proporcionaré una demostración de este método, pero lo vincularé a una demostración en el sitio web de CreateJs.
La clase de filtro es la clase base de la cual todos los filtros deben heredar. Los filtros deben aplicarse a los objetos que se han almacenado en caché utilizando el método de caché. Si un objeto cambia, deberá almacenarlo nuevamente en caché o usar updateCache (). Tenga en cuenta que los filtros deben ser aplicados. antes de almacenamiento en caché EaselJS viene con una serie de filtros pre-construidos. Tenga en cuenta que los filtros individuales no se compilan en la versión reducida de EaselJS. Para usarlos, debes incluirlos manualmente en el HTML..
La demostración a continuación utiliza el filtro de color. Al hacer clic en el escenario, se elimina el canal verde de la imagen. los Filtro de color tiene los siguientes parámetros.
ColorFilter ([redMultiplier = 1] [greenMultiplier = 1] [blueMultiplier = 1] [alphaMultiplier = 1] [redOffset = 0] [greenOffset = 0] [blueOffset = 0] [alphaOffset = 0])
Se espera que los Multiplicadores rojo, verde, azul y alfa sean un número de cero a uno, y se espera que el Desplazamiento rojo, verde, azul y alfa sea un número de 255 a 255.
Creamos un objeto de mapa de bits normal, aplicamos el filtro y la memoria caché del mapa de bits..
He creado una demostración final, que construiremos en la siguiente parte de esta serie, agregando sonido, precargando los activos y usando interpolaciones..
En esta demo estamos aprovechando la Mapa de bits, Texto, y Forma, Clases para crear un juego tipo Space Invaders. No repasaré todos los pasos aquí, ya que el propósito es mostrar cómo unir los conceptos, pero si tiene alguna pregunta sobre el código, no dude en preguntar en los comentarios. La detección de colisiones es proporcionada por osln a través de Github..
En este tutorial hemos echado un vistazo a EaselJS y hemos hecho un par de aplicaciones de demostración. Espero que hayas encontrado útil este artículo y que te emocione el uso de EaselJS. Gracias por leer!
