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

時間 2019-11-05

標籤走在網頁遊戲開發路上十一欄目 HTML 简体版

原文原文鏈接

遊戲中的圖像資源html

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

1. 前言

首先讓咱們瞭解一下何謂矢量圖，何謂位圖，及各自的優缺點。這些內容與遊戲無直接關係，可是瞭解他們的差別有助於咱們在遊戲中如何選擇。算法

1.1 矢量圖

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

優缺點：數據結構

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

l 圖像能夠無級縮放，對圖形進行縮放，旋轉或變形操做時，圖形不會產生鋸齒效果。ide

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