如何使用Createjs来编写HTML5游戏使用EaselJS中的制作Sprite类制作_百度知道Html5游戏框架createJs的简单用法 - W·Axes【站长博客网】
Html5游戏框架createJs的简单用法 - W·Axes
作者：冰河 来源：博客园精华区 时间： 23:05
声明：本文为原创文章，如需转载，请注明来源 WAxes ，谢谢！ 楼主记忆力不好，最近刚好用了一下createJs框架，怕以后一段时间没用后会忘记，所以在此做个记录，或许以后用得着。
相关推荐：
声明：本文为原创文章，如需转载，请注明来源
楼主记忆力不好，最近刚好用了一下createJs框架，怕以后一段时间没用后会忘记，所以在此做个记录，或许以后用得着。
createJs网上的中文教程挺少的，以前UC有个Xcanvas的论坛有createJs的详细教程，但是随着XCanvas团队的解散，那个网站也关闭了。。网上的大部分都是非常基础的教程，有点千遍一律的感觉。所以楼主就去把createJs下载下来，硬着头皮看英文文档了。凭着楼主这英语六级只考了三百多分的渣渣来说，看起来很费力啊，不过还是勉强摸索出了大概的用法。所以现在就是学了多少就记录多少，之后或许也会不定期更新一下该框架的新的学习心得。毕竟对自己以后还是有帮助的。
希望本文能帮到那些想学createJs的新手。因为楼主也是刚学的，所以本文或许有不正确之处，因此本文仅当参考，若有不正之处欢迎斧正。
闲话说到这，直接进入主题。
楼主用createJs写了个简单的跑酷游戏DEMO，就拿它做例子吧。&
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.
C_H = stage.canvas.
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 , 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.
if(event.keyCode===32&&man.jumpNum&man.jumpMax){
man.jump();
大家感兴趣的内容
最近更新的内容使用 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个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致21069人阅读
本文主要选取了Construct2、ImactJS、LimeJS、GameMaker、CreateJS、lycheeJS、Crafty、three.js、melonJS、Turbulenz、Quintus、Cocos2d-html5等进行了简要介绍和对比，主要是根据网上的资料整理而成。
主流框架对比
Construct2
Construct 2是一个运行于Windows平台的游戏制作工具，它可以让没有任何编程基础的用户在短时间内不写一行代码快速开发出一款可运行于所有平台（Windows、Mac、Linux、Android、iOS等）的游戏。免费版可以将游戏导出成HTML5。收费版本分为个人版（79英镑）和企业版（259英镑），可以导出所有平台的版本，同时提供了更多的特效和音乐。如果使用该工具盈利超过5000美元，需要升级到企业版。
1. 简单易用，可实时运行游戏
2. 强大的事件系统，可以不通过写代码来控制游戏逻辑
3. 提供了可编程扩展的接口
4. 提供了大量特效，支持物理效果
5. 支持所有平台
6. 完整的文档以及社区支持
不如直接写代码灵活
参考资料：
ImpactJS是一个基于JavaScript的HTML5游戏引擎，同时支持PC和移动平台浏览器。它是目前除了Construct2之外最受欢迎的HTML5游戏引擎，使用需要支付99美元。
1. 提供了灵活的关卡编辑器，可以快速构建游戏地图
2. 提供了强大的调试工具
3. 提供了Ejecta可以将JavaScript的执行结果通过OpenGL渲染出来，可以在iOS平台上获得与原生应用相近的效率
4. 文档齐全，有两本专门介绍ImpactJS开发的书
5. 支持物理效果
6. 支持自己编写插件来扩展
App Store游戏
LimeJS是一个基于Google Closure Library开发的HTML5游戏框架，继承了Closure代码易读易懂、架构清楚的特性。同时提供了游戏中各种通用实体的封装，如Director、Scene、Layer、Event和Animation等，与Cocos2d的API类似。它是由公司创建。
1. 基于Apache协议的开源框架
2. 功能强大，文档齐全，与ImactJS类似
3. 支持物理效果
4. 与Cocos2d的API类似，容易上手
依赖于Google Closure
GameMaker与Construct 2类似，都是一个游戏制作工具，可以导出到各个平台运行，分为免费版、标准版（49.99美元）、专业版（99.99美元）和大师版（799.99美元）。其中免费版只能导出Mac和Windows版本，导出HTML5需要大师版或者专业版（再额外支付99.99美元）。
优点和缺点：
优势与Construct2类似，但性价比不如Construct2高
CreateJS(EaselJS)
CreateJS是Adobe官方赞助的开源开发框架，它大部分API都是基于Flash原有的API来模仿实现的，并且官方提供了直接把Flash动画转成JS数据包的工具，调用起来很方便。CreateJS提供了若干开发套件及工具，分别是：EaselJS（负责图形、事件、触控、滤镜等功能）、TweenJS（补间动画）、SoundJS（音频控制）、PreloadJS（文件加载）和Zo?（生成图片精灵及动画数据）。
1. Flash开发者很容易上手
2. 提供了Flash转html5的工具，可以将部分Flash代码进行转换再修改
3. 基于MIT协议的开源框架
4. 类库设计非常独立，包含不同的模块，可选择性使用
lycheeJS是一个环境独立的JavaScript游戏引擎，可以在任何支持JavaScript的环境中运行。它的理念是做最快的JavaScript游戏引擎。
1. 同时支持PC（Firefox、Chrome、Opera、Safari、IE）和移动平台（WebKit、Chrome、Firefox、Safari）的浏览器
2. 提供了CDN、WebSockets、SPDY、HTTP2.0以及游戏截图的支持
3. 提供了可以直接导出第三方（Facebook、AppStore、Google Play Store）资源包来发布
4. 基于MIT协议的开源框架
Crafty是一个体积小、简单、轻量级的2D的HTML5游戏引擎，它提供了通过Canvas或DOM来绘制实体，提供了精灵Map以及SAT高级碰撞监测支持。它是由个人（Louis Stowasser）创建，同时由Github上的一些开发者共同开发。
2. 轻量级引擎，不会受到框架的太多束缚
3. 同时支持PC和移动平台浏览器
Three.js是一个轻量级的JavaScript库，用于在浏览器上创建和显示3D图形。它可以同时使用Canvas、SVG或WebGL进行绘制。
优点和缺点：
支持3D，但是不适合做2D游戏
melonJS是melonJS团队对Javascript热情以及开发经验的结晶，是一个简单、免费、而且独立的类库。
1. 轻量级的2D引擎
2. 支持所有主流的PC和移动平台浏览器
3. 支持使用Tiled map editor来创建和编辑地图
4. 支持多声道音频
5. 基于MIT协议的开源框架
Turbulenz是一个开源的HTML5游戏引擎，提供了可以运行在Windows、MacOS、Linux上的SDK，允许开发人员创建高质量和硬件加速的2D、3D游戏。包括以下功能：异步资源加载、进行特效和粒子渲染、支持物理效果、碰撞检测以及动画、3D音效支持、支持网络交互以及社交网络分享、场景和资源的管理。
1. 功能强大，同时支持2D和3D
2. 基于MIT协议的开源引擎
Quintus是一个容易上手、轻量级、且模块化的HTML5游戏引擎。它引用面向对象的思想来进行HTML5游戏开发，同时依赖于jQuery来提供事件处理机制和元素选取操作。
1. 依赖于jQuery
2. 目前引擎仍处于初级阶段，还很不成熟
Cocos2d-html5
Cocos2d-html5是一款基于Cocos2d-x API的2D开源免费HTML5游戏引擎。它目前通过canvas进行渲染，将来会支持WebGL。它由国内Cocos2d-x核心团队主导开发和维护，行业领袖、HTML5大力推动者Google为这个项目提供支持。同时，Zynga、Google等大公司的工程师也参与到它的设计工作中。
1. 与Cocos2d的API类似，容易上手
2. 中文文档齐全，资料丰富
3. 基于MIT协议的开源引擎
各框架具体参数对比
1. 各HTML5游戏框架对比
3. 对于Crafty、Lime、Frozen、Melon、Impact、Quintus框架，可以在上查看用这些引擎开发同一个游戏的效果以及代码风格。Breakouts中使用到的特性包括碰撞检测、精灵动画、音效、地图、场景切换、交互、文字渲染、移动平台支持。
4. 以上各引擎中，除了Construct2、ImpactJS、GameMaker是收费的之外，其他引擎都是免费并且开源的。对于开源引擎，我们可以从Github上面的关注度了解到该引擎的流行程度，关注的人越多，遇到问题越容易解决。同时一般来说，项目开发者越多，版本更新越快；项目的进行时间越长则越成熟。下面将对各开源引擎的开发者人数、项目启动时间、关注度进行对比。
Game Engine
Github commits
Github contributors
Start time
Github Star
Github Fork
（最近才开源）
Cocos2d-html5
以上各引擎中，Construct2、ImpactJS、GameMaker三个是收费的，其中Construct2与GameMaker更像一个游戏开发工具，可以实现不用写一行代码来制作游戏，更适合于没有编程基础的人使用。而ImpactJS作为一个高质量的框架，且易于扩展，虽然是收费的，但是物有所值。
开源引擎中，three.js是最火的，但是仅限于开发3D游戏。其次是CreateJS，由Adobe官方赞助且采用Flash类似的API以及模块化开发，是Flash开发者以及将Flash游戏转换成html5不可多得的选择。Turbulenz虽然开源时间比较晚，但颇有后来者居上的趋势，由于其对2D和3D的同时支持，是同时开发2D和3D游戏的最佳选择。LimeJS与Crafty相比的优势在于有一个公司进行维护，相比个人要更稳定，但是需要依赖于Google
Closure，也使之成为一个重量级的框架。Crafty体积小、轻量级，更适合于小游戏的开发。Cocos2d-html5作为国产框架的一个优势在于中文文档和教程多，且得到了Google的支持，但相比ImpactJS、CreateJS仍不够成熟。melonJS、Quintus、lycheeJS的开发者和使用者都较少，相关文档和教程也相对少，还有待观察。
如果大家觉得对自己有帮助的话，还希望能帮顶一下，谢谢：）
个人博客：
本文地址：
转载请注明出处，谢谢！
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：37722次
排名：千里之外
转载：20篇如何使用Createjs来编写HTML5游戏（四）TweenJS和Tick动画
已有 513 次阅读 19:00
|个人分类:|系统分类:|
& & & & 如何使用Createjs来编写HTML5游戏（四）TweenJS和Tick动画，有需要的朋友可以参考下。
& & & & CreateJS包含4个部分，EaselJS、TweenJS、PreloadJS、SoundJS，其中最主要的部分EaselJS包含了开发Html5游戏的所有功能，仅仅使用EaselJS几乎可以完成所有的开发工作，其余三项可以看作EaselJS的辅助工具。比如响应tick事件然后改变元素坐标就可以实现动画功能，而使用TweenJS来创建补间动画，则可以省去你很多代码，简化了操作。
& & & & 一个简单的tick动画看起来是这样的：
&!DOCTYPE HTML&
&html lang=&en-US&&
&head&
& & & & &meta charset=&UTF-8&&
& & & & &title&&/title&
&/head&
&body&
& & & & &canvas id=&game& width=&600& height=&600px&&&/canvas&
& & & & &script src=&js/easeljs-0.8.1.min.js&&&/script&& & & &
& & & & &script type=&text/javascript&&
& & & & var stage,
& & function init(){
& && &&&stage = new createjs.Stage(document.getElementById('game'));
& && &&&createjs.Ticker.addEventListener(&tick&, handleTick);
& && &&&createjs.Ticker.setFPS(60);
& && &&&circle = new createjs.Shape();
& && &&&circle.graphics.f(&red&).dc(0,0,50);
& && &&&circle.x = 0;
& && &&&circle.y = 100;
& && &&&stage.addChild(circle);
& && &&&window.addEventListener(&click&, function(event){
& && && && &createjs.Ticker.setPaused(!createjs.Ticker.getPaused());
& && &&&});
& & function handleTick(event){
& & if(!event.paused){
& && &&&circle.x +=5;
& && &&&if(circle.x & 1000){
& && && && &circle.x = 0;
& && &&&}
& & }
& && &&&stage.update();
& & }
& & & & init()
& & & & &/script&
&/body&
&/html&复制代码
& & & & 每个时间周期，circle的x+5，很自然circle就会在页面上从左到右的移动，可以给circle添加一个鼠标点击事件让动画暂停运行，当鼠标按下，使用createjs.Ticker.getPaused()获取当前运行状态，并使用setPaused做成相反的赋值，参数event的paused属性作为动画开关，点击就可以暂停。
& & & & event参数还包含了其他重要的属性，比如使用event.delta可以获取刷新的时间间隔。
& & & & 既然用Ticker可以完成动画，TweenJS又有什么作用呢？
& & & & 使用TweenJS可以帮助开发者创建较复杂的动画效果，以及通过设置CSS来实现CSS动画，在Ticker动画中，完成一个直线运动的例子比较简单，如果要是想比较复杂的动画效果，比如让小球在桌面方形轨迹运动，或实现小球碰到墙之后的弹力效果，使用Ticker实现起来就比较复杂（当然也可以通过一些Math函数，实现一些复杂的运动轨迹）。
& & & & 先从上面的例子开始，让小球在屏幕上来回移动，使用TweenJS来实现的只需要：
&!DOCTYPE HTML&
&html lang=&en-US&&
&head&
& & & & &meta charset=&UTF-8&&
& & & & &title&&/title&
&/head&
&body&
& & & & &canvas id=&game& width=&600& height=&600px&&&/canvas&
& & & & &script src=&js/easeljs-0.8.1.min.js&&&/script&
& & & & &script src=&js/preloadjs-0.6.1.min.js&&&/script&
& & & & &script src=&js/tweenjs-0.6.1.min.js&&&/script&
& & & & &script type=&text/javascript&&
& & & & var stage,
& & function init(){
& && &&&stage = new createjs.Stage(document.getElementById('game'));
& && &&&createjs.Ticker.addEventListener(&tick&, handleTick);
& && &&&createjs.Ticker.setFPS(60);
& && &&&circle = new createjs.Shape();
& && &&&circle.graphics.f(&red&).dc(0,0,50);
& && &&&circle.x = 0;
& && &&&circle.y = 100;
& && &&&stage.addChild(circle);
& && &&&createjs.Tween.get(circle,{loop:true}).to({x:);
& & & & & & & & //只需要加这一句
& & }
& & function handleTick(event){
& && &&&stage.update();
& & }
& & & & init();
& & & & &/script&
&/body&
&/html&复制代码
& & & & 是不是简单了不少！
& & & & 1.要想使用TweenJS，首先要在HTML中导入js库
&script src=&tweenjs-0.6.1.min.js&&&/script&复制代码
& & & & 2.调用方式
createjs.Tween.get().wait().to().call();复制代码
& & & & 使用get()获取要添加运动轨迹的元素，如果需要动画循环进行，只需要加上{loop:true}，当然还有其他选项，比如override
& & & & wait()可以让动画延迟播放
& & & & to()来确定运动的轨迹，只需要指明你打算让circle到达的位置坐标即可，TweenJS会自动为你创建动画过程，to()的第一个参数{x:1000}，指明了x坐标的终点，而且在{}中不只可以改变坐标，alpha:0.5可以改变透明度，scaleX/Y = 2可以改变大小，rotation:360可以改变角度，实现旋转；to()的第二个参数，指明动画的时常，也是就是x坐标运动到终点所用的时间，这里还有第三个参数createjs.Ease，可以设置运动的轨迹和运动的方式。
& & & & call(),可以在动画结束后，调用一个函数，当然也可以省略如果不需要的话。
& & & & 3.想让你的元素做连续的复杂运动，只要不断的添加to()就可以了，比如让小球做方形轨迹的运动，并且在过程中改变大小，透明度
createjs.Tween.get(circle,{loop:true}).to({x:900},2000)
& && && && && & .to({y:600,alpha:0.2},2000)
& && && && && & .to({x:100,alpha:1, scaleX:1.5,scaleY:1.5},2000)
& && && && && & .to({y:100, scaleX:1,scaleY:1},2000);复制代码
& & & & to()的第三个参数，createjs.Ease可以实现复杂的运动轨迹，比如要实现一个小球落地效果，落地后再弹几下，只需要加一个createjs.Ease.bounceOut
createjs.Tween.get(circle,{loop:true}).wait(200).to({y:650},1000,createjs.Ease.bounceOut);复制代码
& & & & 使用Ease可以控制运动的轨迹，实现曲线的运动，还可以控制运动过程，比如先加速再减速等，在Tweenjs官方示例中有两个可以用来观察Ease提供的各个参数对运动过程产生的影响，
& & & & 基本的Tween用法就是这些，通过连续的to()和Createjs.Ease组合，可以创建出很复杂的动画效果，在TweenJS中,还包含了几个插件，CSSPlugin和MotionGuidePlugin他们并不直接包含在导入的tweenjs-0.6.1.min.js当中，想使用的话，打开Tweenjs目录，在src文件夹下面的tweenjs中可以找到，以CSSPlugin为例吧
& & & & 导入CSSPluginjs库
& & & & &script src=&CSSPlugin.js&&&/script&
createjs.CSSPlugin.install(createjs.Tween);
& && &&&var box = document.createElement(&div&);
& && &&&box.style.width = &100px&;
& && &&&box.style.height = &100px&;
& && &&&box.style.position = &absolute&;
& && &&&box.style.borderRadius = &8px&;
& && &&&box.style.backgroundColor = &#0F0&;
& && &&&document.body.appendChild(box);
复制代码
& & & & 首先调用install方法，然后就可以设置被选取得页面元素的style来修改它的css
& & & & 有个例子作为参考：
&script&
& & & & var colorSeed = 0;
& & & & function init() {
& & & & & & & & createjs.CSSPlugin.install(createjs.Tween);
& & & & & & & & createjs.Ticker.setFPS(20);
& & & & & & & & var count = 600;
& & & & & & & & while (--count &= 0) {
& & & & & & & & & & & & var box = document.createElement(&div&);
& & & & & & & & & & & & box.style.width = &6px&;
& & & & & & & & & & & & box.style.height = &2px&;
& & & & & & & & & & & & box.style.position = &absolute&;
& & & & & & & & & & & & box.style.borderRadius = &2px&;
& & & & & & & & & & & & box.style.backgroundColor = &#0F0&;
& & & & & & & & & & & & document.body.appendChild(box);
& & & & & & & & & & & & var a = (Math.random() * Math.PI * 2 * 16 | 0) / 16;
& & & & & & & & & & & & box.style.webkitTransform = &rotate(& + a + &rad)&;
& & & & & & & & & & & & var d = 30;
& & & & & & & & & & & & box.style.left = window.innerWidth / 2 + Math.cos(a - 0.2 - Math.random()) * d + &px&;
& & & & & & & & & & & & box.style.top = window.innerHeight / 2 + Math.sin(a - 0.2 - Math.random()) * d + &px&;
& & & & & & & & & & & & d = (Math.min(window.innerWidth, window.innerHeight) - 16) / 2 * (Math.random() * 0.3 + 0.7);
& & & & & & & & & & & & var x = window.innerWidth / 2 + Math.cos(a) *
& & & & & & & & & & & & var y = window.innerHeight / 2 + Math.sin(a) *
& & & & & & & & & & & & createjs.Tween.get(box, {loop: true}, true).set({opacity: &0&}, box.style).wait(Math.random() * 1000 + 1 | 0).call(updateColor).to({top: y, left: x, width: 16, height: 4, opacity: 1}, Math.random() * 1500 + 1000, easeIn);
& & & & & & & & }
& & & & & & & & // tween the base color that divs will be assigned when they start moving:
& & & & & & & & createjs.Tween.get(this, {loop: true}).to({colorSeed: 360}, 5000);
& & & & }
& & & & function updateColor(tween) {
& & & & & & & & // grab the tween's target (the style object), and update it's color
& & & & & & & & tween._target.style.backgroundColor = &hsl(& + (Math.random() * 60 + colorSeed | 0) + &,100%,50%)&;
& & & & }
& & & & // very simple easing equation:
& & & & function easeIn(ratio) {
& & & & & & & & return ratio *
& & & & }
&/script&复制代码
笔记作者：
笔记链接：
您可能会喜欢：
推荐笔记：
评论 ( 个评论)}