制作動畫或小游戲——CreateJS基礎類（一）

前面曾經記錄過Canvas的基礎知識《讓自己也能使用Canvas》，在實際使用中，用封裝好的庫效率會高點。

使用成熟的庫還能對基礎知識有更深入的理解，CreateJS是基於HTML5開發的一套模塊化的庫和工具，有4個模塊，github地址在這里。

最近看到有個中文網，很多API都翻譯了出來，不過就是翻譯的比較生硬。

我參考了國外寫的一本書《HTML5.Games.with.CreateJS》，再根據自己的一些理解整理了一下這個庫的使用。

下面所有的demo代碼都可以在這里查看到。

 

一、Stage

Stage（舞台）就是展現圖形、執行動畫的地方，必須先創建Stage，然后才能做后續操作。

有兩種方式的初始化：

stage = new createjs.Stage(document.getElementById('canvas'));
stage = new createjs.Stage('canvas');//直接使用canvas的ID

接下來就是添加圖形等布置操作，等到你布置好舞台后，就需要調用“update”方法，展示新的舞台內容。

stage.update();

 

二、Ticker

Ticker類是一個定時器，主要就是定時刷新舞台，理想的幀速率是60FPS，在這個類中也可以手動的修改這個速度。

var stage;
function init() {
  stage = new createjs.Stage('canvas');//直接使用canvas的ID
  createjs.Ticker.addEventListener("tick", runGame);
  createjs.Ticker.setFPS(60);
}
function runGame(e) {
  stage.update();
}

如果想控制“runGame”中的刷新，可以設置暫停。

“setPaused”方法可以修改“e”中的“paused”屬性。

createjs.Ticker.setPaused(true);
function runGame(e) {
  if(!e.paused)
    stage.update();
}

 

三、Graphics

1）初始化方式

接下來可以畫一些圖出來，Graphics類可以畫矢量圖（vector）或位圖（bitmap）。

var g = new createjs.Graphics();
g.beginStroke('#000');
g.beginFill('#FF6600');
g.drawRect(0,0,100,100);

也可以鏈式的寫法。

var g = new createjs.Graphics().beginStroke('#000').beginFill('#FF6600').drawRect(0,0,100,100);

Graphics類僅僅提供了畫圖，但並不會顯示，如果要顯示，就需要“Shape”類的幫忙。

 

2）簡寫

Graphics類中的畫圖方法還有簡寫：

 

四、Shape

1）制作圖形

一旦你創建了一個Graphics類，你就需要Shape類，下面的代碼接上面的“g”。

var square = new createjs.Shape(g);
square.x = square.y = 100;
stage.addChild(square);

除了正方形，還可以有三角形、圓、多邊形等，詳細的代碼可以在這里看到。

 

2）簡單的動畫

使用動畫就會引入TweenJS模塊，將會用到上面畫正方形的Graphics代碼，多了下面兩句代碼。

//繞着圖形中心滾動
square.regX = square.regY = 50;//設置圖形的X和Y軸位移 
createjs.Tween.get(square).to({
    rotation: 360
}, 3000);

 

五、一個UI元素demo

接下來制作一個常見的加載條，當年上傳、打開某個程序或做其它操作經常能看到，詳細代碼可以在這里查看到。

1）制作過程

先設置舞台，再創建創建加載條，最后用定時器累加加載條長度，其實也可以直接在Ticker事件中累加長度，只是速度會快一點。

function init() {
  setupStage();//設置舞台
  buildLoaderBar();//創建加載條
  startLoad();//用定時器累加加載條長度
}

用鏈式寫法來寫更新長度的那段代碼，“updateLoaderBar”是在“startLoad”函數中的。

function updateLoaderBar() {
  loaderBar.graphics.beginFill('#00ff00').drawRect(0, 0, LOADER_WIDTH * percentLoaded, 40).endFill();
  loaderBar.graphics.setStrokeStyle(2).beginStroke("#000").drawRect(0, 0, LOADER_WIDTH, 40).endStroke();
}

先是畫里面的藍色，再畫邊框。

beginFill和endFill組合使用了一下，endFill是指重新開始畫，使得后面的設置不會影響當前的。

如果我去掉endFill，將會直接顯示完整的綠色，因為后面的“drawRect(0, 0, LOADER_WIDTH, 40)”，又設置了一遍寬度。

beginStroke和endStroke組合使用，目的和上面的差不多。

如果把“endStroke”去掉，就會發現多了根右邊框，之所以會多是前面的“drawRect”影響了展示。

 

2）一點小改造

后面再觀察一下發現，其實可以不用每次來畫邊框，邊框可以在“buildLoaderBar”函數中定義。

function buildLoaderBar() {
        loaderBar = new createjs.Shape();
        loaderBar.x = loaderBar.y = 100;
        loaderBar.graphics.setStrokeStyle(2).beginStroke("#000").drawRect(0, 0, LOADER_WIDTH, 40).endStroke();
        stage.addChild(loaderBar);
}

相應的“updateLoaderBar”函數也要做些修改，drawRect中的X、Y坐標要修改下，寬度也要改變下。

本來以為設置了邊寬為2，那么也要偏移2，但其實不是，只需要偏移1就行了。

function updateLoaderBar() {
        loaderBar.graphics.beginFill('#00ff00').drawRect(1, 1, LOADER_WIDTH * percentLoaded - 2, 38).endFill();
}

如果我把邊框的寬度改成4，偏移和寬度又要重新計算了，怪不得寫在里面，就方便多了。