【转】Html5游戏框架createJs组件--EaselJS(一)概述
原文地址：http://www.cnblogs.com/pingfan1990/p/4021970.html
EaselJS是CreateJS Suite中的一个js库，它可以让canvas的使用变得简单，它提供了一个直接了当的创建html5 canvas中使用富媒体、富交互应用的解决方案。
(一)如何使用
先去下载EaselJS框架，然后创建一个舞台canvas元素的舞台stage对象stage=new createjs.Stage('demo')，增加显示的子对象到舞台上英文就是DisplayObject对象stage.addChild()，然后
渲染render就用stage.update()就可以了。EaselJS 支持功能常用的createjs下相对应的对象:
1.使用图像就用Bitmap位图对象。
2.矢量图形就使用Shape和Graphics对象。
3.动画Animated 位图bitmaps 使用 SpriteSheet 和 Sprite 对象。
4.使用文本实例就用Text。
5.包含说有DisplayObjects对象的容器就用Container。
6.控制HTML DOM 元素的使用DOMElement。
所有显示对象可以添加到舞台stage作为child,或直接吸引到画布canvas。
使用说明：
所有的在舞台上的显示对象DisplayObject（除了DOMElement），当使用mouse或touch时可以绑定事件。EaselJS支持 hover、 press和 release events，同时很容易使用drag和drop拖拽的模型。
让我们看看基本的例子吧：
你可以现在 illustrates里面先去实现模拟，然后去用EaselJS创建Stage和shape去实现效果。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//Create a stage by getting a reference to the canvas
//创建一个阶段通过引用到画布上
stage = new createjs.Stage("demoCanvas");
//Create a Shape DisplayObject.
//创建形状显示对象
circle = new createjs.Shape();
circle.graphics.beginFill("red").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();
|
基本的监听绑定事件，简单交互
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
displayObject.addEventListener("click", handleClick);
function handleClick(event){
// Click happenened
}
displayObject.addEventListener("mousedown", handlePress);
function handlePress(event) {
// A mouse press happened.
// Listen for mouse move while the mouse is down:
event.addEventListener("mousemove", handleMove);
}
function handleMove(event) {
// Check out the DragAndDrop example in GitHub for more
}
|
结合上面创建的cricle显示对象即：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//监听圆形显示对象，增加事件 displayObject.addEventListener("click", handleClick);
circle.addEventListener("click", handleClick);
function handleClick(event){
// 点击时发生
alert(11);
}
circle.addEventListener("mousedown", handlePress);
function handlePress(event) {
alert('鼠标按下了')
// 鼠标按下时发生
// 监听当鼠标按下移动时发生的事件
event.addEventListener("mousemove", handleMove);
}
function handleMove(event) {
// Check out the DragAndDrop example in GitHub for more
console.log('鼠标移动了')
}
|
基本的动画例子
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//Update stage will render next frame
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
//Circle will move 10 units to the right.
//圆将向右边以10为单位移动
circle.x += 10;
//Will cause the circle to wrap back
//移动的距离大于舞台的距离，将重新开始
if (circle.x > stage.canvas.width) { circle.x = 0; }
stage.update();
}
|
最后，EaselJS 也还有其他的功能，也简单的说一下吧：
1.canvas阴影和CompositeOperation等特性
2.Ticker, a global heartbeat that objects can subscribe to（有点不太懂）
3.滤镜，就是像ps里面的一下滤镜遮罩，颜色通道这些。
4.按钮button的功能，可以很简单的创建按钮交互。
5.SpriteSheetUtils 和 SpriteSheetBuilder帮助我们构建和管理SpriteSheet 在运行的时候。
createJS的学习是系列教程，喜欢就请继续关注下期……一起成长
1、如果在vscode 中用运行快捷键（Ctrl+Alt+N）出现中文的乱码
2、asp.net mvc 同一个表单多个提交按钮
3、Fiddler statistics 数据统计字段解释
4、389. Find the Difference
5、MonuBuehaviour类中常用的可继承的成员方法