最火HTML5 JavaScript游戏引擎：国外篇（二）
发表于 15:50|
作者唐小引
摘要：在3D当道2D逆袭的今天，HTML5和JavaScript游戏引擎逐渐走向了成熟，在追求原生体验的同时，也深逐精致细腻狂炫酷拽。在本文中，我们将继续介绍来自国外，非常受开发者欢迎的HTML5和JavaScript游戏引擎。
6. Gogo Make Play（简称为GMP）是一款快速且免费的开源JavaScript游戏引擎，基于MIT和GPLv2许可协议发布，其所有代码可登陆GMP官网下载。GMP诞生于2006年12月，其开发者为来自加拿大温哥华的软件开发者Trevor Cowley。GMP最初是Trevor一款基于浏览器的弹球游戏的后端代码，后逐渐发展成为一个独立的引擎。GMP体积小，操作简单，非常易于学习和使用，开发者只需掌握简单的HTML/JS/CSS，就可以通过Web浏览器来构建和管理HTML页面，GMP拥有完整的API文档以及用户手册和教程，在未来，Trevor还将推出一系列的插件和游戏组件模板，以帮助开发者更方便容易地进行游戏开发。相关链接：Gogo Make Play的、7. CreateJS是一款可以构建丰富交互体验的HTML5游戏开发框架，由Flash达人Gskinner开发，Adobe、微软和AOL官方赞助，并已托管到GitHub上。CreateJS大部分API都是基于Flash原有的API来模仿实现的，并且官方提供了直接把Flash动画转成JS数据包的工具，调用起来很方便。CreateJS提供了若干开发套件及工具，分别是：EaselJS（负责图形、事件、触控、滤镜等功能）、TweenJS（补间动画）、SoundJS（音频控制）、PreloadJS（文件加载）和Zo?（生成图片精灵及动画数据）。主要优点：Flash开发者很容易上手；提供了Flash转HTML5的工具，可以将部分Flash代码进行转换再修改；基于MIT协议的开源框架；类库设计非常独立，包含不同的模块，可选择性使用。相关链接：CreateJS的、8. jGen是一款开源的JavaScript游戏引擎，其开发者为来自俄罗斯莫斯科的Ruslan Matveev。jGen支持简单的精灵动画、碰撞和渲染等轴地图等功能，其目标是让开发者不使用Canvas，只需HTML和JavaScript就可以开发出基于现代浏览器的应用，目前，jGen仅支持Chrome和Safari。相关链接：jGen的、9. Pulse是一款开源的JavaScript游戏和图形引擎，由Modulus团队开发，成员包括Charlie Key、Brandon Cannaday、Richard Key。Pulse为开发者提供了一个非常简单的框架，只需几行JavaScript和HTML代码就可以构建HTML5游戏。此外，Pulse还引入了插件架构，开发者可以轻松进行核心功能的扩展。相关链接：Pulse的、10. LycheeJS是一款环境独立的开源JavaScript游戏引擎，基于MIT许可协议发布，可以在任何支持JavaScript的环境中运行。LycheeJS于2012年6月面世，其理念是做最快的JavaScript游戏引擎。LycheeJS提供了CDN、WebSockets、SPDY、HTTP2.0以及游戏截图支持，可高性能运行于PC（Firefox、Chrome、Opera、Safari、IE）和移动平台（WebKit、Chrome、Firefox、Safari）浏览器之上。相关链接：LycheeJS的、系列阅读：我们搜集了国内外最火的HTML5 JavaScript游戏引擎，本系列将不断更新，也欢迎大家提供线索，请私信：，或发送邮件至mobile#csdn.net。本文为CSDN原创文章，未经允许不得转载，如需转载请联系market#csdn.net(#换成@)
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章如何使用Createjs来编写HTML5游戏（四）TweenJS和Tick动画 - 博客频道 - CSDN.NET
失业矿工的博客
我是名矿工，曾经是，后来国有变成私有，领导变成老板，老板掏空企业，企业玩完，矿工失业。
分类：Html5/Createjs
CreateJS包含4个部分，EaselJS、TweenJS、PreloadJS、SoundJS，其中最主要的部分EaselJS包含了开发Html5游戏的所有功能，仅仅使用EaselJS几乎可以完成所有的开发工作，其余三项可以看作EaselJS的辅助工具。比如响应tick事件然后改变元素坐标就可以实现动画功能，而使用TweenJS来创建补间动画，则可以省去你很多代码，简化了操作。
一个简单的tick动画看起来是这样的：
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);
circle.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();
每个时间周期，circle的x+5，很自然circle就会在页面上从左到右的移动，可以给circle添加一个鼠标点击事件让动画暂停运行，当鼠标按下，使用createjs.Ticker.getPaused()获取当前运行状态，并使用setPaused做成相反的赋值，参数event的paused属性作为动画开关，点击就可以暂停。
event参数还包含了其他重要的属性，比如使用event.delta可以获取刷新的时间间隔。
既然用Ticker可以完成动画，TweenJS又有什么作用呢？
使用TweenJS可以帮助开发者创建较复杂的动画效果，以及通过设置CSS来实现CSS动画，在Ticker动画中，完成一个直线运动的例子比较简单，如果要是想比较复杂的动画效果，比如让小球在桌面方形轨迹运动，或实现小球碰到墙之后的弹力效果，使用Ticker实现起来就比较复杂（当然也可以通过一些Math函数，实现一些复杂的运动轨迹）。
先从上面的例子开始，让小球在屏幕上来回移动，使用TweenJS来实现的只需要：
&pre class=&javascript& name=&code&&
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();
}是不是简单了不少！
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);
有个例子作为参考：
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 *
排名：千里之外
（1）（8）（2）}