Share
Dans ce didacticiel, nous allons explorer la suite de bibliothèques CreateJS. CreateJS est une suite de bibliothèques et d'outils JavaScript permettant de créer des expériences riches et interactives avec HTML5. La suite CreateJS est divisée en quatre bibliothèques.
La première bibliothèque que nous examinerons est EaselJs. Commençons!
EaselJS est une bibliothèque pour travailler avec le canevas HTML5. Il se compose d'une liste complète d'affichage hiérarchique, d'un modèle d'interaction principal et de classes d'assistance facilitant grandement l'utilisation de Canvas. Se lancer avec EaselJS ne pourrait être plus facile. Vous aurez besoin de définir un élément de toile dans votre code HTML et de le référencer dans votre code JavaScript. EaselJS utilise la notion d'une scène qui est le conteneur de niveau supérieur pour la liste d'affichage (la scène sera votre élément de canevas). Vous trouverez ci-dessous un fragment HTML et le code JavaScript nécessaire pour configurer EaselJS..
Pour référencer la toile ci-dessus, vous utiliseriez ce qui suit.
Accentsconagua
var canvas = document.getElementById ("testCanvas"); var stage = new createjs.Stage (canvas); EaselJS est livré avec une classe Graphics qui présente une API facile à utiliser pour générer des instructions de dessin vectoriel et les dessiner dans un contexte spécifié. Les commandes sont très similaires au HTML5 Canvas normal, mais EaselJs ajoute également certaines de ses nouvelles commandes. Si vous n'êtes pas familiarisé avec le canevas HTML 5 et les commandes de dessin, vous voudrez peut-être visionner le cours sur Canvas Essentials qui a été récemment publié. Normalement, vous n'utiliserez pas la classe Graphics en tant que telle, vous y accéderez plutôt par la classe Shape. Ci-dessous, un JSFiddle qui utilise cette classe Shape pour dessiner.
Comme vous pouvez le voir dans le code ci-dessus, les commandes sont chaînables. ShapeObject.graphics.setStrokeStyle (1) .beginStroke ("rgba (0,0,0,1) etc… Vous avez peut-être aussi remarqué un appel à stage.addChild () dans les fonctions. Chaque fois que vous voulez mettre quelque chose sur la toile, vous devez appeler stage.addChild (). Dans le drawShapes () fonction, il y a un appel à stage.update (). Pour pouvoir voir vos modifications, vous devez appeler stage.update () après chaque changement sur la toile. Il y a un moyen de ne pas avoir à appeler à plusieurs reprises stage.update () et c'est en utilisant la classe Ticker. Le ticker fournit une émission centralisée de ticks ou de pulsations à un intervalle défini. Les auditeurs peuvent s'abonner à l'événement tick pour être avertis lorsqu'un intervalle de temps défini s'est écoulé. Ci-dessous, vous utiliserez la classe Ticker pour mettre à jour automatiquement la scène..
createjs.Ticker.addEventListener ("tick", handleTick); function handleTick (event) stage.update () La classe Shape comprend de nombreuses propriétés que vous pouvez ajuster, telles que x, y positions, alpha, scaleX, scaleY et pas mal d'autres. Vous trouverez ci-dessous une démonstration montrant certaines de ces propriétés..
Dans le drawTheShapes () nous générons 15 cercles avec une ligne tracée à travers eux, étant capable de chaîner les commandes de dessin rend cette mort simple. Ensuite, nous randomisons la position des formes, l'échelle, la rotation et l'alpha.
Vous pouvez attacher des événements aux formes telles que Cliquez sur, mousedown / over / out, etc, en utilisant le sur() méthode. Dans cette démo, lorsque vous cliquez sur l'une des formes, une alerte est déclenchée et, une fois sorti de la souris, nous enregistrons un message sur la console. Autoriser les événements de souris sur la scène mousedown / over / out etc, vous devez appeler stage.enableMouseOver (fréquence) où fréquence correspond au nombre de fois par seconde pour diffuser les événements de la souris. Cette opération est coûteuse, elle est donc désactivée par défaut.
EaselJS est livré avec une classe Text facilitant la création de texte et la modification des propriétés de ce texte. Vous appelez le constructeur en transmettant le texte, une police et une couleur, i.e. nouveau createjs.Text ("Hello World", "20px Arial", "# ff7700") Comme la classe Shape, elle comporte une variété de propriétés et de méthodes. Vous trouverez ci-dessous une démonstration utilisant la classe Text..
Semblable à la dernière démo, nous créons 25 TextFields et appliquons des valeurs aléatoires à leurs propriétés..
La démo suivante est un jeu du pendu créé à l'aide de la classe Shape and Text que nous avons décrite jusqu'à présent dans ce tutoriel..
Pour dessiner le bourreau nous utilisons une combinaison sur lineTo (), déménager à(), et pour la tête on utilise le arc() méthode. Dans le drawCanvas () fonction, nous appelons le clair() méthode sur le penduShape.graphics ce qui efface tous les dessins précédents que nous avons réalisés dans cette forme. Nous changeons la couleur de TextFields selon que le joueur a gagné ou perdu..
Vous pouvez utiliser des images en utilisant la classe Bitmap. Un bitmap représente une image, un canevas ou une vidéo dans la liste d’affichage. Il peut être instancié à l’aide d’un élément HTML existant ou d’une chaîne (Base64). Par exemple new createjs.Bitmap ("imagePath.jpg").
<
Très similaire aux démos précédentes, nous créons ici trois bitmaps et leur donnons des propriétés aléatoires..
Nous utilisons la classe Shadow pour créer des ombres. La classe shadow prend comme paramètres la couleur, offsetX, offsetY et la taille de l'effet de flou, etc.. myImage.shadow = new createjs.Shadow ("# 000000", 5, 5, 10). Vous pouvez appliquer des ombres à tout objet d'affichage pour que cela fonctionne également pour le texte..
Un Sprite affiche une image ou une séquence d'images (comme une animation) d'une occurrence de SpriteSheet. Une feuille de sprite est une série d'images (généralement des images d'animation) combinées en une seule image. Par exemple, une animation composée de huit images 100x100 pourrait être combinée dans une feuille d’image-objet 400x200 (quatre images sur deux en hauteur). Vous pouvez afficher des images individuelles, les lire en tant qu’animation et même les séquences en séquence. Pour initialiser une instance de Sprite, vous devez transmettre une animation ou un numéro d’image ou une animation à lire, par exemple., new createjs.Sprite (spriteSheet, "run"). Les données transmises au constructeur SpriteSheet définissent trois informations essentielles:
Vous trouverez ci-dessous un exemple de code permettant d'initialiser un sprite "caractère"..
var data = new createjs.SpriteSheet ("images": ["chemin / vers / image.png"], "cadres": "regX": 0, "hauteur": 96, "nombre": 10, "regY ": 0," width ": 75," animations ": " walk ": [0, 9]); character = new createjs.Sprite (data, "walk"); character.play (); Voici une démonstration utilisant les classes Sprite et SpriteSheet. Vous devez cliquer sur la scène, puis vous pouvez utiliser "A" pour aller à gauche et "D" pour aller à droite. Une chose à noter à propos de cette démo est que les images sont encodées en Base64 et qu’elles sont incluses dans la ressource externe "imagestrings.js". Comme nous utilisons une feuille SpriteSheet et interagissons avec la souris, le canevas est corrompu par la stratégie CORS (Cross Domain Images Policy). En utilisant des chaînes Base64, nous pouvons surmonter cela. Si cela était hébergé sur votre propre domaine, vous utiliseriez la classe Bitmap comme d'habitude en passant un élément, ou un chemin.
Dans le installer() fonction nous créons le feuille de sprites. Pour la clé "images" je passe caractèreImage qui est une chaîne encodée en Base64. Pour la touche "images", les images de caractères ont une hauteur de 96 pixels, une largeur de 75 pixels et dix images (images distinctes). Ci-dessous, l’image que nous utilisons pour la feuille de sprites afin que vous puissiez visualiser à quoi ça ressemble.
Pour la clé "animation", nous définissons une animation "run" qui va de "frame" (zéro) à neuf. Enfin, nous créons le personnage du feuille de sprites.
Lorsque vous déplacez le personnage à gauche ou à droite, nous appelons character.play (). et quand vous arrêtez de déplacer le personnage que nous appelonscharacter.gotoAndStop (0). Comme nous n'avons qu'une "animation", nous pouvons simplement appeler jouer() et gotoAndStop () si vous aviez plusieurs animations, vous utiliseriez une combinaison de ces deux plus gotoAndPlay ().
La classe de conteneur est une liste d'affichage imbriquée qui vous permet de travailler avec des éléments d'affichage composés. Par exemple, vous pouvez regrouper des occurrences Bitmap de bras, de jambe, de torse et de tête dans un conteneur de personnes, puis les transformer en groupe, tout en permettant de déplacer les pièces les unes par rapport aux autres. Les enfants des conteneurs ont leurs propriétés de transformation et alpha concaténées avec leur conteneur parent. Vous trouverez ci-dessous une démonstration utilisant la classe Container. Cliquez sur la scène pour déplacer le conteneur de 20 pixels.
Ici, nous créons trois bitmaps et les ajoutons à la récipient, nous sommes alors en mesure de les déplacer tous en une fois en déplaçant le récipient, et même s'ils sont dans un conteneur, vous pouvez toujours les déplacer individuellement.
La méthode cache () de l'objet d'affichage dessine l'objet d'affichage dans un nouveau canevas, qui est ensuite utilisé pour les tirages suivants. Pour un contenu complexe qui ne change pas souvent (par exemple un conteneur avec de nombreux enfants qui ne bougent pas, ou une forme vectorielle complexe), cela peut permettre un rendu beaucoup plus rapide car le contenu n'a pas besoin d'être restitué à chaque tick.
L'objet d'affichage mis en cache peut être librement déplacé, pivoté, estompé, etc. Toutefois, si son contenu change, vous devez mettre à jour manuellement le cache en appelant updateCache () ou cache () encore. Vous devez spécifier la zone de cache via les paramètres x, y, w et h. Ceci définit le rectangle qui sera rendu et mis en cache en utilisant les coordonnées de cet objet d'affichage. La mise en cache ne doit normalement pas être utilisée sur le Bitmap classe car elle peut dégrader les performances, mais si vous souhaitez utiliser un filtre sur une Bitmap alors il doit être mis en cache.
En raison de contraintes de taille sur les intégrations JSFiddle, je ne fournirai pas de démonstration pour cette méthode, mais je vous renverrai à une démonstration sur le site Web de CreateJs..
La classe Filter est la classe de base dont tous les filtres doivent hériter. Les filtres doivent être appliqués aux objets mis en cache à l'aide de la méthode cache. Si un objet change, vous devrez le mettre à nouveau en cache ou utiliser updateCache (). Notez que les filtres doivent être appliqués avant la mise en cache. EaselJS est livré avec un certain nombre de filtres prédéfinis. Notez que les filtres individuels ne sont pas compilés dans la version simplifiée d’EaselJS. Pour les utiliser, vous devez les inclure manuellement dans le code HTML..
La démo ci-dessous utilise le filtre de couleur. Lorsque vous cliquez sur la scène, le canal vert est supprimé de l'image. le Filtre de couleur a les paramètres suivants.
ColorFilter ([redMultiplier = 1] [greenMultiplier = 1] [blueMultiplier = 1] [alphaMultiplier = 1] [redOffset = 0] [greenOffset = 0] [blueOffset = 0] [alphaOffset = 0])
Les multiplicateurs rouge, vert, bleu et alpha devraient être un nombre compris entre zéro et un, et les décalages rouge, vert, bleu et alpha devraient être compris entre 255 et 255..
Nous créons un objet bitmap normal, appliquons le filtre et mettons en cache le bitmap.
J'ai créé une dernière démo, sur laquelle nous allons nous appuyer dans la prochaine partie de cette série, en ajoutant du son, en préchargeant les fichiers et en utilisant des tweens..
Dans cette démo, nous utilisons le Bitmap, Texte, et Forme, classes pour créer un jeu de type Space Invaders. Je ne reviendrai pas sur chaque étape ici, dans le but de montrer simplement comment lier les concepts entre eux, mais si vous avez des questions sur le code, n'hésitez pas à les poser dans les commentaires. La détection de collision est fournie par osln via Github.
Dans ce tutoriel, nous avons examiné EaselJS et réalisé quelques applications de démonstration. J'espère que vous avez trouvé cet article utile et qu'il vous enthousiasme à l'idée d'utiliser EaselJS. Merci d'avoir lu!
