基于Egret引擎Tween緩動(dòng)動(dòng)畫技術(shù)研究

佟鑫+黃偉

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

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

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

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

1 Egret的基本情況

1.1 Egret的發(fā)展背景

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

1.2 Egret引擎的基本狀況

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

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

2.1 Tween緩動(dòng)動(dòng)畫的功能

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

2.2 Tween緩動(dòng)動(dòng)畫的使用實(shí)例

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

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

var funcChange = function（）：void{

gun.x = obj.x；

gun.y = obj.y；

}

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

3 結(jié)論

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

參考文獻(xiàn)

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

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