Exemple de tutoriel de démarrage rapide createjs

Quand j'ai commencé à utiliser le framework createjs, j'ai découvert qu'il y avait encore très peu de tutoriels connexes sur Internet, j'ai donc écrit un article pour pouvoir le consulter facilement à l'avenir.

introduction de createjs

Site officiel : http://www.createjs.cc/

createjs contient les quatre parties suivantes :

EaselJS : utilisé pour dessiner des sprites, des animations, des vecteurs et des bitmaps, créant des expériences interactives sur HTML5 Canvas (y compris multi-touch)

TweenJS : utilisé pour l'animation effets

SoundJS : Moteur de lecture audio

PreloadJS : Préchargement des ressources du site Web

Similaire à SoundJS, PreloadJS, si vous le gérez vous-même Si c'est plus pratique, vous pouvez aussi les écrire vous-même. De manière générale, elles équivalent à une fonction auxiliaire, facultative ou non. Par conséquent, cet article explique principalement l’utilisation d’EaselJS.

1. L'API générale d'EaselJS

• Draw. images Utilisez (Bitmap)

• pour dessiner des graphiques, tels que des rectangles, des cercles, etc. Utilisez (Forme) [Similaire à la modification des coordonnées x, y, à l'augmentation de l'ombre, de la transparence alpha, à la réduction et agrandir scaleX/scaleY Tout peut être fait】

• Dessiner du texte, utiliser (Texte)

• Il y a aussi le concept de conteneur Conteneur, qui peut contenir plusieurs objets d'affichage

2 Le processus général de dessin d'EaselJS

Le processus général : Créer un objet d'affichage → définir quelques paramètres → appeler la méthode de dessin → ajouter à l'étape → mettre à jour() , le code est le suivant :

<script src="easeljs-0.7.1.min.js?1.1.10"></script>  //引入相关的js文件
<canvas id="canvas"></canvas> canvas = document.querySelector('#canvas' stage =  rect = rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100stage.update();

Les graphiques peuvent définir un style, une largeur de ligne, une couleur, etc. Vous pouvez également appeler certaines méthodes pour dessiner des graphiques, telles que rectangle drawRect, circle drawCircle, etc. Vous pouvez vérifier vous-même l'API pour plus de détails.

Remarque : N'oubliez pas d'ajouter l'objet forme à la scène, sinon il ne sera pas affiché à l'écran.

3. Ticker timer

Écrivez createjs à coup sûr Celui que vous rencontrerez est le ticker, qui actualise principalement la scène régulièrement. La fréquence d'images idéale est de 60FPS

createjs.Ticker.setFPS(60);

. 4. Contrôlez la relation hiérarchique de plusieurs objets d'affichage

étape. L'objet contain a un attribut children qui représente les éléments enfants. Il s'agit d'un tableau. Le niveau d'élément à l'intérieur commence à 0 comme. un indice., en termes simples, ce dernier écrase le précédent. La méthode addChild est ajoutée à la fin de la liste d'affichage.

Nous pouvons également modifier dynamiquement l'effet en cascade des enfants.

stage.setChildIndex(red,1);

5. Il peut contenir du texte, du bitmap, de la forme, du sprite et d'autres éléments EaselJS, qui peuvent être inclus dans un conteneur pour faciliter une gestion unifiée. Par exemple, un personnage est composé de mains, de pieds, de tête et de corps. Vous pouvez mettre ces parties dans le même conteneur et les déplacer uniformément. La méthode d'utilisation est également relativement simple :

var contain = new createjs.Container(); 
contain.addChild(bgImg);
contain.addChild(bitmap);  
stage.addChild(contain);

嬬嬬嬬～L'objectif de cet article est de dessiner des images et de les traiter

6. Dessinez des images

Suivez le processus de dessin normal d'EaselJS ci-dessus Dites, le code ci-dessus devrait s'afficher normalement. Cependant, elle ne peut être affichée normalement que dans certains cas. Cette ressource d'image doit être confirmée pour être chargée avec succès avant de pouvoir être nouvelle. Sinon, il n'y aura pas d'image sur le canevas. S'il y a un préchargement de ressource, vous pouvez utiliser la ressource. directement le code ci-dessus. Sinon, il doit être dessiné après le chargement de l'image

var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();

Il ne suffit pas de dessiner l'image. Createjs fournit plusieurs méthodes de traitement des images :

var img = new Image();
img.src = './img/linkgame_pass@2x.png';
img.onload = function () { var bg = new createjs.Bitmap("./background.png");
 stage.addChild(bg);
 stage.update();
}

6.1 Ajouter un calque de masque à l'image

Utilisez l'attribut masque pour afficher uniquement la zone où l'image croise le forme

Scénarios d'application courants : utilisé pour recadrer des images, comme l'affichage d'images circulaires, etc.

stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;//遮罩图形shape = new createjs.Shape();
shape.graphics.beginFill("#000").drawCircle(0, 0, 100);
shape.x = 200;
shape.y = 100;
bg.mask = shape;     //给图片bg添加遮罩stage.addChild(shape);
stage.addChild(bg);
stage.update();

6.2 Donner des images Ajouter un effet de filtre

Nous avons constaté que l'image n'était toujours pas floue. La raison en est que l'image n'est toujours pas floue. L'étape est actualisée immédiatement après l'ajout du filtre à l'image, et le filtre ne peut conserver l'effet que d'une seule image, le deuxième filtre d'image n'est pas valide. Après avoir utilisé la méthode cache() de l'image, l'effet de filtre peut être conservé quelle que soit la façon dont la scène est actualisée. L'ajout de cache a de nombreuses fonctions, telles que l'amélioration du FPS, la mise en cache, etc.

var blur = new createjs.BlurFilter(5,5,1);
bg.filters = [blur];

<.>

bg.cache(0,0,bg.image.width,bg.image.height);

6.3 Utilisez Rectangle pour recadrer l'image

Utilisez l'objet Rectangle intégré d'EaselJS pour créer une zone de sélection pour afficher certaines parties de l'image. image.

stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;var rect = new createjs.Rectangle(0, 0, 121, 171);
bg.sourceRect = rect;
stage.addChild(bg);
stage.update();

适用场景：拼图小游戏，剪裁图片……

 

7. createjs事件

easeljs事件默认是不支持touch设备的，需要以下代码才支持：

createjs.Touch.enable(stage);

对于Bitmap，Shape等对象，都可以直接使用addEventListener进行事件监听

bitmap = new createjs.Bitmap('');
bitmap.addEventListener（‘click’，handle）;

 

8. CreateJs的渲染模式

CreateJs提供了两种渲染模式，一种是用setTimeout，一种是用requestAnimationFrame，默认是setTimeout，默认的帧数是20，一般的话还没啥，但是如果动画多的话，设置成requestAnimationFrame模式的话，就会感觉到动画如丝般的流畅。

 

 

9.适配

在移动端开发中，不得不面对一个多屏幕，多尺寸的问题，所以适配问题显得特别重要。

<canvas id="game" width="1000" height="700"></canvas>

注意，以上代码的width，height不同于css中的width，height。

比如，你在canvas内部绘制图片，用x，y轴进行定位，这里的x，y是相对于canvas这个整体。

我们再把canvas当成一整张图片使用css进行适配

canvas{
     width: 100%;
}

那么，就会有以下的效果，canvas会适配屏幕尺寸，里面的图片也会等比例变大变小。

     

 

 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!