製做動畫或小遊戲——CreateJS基礎類（一）

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

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

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

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

下面全部的demo代碼均可以在這裏查看到。

 

1、Stage

Stage（舞臺）就是展示圖形、執行動畫的地方，必須先建立Stage，而後才能作後續操做。

有兩種方式的初始化：

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

接下來就是添加圖形等佈置操做，等到你佈置好舞臺後，就須要調用「update」方法，展現新的舞臺內容。

stage.update();

 

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

 

3、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類中的畫圖方法還有簡寫：

 

4、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);

 

5、一個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，偏移和寬度又要從新計算了，怪不得寫在裏面，就方便多了。