走在網頁游戲開發的路上（十一）

游戲中的圖像資源

當今游戲早已不再是黑白機的時代，游戲都由色彩豐富、精致的圖像，流暢的動畫構成。Flash游戲也不例外，Flash既支持矢量圖又支持位圖，他們各有優缺點。本文的目的即是介紹何時使用矢量圖，何時使用位圖，如何在兩者之間權衡？

1.    前言

首先讓我們了解一下何謂矢量圖，何謂位圖，及各自的優缺點。這些內容與游戲無直接關系，但是了解他們的差異有助於我們在游戲中如何選擇。

1.1 矢量圖

矢量圖（摘自：百度百科）使用直線和曲線來描述圖形，這些圖形的元素是一些點、線、矩形、多邊形、圓和弧線等等，它們都是通過數學公式計算獲得的。例如一幅花的矢量圖形實際上是由線段形成外框輪廓，由外框的顏色以及外框所封閉的顏色決定花顯示出的顏色。

優缺點：

l  文件小，圖像中保存的是線條和圖塊的信息，所以矢量圖形文件與分辨率和圖像大小無關，只與圖像的復雜程度有關，圖像文件所占的存儲空間較小。

l  圖像可以無級縮放，對圖形進行縮放，旋轉或變形操作時，圖形不會產生鋸齒效果。

l  可采取高分辨率印刷，矢量圖形文件可以在任何輸出設備打印機上以打印或印刷的最高分辨率進行打印輸出。

l  最大的缺點是難以表現色彩層次豐富的逼真圖像效果。

l  矢量圖與位圖的效果是天壤之別，矢量圖無限放大不模糊，大部分位圖都是由矢量導出來的，也可以說矢量圖就是位圖的源碼，源碼是可以編輯的。

 

1.2 位圖

位圖（摘自：百度百科）（Bitmap），又稱柵格圖（Raster graphics），是由稱作像素（圖片元素）的單個點組成的。這些點可以進行不同的排列和染色以構成圖樣。當放大位圖時，可以看見賴以構成整個圖像的無數單個方塊。

顏色編碼

RGB：位圖顏色的一種編碼方法，用紅、綠、藍三原色的光學強度來表示一種顏色。這是最常見的位圖編碼方法，可以直接用於屏幕顯示。

CMYK：位圖顏色的一種編碼方法，用青、品紅、黃、黑四種顏料含量來表示一種顏色。常用的位圖編碼方法之一，可以直接用於彩色印刷。

圖像屬性

l  索引顏色/顏色表

位圖常用的一種壓縮方法。從位圖圖片中選擇最有代表性的若干種顏色（通常不超過256種）編制成顏色表，然后將圖片中原有顏色用顏色表的索引來表示。這樣原圖片可以被大幅度有損壓縮。適合於壓縮網頁圖形等顏色數較少的圖形，不適合壓縮照片等色彩豐富的圖形。

l  Alpha通道

在原有的圖片編碼方法基礎上，增加像素的透明度信息。圖形處理中，通常把RGB三種顏色信息稱為紅通道、綠通道和藍通道，相應的把透明度稱為Alpha通道。多數使用顏色表的位圖格式都支持Alpha通道。

l  色彩深度

色彩深度又叫色彩位數，即位圖中要用多少個二進制位來表示每個點的顏色，是分辨率的一個重要指標。常用有1位（單色），2位（4色，CGA），4位（16色，VGA），8位（256色），16位（增強色），24位和32位（真彩色）等。色深16位以上的位圖還可以根據其中分別表示RGB三原色或CMYK四原色（有的還包括Alpha通道）的位數進一步分類，如16位位圖圖片還可分為R5G6B5，R5G5B5X1（有1位不攜帶信息），R5G5B5A1，R4G4B4A4等等。

分辨率

處理位圖時，輸出圖像的質量決定於處理過程開始時設置的分辨率高低。分辨率是一個籠統的術語，它指一個圖像文件中包含的細節和信息的大小，以及輸入、輸出、或顯示設備能夠產生的細節程度。操作位圖時，分辨率既會影響最后輸出的質量也會影響文件的大小。處理位圖需要三思而后行，因為給圖像選擇的分辨率通常在整個過程中都伴隨着文件。無論是在一個300 dpi的打印機還是在一個2570dpi的照排設備上印刷位圖文件，文件總是以創建圖像時所設的分辨率大小印刷，除非打印機的分辨率低於圖像的分辨率。如果希望最終輸出看起來和屏幕上顯示的一樣，那么在開始工作前，就需要了解圖像的分辨率和不同設備分辨率之間的關系。顯然矢量圖就不必考慮這么多。

1.3 總結

l  矢量數據的優缺點：

優點為數據結構緊湊、冗余度低，有利於網絡和檢索分析，圖形顯示質量好、精度高；

缺點為數據結構復雜，多邊形疊加分析比較困難。

l  位圖數據的優缺點：

優點為數據結構簡單，便於空間分析和地表模擬，表現力較強；

缺點為數據量大，投影轉換比較復雜。

表：位圖與矢量圖比較

圖像類型	組成	優點	缺點	常用制作工具
位圖圖像	像素	只要有足夠多的不同色彩的像素，就可以制作出色彩豐富的圖象，逼真地表現自然界的景象	縮放和旋轉容易失真，同時文件容量較大	Photoshop、畫圖等
矢量圖像	數學向量	文件容量較小，在進行放大、縮小或旋轉等操作時圖象不會失真	不易制作色彩變化太多的圖象	Flash、CorelDraw等

 

 

2.    游戲中權衡

上面了解了矢量與位圖各自優缺點，下面介紹在Flash游戲中如何權衡使用。

矢量圖能夠調整大小，而不會造成任何質量損失，文件大小也比位圖要小得多，然而大量的矢量圖會對CPU造成沉重的負擔。使用矢量圖需要注意：雖然可以通過Illustrator來創建矢量圖，但是最好直接在Flash中創建矢量圖像，因為Fash會自動在繪制矢量圖中使用盡量少的點來對其進行優化。構成矢量圖的點缺少，渲染速度就會越快，文件尺寸也會越小。這是因為矢量圖通過數學公式計算獲得的，點越多越復雜，計算多耗CPU。

位圖能夠提供照片級別的真實感，而這得需要非常復雜的矢量圖才能辦到。許多不同的圖像設計軟件（包括多數3D軟件）都位圖，然后只有幾個軟件能夠生成為Flash兼容的矢量圖像。另外將光柵圖像渲染到屏幕上所需要的運算量也要少得多，因為Flash會將其與一個矢量長方形以等同復雜度對待。但是當像素增加時，光柵圖像的大小會呈指數級增加，並在Flash中不可做到質量無損地調整位圖的大小。另外，在Flash中渲染透明圖像要比渲染不透明圖像更耗費運算資源。對透明圖像渲染時還需要對圖像下面的像素顏色進行采樣，才能和信的顏色進行混合，這些計算是比較耗時的。如果圖像完全不透明，那么這些計算就可以被避免了。

矢量圖：文件小、縮放不失真、CPU消耗大

位圖：文件大、縮放失真、CPU消耗小

在游戲中，兩者之間的選擇即CPU與內存之間的權衡，我更偏重於使用位圖，犧牲內存來換CPU。這樣才能在屏幕上快速渲染出游戲對象，保證暢快的游戲體驗。有大量細節的矢量圖，如復雜的矢量動畫，會因為太耗CPU渲染太慢會感覺到游戲卡。

二八原則也同樣適用於游戲中的矢量圖、位圖，80%的圖像使用位圖來實現，只有20%的圖像使用矢量圖。例如游戲角色、背景、粒子效果等全部使用位圖來實現，而菜單、游戲內各種顯示界面與文本則使用矢量圖來實現。

 

3.    性能測試

為了驗證上面所述，下面通過實際測試來驗證矢量圖與位圖的cpu、內存消耗情況。引用《Flash矢量圖與位圖性能對比》（http://www.cnblogs.com/samen168/p/3194747.html）一文的結論：

4.    Flash常用位圖格式

這里不介紹flash支持的所有圖像格式，也不深入介紹PNG、JPEG、JPEG-XR的原理，但會介紹他們的優缺點及適用場景，注意事項。

PNG，JPEG

Flash中常用的位圖格式有PNG、JPEG。對於PNG格式的圖片是保留了透明通道的圖片，所以一般來說它的尺寸會比JPEG大，即使用上了PNG格式你也可以根據使用需要選擇PNG圖片壓縮的類型（PNG8, PNG24, PNG32）。

JPEG

JPEG 是Joint Photographic Experts Group（聯合圖像專家小組）的縮寫，是第一個國際圖像壓縮標准。JPEG圖像壓縮算法能夠在提供良好的壓縮性能的同時，具有比較好的重建質量，被廣泛應用於圖像、視頻處理領域。

JPEG是一種有損壓縮格式，能夠將圖像壓縮在很小的儲存空間，圖像中重復或不重要的資料會被丟失，因此容易造成圖像數據的損傷。尤其是使用過高的壓縮比例，將使最終解壓縮后恢復的圖像質量明顯降低，如果追求高品質圖像，不宜采用過高壓縮比例。但是JPEG壓縮技術十分先進，它用有損壓縮方式去除冗余的圖像數據，在獲得極高的壓縮率的同時能展現十分豐富生動的圖像，換句話說，就是可以用最少的磁盤空間得到較好的圖像品質。而且JPEG是一種很靈活的格式，具有調節圖像質量的功能，允許用不同的壓縮比例對文件進行壓縮，支持多種壓縮級別，壓縮比率通常在10：1到40：1之間，壓縮比越大，品質就越低；相反地，品質就越高。

優點：

l  攝影作品或寫實作品支持高級壓縮。

l  利用可變的壓縮比可以控制文件大小。

l  支持交錯（對於漸近式JPEG文件）。

缺點：有損耗壓縮會使原始圖片數據質量下降。

PNG

便攜式網絡圖形（Portable Network Graphics，PNG）是一種無損壓縮的位圖圖形格式，支持索引、灰度、RGB三種顏色方案以及Alpha通道等特性。根據色彩深度PNG分為：PNG8、PNG24、PNG32：

PNG8：8位的png最多支持256（2的8次方）種顏色，8位的png其實8支持不透明、索引透明、alpha透明。

PNG24：支持2的24次方種顏色，表現為不透明（Flash中png24表現為不透明，並不是說png24這種格式不支持）。

PNG32：支持2的32次方種顏色，32位是我們最常使用的格式，它是在png在24位的png基礎上增加了8位的透明信息，支持不同程度的半透效果。

通常，PNG 8 位和 PNG 32 位之間的視覺差異很小，但是PNG 32 位文件大小是 PNG 8 位文件大小的 4 倍，所以在視覺要求不是特別精細的地方建議使用PNG8。

總結（PNG與JPEG的選擇）

當圖像不需要任何透明部分時，用JPEG，因為你可以通過外部程序，如Photoshop來處理凸顯，而這要比在Flash內部處理具有更低的壓縮率及更好的圖像質量。由於它們缺少透明通道，所以也會降低Flash渲染器的開銷。而當你需要圖像的透明通道時，PNG格式則是不二之選，但是文件尺寸及所占用的運算能力也會變大。

多數項目會混合使用這兩種格式。任何資源，只要其可以作為一個矩形形狀來使用，並且不包含任何透明通道，那么就對其使用JPEG格式吧。這樣的資源包含以下幾種：

l  游戲與菜單界面背景

l  在位圖填充中被用作材質的圖像

l  遮罩形狀所覆蓋的圖像

l  在游戲中用作某種圖像特性額覆蓋層

便攜式網絡圖像（PNG）是表現空白透明效果的不二之選，且更適用於表現較小的游戲元素，這些元素包含以下幾種：

l  游戲角色，特別是那些運動角色

l  需要與背景分離的游戲內元素

l  用戶界面元素，比如按鈕及其他不規則形狀

l  有着細致邊線的圖像，這種圖像需要達到像素完美的精確性（JPEG有變模糊的傾向，或者說圖像像素細節很模糊）

 

JPEG-XR

Flashplayer 11開始支持JPEG-XR，JPEG XR是一款可以實現高動態范圍圖像編碼，而且在壓縮與解壓時只需要整數運算的圖像編解碼器。它支持單色、RGB、CMYK、甚至支持16位無符號整數或者32位定點或者浮點數表示的多通道彩色，並且它還支持RGBE Radiance。它可以選擇嵌入ICC彩色profile以實現不同設備上的色彩一致性。Alpha通道可以表示透明，同時支持EXIF、XMP 元數據格式。這種格式還支持在一個文件中包含多幅圖像。

l  與PNG相比，它能夠大大減少圖片的大小，同時保證質量和支持透明度；

l  與JPEG相比，這種格式支持透明通道。

一句話，JPEG-XR結合了JPEG與PNG的優點。

位圖壓縮

當你導入一個已經用另一個程序優化過的JPEG文件時，Flash默認情況下會照其原樣來使用它，PNG圖像卻不一樣。如果圖像是256色或更少的顏色，Flash會自動將其降低為8位的PNG文件，文件尺寸會立刻降低，然而其品質無損（也稱無損壓縮）。如果圖像包含的顏色超出了256色，Flash就會在編譯該文件時將其轉為Flash所自有的JPEG壓縮格式。

壓縮率可以通過在文檔中通過“發布設置”來進行控制，默認是80%，並且這是針對每個圖像進行壓縮的。對於一段時間內在屏幕上保持靜止的圖像來說，我建議將其設置為70%~80%，這樣可以保證其品質不會降低太多。而對於用在快速運動的動畫序列中的圖像，比如角色動畫，我建議將其壓縮率降低為50%，因為你根本注意不到由此產生的品質下降。事實上，當每秒30幀時，人眼是察覺不到足夠多細節的，JPEG經壓縮后形成的自然模糊效果就會帶來良好的運動模糊感覺。

 

平滑

默認情況下，當你在舞台上對圖像施加任何方式的變形是（包括傾斜、縮放甚至旋轉——一任何不能被90整除的角度進行旋轉），Flash都不會重新渲染它們。由此導致在運動較慢的圖像上產生鋸齒效果。如果游戲是需要時不時地旋轉一些圖像或者調整其尺寸，那么你可以考在“位圖屬性”面板中選中“允許平滑”選項。盡管這樣做后圖像看上去邊緣更為平滑，但卻是會更耗費CPU，所以要少用這個選項。

 

內存占用

一張圖像占用多少內存只取決於圖像的尺寸，二與圖像文件的類型和圖像壓縮無關。通用尺寸下，一個壓縮比很大的JPG文件盒一個細節豐富的PNG文件，被Flash調取后所占用的內存是一樣的。占用內存大小計算公式如下：

位圖所占內存（字節） = 位圖寬度 x 位圖高度 x 4

例如200x400像素的圖片占用內存大小為320000字節，除以1024轉換成KB則是312.5KB。注意，內存占用不等於你需要下載的文件大小，如下載200x400像素的圖片文件大小可能只有幾十KB。

性能比較（PNG、JPEG、JPEG-XR）

有人在不考慮文件size的情況下面（文件size會直接影響到網絡加載時間），對比PNG、JPEG、JPEG-XR的壓縮與解壓縮性能（http://jacksondunstan.com/articles/2117），得出以下結論（數據不一定非常准確，測試數據取決於圖片，但具有指導意義）：

測試	解壓縮時間	壓縮時間
PNG	496	5025
PNG（fastCompression）	496	246
JPEG（q = 1時）	147	224
JPEG（Q = 50）	147	225
JPEG（Q = 100）	147	239
JPEG-XR（q = 1時）	655	1276
JPEG-XR（Q = 50）	655	1050
JPEG-XR（Q = 100）	655	1042

 

l  JPEG格式是最快的裝載/解壓縮。速度為PNG的三倍以上，比JPEG-XR超過4倍的速度。

l  PNGEncoderOptions設置fastCompression標志為true，壓縮速度提高20倍！

l  JPEGEncoderOptions設置提高品質(quality)輕微減慢壓縮速度。與品質為1%相比，品質為100%只慢了約6％。

l  JPEGXREncoderOptions設置增加失真比稍微加快了壓縮速度。與失真比1%相比，失真比100%它的速度提高約22％。

l  壓縮PNG（設置fastCompression為true）和JPEG使用大約相同的時間，而壓縮JPEG-XR需要的5倍的時間。

l  解壓JPEG-XR或PNG圖像實際上比JPEG或PNG圖像（設置設置fastCompression為true）慢。

 

你可能感興趣的還有：

ü  走在網頁游戲開發的路上（一）

ü  走在網頁游戲開發的路上（二）

ü  走在網頁游戲開發的路上（三）

ü  走在網頁游戲開發的路上（四）

ü  走在網頁游戲開發的路上（五）

ü  走在網頁游戲開發的路上（六）

ü  走在網頁游戲開發的路上（七）

ü  走在網頁游戲開發的路上（八）

ü  走在網頁游戲開發的路上（九）

ü  走在網頁游戲開發的路上（十）