佟鑫+黃偉

摘 要 通常情況下，游戲中或多或少都會帶有一些緩動動畫。例如界面彈出，或者道具飛入飛出的特效等等。在制作這些緩動動畫的時候我們僅僅希望簡單的辦法實現(xiàn)這種移動或者變形縮放的效果。Egret引擎中的Tween緩動動畫類就為我們提供了相關(guān)的功能。本文將從Egret引擎的基本情況入手，對Tween緩動動畫功能進(jìn)行分析，并將Tween緩動動畫的應(yīng)用進(jìn)行舉例分析。

關(guān)鍵詞 Egret；Tween；動畫

中圖分類號 G2 文獻(xiàn)標(biāo)識碼 A 文章編號 1674-6708（2017）183-0027-02

H5游戲可用于移動端的web頁面，玩家無需下載就可以自由體驗游戲，有助于解放手機(jī)內(nèi)存，與此同時，H5游戲還能在移動端做出Flash無法做出的許多動畫效果。喬布斯曾說“沒人愿意使用Flash，全球已經(jīng)開始步入H5時代”，而如今隨著cocos2d-x、Egret等H5引擎的逐漸爆紅，有強(qiáng)大引擎支撐的H5游戲繼而取代技術(shù)落后、特效單一的Flash游戲便有跡可尋。而Egret引擎作為一款免費(fèi)開源的國產(chǎn)引擎，對于它的使用與應(yīng)用進(jìn)行了解與探討具有一定的實際意義。

1 Egret的基本情況

1.1 Egret的發(fā)展背景

國內(nèi)較成熟的H5游戲引擎包括cocos2d-x，還有今天的主題Egret。cocos2d-x最開始的時候主打跨平臺使用C++開發(fā)較多，然而C++門檻較高，使用cocos2d-x經(jīng)常糾結(jié)于語言的同時還要跟引擎的BUG打交道；而Egret引擎跨平臺，入手容易，性能較好，輔助開發(fā)工具較多，團(tuán)隊合作更加得心應(yīng)手。以前的HTML5游戲，基本都是用JavaScript去編寫。這樣會面對兩個問題，首先JavaScript是弱類型的，所以HTML5給人的印象是只能做一些表現(xiàn)力很弱的、很卡的游戲；開發(fā)游戲維護(hù)起來非常困難，代碼越寫越亂、問題越寫越多。Egret引擎通過微軟的TypeScript語言來解決這個問題，用TypeScript寫然后再編譯成JavaScript。TypeScript是一個強(qiáng)類型的語言，而且是JavaScript的超集，也就是說可以JavaScript和TypeScript混著寫。其次它是一個強(qiáng)類型的語言，比較容易像C++那樣去維護(hù)。

1.2 Egret引擎的基本狀況

Egret引擎是一款開源免費(fèi)的2D游戲引擎，大量的借鑒了Flash的一些設(shè)計思想，在底層使用了顯示對象、顯示列表和事件等技術(shù)。在圖形圖像渲染中，Egret引擎使用了HTML5標(biāo)準(zhǔn)中的canvas技術(shù)，保證了使用Egret引擎開發(fā)的游戲在各種瀏覽器上的兼容性。Egret引擎不僅提供了CPU渲染，還提供了性能更為強(qiáng)大的硬件加速渲染模式——WebGL渲染模式。Egret繼承了Flash的優(yōu)點，同時也針對游戲開發(fā)，加入了一些新的功能。HTML5編寫的頁面容易使手機(jī)變熱，而變熱的原因主要是由于畫面需要經(jīng)常刷新重新繪制導(dǎo)致的。Egret引擎采用自動臟矩形技術(shù)，來實現(xiàn)局部渲染。引擎底層會智能的計算屏幕中發(fā)生變化而需要重繪的舞臺局部區(qū)域，并僅對這個區(qū)域進(jìn)行重繪，這樣將大大減少無用的渲染工作量，大幅降低繪制的開銷，提高游戲性能。

2 Tween的功能及應(yīng)用

2.1 Tween緩動動畫的功能

Tween中封裝了最常用的緩動動畫功能，用簡單的代碼就能實現(xiàn)移動或者變形縮放等效果。比如讓精靈移動到點擊的位置，首先通過Tween. get（）方法來獲取精靈對象，然后通過to（）方法來給出需要設(shè)置緩動的具體參數(shù)，即精靈對象的坐標(biāo)屬性及移動的終點坐標(biāo)。在Tween緩動動畫執(zhí)行的過程中，也許我們邏輯需要實時做一些變化，跟蹤這一過程，可以通過在Tween.get（）方法的第二個參數(shù)中，加入變化事件的處理函數(shù)來實現(xiàn)；比如做一個射擊類游戲，敵人在做一個Tween緩動動畫運(yùn)動過程中，我們的槍口要實時瞄準(zhǔn)，那么就需要在Tween的變化過程中隨時計算，修正槍口的角度。

2.2 Tween緩動動畫的使用實例

正是由于Tween緩動動畫具有控制靈活、緩動過程多樣的特點，因此如何使用Tween緩動動畫從而得到多樣化、多元化的效果成了我們學(xué)習(xí)了解的核心內(nèi)容。接下來我們將以制作槍口追隨獵物這種緩動動畫為例，講述Tween動畫的使用。

首先我們在游戲場景中添加一個獵物精靈obj，給這個獵物精靈添加一個緩動動畫，使其能夠在場景中移動；然后給它指定一個移動的目標(biāo)坐標(biāo)，to（{x：1000}），也就是使獵物從舞臺的左側(cè)移動到x坐標(biāo)為1000的位置；接下來設(shè)置to（）方法的第二個參數(shù)，緩動的時間，指定這個緩動動畫執(zhí)行的時間，to（{x：1000}，1000），這個參數(shù)的單位為毫秒；這兩個參數(shù)設(shè)置好以后，獵物精靈就能夠在舞臺上從左向右進(jìn)行移動；接下來我們需要在獵物精靈移動的過程中去修正槍口的位置，使槍口能實時瞄準(zhǔn)獵物；我們在get（）方法中加入變化事件處理函數(shù)，Tween.get（obj，{onC hange：funcChange，onChangeObj：obj}），在變化事件處理函數(shù)中根據(jù)獵物的坐標(biāo)實時修正槍口的坐標(biāo)；

var funcChange = function（）：void{

gun.x = obj.x；

gun.y = obj.y；

}

在熟悉了這個方法后，我們就可以將它更加廣泛而深入的應(yīng)用，比如塔防類游戲，當(dāng)敵人進(jìn)攻時，我們可以應(yīng)用Tween緩動動畫，將炮口實時瞄準(zhǔn)敵人并發(fā)射炮彈，敵人移動時，炮口也可以實時跟隨移動。

3 結(jié)論

誠如我們所見，隨著網(wǎng)絡(luò)游戲慢慢滲透我們的生活，網(wǎng)絡(luò)游戲已成為我們休閑生活中不可或缺的一部分，它對我們的影響力之大，從而奠定了Egret游戲引擎的重要位置，而Tween緩動動畫作為Egret引擎的一個功能模塊，它的重要性可見非同一般。本文從Egret引擎的基本情況入手，分析探討了Tween緩動動畫的功能，并列舉了Tween緩動動畫的實際使用例子，希望能夠?qū)νI(lǐng)域從事Egret引擎游戲開發(fā)的人員有所幫助。

參考文獻(xiàn)

[1]張鑫磊.Egret HTML5游戲開發(fā)指南.北京.電子工業(yè)出版社，2016.

[2]白鷺開發(fā)者社區(qū).教學(xué)示例[EB/OL].http：//edn.egret. com/cn/example/page/index#070-tween-comp.