Flash應(yīng)用程序在移動(dòng)端的顯示效率研究

矯桂娥

0 引言

隨著移動(dòng)平臺(tái)市場(chǎng)的逐步擴(kuò)張與發(fā)展，flash平臺(tái)技術(shù)具有跨平臺(tái)的開(kāi)發(fā)特點(diǎn)，滿足了移動(dòng)應(yīng)用程序的良好用戶體驗(yàn)的需求，但同時(shí)也因?yàn)閷?duì)所有的平臺(tái)和系統(tǒng)都提供了兼容性的訪問(wèn)，決定了在性能上必定有所損失。

Flash執(zhí)行效率存在很多的影響因素，通?？梢酝ㄟ^(guò)優(yōu)化代碼結(jié)構(gòu)（避免創(chuàng)建太多的實(shí)例、及時(shí)清理事件監(jiān)聽(tīng)等）、提高渲染性能（使用CacheAsBitmap屬性等）提高flash應(yīng)用程序的執(zhí)行效率。在其他條件完全相同的情況下，本文探討移動(dòng)端應(yīng)用程序，如何優(yōu)化影響顯示效率的因素，以提高顯示效率進(jìn)而提高運(yùn)行效率。常見(jiàn)的影響顯示效率的因素有1）舞臺(tái)對(duì)象的刷新問(wèn)題 2）內(nèi)存使用率，包括內(nèi)存垃圾的回收、顯示對(duì)象的種類(lèi)等 3）代碼的結(jié)構(gòu)，代碼中對(duì) CPU的損耗等 4）Flash文件和網(wǎng)絡(luò)、數(shù)據(jù)庫(kù)連接時(shí)，所產(chǎn)生的運(yùn)行效率等等。

而這其中，本文主要討論舞臺(tái)對(duì)象的刷新問(wèn)題。

1 舞臺(tái)對(duì)象顯示效率優(yōu)化的關(guān)鍵

舞臺(tái)對(duì)象的顯示通常是利用 CPU進(jìn)行重繪(redraw)得到的。重繪是通過(guò)Flash Player以SWF內(nèi)容的幀頻速度來(lái)刷新需要變化的內(nèi)容，而這個(gè)刷新的過(guò)程我們通稱(chēng)為重繪。而作為主要前端對(duì)象的表現(xiàn)，會(huì)存在較多的對(duì)象顯示的需求，因此重繪是Flash Player性能消耗的主要根源。尤其是前端要顯示的動(dòng)畫(huà)、還有若干的元件嵌套問(wèn)題。

1.1 重繪

傳統(tǒng)的flash制作技術(shù)，是在舞臺(tái)上添加一些顯示對(duì)象，例如圖片和元件，并且通過(guò)代碼去控制這些顯示對(duì)象的動(dòng)作。

要改進(jìn)顯示舞臺(tái)對(duì)象的效率，務(wù)必在構(gòu)建項(xiàng)目時(shí)使用重繪區(qū)域選項(xiàng)。使用此選項(xiàng)可以查看 Flash Player 正在呈現(xiàn)和處理的區(qū)域。通過(guò)在調(diào)試播放器的上下文菜單中選擇“ 顯示重繪區(qū)域” 可以啟用此選項(xiàng)。每次 Flash Player 重繪的區(qū)域不會(huì)超過(guò)3個(gè)，即便舞臺(tái)上有多于3個(gè)的顯示對(duì)象需要被重繪，F(xiàn)lash Player 會(huì)將其中的兩個(gè)或者多個(gè)集合（根據(jù)位置來(lái)判斷）在一起，然后重繪在一個(gè)大區(qū)域里面。

但是重繪卻是性能消耗的主要根源，通常一個(gè)Flash的應(yīng)用程序，其性能可能 70% － 90%（甚至更高）是消耗在重繪上，并且對(duì)于Flash Player 11以前的版本，F(xiàn)lash項(xiàng)目為CPU單核運(yùn)算，對(duì)于所有的顯示效果，也是通過(guò)CPU來(lái)渲染顯示。那么提高Flash應(yīng)用程序的運(yùn)行效率和減少重繪有著莫大的關(guān)系。

1.2 MovieClip的性能分析

舞臺(tái)的顯示對(duì)象中，元件占了絕大多數(shù)，其中尤以影片剪輯元件（MovieClip）為主。

MovieClip類(lèi)繼承了很多類(lèi)特定的屬性、事件和方法。因此MovieClip對(duì)象在內(nèi)存中所占的空間就會(huì)增加很多，并且也會(huì)讓CPU消耗在一些沒(méi)有必要的地方，如圖1所示：

圖1 影片剪輯元件的繼承關(guān)系

這種傳統(tǒng)的開(kāi)發(fā)方式以其開(kāi)發(fā)快速，代碼量少，便于構(gòu)架的特點(diǎn)，比較適合快速開(kāi)發(fā)靜態(tài)展示類(lèi)移動(dòng)項(xiàng)目。作為初學(xué)者學(xué)習(xí)和理解程序的基礎(chǔ)，這也是一條必經(jīng)之路。并且在硬件配置較高的計(jì)算機(jī)端，運(yùn)用傳統(tǒng)顯示對(duì)象開(kāi)發(fā)的方法仍然是最常用的方法之一。

盡管可以在代碼和構(gòu)架方面盡可能地優(yōu)化，但是這種技術(shù)過(guò)于傳統(tǒng)，運(yùn)用在移動(dòng)端應(yīng)用程序的開(kāi)發(fā)，很難獲得理想的運(yùn)行效率。

2 Blitting技術(shù)優(yōu)化顯示效率

Blitting的基本原理是運(yùn)用點(diǎn)陣化運(yùn)算操作將多張位圖合并為一張的計(jì)算機(jī)圖像處理方式，運(yùn)用位圖渲染的方法來(lái)渲染顯示對(duì)象，通俗的講就是用位圖代替元件。選取目標(biāo)圖像后，拷貝像素，再將拷貝后的像素重新繪制到顯示容器中，每個(gè)像素通過(guò)按位點(diǎn)陣操作的方法。而拷貝后被添加到顯示列表中的是由像素點(diǎn)組成的位圖（Bitmap）。Bitmap類(lèi)的繼承關(guān)系，如圖2所示：

圖2 Bitmap的繼承關(guān)系

與MovieClip相比，Bitmap不是顯示容器、不接收鼠標(biāo)事件等，意味著B(niǎo)itmap比MovieClip更加輕便。如果將舞臺(tái)中大量的MovieClip全部通過(guò)Bitmap來(lái)代替，勢(shì)必會(huì)使得程序的運(yùn)行效率有很多的提高。這就是 Bliting提高顯示效率的關(guān)鍵。

筆者基于flash cs 6環(huán)境創(chuàng)建一個(gè)測(cè)試程序，舞臺(tái)大小為1024 *768，測(cè)試幀頻(FPS)設(shè)定為60，效果是舞臺(tái)上每一幀會(huì)有不斷下落的五角星，在移除舞臺(tái)后即被刪除， PC端運(yùn)行flash swf影片文件；移動(dòng)端，通過(guò)Adobe AIR 進(jìn)行打包，形成flash ipa格式的文件，然后安裝入Ipad中運(yùn)行。后面的相應(yīng)效率的比較都是基于這個(gè)測(cè)試用例，如圖3所示：

圖3 測(cè)試用例的舞臺(tái)顯示效果

傳統(tǒng)元件實(shí)現(xiàn)的方法，CPU需要分別計(jì)算每一個(gè)元件的下落，會(huì)使得CPU的損耗相當(dāng)嚴(yán)重。經(jīng)測(cè)試，在PC上，舞臺(tái)上同時(shí)存在的星形數(shù)量大約為150個(gè)，幀頻為61/60，可見(jiàn)執(zhí)行的很流暢。通過(guò)打包，在 ipad上運(yùn)行，執(zhí)行效率有明顯的下降。

基于Blitting的原理，修改程序代碼，使用copyPixels()的方法，拷貝位圖的像素，來(lái)代替原本在每一幀都實(shí)例化一個(gè)新的元件對(duì)象，運(yùn)行效率則有顯著的提高。運(yùn)用 Blitting技術(shù)選擇用位圖渲染的方法去替代傳統(tǒng)的現(xiàn)實(shí)對(duì)象，在運(yùn)行效率、開(kāi)發(fā)速度以及代碼量上都可以獲得較好的成績(jī)。適合大部分情況下 Flash游戲在移動(dòng)端和 PC端的開(kāi)發(fā)。但是Blitting的對(duì)象顯示，仍然依賴于CPU的消耗。當(dāng)被渲染的對(duì)象特別復(fù)雜時(shí)，Blitting方法依然會(huì)遇到瓶頸。隨著移動(dòng)終端設(shè)備屏幕尺寸越來(lái)越大，分辨率越來(lái)越高， CPU的壓力會(huì)越來(lái)越大。

3 Staring技術(shù)提高顯示效率

Starling是一個(gè)完全基于Flash Player 的API開(kāi)發(fā)的2D框架，在Starling內(nèi)部分裝了一些Stage3D（Molehill）的 API，這樣可以借助Stage3D的強(qiáng)大功能，調(diào)用顯卡來(lái)渲染顯示對(duì)象。

Starling框架是基于Flash Player開(kāi)發(fā)，因此在開(kāi)發(fā)和使用過(guò)程中，不需要安裝額外的插件。并且Starling是一個(gè)開(kāi)源的框架，這樣使得框架在使用的過(guò)程中具有靈活性。

Starling調(diào)用GPU工作的原理，大致可以分為以下兩個(gè)步驟。

（1） Starling中封裝了Stage3D的部分代碼，可以通過(guò)這些代碼來(lái)間接使用Stage3D中的某些功能。

（2） Stage3D引擎中有代碼可以調(diào)用電腦顯卡的OpenGL、DirectX驅(qū)動(dòng)或者OpenGLES2手機(jī)顯卡驅(qū)動(dòng)。然后通過(guò)這些驅(qū)動(dòng)來(lái)調(diào)用顯卡來(lái)幫助渲染顯示界面，從而提高渲染效率。

在使用Starling時(shí)應(yīng)該注意的是，Starling中模仿了Flash原生的API和顯示列表。但是在Starling中的對(duì)象是添加在Stage3D的顯示列表中，而非原生的Flash列表。并且Stage3D的顯示列表是位于原生 Flash列表的下方。因此在使用了Starling后，原生顯示列表中的任何東西都會(huì)覆蓋在它的上方。并且由于采用的是GPU渲染，在Stage3D的顯示列表中，不會(huì)存在任何的重繪區(qū)域。

Starling的方法在調(diào)用stage3D引擎達(dá)到完全GPU渲染的方式之后，可以獲得很好的游戲體驗(yàn)性。對(duì)于復(fù)雜的粒子效果的渲染，也可以游刃有余。介于消費(fèi)者對(duì)于畫(huà)面的品質(zhì)要求日益增加的情況，Starling方法已具備作為將來(lái)制作移動(dòng)端Flash游戲主流方法的條件之一。但是由于運(yùn)用Starling開(kāi)發(fā)對(duì)開(kāi)發(fā)者本身的能力要求較高，公司方面需要一定的時(shí)間做技術(shù)儲(chǔ)備，并且開(kāi)發(fā)周期也會(huì)相應(yīng)的拉長(zhǎng)。因此并不是所有的項(xiàng)目都適合選擇這種相對(duì)復(fù)雜的方法來(lái)完成。

還是上面的測(cè)試用例，使用 Starling框架中所提供的API，可以將幀頻維持在一個(gè)較高的水平，但是不能超過(guò)60，否則也沒(méi)有意義了，反而會(huì)更消耗資源。關(guān)鍵代碼如下：

測(cè)試用例，如圖4所示：

圖4 三種不同情況下的運(yùn)行效率比較

基于傳統(tǒng)技法（普通版）、Blitting技術(shù)以及starling上述3種情況下，每隔5秒鐘，各自的幀頻情況，從圖中可見(jiàn)，Starling的開(kāi)發(fā)方式使得運(yùn)行效率有很大的提高。

4 比較

為了進(jìn)一步的測(cè)試Blitting版的程序與Starling版本的程序在運(yùn)行效率上的區(qū)別。筆者對(duì)每一個(gè)掉落的星形都添加了透明度的變化。計(jì)算機(jī)在渲染帶有透明度的圖形時(shí)，需要更改圖形中每一個(gè)像素點(diǎn)顏色中的透明通道的值。不帶有透明度變化的像素點(diǎn)為3位16進(jìn)制，而更改了Alpha值之后，打開(kāi)了透明通道，像素點(diǎn)變?yōu)?位16進(jìn)制。對(duì)移動(dòng)設(shè)備來(lái)說(shuō)，這樣的計(jì)算量相當(dāng)繁重，比較消耗資源。修改后，運(yùn)用Blitting方法的幀頻有了明顯的下降。Starling框架調(diào)用GPU渲染后，幀數(shù)依然可以維持在一個(gè)較高的水平。效果分析，如圖5所示：

圖5 有透明度變化的情況下兩種改進(jìn)版本的比較

5 結(jié)語(yǔ)

影響flash程序運(yùn)行效率的因素很多，就像一個(gè)木桶，存水量的多少，取決于最短的那塊木板。不同情況下，需要優(yōu)化的方面也不同。顯示對(duì)象的優(yōu)化，是最重要的因素之一。本文主要闡述兩種不同的技術(shù)方案以提升程序執(zhí)行效率、優(yōu)化用戶體驗(yàn)。

兩種開(kāi)發(fā)方式（Blitting版本、Starling版本）各有優(yōu)缺點(diǎn)，在保證程序流程運(yùn)行的前提下，必須選擇合理的開(kāi)發(fā)方式來(lái)完成項(xiàng)目，以此維持Flash游戲在PC端上的良好表現(xiàn)，保證移動(dòng)設(shè)備上的用戶需求和用戶體驗(yàn)。

[1]黃海明,劉金剛,易建強(qiáng).基于 SDL & OpenGL 的三維游戲優(yōu)化技術(shù)[J].計(jì)算機(jī)工程,2009,33(20):213-215,218.

[2]Weiyin Hong,James Y.L.Thong,Kar Yan Tam-Does .Animation Attract Online Users' Attention? The Effects of Flash on Information Search Performance and Perceptions [J].Information Systems Research,2004,15(1)

[3]吳微微,李誼瑞,楊建思,范靈春.基于Aspmap 的WebGIS 應(yīng)用系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn).[J]計(jì)算機(jī)工程與設(shè)計(jì).2011,32(2):719-723.

[4]胡蓉,張東寧,朱栗華.ActionScript 3.0 游戲編程（第2版）[M].北京:人民郵電出版社,2012.3.

[5]宋 玉.關(guān)于Flash 動(dòng)畫(huà)創(chuàng)作過(guò)程中源文件優(yōu)化方式的研究[J].電影評(píng)介,2010,048:72-73.

[6]戰(zhàn)曉良.Flash網(wǎng)頁(yè)中針對(duì)網(wǎng)絡(luò)環(huán)境的優(yōu)化設(shè)計(jì)研究.[J]科教縱橫,2011,12:217.

[7]李暢,王忠芝.在Flash游戲中實(shí)現(xiàn)玩家與情節(jié)的互動(dòng)[J].科技信息, 2010,7: 52-53.

[8]成樂(lè),周祖榮.ActionScript在游戲制作中的應(yīng)用[J].科技信息 ,2012,(12): 238-239.