Utilisation de CreateJs PreloadJS, SoundJS et TweenJS

Dans la première partie de cette série sur l'utilisation de CreateJs, nous avons examiné EaselJs. Dans cette deuxième et dernière partie, nous examinerons PreloadJs, SoundJs et TweenJs..

PréchargeJS

PreloadJS est une bibliothèque qui vous permet de gérer et de coordonner le chargement des actifs. PreloadJS facilite le préchargement de vos ressources, telles que les images, les sons, les fichiers JS, les données et autres. Il utilise XHR2 pour fournir des informations sur les progrès réels lorsqu'ils sont disponibles ou pour revenir au chargement de balises et faciliter les progrès lorsqu'il ne l'est pas. Il permet plusieurs files d'attente, plusieurs connexions, des files d'attente en pause et bien plus encore..

Dans PreloadJS, la classe LoadQueue est la principale API pour le préchargement de contenu. LoadQueue est un gestionnaire de charge, qui peut précharger un fichier unique ou une file d'attente de fichiers.. file d'attente var = new createjs.LoadQueue (true);, passer false forcerait le chargement des tags si possible. LoadQueue a plusieurs événements auxquels vous pouvez vous abonner:

complete: déclenché à la fin du chargement de tous les fichiers par une file d'attente
error: déclenché lorsque la file d'attente rencontre une erreur avec un fichier.
progress: le progrès pour quand la file d'attente entière a changé.
fileload: pour quand un seul fichier a fini de se charger.
fileprogress: la progression lorsqu'un seul fichier a été modifié. S'il vous plaît Remarque que seuls les fichiers chargés avec XHR (ou éventuellement par des plugins) déclencheront des événements de progression autres que zéro ou 100%.

Vous pouvez charger des fichiers uniques en appelant loadfile ("chemin d'accès au fichier") ou charger plusieurs fichiers en appelant loadManifest () et en passant dans un tableau des fichiers que vous souhaitez charger.

Les types de fichiers pris en charge de LoadQueue inclure les éléments suivants.

BINARY: données binaires brutes via XHR
CSS: fichiers CSS
IMAGE: formats d'image courants
JAVASCRIPT: fichiers JavaScript
JSON: données JSON
JSONP: fichiers JSON inter-domaines
MANIFEST: Une liste des fichiers à charger au format JSON, voir loadManifest
SON: formats de fichiers audio
SVG: fichiers SVG
TEXT: fichiers texte - XHR uniquement
XML: données XML

Voici un exemple d’utilisation de PreloadJS pour charger un fichier JavaScript, des fichiers PNG et un fichier MP3..

var canvas = document.getElementById ("Canvas"); var stage = new createjs.Stage (canvas); var manifeste; précharge var; var progressText = new createjs.Text ("", "20px Arial", "# 000000"); progressText.x = 300 - progressText.getMeasuredWidth () / 2; progressText.y = 20; stage.addChild (progressText); stage.update (); function setupManifest () manifeste = [src: "collision.js", id: "monjsfichier", src: "logo.png", id: "logo", src: "ForkedDeer.mp3", id : "mp3file"]; pour (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();

Dans le setupManifest () fonction, nous ajoutons un fichier JavaScript, un fichier MP3 et un fichier PNG. Nous passons un objet avec les clés "src" et "id". En utilisant "id", nous pourrons identifier l’actif une fois qu’il aura été chargé. Enfin, nous parcourons et ajoutons 13 images supplémentaires dans le tableau. Vous n'aurez pas toujours besoin d'un "identifiant" si vous voulez juste vous assurer que certains actifs sont chargés.

Nous écoutons les événements "fileload", "progress" et "complete". L'événement fileload se déclenche lorsqu'un seul fichier est chargé, la progression sert à obtenir la progression de la loadQueue et se déclenche lorsque tous les fichiers sont chargés. dans le handleFileLoad () fonction nous enregistrons le type de fichiers, ce qui peut être très utile. Nous vérifions également l'article identifiant, Voici comment vous pouvez garder une trace des précharges et faire quelque chose d’approprié avec les actifs.

Notez que pour pouvoir charger le son, vous devez appeler installPlugin (createjs.Sound) que nous avons fait dans le startPreload une fonction.

TweenJS

La bibliothèque TweenJS est conçue pour l'interpolation et l'animation de propriétés HTML5 et JavaScript. Il fournit une interface de tweening simple mais puissante. Il prend en charge l'interpolation des propriétés d'objet numérique et des propriétés de style CSS, et vous permet de chaîner des interpolations et des actions pour créer des séquences complexes..

Pour configurer un Tween, vous appelez le Tween (cible, [accessoires], [pluginData]) constructeur avec les options suivantes.

target - Objet cible dont les propriétés seront interpolées
props - Les propriétés de configuration à appliquer à cette instance d'interpolation (par exemple, loop: true, en pause: true). Toutes les propriétés sont définies par défaut sur false. Les accessoires supportés sont:

loop: définit la propriété loop sur cette interpolation.
useTicks: utilise des ticks pour toutes les durées au lieu de millisecondes.
ignoreGlobalPause: définit la propriété ignoreGlobalPause sur cette interpolation.
override: si true, Tween.removeTweens (cible) sera appelé pour supprimer tous les autres tweens avec la même cible.
en pause: indique s'il faut démarrer l'interpolation en pause.
position: indique la position initiale de cette interpolation.
onChange: spécifie un écouteur pour l'événement "change".

pluginData - Un objet contenant des données à utiliser par les plugins installés

La classe Tween interpelle les propriétés d'une cible unique. Les méthodes d'instance peuvent être chaînées pour faciliter la construction et le séquençage. Ce n'est pas une très grande classe et n'a que quelques méthodes, mais c'est très puissant.

le to (accessoires, durée, facilité) méthode, met en attente une interpolation des valeurs actuelles aux propriétés de la cible. Définir la durée à 0 pour sauter immédiatement à la valeur. Les propriétés numériques seront interpolées de leur valeur actuelle dans l'interpolation à la valeur cible. Les propriétés non numériques seront définies à la fin de la durée spécifiée.

le wait (durée, passive) met une file d'attente (essentiellement une interpolation vide).

le call (callback, params, scope) method Met en file d'attente une action pour appeler la fonction spécifiée

TweenJS supporte un grand nombre de facilités fournies par la classe Ease.

Dans la démo suivante, vous pouvez cliquer sur la scène pour voir la démo..

Dans cette démo, nous créons Bitmap et Texte objets. Nous plaçons le logo en haut de la scène et lorsque l'utilisateur clique sur la scène, nous l'interposons au milieu de la scène tout en modifiant son échelle X et Y. Nous utilisons le attendre() méthode pour donner un délai d'une seconde, nous utilisons le appel() méthode pour interpoler le texte. Dans l'interpolation de texte, nous modifions l'alpha, effectuons une rotation de 360 degrés, l'interpolation à gauche de la scène..

TweenJS est très amusant, essayez d’utiliser certaines des autres propriétés des objets d’affichage.

SoundJS

SoundJS est une bibliothèque qui fournit une API simple et de puissantes fonctionnalités pour faciliter le travail avec l'audio. La plupart de cette bibliothèque est utilisée de manière statique (il n'est pas nécessaire de créer une instance). Cela fonctionne via des plugins qui résument l'implémentation audio réelle, donc la lecture est possible sur n'importe quelle plate-forme sans connaissance spécifique des mécanismes nécessaires pour jouer des sons..

Pour utiliser SoundJS, utilisez l’API publique de la classe Sound. Cette API est pour:

Installer des plugins de lecture audio
Enregistrement (et préchargement) des sons
Créer et jouer des sons
Réglez le volume, désactivez le son et arrêtez les commandes pour tous les sons en même temps

Jouer des sons crée SoundInstance instances, qui peuvent être contrôlés individuellement. Vous pouvez:

Mettre en pause, reprendre, rechercher et arrêter les sons
Contrôler le volume, le muet et le panoramique d'un son
Écoutez les événements sur les instances sonores pour être averti de la fin, de la boucle ou de l'échec

Vous trouverez ci-dessous le code minimal nécessaire pour lire un fichier audio..

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

Cependant, je ne pouvais pas obtenir que cela fonctionne sur ma machine sous Firefox et Chrome, bien que ce qui précède fonctionnait sous IE. Le plugin par défaut était WebAudio, je devais l'enregistrer pour utiliser HTMLAudio comme ci-dessous.

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

Dans les sections de code ci-dessus, nous utilisons le AlternatifExtensions propriété qui tentera de charger le type de fichier OGG si elle ne peut pas charger MP3.

Maintenant que nous avons les bases, nous allons créer un lecteur MP3. Voir la démo et la capture d'écran ci-dessous.

Nous appelons d'abord registerPlugins () utiliser HTMLAudio et définir une autre extension pour essayer de charger OGG si le navigateur ne prend pas en charge le format MP3.

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

Dans le jouer son() fonction, nous appelons le jouer() méthode qui lit l’un des fichiers son du répertoire des pistes tableau. Nous réglons le volume des sons en utilisant le setVolume () méthode, nous utilisons l'auditeur "complet" pour être averti lorsque la lecture du son actuel est terminée.

theMP3 = createjs.Sound.play ("./ sounds /" + tracks [currentSong] + ". mp3"); theMP3.setVolume (vol); theMP3.on ("complet", songFinishedPlaying, null, false);

Dans le reste du code, nous utilisons le jouer(), Arrêtez(),pause() et CV() les méthodes.

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

Je n'ai pas donné d'explication ligne par ligne du lecteur MP3, mais si vous avez des questions, n'hésitez pas à les poser dans les commentaires..

Jeu Space Invader

Comme mentionné dans la première moitié de ce didacticiel, voici une démonstration du jeu Space Invaders avec préchargement, son et tweens ajoutés à.

Conclusion

Ceci conclut notre visite de CreateJS. Si tout va bien des deux derniers articles, vous avez vu combien il est facile de créer une application interactive riche avec CreateJS.

La documentation est de qualité supérieure et contient de nombreux exemples, assurez-vous de les consulter..

J'espère que vous avez trouvé ce tutoriel utile et que l'utilisation de CreateJS vous enthousiasme. Ils viennent d’annoncer sur leur blog que la version bêta de WebGL est également disponible. Merci d'avoir lu!

Code