矯桂娥
隨著移動平臺市場的逐步擴張與發展,flash平臺技術具有跨平臺的開發特點,滿足了移動應用程序的良好用戶體驗的需求,但同時也因為對所有的平臺和系統都提供了兼容性的訪問,決定了在性能上必定有所損失。
Flash執行效率存在很多的影響因素,通常可以通過優化代碼結構(避免創建太多的實例、及時清理事件監聽等)、提高渲染性能(使用CacheAsBitmap屬性等)提高flash應用程序的執行效率。在其他條件完全相同的情況下,本文探討移動端應用程序,如何優化影響顯示效率的因素,以提高顯示效率進而提高運行效率。常見的影響顯示效率的因素有1)舞臺對象的刷新問題 2)內存使用率,包括內存垃圾的回收、顯示對象的種類等 3)代碼的結構,代碼中對 CPU的損耗等 4)Flash文件和網絡、數據庫連接時,所產生的運行效率等等。
而這其中,本文主要討論舞臺對象的刷新問題。
舞臺對象的顯示通常是利用 CPU進行重繪(redraw)得到的。重繪是通過Flash Player以SWF內容的幀頻速度來刷新需要變化的內容,而這個刷新的過程我們通稱為重繪。而作為主要前端對象的表現,會存在較多的對象顯示的需求,因此重繪是Flash Player性能消耗的主要根源。尤其是前端要顯示的動畫、還有若干的元件嵌套問題。
傳統的flash制作技術,是在舞臺上添加一些顯示對象,例如圖片和元件,并且通過代碼去控制這些顯示對象的動作。
要改進顯示舞臺對象的效率,務必在構建項目時使用重繪區域選項。使用此選項可以查看 Flash Player 正在呈現和處理的區域。通過在調試播放器的上下文菜單中選擇“ 顯示重繪區域” 可以啟用此選項。每次 Flash Player 重繪的區域不會超過3個,即便舞臺上有多于3個的顯示對象需要被重繪,Flash Player 會將其中的兩個或者多個集合(根據位置來判斷)在一起,然后重繪在一個大區域里面。
但是重繪卻是性能消耗的主要根源,通常一個Flash的應用程序,其性能可能 70% - 90%(甚至更高)是消耗在重繪上,并且對于Flash Player 11以前的版本,Flash項目為CPU單核運算,對于所有的顯示效果,也是通過CPU來渲染顯示。那么提高Flash應用程序的運行效率和減少重繪有著莫大的關系。
舞臺的顯示對象中,元件占了絕大多數,其中尤以影片剪輯元件(MovieClip)為主。
MovieClip類繼承了很多類特定的屬性、事件和方法。因此MovieClip對象在內存中所占的空間就會增加很多,并且也會讓CPU消耗在一些沒有必要的地方,如圖1所示:

圖1 影片剪輯元件的繼承關系
這種傳統的開發方式以其開發快速,代碼量少,便于構架的特點,比較適合快速開發靜態展示類移動項目。作為初學者學習和理解程序的基礎,這也是一條必經之路。并且在硬件配置較高的計算機端,運用傳統顯示對象開發的方法仍然是最常用的方法之一。
盡管可以在代碼和構架方面盡可能地優化,但是這種技術過于傳統,運用在移動端應用程序的開發,很難獲得理想的運行效率。
Blitting的基本原理是運用點陣化運算操作將多張位圖合并為一張的計算機圖像處理方式,運用位圖渲染的方法來渲染顯示對象,通俗的講就是用位圖代替元件。選取目標圖像后,拷貝像素,再將拷貝后的像素重新繪制到顯示容器中,每個像素通過按位點陣操作的方法。而拷貝后被添加到顯示列表中的是由像素點組成的位圖(Bitmap)。Bitmap類的繼承關系,如圖2所示:

圖2 Bitmap的繼承關系
與MovieClip相比,Bitmap不是顯示容器、不接收鼠標事件等,意味著Bitmap比MovieClip更加輕便。如果將舞臺中大量的MovieClip全部通過Bitmap來代替,勢必會使得程序的運行效率有很多的提高。這就是 Bliting提高顯示效率的關鍵。
筆者基于flash cs 6環境創建一個測試程序,舞臺大小為1024 *768,測試幀頻(FPS)設定為60,效果是舞臺上每一幀會有不斷下落的五角星,在移除舞臺后即被刪除, PC端運行flash swf影片文件;移動端,通過Adobe AIR 進行打包,形成flash ipa格式的文件,然后安裝入Ipad中運行。后面的相應效率的比較都是基于這個測試用例,如圖3所示:

圖3 測試用例的舞臺顯示效果
傳統元件實現的方法,CPU需要分別計算每一個元件的下落,會使得CPU的損耗相當嚴重。經測試,在PC上,舞臺上同時存在的星形數量大約為150個,幀頻為61/60,可見執行的很流暢。通過打包,在 ipad上運行,執行效率有明顯的下降。
基于Blitting的原理,修改程序代碼,使用copyPixels()的方法,拷貝位圖的像素,來代替原本在每一幀都實例化一個新的元件對象,運行效率則有顯著的提高。運用 Blitting技術選擇用位圖渲染的方法去替代傳統的現實對象,在運行效率、開發速度以及代碼量上都可以獲得較好的成績。適合大部分情況下 Flash游戲在移動端和 PC端的開發。但是Blitting的對象顯示,仍然依賴于CPU的消耗。當被渲染的對象特別復雜時,Blitting方法依然會遇到瓶頸。隨著移動終端設備屏幕尺寸越來越大,分辨率越來越高, CPU的壓力會越來越大。
Starling是一個完全基于Flash Player 的API開發的2D框架,在Starling內部分裝了一些Stage3D(Molehill)的 API,這樣可以借助Stage3D的強大功能,調用顯卡來渲染顯示對象。
Starling框架是基于Flash Player開發,因此在開發和使用過程中,不需要安裝額外的插件。并且Starling是一個開源的框架,這樣使得框架在使用的過程中具有靈活性。
Starling調用GPU工作的原理,大致可以分為以下兩個步驟。
(1) Starling中封裝了Stage3D的部分代碼,可以通過這些代碼來間接使用Stage3D中的某些功能。
(2) Stage3D引擎中有代碼可以調用電腦顯卡的OpenGL、DirectX驅動或者OpenGLES2手機顯卡驅動。然后通過這些驅動來調用顯卡來幫助渲染顯示界面,從而提高渲染效率。
在使用Starling時應該注意的是,Starling中模仿了Flash原生的API和顯示列表。但是在Starling中的對象是添加在Stage3D的顯示列表中,而非原生的Flash列表。并且Stage3D的顯示列表是位于原生 Flash列表的下方。因此在使用了Starling后,原生顯示列表中的任何東西都會覆蓋在它的上方。并且由于采用的是GPU渲染,在Stage3D的顯示列表中,不會存在任何的重繪區域。
Starling的方法在調用stage3D引擎達到完全GPU渲染的方式之后,可以獲得很好的游戲體驗性。對于復雜的粒子效果的渲染,也可以游刃有余。介于消費者對于畫面的品質要求日益增加的情況,Starling方法已具備作為將來制作移動端Flash游戲主流方法的條件之一。但是由于運用Starling開發對開發者本身的能力要求較高,公司方面需要一定的時間做技術儲備,并且開發周期也會相應的拉長。因此并不是所有的項目都適合選擇這種相對復雜的方法來完成。
還是上面的測試用例,使用 Starling框架中所提供的API,可以將幀頻維持在一個較高的水平,但是不能超過60,否則也沒有意義了,反而會更消耗資源。關鍵代碼如下:

測試用例,如圖4所示:

圖4 三種不同情況下的運行效率比較
基于傳統技法(普通版)、Blitting技術以及starling上述3種情況下,每隔5秒鐘,各自的幀頻情況,從圖中可見,Starling的開發方式使得運行效率有很大的提高。
為了進一步的測試Blitting版的程序與Starling版本的程序在運行效率上的區別。筆者對每一個掉落的星形都添加了透明度的變化。計算機在渲染帶有透明度的圖形時,需要更改圖形中每一個像素點顏色中的透明通道的值。不帶有透明度變化的像素點為3位16進制,而更改了Alpha值之后,打開了透明通道,像素點變為4位16進制。對移動設備來說,這樣的計算量相當繁重,比較消耗資源。修改后,運用Blitting方法的幀頻有了明顯的下降。Starling框架調用GPU渲染后,幀數依然可以維持在一個較高的水平。效果分析,如圖5所示:

圖5 有透明度變化的情況下兩種改進版本的比較
影響flash程序運行效率的因素很多,就像一個木桶,存水量的多少,取決于最短的那塊木板。不同情況下,需要優化的方面也不同。顯示對象的優化,是最重要的因素之一。本文主要闡述兩種不同的技術方案以提升程序執行效率、優化用戶體驗。
兩種開發方式(Blitting版本、Starling版本)各有優缺點,在保證程序流程運行的前提下,必須選擇合理的開發方式來完成項目,以此維持Flash游戲在PC端上的良好表現,保證移動設備上的用戶需求和用戶體驗。
[1]黃海明,劉金剛,易建強.基于 SDL & OpenGL 的三維游戲優化技術[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 應用系統的設計與實現.[J]計算機工程與設計.2011,32(2):719-723.
[4]胡蓉,張東寧,朱栗華.ActionScript 3.0 游戲編程(第2版)[M].北京:人民郵電出版社,2012.3.
[5]宋 玉.關于Flash 動畫創作過程中源文件優化方式的研究[J].電影評介,2010,048:72-73.
[6]戰曉良.Flash網頁中針對網絡環境的優化設計研究.[J]科教縱橫,2011,12:217.
[7]李暢,王忠芝.在Flash游戲中實現玩家與情節的互動[J].科技信息, 2010,7: 52-53.
[8]成樂,周祖榮.ActionScript在游戲制作中的應用[J].科技信息 ,2012,(12): 238-239.