在效能受限平台上開發網路遊戲之效能探討

陳光雄1、賴志承2

南台科技大學多媒體與電腦娛樂科學研究所

摘要

隨著網路多媒體的逐漸演進,Macromedia所開發的Flash也漸漸從網頁上的動畫特效走入了遊戲娛樂的開發應用之中。許多利用Flash actionscript開發的網路遊戲也如雨後春筍般的蓬勃發展,Macromedia公司花了大量的時間來致力於Flash player播放器達到最小的程度,這樣發布在網路上有大多數人都可以很容易得下載到Flash player播放器,但缺點卻是犧牲了Flash在程式上的執行效能與圖片的更新速度,這使得Flash在跟其他遊戲平台的效能比較上來得遜色許多。因此本論文提供一些在Flash遊戲開發上可提升效能的方法及模式,以幫助遊戲設計者提昇其遊戲設計實力。

關鍵字:遊戲、效能、Flash、Actionscript。

Abstract

 

As the progressing of the multimedia in network by degrees, the Flash which was developed by a company named “Macromedia” has gone into the development from special efficacy of animation in network to entertainment in game step by step. Mary network games which were created by using of Flash actionscript has developed vigorously. Macromedia spent much time to devote themselves to smaller their capacity of their program which was named Flash player. Many people can download the Flash player easily by the network. A defect is that they sacrifice the executed efficiency and the update speed of Flash, and this made the efficiency of Flash is much inferior than other developing software in game. Therefore this paper provides some referable frameworks and modes in development of Flash games to improve the performance. To help designers to improve their technology on designing game

 

KeywordsgameperformanceFlashAcionscript

壹、前言與動機

1995年Macromedia公司推出的第一套FutureSplash Animator開始至2005年的Flash 8為止,Flash在互動創作與視覺藝術上帶給全世界廣大的使用者無數的驚奇與讚賞,時至今日,Flash的多媒體應用除了以往的動畫效果外,也朝著數位娛樂的方向發展。一些精緻的Flash遊戲,如:神影無蹤–廖添丁;或者是Flash大型多人連線的線上遊戲,如:DoFus–MMORPG,都顯示出Flash在互動遊戲世界開發的可能性。

Flash平台開發遊戲的優點在於它使用向量運算的方式,所以製作出來的遊戲體積會比其他遊戲開發平台小很多,而Macromedia公司宣佈全世界97.3%的網路瀏覽器都有內建Flash player播放器[1],因此對遊戲的散播性有很好的幫助。同時,程式設計師與美術人員可以彼此共享相同文件檔案。最後Flash簡單易用,對於初學者而言,如果使用其他程式語言開發遊戲可能會比使用Flash所需開發時間還要來得緩慢。不過Flash也存在部分缺點,首先它缺乏對三度空間(3D)的支援,且不能很容易的操作電腦系統執行像是瀏覽或是儲存硬碟的工作。但最大的缺點在於它的程式執行效率無法與其他遊戲開發平台比較,為了讓Flash player播放器達到最小,而犧牲了Flash在程式上的執行速度。當遊戲遊玩類型是在要求執行效率較為嚴苛的情況下時,遊戲的開發架構與寫作方式就顯得格外重要。

基於上述背景,本研究提供一些在Flash遊戲效能上應注意的觀念與架構,並解釋不同Flash遊戲捲軸的執行原理,讓新進遊戲開發者自行建構知識,培養其遊戲設計概念。本研究章節如以下安排,第二章為圖形優化處理、第三章為程式效能優化、第四章為捲軸引擎、第五章為結論與未來展望、最後為參考文獻。

貳、圖形優化處理

Flash遊戲效能最佳化雖然與程式脫離不了關係,但圖形的呈像處理卻也不可或缺。許多有關Flash圖形處理的文獻,都曾敘述過如何處理圖形來使得程式執行效能提升。因此本章將介紹各項可以使Flash效能提升的圖形處理方式。

在“大師談Flash遊戲設計與製作”這本書裡[2],曾提出以下幾點圖形處理的方式來優化遊戲程式效能。

根據特定的圖形需求使用點陣圖和向量圖。

索引型的GIF和PNG圖檔要在匯入Flash前先做最佳化處理。

要用失真的JPEG壓縮時,應匯入未經壓縮的24位元圖檔,並用Flash壓縮(只壓縮一次)。

照片品質的24位元PNG圖像要用JPEG與遮色片壓縮,以取得不同程度的透明度和好的壓縮。

當需要不同程度的透明度時,PNG‑8格式可提供只有幾個顏色或大區域顏色圖像最佳解決方案。

向量圖使用Flash最佳化曲線的功能,可有效減少複雜向量圖形。

半透明或平滑邊緣的圖,表現比純色圖差。

儘可能把點陣圖以百分之百的大小放在遊戲裡偶數像素的位置,如果不是放在偶數像素位置,就須進行補差才可顯示在畫面,這會非常消耗CPU資源。

執行時動態載入圖形素材可便於管理下載及增加彈性。

儘可能讓圖檔大小和圖形表現最佳化,每一點改善都對遊戲表現有很大的幫助。

 

1、各種圖檔格式特徵圖 (資料來源:大師談Flash遊戲設計與製作)

圖檔格式

GIF

PNG–8

JPG

PNG–24

適用

插圖、小圖案、文字。

需要半透明區域的圖形。

照片或色彩柔和轉換、漸層及透明圖像。

照片或色彩柔和轉換、漸層圖像。

壓縮

不失真。圖像是以刪除複製像素資料方式壓縮。減少圖像色彩可提高壓縮比。

不失真。圖像是以刪除複製像素資料方式壓縮。減少圖像色彩可提高壓縮比。

會失真。圖像是以刪除圖像和色彩資料方式壓縮。結果造成畫質損失。

會失真。使用FlashJPG資料壓縮。

色彩

索引型。8位元/256色或以下。

索引型。8位元/256色或以下。

24位元/數百萬色。

24位元/數百萬色。

Alpha

1位元/像素可不全透明或全透明。

每調色盤索引有256層透明度。

不支援alpha

8位元/256層透明度。

而在Macromedia的行動裝置開發人員中心[3],也提出他們對於改善圖像來使效能提升的一些看法與建議。

製作動畫時,一開始先用10到15 的每秒畫面更新速率(frame per second,fps)的影格速率,低影格速率可以讓檔案變得較小。在Flash裡,每一個元件關鍵影格都會讓swf影片再增加12個位元組。

簡化動畫,一次不要有太多的項目出現在畫面上。盡量避免像是透明或漸層等會拖慢效能的效果。

避免全景和透明淡入/淡出,靜態背景使用短暫(五個影格)淡出/淡入就夠了。如果可能的話,使用形狀即可,將線條移除掉,包含形狀的外框線。在Flash中線條的呈現,會經過較為複雜的處理,因此會拖慢速度。如有必要,可以改用形狀來建立外框線。

在日本則有人提出如何解決在IE6瀏覽器上Flash fps遲緩的問題[4]。

Flash影片在Html上的fps表現(圖 1),會比在本機上執行的效率還要差。主要是受到瀏覽器和電腦的性能影響,因此可以利用更改Flash發佈設定裡的視窗模式,如:不透明無視窗、透明無視窗來改善視窗的影格更新速率(圖 2)。

1Flash不同視窗模式在IE6瀏覽器上的fps (資料來源:Next Frame)

2Flash視窗模式在不同瀏覽器的效能改善圖 (資料來源:Next Frame)

<<神影無蹤–廖添丁>>網路遊戲創作的論文作者,另一篇文章“Flash動畫製作技巧”中[5],也提出一些對動畫製作的技巧與經驗來幫助系統效能的提升。

需注意Flash影片畫面更新區域的大小,更新區域的大小與效能成反比。

利用皮影戲技法製作人體動作(圖 3),可依照人體不同動作將肢體動作分開拆解,如:腳部關節拆解成大腿和小腿、關節角度不同而有不同動作圖檔。當動畫執行時,人體關節圖檔可以隨著動作適時增減,以達到增加效能的目的。

 

3、皮影戲技法人體動作拆解圖 (資料來源:Flash動畫製作技巧)

參、程式效能優化

由於Flash程式效能無法與其他遊戲開發平台相比,因此如何利用程式語法的優化來發揮程式執行時的最大效能是一門重要的課題。透過不同版本的Flash player播放器與迴圈來測試執行指令完成之所需花費時間(表 2),可以得到下列數據供Flash程式設計師做為程式寫作時的效能參考依據[6] [7]。

2、迴圈測試執行指令完成所需花費時間。

(資料來源:AcionScript performance tests)

Flash Player版本

Flash Player 7 播放器

Flash Player 8 (beta) 播放器

Flash軟體版本

Flash MX 2004使用Flash Player 7發佈

Flash MX 2004使用Flash Player 7發佈

所有區域變數使用var宣告

29ms

35ms

利用this直接參考物件

101ms

95ms

利用區域變數參考物件

235ms

117ms

for in迴圈方式儲存陣列

184ms

68 ms

for迴圈方式儲存陣列

67 ms

53 ms

while迴圈方式儲存陣列

69 ms

55 ms

do while迴圈方式儲存陣列

64 ms

53 ms

多重定義變數 (a=b=3)

43 ms

39 ms

逐一定義變數 (a=3b=3)

50 ms

49 ms

使用if else判斷條件

85 ms

71 ms

使用if else if判斷條件

84 ms

71 ms

使用switch判斷條件

84 ms

69 ms

使用長變數名

91 ms

122 ms

使用短變數名

90 ms

120 ms

不宣告陣列長度並利用迴圈動態增加陣列元素

356 ms

379 ms

事先宣告陣列長度並利用迴圈增加陣列元素

185 ms

108 ms

i++i--

56 ms

53 ms

i+=1i-=1

66 ms

71 ms

除了討論程式指令的優化,Flash程式設計師在開發遊戲的架構時,可以注意以下幾點:

Flash裡,onEnterFrame事件是用來持續地驅動程式運作,其執行頻率和影格播放速率相等,因此如果影格播放速率越高,則需要更多CPU資源以處理每個影格的程式碼。所以盡量使用一個onEnterFrame事件來控制所有運作,如果分散至各個MovieClip將影響效能。舉例來說:在遊戲中,可以用一個onEnterFrame事件來驅動所有的敵人,這樣會比每個敵人各自用onEnterFrame事件驅動還要好控制效能損耗。

Flash捲軸遊戲裡常會有許多的影片元件(MovieClip)。假設遊戲區域比實際遊戲螢幕還要大,則螢幕外的MovieClip仍會佔用一定數量的系統資源,因此在object base的地圖可以使用removeMovie()或attachMovie()指令將遊戲螢幕外不可視範圍的物體做增刪的動作。但在標準的tile base的地圖,用gotoAndStop()指令置換成空白影格會較快速。

在製作MovieClip的特效時,簡單的效果可以用時間軸製作動畫的方式呈現,複雜的效果可以用Actionscript程式語法製作,以節省不必要的CPU運算。

Flash影格更新速率調整至最大值120 fps,並撰寫fps偵測程式來監測遊戲畫面更新速率,以進行程式效能調整。設為120 fps的原因,是由於如果玩家本身電腦硬體效能很好,將導致無法看出遊戲中fps的劇烈變化。

將大量的Flash內容切割成幾個小型的swf檔案,並視情況需要動態載入,以節省檔案大小與玩家等待下載時間。

Flash內容製作完成時,可以使用Flash的檢視選項中的頻寬設定。頻寬設定提供一個顯示每個影格的資料傳送量。因此如果發現某個影格包含過多資訊,導致幾乎無法播放影片時,表示可能必須調整該影格部分內容以使影片順利執行[8]。

除了Flash程式的效能優化之外,記憶體空間的有效使用,也是另一個值得探討的議題,如:避免使用巢狀函式,以節省記憶體空間[9]。這在Flash開發到手機平台上時會顯得格外重要。且有一項觀念需要釐清,檔案大小並不等於使用的記憶體大小。檔案大小固然是重要的評估依據,不過不代表等於播放影片時所需的記憶體。例如:音效或圖片素材在製作時都會壓縮在Flash的swf檔,但當播放時,就必須還原成原來的大小。而其他像是MovieClip或程式碼,也都是在執行播放時比儲存在影片時須更多的記憶體。且swf影片執行時,可以建立更多物件,每次新增物件時都需要更多的記憶體,但檔案大小卻不會因此而改變[3]。

肆、捲軸引擎

在二度空間(2D)的遊戲世界裡,捲軸技術是很常使用的技巧。簡單來說,當玩家在遊戲世界裡控制角色向右持續移動時,事實上並沒有移動角色,而為了讓角色看起來像在向右移動,所以將遊戲世界中的其他圖像向左移動。因此一個捲軸引擎的好壞,對於遊戲的整體效能與流暢度是非常的重要。以下將介紹幾種在Flash遊戲捲軸引擎的做法。

<<神影無蹤–廖添丁>>網路遊戲創作的論文裡[10],提到將每一張地圖由許多小平台組成, 而非一張張大型圖檔(圖4)。使得圖形檔案可以重複被利用,而不致於使玩家下載太多時間,且能夠提升系統遊戲執行時的效能。基於此系統架構,每次場景捲動時,都將會有數十個至數百個圖片須處理移動動作,如不作前置處理則系統效能將嚴重不足。因此在場景移動前,會先做一次位置判斷,將螢幕可視範圍外的圖片暫時移除,只顯示並處理螢幕範圍中的所有圖片,以提升系統效能。

4、場景構成示意圖 (資料來源:<<神影無蹤廖添丁>>網路遊戲創作)

 

而國外的遊戲教學文章,提供了一種叫做“gotoAndStop”的捲軸製作方式[11],其原理是遊戲地圖由許多大小相同的方塊所組成。執行時只把可見部分的方塊放在螢幕上,當它們移出可見區域時,將相同的方塊移動到另一端,重新命名,並且再次使用相同的MovieClip。

 

5gotoAndStop捲軸原理示意圖 (資料來源:TILE BASED GAMES )

如圖5 所示,當方塊從右邊可見區域消失時,立刻將方塊移動到左邊即將進入可見區域的位置。同時間要重新命名MovieClip,而在新位置的方塊可能要顯示不同的圖片,因此需要使用gotoAndStop()指令去移動到正確圖片的影格。這也是為什麼捲軸引擎要被稱做是“gotoAndStop”的原因。由於地圖只需完整載入一次地圖方塊,就不需對MovieClip進行增刪的動作,因此在遊戲效能上會有所提升。

除了上述兩種捲動方式,也有文章提出用“super tiles”的方式來創建遊戲地圖[12]。遊戲世界是由許多與遊戲螢幕大小相同的區域切割而成,地圖方塊可由不同方塊組成任意形狀(圖6)。當螢幕移動與其他區域接觸時,利用螢幕左上角判斷哪些區域是目前可視,並動態建立目前可視區域內所有的方塊列表。但在可視區域內還不代表可以在螢幕上立即顯示方塊,除非可視區域內的方塊進入螢幕範圍。當進入螢幕可視範圍時,依照方塊列表建立地圖方塊實體。最後當移出螢幕範圍時,利用旗標判斷來決定是否刪除方塊。此種方式除了效能不差,最大優點在於遊戲捲軸可以建立任意形狀大小的地圖方塊。

 

6super tiles捲軸原理示意圖 (資料來源:Tile based/object based Flash Tutorial )

伍、結論與建議

Macromedia公司所開發的Flash已從早期的網頁動畫製作軟體,漸漸走向了數位生活應用與娛樂科技的領域。在今日不論是手機介面、數位隨身聽、數位錄放影機、掌上型遊樂器,我們都可以看到Flash在其中的身影與潛力。因此本研究以娛樂的角度切入研究面,分析探討Flash在圖形處理與程式設計時,該如何應用才能使Flash在效能有限的平台上,發揮效能達到最佳化。並藉著介紹不同的捲軸引擎與其原理架構,以期望培養遊戲設計人才。幫助遊戲開發者除了在遊戲效能及畫面流暢度上有所提升外,並能以此研究來做為未來遊戲捲軸引擎更進一步的研究基礎,使Flash能在多媒體上有更多樣化的發展。

而透過實際遊戲的製作過程與經驗,本研究提供以下幾點建議做為未來遊戲開發時的效能參考。

在製作遊戲時,必須考慮電腦的即時運算速度,舉例來說:一個有很多敵人的遊戲,每個敵人都有自己的任務與行動。在這種情況下,如果設計出太多敵人將導致電腦運算速度降低甚至當機。因此,必須不斷地測試,以實驗出電腦所能正常處理的最大敵人數目。

將製作出的遊戲放置到老舊的電腦系統上測試,因為不是所有玩家都配備有最好的電腦設備,因此必須保證遊戲在老舊的電腦上也有正常的處理效能。

依據設計的遊戲類型來決定電腦速度的重要性,比方說,益智類的遊戲,電腦運算速度較不須注意,但如果是動作類的遊戲,由於通常強調大量的即時運算、快速變換的圖形與聲音,因此電腦的執行運算速度就很重要。

根據經驗,將Flash影格更新速率設定為30fps對大多數的遊戲都有較佳的執行效果。

參考文獻

[1]       Macromedia Produces(2005) (http://www.macromedia.com/software/player_census)

[2]       Makar and Winiarczyk( 92),大師談Flash遊戲設計與製作,台北:上奇科技。

[3]       Andreas Heim(2005),使用Flash LiteFlash動畫移植至行動電話的最佳實習。 (http://www.macromedia.com/tw/devnet/devices/articles/optimizing_anim.html)

[4]       Next FrameFlash再生速度的改善。 (http://nextframe.jp/fpsCheck.htm)

[5]       林秉舒( 94)Flash動畫製作技巧。 (http://www.masolin.com/mmug/200507/)

[6]       OddhammerAcionScript performance tests (http://www.oddhammer.com)

[7]       閃吧( 93)Actionscript優化教程。 (http://www2.flash8.net/teach/1714.htm)

[8]       Jen Dehaan(2004)Macromedia Flash MX 2004training from the sourceMacromedia

[9]       Timothee Groleau(2003)Scope Chain and Memory waste in Flash MX (http://timotheegroleau.com/Flash/articles/scope_chain.htm)

[10]   林秉舒( 93)<<神影無蹤廖添丁>>網路遊戲創作。國立台灣藝術大學多媒體動畫藝術學系碩士論文。

[11]   Tony(2003)TILE BASED GAMES (http://www.tonypa.pri.ee/tbw/start.html)

[12]   Strille(2004)Tile based/object based Flash Tutorial (http://www.strille.net/tutorials/part1_scrolling.php)

 

 

回首頁