Ausführliche Erklärung des HTML5-Spielframeworks createJS-Komponente-EaselJS

Die

CreateJS-Bibliothek ist eine Engine für die HTML5-Spieleentwicklung. Es handelt sich um ein Open-Source-Toolkit, das HTML5-Spiele mit umfangreichen interaktiven Erlebnissen erstellen kann, mit dem Ziel, die Entwicklung von HTML5 zu reduzieren Komplexität und Kosten von Projekten, sodass Entwickler auf vertraute Weise ein moderneres Netzwerkinteraktionserlebnis schaffen können.

Wenn Sie CreateJS beherrschen, können Sie die Entwicklung von HTML5-Spielen einfacher abschließen.

CreateJS bietet vier Tools: EaselJS, TweenJS, SoundJS und PreLoadJS:

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

Sie können die JS-Datei auf der Download-Seite der offiziellen Website herunterladen oder den direkten offiziellen CDN-Link verwenden

Die EaselJS-Bibliothek bietet einen beibehaltenen Grafikmodus für die Leinwand, der eine vollständige hierarchische Anzeigeliste, ein Kerninteraktionsmodell und eine Hilfsklasse enthält, die die Implementierung von 2D-Grafiken auf der Leinwand erleichtert.

Start

Zuerst müssen wir ein Bühnenobjekt erstellen, um eine Leinwand (Leinwand)-Element und fügen Sie eine DisplayObject-Objektinstanz als Unterklasse hinzu. EaselJS unterstützt:

* Verwenden Sie Bitmap, um Bilder zu erstellen

* Verwenden Sie Form und Grafiken, um Vektorgrafiken zu erstellen

* Verwenden Sie SpriteSheet und Sprite, um dynamische Bitmaps zu erstellen

* Verwenden Sie Text, um einfachen Text zu erstellen

* Verwenden Sie Container, um Container für andere Anzeigeobjekte zu erstellen

Alle Anzeigeobjekte können der Bühne als Unterklassen hinzugefügt oder direkt auf der Bühne auf Leinwand gezeichnet werden .

Benutzerinteraktion

Bei der Interaktion mit der Maus oder Berührung können alle Anzeigeobjekte außer DOM-Elementen Ereignisse auslösen. EaselJS unterstützt Hover-, Press- und Release-Ereignisse sowie ein benutzerfreundliches Drag-and-Drop-Modul. Klicken Sie auf MouseEvent, um weitere Informationen zu erhalten.

Instanz

1. Verwenden Sie Bitmap, um eine zu erstellen Bild

Zuerst müssen wir auf die EaselJS-Datei verweisen:

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

Als nächstes müssen wir ein Canvas-Element im

HTML-Dokument:

Dann kann ich das Bild im Javascript-Code erstellen:

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

Auf diese Weise wird das Bild erfolgreich erstellt Quellcode.

// 通过画布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();

2. Verwenden Sie Form und Grafiken, um Vektorgrafiken zu erstellen Dasselbe wie oben, Wir müssen einen Verweis auf EaselJS hinzufügen und ein Canvas-Element im HTML-Dokument erstellen. Dann gibt es noch unseren angepassten js-Dateicode:

Auf diese Weise erstellen wir einen dunkelblauen Kreis mit einem Mittelpunkt von (50,50) und einem Radius von 40 Pixeln (siehe „easeljs-shape-circle“ für der Quellcode .html):

//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();

Die Leinwand vor dem Rendern ist wie folgt (Breite und Höhe betragen 100 Pixel):

Wir können immer noch ein einfaches interaktives Ereignis hinzufügen:

Wenn wir auf das Kreisereignis klicken, zeigt die Konsole Folgendes an:

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.");
}

Wir können auch das Häkchenereignis verwenden um Animationseffekte wie grafische Bewegungen auszuführen (Siehe

The mouse is pressed.
The mouse is clicked.

easeljs-shape-circle-move.js

für den Quellcode):

Effekt:

// 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();
}

3. Verwenden Sie SpriteSheet und Sprite, um dynamische Bitmaps zu erstellen Referenzieren Sie in ähnlicher Weise zuerst EaselJS und erstellen Sie dann die Leinwand

HTML-Element

:

Die zu verwendenden Bilder:

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

Als nächstes referenzieren und laden Sie die Ressource in der JS-Datei:

Auf diese Weise wird der Effekt des einfachen Gehens erzielt wird herauskommen (den Quellcode finden Sie unter

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();

easeljs-sprite-01.html

):

Wenn Sie möchten Steuern Sie die Transformation der Animation über Schaltflächen. Verwenden Sie einfach die Methode gotoAndPlay (Aktion), um den entsprechenden Animationseffekt aufzurufen.

Wir ändern den HTML-Dokumentcode wie folgt:

Anschließend ändern wir den JS-Code wie folgt:

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

    
    
    
    

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('goStraight').onclick =  function goStraight() {
    instance.gotoAndPlay("run1");
}
document.getElementById('goLeft').onclick =  function goLeft() {
    instance.gotoAndPlay("run2");
}
document.getElementById('goRight').onclick =  function goRight() {
    instance.gotoAndPlay("run3");
}
document.getElementById('goBack').onclick =  function goBack() {
    instance.gotoAndPlay("run4");
}

效果就出来了（源码见 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>

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

#View { background-color: #fddfdf;}

显示效果为：

 

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>

效果如下：

 

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung des HTML5-Spielframeworks createJS-Komponente-EaselJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!