來indienova官網，挖掘獨立遊戲的更多樂趣
擁有簡單機制和像素圖形的復古遊戲，可以勾起老玩家很多美好的回憶，同時也會給年輕玩家帶來親切感。
許多遊戲都帶有“復古”的標籤，但創作一款帶有懷舊外觀和感覺的遊戲需要不少精力和構思，因此我們邀請了Mega Cat Studios的開發團隊來探討這個話題。
本文，我們將介紹創作任天堂紅白機風格遊戲美術所要了解的知識，包括重要的Unity設置，圖形結構和調色板。
請下載本文的示例項目：
https://drive.google.com/file/d/1iXxFLf8PUde52n7IzZRPL717pyXAGldu
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（每個單位的資源像素量）
如果遊戲世界的形式為瓦片和精靈的網格，每個網格的大小為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)。
如何選擇2D美術資源的分辨率
Unity 2D Inverse Kinematics資源包使用指南
Unity 2D Animation資源包使用指南
9個讓2D遊戲創作更輕鬆的工具
Unity對Stadia支持的相關信息
在Unity中製作高質量的光照效果
Unity GDC 2019 Keynote精彩回顧
Unity Physics和Havok Physics正式發佈