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 创建图像
* 使用 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 。
和上面一样，我们需要添加对 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>
效果如下：
本文转自叶超Luka博客园博客，原文链接：XXXXXXXX，如需转载请自行联系原作者
