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>
// 通过画布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.使用 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();
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.
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 進行引用，然後創建canvasHTML元素：
<canvas id="view" width="80" height="80"></canvas>
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）：
<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>效果如下：
以上是Html5遊戲框架createJS組件-EaselJS詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
