Html5游戲框架createJS組件--EaselJS

CreateJS庫是一款HTML5游戲開發的引擎，是一套可以構建豐富交互體驗的HTML5游戲的開源工具包，旨在降低HTML5項目的開發難度和成本，讓開發者以熟悉的方式打造更具現代感的網絡交互體驗。

掌握了CreateJS可以更方便的完成HTML5的游戲開發。

CreateJS提供了EaselJS、TweenJS、SoundJS和PreLoadJS四款工具：

EaselJS:簡化處理HTML5畫布
TweenJS:用來幫助調整HTML5和Javascript屬性
SoundJS:用來簡化處理HTML5 audio
PreLoadJS:幫助管理和協調加載中的一些資源

 可以在官網的下載頁面進行下載JS文件，或者使用直接官方的CDN 鏈接

 

EaselJS 庫給畫布提供了保留圖形模式，其中包括一個完整的分層顯示列表、一個核心的交互模型以及一個讓2D圖形在畫布上更容易實現的助手類。

 

開始

最開始我們需要創建一個Stage對象來包裝一個畫布（Canvas）元素，並且添加一個DisplayObject對象實例作為子類。EaselJS支持：

* 使用 Bitmap 創建圖像

* 使用 Shape 和  Graphics 創建矢量圖形

* 使用 SpriteSheet 和 Sprite 創建動態的位圖

* 使用 Text 創建簡單的文本

* 使用 Container 創建保存其他顯示對象的容器

所有的顯示對象都可以作為子類被添加到舞台（stage）上，或者直接在畫布（canvas）上繪制出來。

 

用戶交互

當使用鼠標或者觸摸交互時，除了DOM 元素，所有的顯示對象都可以調度事件。EaselJS 支持懸停、按壓、釋放事件，以及一個容易使用的拖放模塊。點擊 MouseEvent 可以獲得更多信息。

 

實例

1. 使用 Bitmap 創建圖像

首先，我們需要引用 EaselJS 文件：

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

接着，我們需要在HTML文檔中創建一個 canvas 元素：

<canvas id="imageView" width="560" height="410">您的瀏覽器版本過低，請更換更高版本的瀏覽器</canvas>

然后，我就可以在 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();

這樣，圖像就創建成功了，源碼見 easeljs-image.html 。

 

2.使用 Shape 和  Graphics 創建矢量圖形

和上面一樣，我們需要添加對 EaselJS的引用以及在HTML文檔中，創建canvas元素。然后就是我們自定義的js文件代碼:

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

這樣我們就創建了一個深天藍色，圓心為（50.50），半徑為40像素的圓形（源碼見 easeljs-shape-circle.html）：

渲染前的畫布如下（寬高為100像素）：

 

我們還可以添加簡單的交互事件：

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

當我們點擊圓的事件，控制台會顯示：

The mouse is pressed.
The mouse is clicked.

 

我們還可以通過 tick 事件進行圖形的移動等動畫效果（源碼見 easeljs-shape-circle-move.js）：

// 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.使用 SpriteSheet 和 Sprite 創建動態的位圖

 同樣，先對 EaselJS 進行引用，然后創建 canvas HTML元素：

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

需要使用到的圖片：

接下來在 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();

這樣，簡單走路的效果就出來了（源碼見 easeljs-sprite-01.html）：

 

如果想通過按鈕控制動畫的變換的話使用 gotoAndPlay(action) 方法調用對應的動畫效果就行了。

我們修改HTML文檔代碼如下：

<canvas id="view" width="80" height="80"></canvas>
<div class="buttons">
    <input id="goStraight" value="Go Straight" type="button" />
    <input id="goLeft" value="Go Left"  type="button"/>
    <input id="goRight" value="Go Right"  type="button"/>
    <input id="goBack" value="Go Back"  type="button"/>
</div>

然后修改JS代碼如下：

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>

效果如下：

 

相關源碼地址：Demo4CreateJS