2D Pixel Perfect：使用Unity建立任天堂紅白機風格復古遊戲

擁有簡單機制和畫素圖形的復古遊戲，可以勾起老玩家很多美好的回憶，同時也會給年輕玩家帶來親切感。

許多遊戲都帶有“復古”的標籤，但創作一款帶有懷舊外觀和感覺的遊戲需要不少精力和構思，因此我們邀請了Mega Cat Studios的開發團隊來探討這個話題。


本文，我們將介紹創作任天堂紅白機風格遊戲美術所要了解的知識，包括重要的Unity設定，圖形結構和調色盤。

請下載本文的示例專案：

專案檔案

Google Drive獲取

Mega Cat Studios

來自美國賓夕法尼亞州的Mega Cat Studios將還原度極高的復古遊戲變成了一種藝術形式。他們的多款遊戲也提供實體卡帶的形式，能夠執行於Sega Genesis等復古遊戲機上。

下面是分別為Mega Cat Studios開發的《Little Medusa》和《Coffee Crisis》。



實現復古效果的Unity工作流程

Unity工作流程近來加入的新功能使Unity成為了適合開發復古遊戲的環境。

2D Tilemap系統越來越強大，已支援網格，六邊形和等距Tilemap。我們也可以使用全新的Pixel Perfect Camera元件，實現穩定的畫素動作和視覺效果。

我們甚至可以使用Post Processing Stack後期處理特效保來新增炫酷的復古畫面效果。但首先我們必須正確的匯入和設定資源。

準備精靈資源

首先，我們需要對資源進行正確的配置，以得到清晰簡潔的效果。

對於每個需要使用的資源，請在專案視窗選中資源，然後在檢視視窗修改以下設定：

•Filter Mode改為Point

•Compression改為None


其它Filter Mode會產生略為模糊的影像，這會破壞我們希望得到的清晰畫素藝術風格。

如果使用壓縮功能，影像的資料會被壓縮，這會導致原始影像的精度損失。請特別注意，因為壓縮功能會造成部分畫素改變顏色，從而可能會改變整體調色盤的效果。

精靈的顏色越少且尺寸越小，壓縮造成的視效差異越大。如下圖所示，左側圖片是普通壓縮效果，右側圖片是未使用壓縮的。我們可以看見右側的圖片更符合原始影像的效果。


我們還要注意檢視視窗中影像的Max Size設定。如果精靈影像在任何軸的大小都大於Max Size屬性，影像會自動調整為最大大小。

這會導致影像質量下降，使影像變得模糊。由於部分硬體不正確支援軸上大於2048的紋理，我們最好把大小保持在2048的限制內。

下圖是示例專案中精靈圖集的精靈，左側圖片軸上的大小為2208，最大值設為2048。可以看出，右側圖片把Max Size屬性提高到4096會正確地調整影像大小，避免畫面質量損失。


最後在準備精靈或精靈圖集時，請確保把Pivot Unit Mode設為Pixels，而不是Normalized。


精靈的軸心點會取決於畫素，而不是取決於影像上每個軸從0到1的平滑範圍。如果精靈不根據畫素確定軸心，畫素清晰度會下降。

我們可以在精靈編輯器為精靈設定軸心。選中精靈資源，在檢視視窗單擊Sprite Editor按鈕，如下圖所示。


安裝2D Pixel Perfect資源包

準備好資源後，我們可以設定攝像機為“完美畫素”型別。完美畫素的效果應該看起來簡潔而清晰。未能呈現完美畫素的畫素特徵包括：模糊效果，以及部分畫素本應為正方形，但卻呈現為長方形。

2D Pixel Perfect資源包可以通過Unity資源包管理器匯入。單擊工具欄的Window選單，然後單擊Package Manager選項。

在新視窗中，單擊Advanced，勾選“Show preview packages”。從左側列表選擇2D Pixel Perfect，在視窗右上角單擊Install按鈕。這樣便完成了匯入過程，已經準備好使用Pixel Perfect Camera元件。


高階的完美畫素的高階設定程度

將Pixel Perfect Camera元件新增到Unity的Camera物件上，它會加強Camera物件的功能。

我們選中Main Camera物件，給該物件新增Pixel Perfect Camera元件。


現在我們檢視可以使用的設定。


首先建議檢視“Run In Edit Mode”，把遊戲檢視內的畫面寬高比設為“Free Aspect”，以便隨意調整遊戲檢視的大小。

Pixel Perfect Camera元件會在遊戲檢視顯示幫助資訊，以確定顯示畫面是否在特定解析度下有完美畫素效果。


現在我們可以檢視每個屬性，瞭解它們的功能以及對遊戲外觀的影響。

Assets Pixels Per Unit

Assets Pixels Per Unit（每個單位的資源畫素量）對應每個資源檢視視窗的相應設定。在遊戲的世界空間使用的資源都應該使用相同的Pixels Per Unit單位畫素量，即PPU。我們應該將該值填入Assets Pixels Per Unit欄位。

如果遊戲世界的形式為瓦片和精靈的網格，每個網格的大小為16*16畫素，我們應該把Pixels Per Unit設為16，因為每個網格瓦片在世界空間座標系中為1個單位。請在此設定正確的Pixels Per Unit值。

Reference Resolution

Reference Resolution（參考解析度）將設定為你要在檢視所有資源的解析度。

如果想實現復古外觀，通常要設為很小的解析度，例如：Sega Genesis遊戲機的原始解析度大小為320×224。

當從Sega Genesis遊戲機移植遊戲時，我們會使用320×224大小的參考解析度。對於16:9的使用情況，我們可以設為320×180和398×224。

Upscale Render Texture

Upscale Render Texture（調整渲染紋理）這項設定會使場景在渲染時儘可能接近參考解析度，然後進行調整以符合實際顯示大小。

由於這項設定會產生填充畫面，所以我們建議在實現無邊框的全屏完美畫素體驗時使用。Upscale Render Texture也會顯著影響精靈旋轉時的效果。

我們觀看下圖中的對比效果圖：

•圖1是原始效果，未旋轉。

•圖2未啟用Upscale Render Texture，旋轉45度，我們會發現畫素清晰度下降，這是因為斜邊的畫素大小會發生變化。

•圖3啟用Upscale Render Texture，旋轉45度。影像會保持原來的畫素清晰度，因為所有畫素都大小相同，但是和原始效果相比，精靈外觀的準確度下降了。


Snapping

Snapping（畫素對齊）僅在禁用Upscale Render Texture時可用。啟用該功能時，精靈渲染器會自動對齊到世界空間網格，網格大小取決於PPU值。

Snapping不會影響任何物件的Transform Position屬性，因此我們可以平滑地在位置間插補物件，但移動效果仍可保持完美畫素和簡潔的特點。

下面是啟用和僅用Pixel Snapping的對比效果：

•左側圖片禁用Pixel Snapping，由於背景位於(0,0)，角色精靈位於(1.075,0)，部分畫素沒有正確對齊，有部分畫素僅被陰影覆蓋了一半。

•右側圖片啟用Pixel Snapping，背景位於(0,0)，角色精靈位於(1.075,0)，位置和原來一致，但畫素仍然完美的互相對齊。


Crop Frame(X and Y)

Crop Frame(X and Y)（剪裁邊框）會剪裁世界空間的觀察區域，使其正好符合參考解析度，而且它會對畫面新增黑色邊框，以填充螢幕邊緣的空隙。

Stretch Fill

Stretch Fill（拉伸填充）會使攝像機根據遊戲檢視調整大小，從而在維持寬高比的同時適應螢幕。如果在X軸和Y軸都啟用了Crop Frame，便可以使用該功能。

因為這種大小調整不會僅在變為參考解析度的整數倍數，所以如果解析度不是參考解析度的整數倍數，該功能會造成畫素清晰度下降。

但優點是即使在一些解析度下會降低畫素清晰度，我們也不會得到黑色邊框，而是得到完全填充的螢幕。

我們需要注意，雖然拉伸填充經常造成模糊，但是不會顯示常見的警告資訊。如下圖所示，角色和背景由於使用拉伸填充而模糊。


使用Pixel Perfect Camera的建議

如果我們希望得到完美畫素和簡潔的顯示效果，並使該效果適用於各種用例，下面裡有幾點建議：

•使用的參考解析度不大於播放器的視窗解析度，例如：320×180。

•啟用或禁用Upscale Render Texture。

如果使用90度，180度和270度之外的旋轉角，而且對旋轉精靈的視覺效果滿意，請啟用Upscale Render Texture。

Upscale Render Texture在部分解析度下會得到非完美畫素的影像，具體取決於參考解析度。

在Pixel Perfect Camera元件啟用Run in Edit Mode時，請嘗試不同的螢幕解析度，以決定它是否會對解析度造成負面影響。如果我們能讓它對所有目標解析度都產生完美畫素影像，這將帶來最佳全屏完美畫素體驗。

•根據偏好啟用或禁用Pixel Snapping。這項設定更多地取決於個人喜好偏好，沒有對齊功能時，我們會得到更流暢的運動效果，但畫素可能會不對齊。

•如果不使用Upscale Render Texture，可以勾選Crop Frame的X或Y，也可以同時勾選二者。

如果無法通過Upscale Render Texture穩定地得到完美畫素結果，裁剪X軸或Y軸會為任何大於Reference Resolution的解析度取得完美畫素影像，但是會在部分解析度下的螢幕邊緣出現較大邊框。

•禁用Stretch Fill。

我們建議將攝像機設定為16:9的寬高比檢視檢視，並進行優化。

大多數玩家在16:9的螢幕執行遊戲，解析度多為1920×1080，例如：參考解析度為320×180時，寬高比為16:9，因此當遊戲執行在1920×1080解析度，或320×180的偶數倍數解析度時，例如：1280×720時，不會出現黑色邊框。

在Unity的工具欄中，我們可以點選Edit>Project Settings>Player，限制遊戲支援的寬高比。如果發現某個適用於目標寬高比的特別配置，但它在部分寬高比下效果不好，我們可以在此避免讓視窗使用這些寬高比。

然而並非所有使用者都有適合這些限制的顯示設定，因此建議的處理方法是啟用剪裁功能，這樣使用者會看到邊框，而不是必須在不適合螢幕的解析度下執行遊戲。

創作任天堂紅白機風格的美術效果

我們介紹瞭如何為完美畫素美術設定Unity，下面將介紹創作遊戲美術的基礎知識，使遊戲遵循經典的紅白機風格限制。

紅白機對創作影像的藝術家帶來了大量限制，這些限制包括：使用的調色盤，螢幕上物件的大小和數量。在面向這款遊戲機開發時，參考解析度為256×240。

調色盤

在創作符合紅白機風格的美術時，藝術家必須遵循許多限制。無論藝術家打算模仿哪款復古遊戲機，有一部分限制是相同的，而其它限制則特定於紅白機本身。

首先，最重要的限制在於影像中調色盤的使用。對於調色盤而言，紅白機的調色盤比較特別，因為遊戲機的完整調色盤會硬編碼到遊戲機上。

紅白機選擇影像使用的顏色時，會傳送一組數值到紅白機的圖形處理器，然後影像處理返回和數值相關的顏色。

下圖是紅白機的調色盤。


這些顏色無法修改，它們是紅白機的一部分，紅白機的所有遊戲都使用這些顏色的組合來實現影像。

子調色盤

為了創作遊戲使用的顏色組合，我們將建立子調色盤並指定到遊戲精靈或背景元素。

紅白機可以將其調色盤分離為子調色盤，指定到精靈和背景上。每個子調色盤包含一種在所有子調色盤使用的常用顏色和三種特別的顏色。

紅白機能為背景和精靈分別載入四個子調色盤。對於精靈而言，每個子調色盤開始的常用顏色會視作透明度。

下圖是遊戲中使用的一組子調色盤示例。頂行表示背景的子調色盤，底行表示精靈的子調色盤。


本示例中，黑色是所有子調色盤共享的常用顏色。因為常用顏色被視作精靈的透明度，我們需要使用第二個黑色調色盤作為精靈子調色盤，從而把黑色用作可見顏色。

指定子調色盤

隨著藝術家瞭解如何在遊戲中使用調色盤，調色盤的使用限制會更加嚴格。為了解釋這一點，我們需要進一步討論復古遊戲機如何儲存，使用和顯示美術。

任何復古遊戲機的美術在遊戲中儲存為8×8畫素的瓦片，使用這些基於瓦片的方法可以讓藝術家通過為不同內容重用瓦片來節省空間，例如：人行道部分可以重用為建築上的窗臺。

關於基於瓦片的儲存，需要注意的一個重要是想是顏色資訊通常不和圖形一起儲存，所有瓦片都使用單色調色盤儲存。因此無論何時瓦片在遊戲中顯示，都可以給它指定子調色盤，使相同的瓦片通過不同的子調色盤同時顯示在螢幕上。在現代平臺創作復古遊戲機風格的美術時，這種做法的效果很明顯。

紅白機對精靈和背景有不同的調色盤指定方法，它會逐個瓦片為精靈指定子調色盤，這意味著精靈中的每個8×8瓦片可以指定四個子調色盤中一個。

下圖的忍者角色使用了二個子調色盤，來賦予它更大的色彩深度。右側圖片中，我們可以看到畫面分為獨立的8×8精靈瓦片。

通過這種分離檢視，我們發現劍上和頭巾上使用的淺綠色和深紅色使用了特別的瓦片，同時深紫色和黑色輪廓部分用於剩下的三個瓦片部分。


另一方面，背景的使用更加嚴格，背景會在16×16大小的部分指定調色盤。為整個畫面背景部分的子調色盤指定情況被稱為屬性表。

屬性表是大多數復古美術大量使用重複平鋪部分的原因，這些部分一般由16×16的瓦片組成，因此它們整齊地符合屬性表。

儘管要考慮硬體限制，但是16×16大小且基於瓦片的背景處理方法成為了復古美術的決定性特點，在模仿復古美術時藝術家必須遵循這種特點。

下圖是一個RPG風格城鎮背景的示例，它遵循前面所講的限制。右側圖片是分為16×16畫素塊的效果，調色盤會根據每個畫素塊選取。

房頂瓦片，草地和橋上的磚塊由畫素塊的重複部分組成，以節省使用空間。較小建築的房頂瓦片都使用相同的瓦片，但是指定了不同的子調色盤，使它們有不同的效果。


精靈分層

儘管藝術家可以為精靈的每個8×8瓦片使用不同的子調色盤，但他們可能會發現自己希望為精靈提供比可用效果更好的顏色深度，我們可以使用Sprite Layering（精靈分層）功能。

精靈分層會把精靈分為2個單獨的精靈，然後重疊放置2個精靈，這允許藝術家避免在每個8×8瓦片只使用一個子調色盤的限制。這樣做會允許藝術家將單個8×8區域可以使用的顏色增加多一倍。

這種做法的唯一缺點是精靈的渲染限制。紅白機僅支援同時在畫面上顯示64個8×8精靈瓦片，而且只能在同一水平線上顯示8個精靈瓦片。當達到數量限制時，其它精靈瓦片不會在畫面中渲染。

這就是為什麼在畫面中同時出現大量精靈時，很多紅白機遊戲會閃爍精靈，它只會在替換幀顯示特定精靈。當對精靈進行分層時，這些限制都是藝術家需要考慮的內容，因為雖然這種會加倍顏色的數量，但它也會加倍相同水平線上的精靈瓦片數量。

下圖是精靈分層的實際效果。最左側的圖片是海盜亡魂精靈的原始版本，它只有三種顏色，藝術家將該圖片分離為身體/帽子和麵部/手部二個部分，然後給這些部分指定不同的調色盤。最後我們可以看見分層處理二個部分疊加後的效果。


精靈分層功能也可以處理背景，從而解決屬性表的限制。這個技巧通常用於靜態影像，例如故事畫面和角色形象，使它們有更好的顏色深度。

為了實現這種效果，藝術家需要繪製部分影像作為背景，然後在背景上放置分層精靈以填補剩餘部分。

海盜亡魂的形象也使用了精靈分層功能，從而得到更好的深度。綠色骷髏在畫面中被渲染為精靈，而他的衣領和帽子被渲染為背景的一部分。這樣可以使藝術家在16×16區域內使用更多顏色，從整體上解決屬性表的限制。


圖形庫

為了講解紅白機的下一個主要限制，首先要記住紅白機以瓦片的形式儲存圖形。圖形瓦片儲存在256個瓦片頁面中，這些頁面的瓦片無法載入到VRAM的不同位置，因此很難在執行中即時混合和匹配不同頁面的瓦片。

紅白機的VRAM僅支援同時顯示512個這類瓦片。超過這個限制，它會把瓦片數量對半分開，分別用於精靈和背景，這也意味著紅白機只能同時顯示256個精靈瓦片和256個背景瓦片。如果藝術家想顯示多種精靈和背景元素，這種處理會產生很大的限制。

下圖是載入到VRAM中的遊戲背景和精靈瓦片的視覺化效果。遊戲機會保持背景和精靈載入在獨立的頁面。


為了解決這種限制，紅白機有一項功能允許藝術家將每個頁面分離為稱作圖形庫（Banks）的區域性頁面。因此，儘管紅白機不支援從圖形資料的多個部分載入獨立的瓦片，但它支援在不同時間載入不同的頁面部分。

對於大多數遊戲而言，圖形庫分為1K圖形庫和2K圖形庫，1K圖形庫等同於頁面的四分之一，即64個瓦片，2K圖形庫等同於頁面的一半，即128個瓦片。

藝術家必須決定是否為精靈或背景保留每種型別圖形庫的使用，因為使用二種型別的圖形庫，這意味著無法為精靈和背景都使用1K圖形庫。一個頁面需要使用1K圖形庫，另一個頁面需要使用2K圖形庫。

通常，多數遊戲會為精靈使用1K圖形庫，為背景使用2K圖形庫，因為背景的瓦片集更為靜態，即時變化更少。

下圖顯示了影像劃分為圖形庫的方法。左側的背景部分使用2K圖形庫，它會從中間劃分影像，而右側的精靈部分使用1K圖形庫。每個圖形庫都可以即時交換。


精靈的1K圖形庫實用性非常明顯。如果玩家精靈擁有大量不符合單個頁面的動畫以及其它需要載入的精靈，則可以將單獨的行儲存在1K圖形庫中，然後根據畫面上發生的行為進行交換。

這樣可以在單個遊戲區域使用更多種精靈，例如，如果玩家在一個遊戲區域遇到六種不同的敵人，但是精靈頁面只能實現玩家和三種其它精靈，於是當一種敵人型別從畫面清除時，遊戲可以交換其中一個敵人圖形庫為新的敵人型別。

為精靈使用1K圖形併為背景使用2K圖形庫的主要缺點，在於紅白機處理背景動畫的方法。

為了給紅白機遊戲製作動態背景元素，藝術家加必須建立動態背景元素的副本圖形庫。每個新副本圖形庫會包含每個動態物件下一幀的動畫，然後這些圖形庫會一次一個進行交換，就像Flipbook一樣，以實現動畫效果。

如果藝術家為背景使用半頁圖形庫（half-page bank），那麼儲存所有副本圖形庫會需要很大空間。

解決該問題的方法是把整個遊戲的所有動態背景元素放到單個圖形庫中。但這樣也會讓藝術家受到限制，每個背景的靜態元素只能有128個瓦片。藝術家要選擇出最佳方案，以決定為美術使用的圖形庫型別。

分層技巧

早期時代的許多遊戲會採用技巧來建立背景中的視差滾動等效果，但這樣也給藝術家和設計師帶來了挑戰。

雖然後來的16位遊戲機可以使用多個背景圖層，但紅白機卻無法使用，它的所有背景都是一個平整的影像。為了實現深度和分層效果，開發者使用了不同的程式設計技巧。

例如，為了實現視差背景，開發者可以設定一個暫存器，它可以判斷何時在螢幕上呈現特定的水平線即光柵線。然後，開發者可以使用暫存器控制螢幕畫面滾動的速度和方向。

通過使用這種技巧，開發者可以實現背景的水平行，它會作為剩餘背景以不同的速度滾動。此時，藝術家和設計師的技巧是把背景看作是一個平面影像。

如果平臺或元素應該處於移動速度較慢的背景“前面”，並要放置在該區域，那麼該平臺或元素也會比剩餘影像滾動得更慢。這意味著設計師需要考慮在場景的什麼位置放置背景元素，而藝術家需要建立出有無縫銜接效果的背景。

下圖的示例畫面中，紅框標出的區域可以設定比剩餘背景更慢的滾動速度，以模擬出深度效果。上方的HUD介面設為從不滾動，即使它是平整背景影像的一部分。


對於希望將其中一個背景元素出現在前景中的藝術家而言，還有另一種技巧。在紅白機上，開發者可以設定精靈優先順序為小於0的值。

設定後，它會使精靈顯示在任意非透明背景元素之後。精靈優先順序可以即時修改和觸發，使特定元素按需修改精靈的優先順序。

結語

當我們開發符合復古遊戲機風格的專案時，需要考慮很多現代遊戲開發所不必考慮的技術問題。由於舊遊戲機渲染影像的方式不同，而且CPU和GPU只有很小的處理空間，設計師必須創造性地思考如何處理硬體限制。

瞭解這些限制和技術變得很重要，以便真正重現那個時代的遊戲外觀和設計。

在下一篇文章中，我們會介紹16位時代的設計限制，以及如何設定Unity來實現真正的“老電視”畫面效果。

更多Unity精彩技術經驗分享和談論，盡在Unity Connect平臺(Connect.unity.com)。

來源：Unity 官方平臺