Usando CreateJs PreloadJS, SoundJS y TweenJS

En la primera parte de esta serie sobre el uso de CreateJs, echamos un vistazo a EaselJs. En esta segunda y última parte, veremos PreloadJs, SoundJs y TweenJs.

PreloadJS

PreloadJS es una biblioteca que le permite administrar y coordinar la carga de activos. PreloadJS facilita la precarga de sus activos, como imágenes, sonidos, JS, datos y otros. Utiliza XHR2 para proporcionar información de progreso real cuando está disponible o retrocede a la carga de etiquetas y facilita el progreso cuando no lo está. Permite múltiples colas, múltiples conexiones, pausas en cola y mucho más.

En PreloadJS, la clase LoadQueue es la API principal para precargar contenido. LoadQueue es un administrador de carga, que puede precargar un solo archivo o una cola de archivos. var queue = new createjs.LoadQueue (true);, Pasar falso forzaría la carga de etiquetas siempre que sea posible. LoadQueue tiene varios eventos a los que puedes suscribirte:

completo: se activa cuando una cola completa la carga de todos los archivos
error: se activa cuando la cola encuentra un error con cualquier archivo.
progreso: el progreso para cuando toda la cola ha cambiado.
carga de archivos: para cuando un solo archivo ha completado la carga.
fileprogress: el progreso para cuando un solo archivo tiene cambios. Por favor Nota que solo los archivos cargados con XHR (o posiblemente por complementos) dispararán eventos de progreso, distintos de cero o 100%.

Puede cargar archivos individuales llamando loadfile ("ruta al archivo") o cargar varios archivos llamando loadManifest () y pasar en una matriz de los archivos que desea cargar.

Los tipos de archivos soportados de LoadQueue Incluya lo siguiente.

BINARIO: datos binarios en bruto a través de XHR
CSS: archivos CSS
IMAGEN: Formatos de imagen comunes
JAVASCRIPT: archivos JavaScript
JSON: datos JSON
JSONP: JSON archivos de dominio cruzado
MANIFESTAR: una lista de archivos para cargar en formato JSON, ver loadManifest
SONIDO: Formatos de archivo de audio.
SVG: archivos SVG
TEXTO: archivos de texto - solo XHR
XML: datos XML

Este es un ejemplo del uso de PreloadJS para cargar en un archivo JavaScript, algunos archivos PNG y un MP3.

var canvas = document.getElementById ("Canvas"); var stage = new createjs.Stage (canvas); var manifiesto var precarga var progressText = new createjs.Text ("", "20px Arial", "# 000000"); progressText.x = 300 - progressText.getMeasuredWidth () / 2; progressText.y = 20; stage.addChild (progressText); stage.update (); función setupManifest () manifest = [src: "collision.js", id: "myjsfile", src: "logo.png", id: "logo", src: "ForkedDeer.mp3", id : "mp3file"]; para (var i = 1; i<=13;i++) manifest.push(src:"c"+i+".png")  function startPreload()  preload = new createjs.LoadQueue(true); preload.installPlugin(createjs.Sound); preload.on("fileload", handleFileLoad); preload.on("progress", handleFileProgress); preload.on("complete", loadComplete); preload.on("error", loadError); preload.loadManifest(manifest);  function handleFileLoad(event)  console.log("A file has loaded of type: " + event.item.type); if(event.item.id == "logo") console.log("Logo is loaded"); //create bitmap here   function loadError(evt)  console.log("Error!",evt.text);  function handleFileProgress(event)  progressText.text = (preload.progress*100|0) + " % Loaded"; stage.update();  function loadComplete(event)  console.log("Finished Loading Assets");  setupManifest(); startPreload();

Dentro de setupManifest () Para esta función, estamos agregando un archivo JavaScript, un MP3 y un archivo PNG. Pasamos un objeto con las teclas "src" e "id". Al usar "id" podremos identificar el activo una vez que se haya cargado. Por último, hacemos un bucle y agregamos 13 imágenes más en la matriz. No siempre necesitará una "ID" si solo quiere asegurarse de que algunos activos se carguen.

Estamos escuchando los eventos "carga de archivos", "progreso" y "completo". El evento de carga de archivos se dispara cuando se ha cargado un solo archivo, el progreso es para obtener el progreso de loadQueue y los incendios completos cuando todos los archivos se han cargado. En el handleFileLoad () En esta función estamos registrando el tipo de archivos, lo que puede ser muy útil. También comprobamos el artículo de carné de identidad, así es como puede realizar un seguimiento de las precargas y hacer algo apropiado con los activos.

Tenga en cuenta que para poder cargar sonido, debe llamar installPlugin (createjs.Sound) lo que hemos hecho dentro de la iniciopreparar función.

TweenJS

La biblioteca TweenJS es para interpolar y animar propiedades HTML5 y JavaScript. Proporciona una interfaz de interpolación simple pero potente. Admite la interpolación de propiedades de objetos numéricos y propiedades de estilo CSS, y le permite encadenar interpolaciones y acciones para crear secuencias complejas.

Para configurar un Tween, llame al Tween (target, [props], [pluginData]) constructor con las siguientes opciones.

target: el objeto de destino que tendrá sus propiedades interpoladas
props: las propiedades de configuración que se aplican a esta instancia de interpolación (por ejemplo, loop: true, paused: true). Todas las propiedades por defecto son falsas. Los apoyos apoyados son:

bucle: establece la propiedad de bucle en esta interpolación.
useTicks: usa tics para todas las duraciones en lugar de milisegundos.
ignoreGlobalPause: establece la propiedad ignoreGlobalPause en esta interpolación.
anular: si es verdadero, se llamará a Tween.removeTweens (objetivo) para eliminar cualquier otra interpolación con el mismo objetivo.
en pausa: indica si se debe iniciar la interpolación en pausa.
posición: indica la posición inicial para esta interpolación.
onChange: especifica un escucha para el evento "cambio".

pluginData: un objeto que contiene datos para ser utilizados por los complementos instalados

Las propiedades de interpolación de la clase Tween para un solo objetivo. Los métodos de instancia se pueden encadenar para facilitar la construcción y secuenciación. No es una clase muy grande y solo tiene algunos métodos, pero es muy poderoso.

los a (props, duración, facilidad) método, pone en cola una interpolación de los valores actuales a las propiedades de destino. Establecer duración en 0 Para saltar inmediatamente al valor. Las propiedades numéricas se interpolarán de su valor actual en la interpolación al valor objetivo. Las propiedades no numéricas se establecerán al final de la duración especificada.

los esperar (duración, pasivo) pone en cola una espera (esencialmente una interpolación vacía).

los llamada (callback, params, alcance) Método Pone en cola una acción para llamar a la función especificada

TweenJS admite una gran cantidad de facilidades proporcionadas por la clase Ease.

En la siguiente demostración, puede hacer clic en el escenario para ver la demostración..

En esta demo, creamos Mapa de bits y Texto objetos. Colocamos el logotipo en la parte superior del escenario y cuando el usuario hace clic en el escenario, lo interpolamos en el centro del escenario mientras cambiamos sus escalas X e Y. Usamos el Espere() Método para dar un retraso de un segundo, luego usamos el llamada() Método para interpolar el texto. En la interpolación de texto, cambiamos el alfa, hacemos una rotación de 360 grados, la interpolamos a la izquierda del escenario..

TweenJS es muy divertido, intente usar algunas de las otras propiedades de los objetos de visualización

Sonido js

SoundJS es una biblioteca que proporciona una API simple y funciones potentes para que trabajar con audio sea muy fácil. La mayor parte de esta biblioteca se utiliza de forma estática (no es necesario crear una instancia). Funciona a través de complementos que resumen la implementación de audio real, por lo que la reproducción es posible en cualquier plataforma sin un conocimiento específico de qué mecanismos son necesarios para reproducir sonidos.

Para usar SoundJS, use la API pública en la clase Sound. Esta API es para:

Instalación de complementos de reproducción de audio
Registro (y precarga) de sonidos.
Creando y reproduciendo sonidos.
Controle los controles de volumen, silencio y parada de todos los sonidos a la vez

Reproducir sonidos crea SoundInstance Instancias, que pueden ser controladas individualmente. Usted puede:

Pausar, reanudar, buscar y detener sonidos.
Controla el volumen, el silencio y la panoramización de un sonido.
Escuche los eventos en las instancias de sonido para recibir una notificación cuando finalicen, se repitan o fallen

A continuación se muestra el código mínimo que necesitará para reproducir un archivo de audio.

createjs.Sound.initializeDefaultPlugins (); createjs.Sound.alternateExtensions = ["ogg"]; var myInstance = createjs.Sound.play ("IntoxicatedRat.mp3");

Sin embargo, no pude conseguir que funcionara en mi máquina en Firefox y Chrome, aunque lo anterior funcionó en IE. El complemento predeterminado estaba predeterminado para WebAudio, tuve que registrarlo para usar el HTMLAudio como se muestra a continuación.

createjs.Sound.registerPlugins ([createjs.HTMLAudioPlugin]); console.log (createjs.Sound.activePlugin.toString ()); createjs.Sound.alternateExtensions = ["ogg"]; var mySound = createjs.Sound.play ("IntoxicatedRat.mp3");

En las secciones de código anteriores, usamos el Alternativas Extensiones propiedad que intentará cargar el tipo de archivo OGG si no puede cargar MP3.

Con los conceptos básicos fuera del camino, ahora estaremos creando un reproductor de MP3. Vea la demo y la captura de pantalla a continuación.

Primero llamamos registerPlugins () para usar HTMLAudio y establecer una extensión alternativa para que intente cargar OGG si el navegador no admite MP3.

createjs.Sound.registerPlugins ([createjs.HTMLAudioPlugin]); createjs.Sound.alternateExtensions = ["ogg"];

Dentro de reproducir sonido() función, llamamos al jugar() Método que reproduce uno de los archivos de sonido de la pistas formación. Ajustamos el volumen de los sonidos usando el setVolume () método, usamos el oyente "completo" para alarmarse cuando el sonido actual termina de reproducirse.

theMP3 = createjs.Sound.play ("./ sonidos /" + pistas [currentSong] + ". mp3"); theMP3.setVolume (vol); theMP3.on ("complete", songFinishedPlaying, null, false);

A lo largo del resto del código, utilizamos el jugar(), detener(),pausa() y currículum() metodos.

theMP3.play (); theMP3.stop (); theMP3.pause (); theMP3.resume ();

No he dado una explicación línea por línea del reproductor de MP3, pero si tiene alguna pregunta, no dude en preguntar en los comentarios..

Juego Space Invader

Como se mencionó en la primera mitad de este tutorial, aquí hay una demostración del juego Space Invaders con precarga, sonido y preadolescentes agregados en.

Conclusión

Con esto concluye nuestra gira de CreateJS. Es de esperar que en los últimos dos artículos, haya visto lo fácil que es crear una aplicación interactiva enriquecida con CreateJS.

La documentación es de primera categoría y viene con una gran cantidad de ejemplos, así que asegúrese de revisarlos.

Espero que hayas encontrado este tutorial útil y que estés entusiasmado con el uso de CreateJS. Acaban de anunciar en su blog que el soporte beta para WebGL ahora también está disponible. Gracias por leer!

Código