基于Egret引擎Tween缓动动画技术研究

佟鑫+黄伟

摘 要 通常情况下，游戏中或多或少都会带有一些缓动动画。例如界面弹出，或者道具飞入飞出的特效等等。在制作这些缓动动画的时候我们仅仅希望简单的办法实现这种移动或者变形缩放的效果。Egret引擎中的Tween缓动动画类就为我们提供了相关的功能。本文将从Egret引擎的基本情况入手，对Tween缓动动画功能进行分析，并将Tween缓动动画的应用进行举例分析。

关键词 Egret；Tween；动画

中图分类号 G2 文献标识码 A 文章编号 1674-6708（2017）183-0027-02

H5游戏可用于移动端的web页面，玩家无需下载就可以自由体验游戏，有助于解放手机内存，与此同时，H5游戏还能在移动端做出Flash无法做出的许多动画效果。乔布斯曾说“没人愿意使用Flash，全球已经开始步入H5时代”，而如今随着cocos2d-x、Egret等H5引擎的逐渐爆红，有强大引擎支撑的H5游戏继而取代技术落后、特效单一的Flash游戏便有迹可寻。而Egret引擎作为一款免费开源的国产引擎，对于它的使用与应用进行了解与探讨具有一定的实际意义。

1 Egret的基本情况

1.1 Egret的发展背景

国内较成熟的H5游戏引擎包括cocos2d-x，还有今天的主题Egret。cocos2d-x最开始的时候主打跨平台使用C++开发较多，然而C++门槛较高，使用cocos2d-x经常纠结于语言的同时还要跟引擎的BUG打交道；而Egret引擎跨平台，入手容易，性能较好，辅助开发工具较多，团队合作更加得心应手。以前的HTML5游戏，基本都是用JavaScript去编写。这样会面对两个问题，首先JavaScript是弱类型的，所以HTML5给人的印象是只能做一些表现力很弱的、很卡的游戏；开发游戏维护起来非常困难，代码越写越乱、问题越写越多。Egret引擎通过微软的TypeScript语言来解决这个问题，用TypeScript写然后再编译成JavaScript。TypeScript是一个强类型的语言，而且是JavaScript的超集，也就是说可以JavaScript和TypeScript混着写。其次它是一个强类型的语言，比较容易像C++那样去维护。

1.2 Egret引擎的基本状况

Egret引擎是一款开源免费的2D游戏引擎，大量的借鉴了Flash的一些设计思想，在底层使用了显示对象、显示列表和事件等技术。在图形图像渲染中，Egret引擎使用了HTML5标准中的canvas技术，保证了使用Egret引擎开发的游戏在各种浏览器上的兼容性。Egret引擎不仅提供了CPU渲染，还提供了性能更为强大的硬件加速渲染模式——WebGL渲染模式。Egret继承了Flash的优点，同时也针对游戏开发，加入了一些新的功能。HTML5编写的页面容易使手机变热，而变热的原因主要是由于画面需要经常刷新重新绘制导致的。Egret引擎采用自动脏矩形技术，来实现局部渲染。引擎底层会智能的计算屏幕中发生变化而需要重绘的舞台局部区域，并仅对这个区域进行重绘，这样将大大减少无用的渲染工作量，大幅降低绘制的开销，提高游戏性能。

2 Tween的功能及应用

2.1 Tween缓动动画的功能

Tween中封装了最常用的缓动动画功能，用简单的代码就能实现移动或者变形缩放等效果。比如让精灵移动到点击的位置，首先通过Tween. get（）方法来获取精灵对象，然后通过to（）方法来给出需要设置缓动的具体参数，即精灵对象的坐标属性及移动的终点坐标。在Tween缓动动画执行的过程中，也许我们逻辑需要实时做一些变化，跟踪这一过程，可以通过在Tween.get（）方法的第二个参数中，加入变化事件的处理函数来实现；比如做一个射击类游戏，敌人在做一个Tween缓动动画运动过程中，我们的枪口要实时瞄准，那么就需要在Tween的变化过程中随时计算，修正枪口的角度。

2.2 Tween缓动动画的使用实例

正是由于Tween缓动动画具有控制灵活、缓动过程多样的特点，因此如何使用Tween缓动动画从而得到多样化、多元化的效果成了我们学习了解的核心内容。接下来我们将以制作枪口追随猎物这种缓动动画为例，讲述Tween动画的使用。

首先我们在游戏场景中添加一个猎物精灵obj，给这个猎物精灵添加一个缓动动画，使其能够在场景中移动；然后给它指定一个移动的目标坐标，to（{x：1000}），也就是使猎物从舞台的左侧移动到x坐标为1000的位置；接下来设置to（）方法的第二个参数，缓动的时间，指定这个缓动动画执行的时间，to（{x：1000}，1000），这个参数的单位为毫秒；这两个参数设置好以后，猎物精灵就能够在舞台上从左向右进行移动；接下来我们需要在猎物精灵移动的过程中去修正枪口的位置，使枪口能实时瞄准猎物；我们在get（）方法中加入变化事件处理函数，Tween.get（obj，{onC hange：funcChange，onChangeObj：obj}），在变化事件处理函数中根据猎物的坐标实时修正枪口的坐标；

var funcChange = function（）：void{

gun.x = obj.x；

gun.y = obj.y；

}

在熟悉了這个方法后，我们就可以将它更加广泛而深入的应用，比如塔防类游戏，当敌人进攻时，我们可以应用Tween缓动动画，将炮口实时瞄准敌人并发射炮弹，敌人移动时，炮口也可以实时跟随移动。

3 结论

诚如我们所见，随着网络游戏慢慢渗透我们的生活，网络游戏已成为我们休闲生活中不可或缺的一部分，它对我们的影响力之大，从而奠定了Egret游戏引擎的重要位置，而Tween缓动动画作为Egret引擎的一个功能模块，它的重要性可见非同一般。本文从Egret引擎的基本情况入手，分析探讨了Tween缓动动画的功能，并列举了Tween缓动动画的实际使用例子，希望能够对同领域从事Egret引擎游戏开发的人员有所帮助。

参考文献

[1]张鑫磊.Egret HTML5游戏开发指南.北京.电子工业出版社，2016.

[2]白鹭开发者社区.教学示例[EB/OL].http：//edn.egret. com/cn/example/page/index#070-tween-comp.