使用 CreateJS 之 EaseIJS - 推酷
使用 CreateJS 之 EaseIJS
一时兴起，练练英语=。=
昨天廖总发给我
，看了一下发现挺有意思的。因为文档都是英文，所以斗胆翻译一次。一方面自己学习，一方面万一成为流传广泛的翻译那就哈哈哈哈了。
这是我翻译的EaselJS社区文档第一篇，也没有太雕琢文字就发出来，以后可能会修改。水平有限，如有问题，敬请提出。
转载请保留以下内容：
TRANSLATOR:程康&Ant
TRANSLATION:
在这个教程中，我们将会探究 CreateJS 的库套件。CreateJS 是一套 JS 库，是能配合 HTML5 一同（为网页）构建丰富交互体验的工具。CreateJS 套件分为四个库。
EaselJS – 使运用 canvas 更方便
TweenJS – 用以改善 tweening HTML5 和 JS 性能
SoundJS – 使你可以简单地运用 HTML5 audio
PreloadJS – 使你可以管理和协调资源加载
我们要研究的第一个库是 EaselJS。让我们开始吧！
什么是 EaselJS
EaselJS 是一个用以与 HTML5 canvas 协作的库。它包含一个完整的分层展示列表、一个核心交互模型以及一些辅助类，通过其来使与 Canvas 的协作更简单。入门、上手 EaselJS 并不容易。你需要在你的 HTML 文件中定义一个 canvas 元素并且在你的 JavaScript 代码中引用它。EaselJS 使用 Stage 的概念，Stage 是你的展示列表容器的最高层（这个 stage 就是你的 canvas 元素）。在它的下层就是 HTML 片段和相关用于驱动EaselJS的 JS 代码。
&canvas id=&testCanvas& width=&600& height=&300&&&/canvas&
要引用以上的 canvas 对象你将要用到以下代码：
var canvas = document.getElementById(&testCanvas&);
var stage = new createjs.Stage(canvas);
使用 Graphics（图形）类和 Shape（形状）类来画图
EaselJS 的 Graphics 类开放了一个用于生成矢量绘图指令和将其绘制成具体内容的简单易用的数据接口。这些函数与原生 HTML5 Canvas 非常相似，不过 EaselJS 添加了一些它独有的新函数。如果你对 HTML5 Canvas 和绘图函数不太熟悉，你或许需要看看我们最近发布的 Canvas Essentials course （Canvas 必修课程）。你将不会直接用到 Graphics 类本身，而是通过 Shape 类去使用它。下面是一个使用 Shapes 类来绘制图形的示例：
从上方代码中可以发现，这些函数是可以链式调用的，就像： ShapeObject.graphics.setStrokeStyle(1).beginStroke(“rgba(0,0,0,1) 等等……同时你可能注意到了，在函数里面调用了一次 stage.addChild() 。只要你想往 Canvas 里添加什么东西，你就必须调用 stage.addChild() 。在 draw.update() 函数里，调用了一次 stage.update() 。你必须在每一次改变 Canvas 后调用 stage.update() 以保证能看到项目的变化。有一个方法让我们可以不必重复调用 stage.update() ，那就是使用 Ticker 类。Ticker类提供了一个按照设定周期跳动的 tick 广播（或者称为 heartbeat 广播）。当一个设定周期的时间流逝过后，监听器能通过监听 tick 事件来得到提醒。下方代码将告诉你如何使用 Ticker 类来自动更新 stage。
createjs.Ticker.addEventListener(&tick&, handleTick);
function handleTick(event) {
stage.update();
Shape 类有一系列可以修改的属性，比如： x、y 坐标 ，透明度， scaleX （水平缩放比例）， scaleY （垂直缩放比例）……下方是一个用于展示部分属性的示例。
在 drawTheShapes() 里我们生成了15个中间有一条线的圆圈，绘图函数的链式调用让这个过程变得简单得要死=。=。接着我们随机生成了这些形状的位置、缩放比例、旋转角和透明度。
你可以通过 on() 方法来给这些图形添加诸如 click、mousedown/over/out 等事件。在这个示例里，当你点击任意一个图形时，会有一个提示框弹出；而每当鼠标移开时，我们都在控制台记录了一条消息。为了在 stage 上使用鼠标事件（mouse events），诸如 mousedown/over/out，你必须先调用 stage.enableMouseOver(frequency) ，frequency 是每秒钟广播鼠标事件的次数。这个操作的开销很大，所以它默认是被关闭的。
Text 类（文本类）
EaselJS 载有一个简单易用的创建文本和改变文本各类属性的 Text 类。你可以调用构造函数为创建文本传递参数，如：字体、颜色等。 new createjs.Text(“Hello World”, “20px Arial”, “#ff7700″) 。和 Shape 类一样，Text 类包含丰富的属性和方法。以下是一个使用 Text 类的示例。
和上一个示例差不多，我们创建了25个 TextFields（文本域），并且给它们的属性赋予了一些随机值。
示例项目 – Hangman
下面的示例是一个用我们刚刚在这个教程里讨论过的 Shape 类和 Text 类创建的游戏，叫做 hangman。
我们通过使用 lineTo() 和 moveTo() 的组合来画这个 hangman，然后用 arc() 方法来画它的头。在 drawCanvas() 函数里，我们通过给 hangmanShape.graphics 调用 clear() 方法来清除所有之前对这个图形的绘制。我们会根据玩家的输赢来改变 TextFields 的颜色。
Bitmaps（位图）
你可以通过 Bitmap 类来调用图片。Bitmap 对象可以表示图片、Canvas 对象或者是视频，它能通过一个已存在的 HTML 元素来实例化，也可以通过字符串（Base64编码）来实例化。例如： new creatjs.Bitmap(“imagePath.jpg”) 。
和之前的那些示例差不多，我们在这里创建了3个 bitmap，并且赋予了一些随机属性。
我们使用了 Shadow 类来创建阴影。Shadow 类接受颜色、水平偏移值（ offsetX ）、垂直偏移值（ offsetY ）以及阴影效果大小等参数。 myImage.shadow = new createjs.Shadow(“#000000″, 5, 5, 10)。 你可以对任何展示对象添加阴影，所以当然也可以给文本添加阴影咯。
Sprite（精灵） 和 SpriteSheets（精灵表）
精灵展示来自精灵表示例的帧或者帧序列（比如一个动画）。精灵表就是一系列的图像（通常是动画帧）结合成一个图像。例如，一个动画由八个100&100的图像可以被组合成一个400&200的精灵表(four frames across by two high)。你可以展示单独的帧，也可以以动画的形式展示帧序列，甚至是将动画串联在一起展示。想要初始化一个精灵实例，你得传递一个 SpeiteSheet 和一个可选的帧数或者要运行的动画作为参数，例如， new createjs.Sprite(spriteSheet, “run”)。 传到 SpriteSheet 构造器的数据定义了三个关键的信息：
将要用到的图像
每一个图像帧的位置。这个数据将会以两种方式之一展现出来：作为常规有序网格、等大小的帧，或者是由非常规（无序的）方法确定的单独定义的可变大小帧。
类似的，动画也有两种方式展现：作为一系列连续帧，通过开始和结束帧来定义[0,3],或者作为一个帧列表[0,1,2,3]。
下面是一些用于初始化“角色”精灵的示例代码。
var data = new createjs.SpriteSheet({
&images&: [&path/to/image.png&],
&frames&: {&regX&: 0, &height&: 96, &count&: 10, &regY&: 0, &width&: 75},
&animations&: {&walk&: [0, 9]}
character = new createjs.Sprite(data, &walk&);
character.play();
这是一个使用 Sprite 类和 SpriteSheet 类的示例。你需要在界面上点击一下，然后你就可以用 A 键左移，D 键右移。关于这个示例有一个需要注意的事情是，我把这些图形用 Base64 编码过了，并且他们是通过 imagestrings.js 引用的外部资源。因为我们是通过鼠标来来用 SpriteSheet 和交互，canvas 被跨域图像策略（CORS）给 taint 了 =。=。通过使用 Base 64编码我们可以解决这个问题。如果这是运行在你自己的主机域内，你就可以正常地通过传送元素或者路径使用 Bitmap 类。
我们在 setup() 函数了创建 spritesheet。我给 images 键传送用 Base64 编码编码过的角色图像字符串。设定 frames 键值为角色图像高 96px，宽 75px，并且总共有十帧（独立的图片）。下方是我们用于 spritesheet 的图片，你可以直观地看看它到底是什么样。
我们给 animation 键定义了一个从 frame 0到9的 run 动画。最后我们创建了 spritesheet 中的 character。
当你将角色左右移动时我们调用了 character.play() 。而当你停止角色运动的时候我们调用 character.gotoAndStop(0) 。因为我们只有一个 动画，我们可以只需要调用 play() 和 gotoAndStop() ；如果你有一系列的动画，你将需要使用这两个函数加上 gotoAndPlay() 。
Container 容器
Container 类是一个让你可以使用混合展示元素的嵌套展示列表。例如你可以将手臂、腿、躯干和头部的 Bitmap 实例组合在一起成为一个人容器（Person Container），并且可以把它们作为整体进行变换，而且各部分可相对移动。子容器有着与父容器关联的变换和透明度属性。下方是一个使用 Container 类的示例。点击界面来使这个容器移动 20px。
在这里我们创建了三个 bitmap 并将其添加至容器中，这样我们可以通过移动容器来整体移动它们，而且虽然他们在同一个容器内，你仍可以单独移动每一个 bitmap。
展示对象（display objext）的 cache()& 方法将这个展示对象绘制到一个新的 canvas，为随后的绘制做准备。对于不常改变的复杂内容（例如：一个有很多不移动子元素的容器，或者一个复杂的矢量图形），这个方法可以提供快速很多的渲染，因为它的内容不需要在每一个时钟周期都重新渲染一次。
这个缓存展示对象可以被自由地移动、旋转、淡入淡出等等，然而如果它的内容改变了，你必须手动地重复通过调用 updateCache() 或者 cache() 来更新这个缓存。
因为 JSFiddle 的嵌入大小限制，我就不为这个方法提供示例了，不过会给你一个 CreateJs 网站上
Filters（滤镜）
Filter 类是所有滤镜必须继承的基类。滤镜只能被应用在用 cache 方法缓存过的对象。如果一个对象改变了，你必须重新缓存一次或者使用 updateCache() 。注意必须缓存后才能应用滤镜。EaselJS有大量的预建的滤镜。需要注意，简化版的 EaselJS 里没有编译这些滤镜。如果要使用它们，你必须手动将他们引用进 HTML 中。
AlphaMapFilter（透明地图滤镜）：构建 alpha 通道展示对象的灰度图像
AlphaMaskFilter：构建 alpha 通道展示对象的 alpha 通道
BlurFilter（模糊滤镜）：对展示对象应用水平或垂直模糊
ColorFilter（颜色滤镜）：对展示对象进行颜色变换
ColrMatrixFilter（颜色矩阵滤镜）：使用颜色矩阵进行图形变换
下面的示例使用了颜色滤镜（Color Filter），当你点击界面时，它会从图像上移除绿色通道。颜色滤镜具有以下参数：
ColorFilter( [redMultiplier=1] [greenMultiplier=1] [blueMultiplier=1] [alphaMultiplier=1] [redOffset=0] [greenOffset=0] [blueOffset=0] [alphaOffset=0])
红、绿、蓝以及 alpha Multiplier 的值要求是一个 0 到 1 之间的数字，并且红、绿、蓝以及alpha 偏移量要求是一个-255 到 255 之间的数字。
我们创建了一个常规的 bitmap 对象，添加了滤镜，并且缓存了这个对象。
最终的示例
我创建了一个最终版的示例，我们会在这个系列接下来的部分给它添加声音、预加载设置并且使用 tweens 来完善它。
在这个示例里，我们使用了 Bitmap 类、Text 类和 Shape 类来创建一个太空入侵者类型的游戏。我在这里就不把每一步过一遍了，因为本身目的只是展示一下怎么样把这些方法结合在一起。不过如果你对于这些代码有任何问题，请随时在评论里提问。碰撞检测由 Github 中的 osln 提供。
在这个教程中我们已经简单地了解了 EaselJS 并且做了一些示例应用。我希望你会觉得这篇文章对你有用，而且它让你对 EaselJS 更有兴趣。感谢你的阅读！
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致如何使用createjs来编写html5游戏_百度知道如何使用Createjs来编写HTML5游戏（三）使用EaselJS中的制作Sprite类制作 - 博客频道 - CSDN.NET
失业矿工的博客
我是名矿工，曾经是，后来国有变成私有，领导变成老板，老板掏空企业，企业玩完，矿工失业。
分类：Html5/Createjs
&一，使用Sprite制作动画
&&&&& 动画的制作原理据说是由于人的视觉残留效应，连续播放一系列的静止图片，即可获得一段动画，每张图片可以称作动画的一帧，可以参考Gif动画的原理。在EaselJS中，提供了一个Sprites类，可以用来创建动画。创建Sprite同创建其他EaselJS对象实例一样，只需要调用new createjs.Sprite(SpriteSheet);
很显然，需要使用SpriteSheet来创建Sprite，那么SpriteSheet又是什么呢？可以理解为一个运行动画所需要的数据集合，包含动画的原始图像（一般都是将动画的每一帧合并为一个大图），每一帧的尺寸数据，以及动画的帧数（每个动画的名称及包含那几个帧）。
如何来构造一个SpriteSheet呢？在EaselJS中，首先要创建一个用于创建的SpriteSheet的数据集合作为参数，包含定义Spritesheet所必须的信息，一般情况看起来是这样的：
var data = {
//动画所需要的图像路径
//可以是多个图片路径组成的列表
&images&:[image.png],
//定义每一帧的数据，宽高等等，形成动画的每一帧
//有两种方法，如果所有的帧的尺寸相同，只需要统一定义
&frames&:{width:, height:, count:, regX: , regY:}
//如果帧数据的尺寸不同，分别定义即可
// x, y, width, height, imageIndex, regX, regY,这里的imageIndex对应“images”列表中的图片索引
[0,0,64,64,0,32,64],//frames0
//创建动画，动画的名字，以及对应&frames&列表中的哪些帧，也有两种方法
&animations&:{
a1:[frame0,framen]}//a1动画从第一帧运行到第n帧
//也可以单独列出一个动画所需要的帧数
，同时定义动画完成后的动作，速度等等
animations: {
frames: [1,,3,5,7],
next: &a1&,//a2播放完成后进入a1
speed: 2//速度
以中第一个Demo1为例，首先它的图片看起来大体是这样的
有了这样的图片，就可以通过SpriteSheet来创建一个Sprite动画。
第一步，创建构造Spritesheet
先创建SpriteSheet的参数，
var data = {
&images&:[&./spritesheet_grant.png&],//图片路径
&frames&:{&height&: 292, &width&: 165, &count&: 64,&regX&: 82,
&regY&: 0},//每帧的尺寸，count是总帧数
&animations&:{
&run&: [0, 25, &run&, 1.5],//[开始帧，结束帧，动画完成后的动作，速度]
&jump&: [26, 63, &run&]
对参数必须包含的三项，images,frames, animations采用合适的方式赋值，参数构造完成后调用
var spriteSheet = new createjs.SpriteSheet(data);
现在你有了一个spritesheet示例，随后就可以来创建一个sprite动画了，这里有两种方法：
sprite = new createjs.Sprite(spriteSheet);
sprite.gotoAndPlay(&run&);
sprite = new createjs.Sprite(spriteSheet，&run&);
最后把sprite添加到stage当中即可
stage.addChild(sprite);
现在你的页面上就有了一个不断走动的小人。
关于动画Sprite的使用，有几个特别的地方
1.可不可以构造一个只有一帧的动画？
只有一帧的动画，其实就是一个静止的图片。很多时候，尤其是编写前端CSS是，很多人喜欢把用到的所有图片合成为一个大图，在使用Createjs制作游戏时也是一样，把用的图片合成为一个大图，然后使用sprite把其中的每个图片分解出来，当然你也可以用Bitmap中的Rectangle来选取部分图片。比如有一个素材的图片包含你的游戏用到的所有图：
使用Sprite把图片逐个分离出来，代码看起来是这样的：
var data2 = {
&images&:[&./mario.png&],
&frames&:[
[2, 2, 32, 32],
[34, 2, 32, 32],
[66, 2, 32, 32],
[100, 2, 32, 32],
[2, 34, 32, 32],
[34, 34, 32, 32],
[66, 34, 32, 32],
[100, 34, 32, 32],
&animations&:{
&wall&:[0],
&gold&:[1],
&key&:[2],
&head&:[3],
&flag&:[4],
&mush&:[5],
&mario&:[6],
&tube&:[7]
var marioSheet = new createjs.SpriteSheet(data2);
好了，所有的图片都被分解为8个帧，而在“animations”中又分别创建了8个单帧的动画，然后你获得了一个marioSheet，当你有了这个marioSheet之后，游戏制作中需要那个图片时，只需要调用
= new createjs.Sprite(marioSheet,&wall&);
var gold = new ceatejs.Sprite(marioSheet,&gold&);
使用起来方便不少，而且便于管理。
2.怎么把所有图片合成到一个大图？
可以用photoshop，如果你会的话，通常我是用一个叫做TexturePacker的软件
下载安装后可以试用，选择EasalJS/CreateJS格式。它不但可以合成图片，而且可以生成一个json格式的数据，此处有惊喜。
把你制作游戏中用到的图片都拖进来，或者直接选择图片目录即可，点击publish sprite sheet，在你选定的目录中就会出现你想要的合成图片和一个json文件，打开json后你会惊讶的发现，它看起来非常眼熟，是不是很像你在构建SpriteSheet时使用的参数data，把需要的部分复制出来，让构建SpriteSheet变非常简单。（其实可以使用preloadJS直接载入这个json文件）
3.怎么获得一个连续动做的图片？
像制作Gif动画一样，当你想做一个这样的GIF
显然你需要录制很多熊猫不同动作的图片，然后组合到一起顺序播放，CreateJS官方提供的工具中，使用zoe工具可以把flash文件转变为sprite（这就是亲儿子的力量）。
最妙的是，同TexturePacker一样，使用zoe转化后，你将获得一个所有连续动作组成的大图，和一个json数据。
4.当一个动画播放完毕，如何删除这个动画
假设你有个飞机爆照效果的动画Sprite，飞机被击中后爆炸，当然只会爆照一次，动画播放完成后，必须在舞台Stage中删除这个动画，怎么才能让舞台在动画播放完成时收到通知并删除它呢？
在官方的API中，每个类的都有自己可以对应的事件event，打开Sprite页面，在event中可以看到animationend事件，就是动画播放结束所触发的，当你想在动画播放结束时删除掉这个动画，只需要：
sprite.addEventListener('animationend',function(event){
stage.removeChild(event.target);
所有的时间相应函数都有一个event参数，其中的event.target指向触发事件的元素。这样在动画结束后，就被从舞台上删除了。
二，使用BitmapText来制作图片字母或数字
CreateJS中所有的字符显示都可以通过Text类完成，虽然可以设置字体，不过有时候也许你想让他看起来更cool些，假设现在你想做一个电子表样式的记分牌，像这样
或者你发现了一些更酷的创意字体，比如这样的
想把他们用到你得游戏当中，这时候你需要用到BitmapText类
同Sprite一样，要创建一个BitmapText实例，首先要创建一个SpriteSheet作为参数，（以我的数字图片为例）
var data = {
&images&:[&./num.png&],
&frames&:[
[2, 2, 34, 41],
[34, 176, 22, 43],
[36, 45, 26, 41],
[34, 88, 24, 41],
[2, 45, 32, 41],
[34, 131, 22, 43],
[2, 174, 30, 41],
[38, 2, 24, 41],
[2, 131, 30, 41],
[2, 88, 30, 41]
&animations&:{
var ss = new createjs.SpriteSheet(data);
同用来定义Sprite的SpriteSheet格式一样，只是在定义“animations”时把动画的名字定义为对应的字符，这里是数组，如果是字符的话，动画的名字就应该是'a','b'......
var scoreTxt = new createjs.BitmapText(score.toString(), ss);//为了运算方便，我的score变量是数字，这里首先转化成字符
这样当你载入scoreTxt后就会发现，数字变成你提供的图片样式。


排名：千里之外
（1）（8）（2）