基于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.