createjs遊戲引擎的簡單介紹

本文目錄一覽：

• 1、如何使用Createjs來編寫HTML5遊戲EaselJS簡介
• 2、如何使用Createjs來編寫HTML5遊戲PreloadJS和SoundJS
• 3、哪個h5遊戲引擎目前最受歡迎？

如何使用Createjs來編寫HTML5遊戲EaselJS簡介

createJs的由來，基礎什麼的就不說了，就直接說createJs的用法吧。

首先到createJs官網下載，createJs分成easelJs（圖形動畫）、preloadJs（文件加載）、soundJs（音頻控制）以及tweenJs（補間動畫）四部分，大家下載的時候，建議下載兩個文件，一個是壓縮版文件，用於項目中的引用，再下載個源碼文件，用於查看用法、API、demo等。因為樓主目前只用了easelJs和preloadJs，所以暫時就只說這兩個，其實就這兩個已經非常夠用了。

接下來開始分析代碼：

首先引入js文件

script

src=”easeljs-0.7.1.min.js”/script

script

src=”preloadjs-0.4.1.min.js”/script

然後進行舞台初始化操作：

function

init(){

stage

=

new

createjs.Stage(“cas”);

C_W

=

stage.canvas.width;

C_H

=

stage.canvas.height;

var

manifest

=

[

{src:”image/man.png”

,

id:”man”},

{src:”image/ground.png”

,

id:”ground”},

{src:”image/bg.png”

,

id:”bg”},

{src:”image/high.jpg”

,

id:”high”},

{src:”image/coins.png”

,

id:”coin”}

]

loader

=

new

createjs.LoadQueue(false);

loader.addEventListener(“complete”

,

handleComplete);

loader.loadManifest(manifest);

drawLoading();

}

上面就用到了preloadJs中的方法，實例化一個loader，把需要加載的圖片文件放在manifest裏面，進行加載，加載完成後調用回調handleCompelete函數：

function

handleComplete(){

//當圖片素材load完後執行該方法

var

manImage

=

loader.getResult(“man”),

lowground

=

loader.getResult(“ground”),

highground

=

loader.getResult(“high”),

bgImage

=

loader.getResult(“bg”),

coins

=

loader.getResult(“coin”);

sky

=

new

createjs.Shape();

sky.graphics.bf(bgImage).drawRect(0,0,C_W,C_H);

sky.setTransform(0,

0,

1

,

C_H/bgImage.height);

stage.addChild(sky);

man

=

createMan(200,326,manImage);

//該框為判定角色的判定區域

kuang

=

new

createjs.Shape();

kuang.graphics.beginStroke(“rgba(255,0,0,0.5)”).drawRect(0

,

,

man.size().w

,

man.picsize().h*1.5);

//

stage.addChild(kuang);

mapHandle(lowground

,

highground

,

coins);

createjs.Ticker.timingMode

=

createjs.Ticker.RAF;//設置循環方法，可以是requestAnimationFrame或者是setTimeout

createjs.Ticker.setFPS(30);//舞台幀率控制

createjs.Ticker.addEventListener(“tick”,

tick);//綁定舞台每一幀的邏輯發生函數

window.addEventListener(“keydown”

,

function(event){

event

=

event||window.event;

if(event.keyCode===32man.jumpNumman.jumpMax){

man.jump();

}

})

}

獲得加載完成後端的圖片數據就直接用loader.getResult就可以獲取了，跑酷遊戲需要一個背景，所以，我們實例化一個sky，然後進行位圖繪製，bf方法是beginBitmapFill的縮寫，該方法就是開始繪製位圖，後面的drawRect是位圖的繪製區域，區域當然是整個畫布啦，所以就是drawRect(0,0,C_W,C_H)。實例化出來sky後就直接添加到舞台stage裏面就行了。接下來是實例化一個角色，createMan方法後面有說，是自己封裝的。

然後進行舞台循環設置，上面有注釋了，就不說了。

如何使用Createjs來編寫HTML5遊戲PreloadJS和SoundJS

CreateJS最後兩個部分，PreloadJS用來加載並統一管理你遊戲中用到資源，圖片，json文件等等，而SoundJS用來播放聲音，兩者的用法都非常的簡單而且固定。

首先是SoundJS，顧名思義播放聲音，使用時只需要先

createjs.Sound.registerSound(“assets/sound.mp3”, “soundname”);

使用時調用：

createjs.Sound.play(“soundname”);

最後是PreloadJS，使用PreloadJS導入文件首先建立一個LoadQueue，然後即可使用它來載入單個文件，或者載入一個文件列表

var queue = new createjs.LoadQueue(false);//本地開發使用false即可

queue.installPlugin(createjs.Sound);//如果載入聲音，必須先註冊createjs.Sound

queue.on(“complete”, handleComplete, this);//載入完成後調用

queue.loadFile({id:”sound”, src:”sound.mp3″});//載入單個文件

//載入一個文件列表

queue.loadManifest([

{id: “myImage1″, src:”Image1.jpg”}，

{id: “myImage2″, src:”Image2.jpg”}

{id: “myImage3″, src:”Image3.jpg”}

{id: “myImage4″, src:”Image4.jpg”}

]);

function handleComplete() {

createjs.Sound.play(“sound”);

var image = queue.getResult(“myImage1”);

var bitmap = new createjs.Bitmap(image);

}

你可以把遊戲中用到的所有資源，先編輯到一個manifest列表當中，可以是圖片，json，css，js等等，最後使用loadManifest（manifest）導入

哪個h5遊戲引擎目前最受歡迎？

之前諮詢過TOM遊戲的客服！大致是這樣的

目前使用最廣泛的引擎是egret、cocos，createjs，jawjs等等