Cadre de jeu HTML5 composant createJS-EaselJS explication détaillée-Tutoriel H5-php.cn

Cadre de jeu HTML5 composant createJS-EaselJS explication détaillée

黄舟

Libérer： 2017-03-22 15:13:46

original

2948 Les gens l'ont consulté

La bibliothèque

CreateJS est un moteur pour le développement de jeux HTML5. Il s'agit d'une boîte à outils open source qui peut créer des jeux HTML5 avec une expérience interactive riche, visant à réduire le développement de HTML5. projets.

La maîtrise de CreateJS permet de réaliser plus facilement le développement de jeux HTML5.

CreateJS fournit quatre outils : EaselJS, TweenJS, SoundJS et PreLoadJS :

EaselJS:简化处理HTML5画布
TweenJS:用来帮助调整HTML5和Javascript属性
SoundJS:用来简化处理HTML5 audio
PreLoadJS:帮助管理和协调加载中的一些资源

Copier après la connexion

Vous pouvez télécharger le fichier JS sur la page de téléchargement du site officiel, ou utiliser le lien CDN officiel direct

La bibliothèque EaselJS fournit un mode graphique préservé pour le canevas, qui comprend une liste d'affichage hiérarchique complète, un modèle d'interaction de base et une classe d'assistance qui facilite l'implémentation de graphiques 2D sur le canevas.

Démarrer

Nous devons d'abord créer un objet Stage pour envelopper un canevas (Canvas) et ajoutez une instance d'objet DisplayObject en tant que sous-classe. EaselJS prend en charge :

* Utilisez Bitmap pour créer des images

* Utilisez Shape et Graphics pour créer des graphiques vectoriels

* Utilisez SpriteSheet et Sprite pour créer des bitmaps dynamiques

* Utilisez Text pour créer du texte simple

* Utilisez Container pour créer des conteneurs pour d'autres objets d'affichage

Tous les objets d'affichage peuvent être ajoutés à la scène en tant que sous-classes, ou directement sur la scène Dessinés sur toile .

Interaction utilisateur

Lors de l'interaction avec la souris ou le toucher, tous les objets d'affichage, à l'exception des éléments DOM, peuvent envoyer des événements. EaselJS prend en charge les événements de survol, de pression et de relâchement, ainsi qu'un module glisser-déposer facile à utiliser. Cliquez sur MouseEvent pour plus d’informations.

Instance

1. Utilisez Bitmap pour créer un image

Tout d'abord, nous devons référencer le fichier EaselJS :

<script src="js/easeljs-0.8.2.min.js"></script>

Copier après la connexion

Ensuite, nous devons créer un élément canevas dans le document HTML :

<canvas id="imageView" width="560" height="410">您的浏览器版本过低，请更换更高版本的浏览器</canvas>

Copier après la connexion

Ensuite, je peux créer l'image dans le code Javascript :

// 通过画布ID 创建一个 Stage 实例
var stage = new createjs.Stage("imageView");
// 创建一个 Bitmap 实例
var theBitmap = new createjs.Bitmap("imgs/testImg.jpg");
// 设置画布大小等于图片实际大小
stage.canvas.width = theBitmap.image.naturalWidth;
stage.canvas.height = theBitmap.image.naturalHeight;
// 把Bitmap 实例添加到 stage 的显示列表中
stage.addChild(theBitmap);
// 更新 stage 渲染画面
stage.update();

Copier après la connexion

De cette façon, l'image est créée avec succès. Voir Easeljs-image.html pour le. code source.

2. Utilisez Forme et Graphiques pour créer des graphiques vectoriels

Identique à ci-dessus, nous Vous devez ajouter une référence à EaselJS et créer un élément canevas dans le document HTML. Ensuite, il y a notre code de fichier js personnalisé :

//Create a stage by getting a reference to the canvas
var stage = new createjs.Stage("circleView");
//Create a Shape DisplayObject.
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0,0,40);
//Set position of Shape instance.
circle.x = circle.y = 50;
//Add Shape instance to stage display list.
stage.addChild(circle);
//Update stage will render next frame
stage.update();

Copier après la connexion

De cette façon, nous créons un cercle bleu ciel foncé avec un centre de (50,50) et un rayon de 40 pixels (voir Easeljs-shape-circle pour le code source .html) :

Le canevas avant rendu est le suivant (la largeur et la hauteur sont de 100 pixels) :

On peut toujours ajouter un événement interactif simple :

stage.addEventListener("click",handleClick);function handleClick() {    
// Click happened;
    console.log("The mouse is clicked.");
}
stage.addEventListener("mousedown",handlePress);function handlePress() {    
// A mouse press happened.
    // Listen for mouse move while the mouse is down:
    
    console.log("The mouse is pressed.");
    stage.addEventListener("mousemove",handleMove);
}function handleMove() {    
// Check out the DragAndDrop example in GitHub for more
    console.log("The mouse is moved.");
}

Copier après la connexion

Quand on clique sur l'événement cercle, la console affichera :

The mouse is pressed.
The mouse is clicked.

Copier après la connexion

On peut aussi utiliser l'événement tick pour effectuer des effets d'animation tels que des mouvements graphiques (Voir easeljs-shape-circle-move.js pour le code source) :

// Update stage will render next frame
createjs.Ticker.addEventListener("tick",handleTick);
//添加一个Ticker类帮助避免多次调用update方法
function handleTick() {    
var maxX =  stage.canvas.width - 50;    
var maxY =  stage.canvas.height - 50;    
//Will cause the circle to wrap back
    if(circle.x < maxX && circle.y == 50){        
    // Circle will move 10 units to the right.
        circle.x +=10;
    }else if(circle.x == maxX && circle.y <maxY){
        circle.y +=10;
    }else if(circle.x > 50 && circle.y == maxY){
        circle.x -=10;
    }else if(circle.x<= 50){
        circle.y -=10;
    }
    stage.update();
}

Copier après la connexion

Effet :

3. Utilisez SpriteSheet et Sprite pour créer des bitmaps dynamiques

De même, référencez d'abord EaselJS, puis créez le canevas Élément HTML :

<canvas id="view" width="80" height="80"></canvas>

Copier après la connexion

Les images à utiliser :

Ensuite, référencez et chargez la ressource dans le fichier JS :

var stage = new createjs.Stage("view");
container = new createjs.Container();var data = {    
// 源图像的数组。图像可以是一个html image实例，或URI图片。前者是建议控制堆载预压
    images:["imgs/easeljs-preloadjs-animation/moveGuy.png"],    
    // 定义单个帧。有两个支持格式的帧数据：当所有的帧大小是一样的（在一个网格）， 使用对象的width, height, regX, regY 统计特性。
    // width & height 所需和指定的帧的尺寸
    // regX & regY 指示帧的注册点或“原点”
    // spacing 表示帧之间的间隔
    // margin 指定图像边缘的边缘
    // count 允许您指定在spritesheet帧的总数；如果省略，这将根据源图像的尺寸和结构计算。帧将被分配的指标，根据他们的位置在源图像（左至右，顶部至底部）。
    frames:{width:80,height:80, count:16, regX: 0, regY:0, spacing:0, margin:0},    
    // 一个定义序列的帧的对象，以发挥命名动画。每个属性对应一个同名动画。
    // 每个动画必须指定播放的帧，还可以包括相关的播放速度（如2 将播放速度的两倍，0.5半）和下一个动画序列的名称。    
    animations:{
        run:[0,3]
    }
}var spriteSheet = new createjs.SpriteSheet(data)var instance = new createjs.Sprite(spriteSheet,"run")

container.addChild(instance);
stage.addChild(container);
createjs.Ticker.setFPS(5); //设置帧createjs.Ticker.addEventListener("tick",stage);
stage.update();

Copier après la connexion

De cette façon, l'effet d'une simple marche sortira (pour le code source, voir easeljs-sprite- 01.html) :

Si vous voulez contrôlez la transformation de l'animation via des boutons, utilisez simplement la méthode gotoAndPlay(action) pour appeler l'effet d'animation correspondant.

On modifie le code du document HTML comme suit :

<canvas id="view" width="80" height="80"></canvas>

Copier après la connexion

On modifie ensuite le code JS comme suit :

var stage = new createjs.Stage("view");
container = new createjs.Container();var data = {
    images:["imgs/easeljs-preloadjs-animation/moveGuy.png"],
    frames:{width:80,height:80, count:16, regX: 0, regY:0, spacing:0, margin:0},
    animations:{
        stand:0,
        run1:[0,3],
        run2:[4,7],
        run3:[8,11],
        run4:[12,15]
    }
}var spriteSheet = new createjs.SpriteSheet(data)var instance = new createjs.Sprite(spriteSheet,"run1")

container.addChild(instance);
stage.addChild(container);
createjs.Ticker.setFPS(5);
createjs.Ticker.addEventListener("tick",stage);
stage.update();

document.getElementById(&#39;goStraight&#39;).onclick =  function goStraight() {
    instance.gotoAndPlay("run1");
}
document.getElementById(&#39;goLeft&#39;).onclick =  function goLeft() {
    instance.gotoAndPlay("run2");
}
document.getElementById(&#39;goRight&#39;).onclick =  function goRight() {
    instance.gotoAndPlay("run3");
}
document.getElementById(&#39;goBack&#39;).onclick =  function goBack() {
    instance.gotoAndPlay("run4");
}

Copier après la connexion

效果就出来了（源码见 easeljs-sprite-02.html）：

4.使用 Text 创建简单的文本

这个就比较简单了，直接看代码：

<canvas id="View" width="300" height="80"></canvas><script>
    var stage = new createjs.Stage("View");    
    var theText = new createjs.Text("Hello,EaselJS!","normal 32px microsoft yahei","#222222");
    stage.addChild(theText);
    stage.update();</script>

Copier après la connexion

这里有设置背景色为粉红：

#View { background-color: #fddfdf;}

Copier après la connexion

显示效果为：

5.使用 Container 创建保存其他显示对象的容器

其实这个在前面已经用过了。不过还是单独写个例子，这个比较简单：

<!DOCTYPE html>

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>使用 Container 创建保存其他显示对象的容器</title>
    <script src="js/base/easeljs-0.8.2.min.js">
    </script>
    </head>
    <body>
    <canvas id="view" width="300" height="300">
    </canvas>
    <script>
    var stage = new createjs.Stage("view");
    container = new createjs.Container();    //先来绘制个正方形
    var square = new createjs.Shape();
    square.graphics.beginFill("#ff0000").drawRect(0,0,300,300);
    container.addChild(square);    //先来绘制个正方形
    var square2 = new createjs.Shape();
    square2.graphics.beginFill("orange").drawRect(50,50,200,200);
    container.addChild(square2);    //然后我们来绘制个圆形
    var circle = new createjs.Shape();
    circle.graphics.beginFill("blue").drawCircle(150,150,100);
    container.addChild(circle);    //最后我们再绘制个圆形
    var circle2 = new createjs.Shape();
    circle2.graphics.beginFill("white").drawCircle(150,150,50);
    container.addChild(circle2);

    stage.addChild(container);
    stage.update();</script></body></html>

Copier après la connexion

效果如下：