獨立游戲人：像素風格游戲制作分享

?

文/vikingzombie

像 素風格在獨立游戲中非?；?#xff0c;我也挺喜歡玩像素風格的游戲。特別是獨立游戲大電影里介紹的《Fez》，在我心目中的游戲榜單能排到前5。我也想做像素風格的 游戲，在經過一段時間的研究學習后，有了些心得，現在把我博客里的一篇文章貼出來，權當拋磚引玉，希望對同樣喜歡像素風格，計劃做像素游戲的人有所幫助。

—————————————————————————————————————————

像素風是現在獨立游戲最流行的畫面風格之一。

第 一個原因是：像素風是一種很獨特的畫面風格，輕易就能與游戲大廠的精致畫面區分開?，F在3A游戲的大趨勢就是畫面追求極致的逼真，甚至出現了《超凡雙生》 《教團1886》這樣游戲性短板，畫面卻極致出眾的游戲。獨立游戲與3A游戲比拼畫面不現實，倒不如在畫面上不求精致，只求獨特，然后在游戲性上取勝，這 既是獨立游戲的生存之道，也是反叛千篇一律的商業模式的精神追求。

第二個原因是：不少玩家和獨立游戲制作人都有「像素情懷」，像素游戲能讓許多從FC時代走過來的玩家產生親切感。

第 三個原因是：像素繪畫學習成本低，就算是零基礎的人，經過較短時間的學習，也能畫出能用的像素畫。我知道不少獨立游戲制作者都是既當程序員又兼職美工的， 比如做《雨血：死鎮》時的梁其偉、做《Spelunky》時的Derek Yu 等。在沒有專業美工的情況下，選擇門檻較低的像素風格也不失為一種好方法。當然，想要畫出優秀的像素畫也是需要一定的美術基礎和長時間學習的。

比如下面這張圖，出自98年的 《Street Fighter Alpha 3》中的桑吉爾夫動作圖。（他的梅花大坐估計是不少人童年的噩夢……）

看這光影和體積感，還有肌肉紋理……看上去是不是跟3D建模的一樣？

有 興趣的可以下載來看看，放大來看就能看出畫面的粗糙了。當年的機器性能不行，怎樣使用較少的像素展現更逼真的畫面是一個擺在各大游戲廠商面前的難題，最后 游戲廠商們只能選擇一幀一幀，一個像素一個像素的去扣，上面的畫面扣除掉空白區域，200*200像素都不到，卻能表現出逼真的立體感。這種級別的像素 畫，可不是入門畫師能畫得出的。

而現在不再受限于硬件，大部分像素畫也由追求逼真的畫面轉為追求舒適的畫面了。

比如這種。

當然，也有大廠在追求極致逼真的像素風格。

比 如這張《拳皇13》的不知火舞站立圖，5層亮度的光影、完美的人體結構、符合物理因素的乳搖……才200*200像素，這幾乎不可手工畫出來。SNK用 3D模型轉2D畫面完成了這種令人驚嘆的效果，每個角色的制作成本高達1000萬日元。這幾乎是追求高保真低像素的極致了。

如果你不是追求逼真畫面，而是追求看著舒服，獨特的畫面。

那么你只需要一段時間的練習，你也可以畫出這種像素圖：

這種水平的像素圖在獨立游戲里完全夠用了，如果你特效做的好的話，甚至會顯現出非常炫酷的效果：

—————————————————————————————————————————

下面是一篇很適合領人入門的像素教程，出自獨立游戲制作人Derek Yu。由我翻譯補充的，如果疏漏還望指正。

版權聲明：原文 by Derek Yu：Make Games - Pixel Art Tutorial

注：【】里為本人補充內容

像素繪畫教程

注:2007年，這個教程在我的個人網站上發布。此后做了一些小的調整,但沒有什么重要的改動。

在這十個部分的教程中,我將教你如何繪制一個「精靈」,「精靈」是一個獨立的2D角色或者物體。這個術語來自視頻游戲。

我學習像素繪畫，是因為我需要為我的游戲作圖。經過大量的練習,我越來越擅長繪制像素圖，并開始將它視為真實的藝術而不僅僅是一個工具。最近，像素圖在游戲開發和插圖藝術領域非常受歡迎。

幾年前，我寫了這篇像素畫教程的初版，闡述像素圖背后的概念?，F在這個版本是經過簡化了的。網上還有其他的像素教程，但我發現它們過于復雜羅嗦。像素繪畫不是科學。畫像素圖時，你不需要一個個地計算矢量。

一、工具

繪 制像素圖的一大好處是你并不需要任何花哨的工具，電腦內置的畫圖工具可能就已經足夠了！網上有專門繪制像素圖的工具Pro Motion，還有Mac平臺上的pixen。說實話，我并沒有用過它們，但我聽說它們很不錯。在本教程中，我將使用Photoshop，這是一只昂貴的 野獸，但它適用于所有的繪畫種類，而且它有很多對于像素繪畫來說非常有用的功能。

【雖然有不少像素轉化軟件，可以方便的將圖片轉化為像素 圖，甚至PS里就有像素化的濾鏡，不過幾乎沒有畫師是先畫出圖片然后用工具轉的，一是因為多此一舉，二是因為用工具轉的像素畫肯定會有轉化混亂的地方，到 時候還得一點一點改，遠不如直接畫簡單。常用的繪畫軟件是SAI和PS，SAI有抖動修正，比較適合畫長線會抖的新手，不過我還是建議用PS畫，像素圖本 身就沒什么長線要畫，不如選擇更專業一點的PS】

使用Photoshop繪制像素圖

使用Photoshop時，你的主要工具是鉛筆（快捷鍵「B」），而不是畫筆。鉛筆可以讓你填充單獨的像素，而不含任何抗鋸齒處理。

另外兩個會用得上的工具是選框（快捷鍵「M」）和魔術棒（快捷鍵「W」），用于選擇、拖放或復制、粘貼。記住一點，選擇的同時按住「Shift」鍵或「Alt」鍵，你可以從當前選區中添加或減去。這可以方便你選取不規則的四邊形區域。

你還得使用吸管工具（快捷鍵「I」）選取顏色。在像素圖中「顏色維持」很重要，所以你會經常選取相同的顏色重用。

【顏色維持指的是有選擇的使用顏色，使圖像的顏色維持在一個風格中。下文會有詳細介紹】

最后,你得學會使用快捷鍵，它們可以節省你大量的時間和精力。例如「X」,它是一個切換前景色和背景色的快捷鍵。

二、線條

像素本質上是一個小的顏色塊。你需要學習的第一件事就是如何有效地利用這些塊來繪制你想要的線條。我們將討論兩種最基本的線段類型——直線和曲線

• 直線

我知道你在想什么 —— 這似乎太容易了！ 但使用像素畫圖，即使是直線也可能會出問題。我們極力避免出現「鋸齒」—— 一個線上斷裂的部分，它讓線條看起來不平坦。當線上某一處的像素不協調，就會出現鋸齒。

• 曲線

確保曲率在下降或上升時保持一致?？聪旅娴睦?干凈的曲線是6 > 3 > 2 > 1,而有鋸齒的曲線是3 > 1 < 3。

【鋸齒幾乎是不可避免的，在固定的圖像大小下，經常會出現無法修正的鋸齒。 比如原作者的這張圖：

請注意圓圈圈出的地方，這個鋸齒是無法解決的，我們要不讓這塊肌肉整體都變形，要不就得容忍這個鋸齒。像素越少的圖像不可避免的鋸齒就會越多， 我們能做的僅僅是減少那些可避免的鋸齒，對于無法避免的鋸齒也不用過多計較，當然，在放棄修正某個鋸齒前，你最好先多試試】

結論

畫出讓人舒服的線條對于像素圖來說至關重要。接下來,我們將學習如何使用抗鋸齒來讓我們的線條看起來更光滑。

三、構思

你要做的第一件事是擁有一個好想法。試著在你腦海中或是紙上具象化你想要的像素圖。一個簡單的畫前準備就可以讓你專注于實際的像素繪制。

應該考慮什么

1.「精靈」將用于什么場景？

用于網站,還是游戲?接下來需要為它做動畫嗎?如果接下來需要制作「精靈」動畫,你可能要讓它更小，擁有更少的細節。相反,如果你不需要為這個「精靈」做動畫，你就可以把更多的細節放進這個「精靈」里。思考「精靈」的使用場景,會讓你工作的更好。

2.我該維持什么風格？

上 文中，我說過「顏色維持」很重要。其中一個原因就是你的色板顏色可能是有限的。受限于硬件（很少是因為這個）或者受限于畫面風格。如果你是在模擬一個特定 的主機風格（例如64位的NES），則會受限于主機的精度。除了顏色受限，你還得考慮「精靈」的尺寸大小，以及如何讓它融入環境，不顯突兀。

【我 不建議完全模仿一個特定的主機風格，比如FC機的同屏發色數只有16色，這顯然是不夠用的，我們追求的應該是適合游戲風格的畫面，而不是一味的追求復古。 「顏色維持」更重要的意義在于使整個畫面協調，這里面涉及的色彩搭配又是一個大坑，我這兒有些相關資料，感興趣的可以找我要。實在不想看書，就模仿別人的 上色，百度“色板”，有現成的可供參考，或者找好看的圖片來提取顏色制作自己的色板】

讓我們開始進入正題吧！

在本教程中，我沒有設定任何風格限制。我只是確?！妇`」足夠大，方便你看清每一步的細節。為此，我決定用「摔跤律師」來作為教程原型，它是我們這兒最屌的摔跤代理人！它能用于格斗游戲或者其他像「Habeus Corpse Blaster」這樣的游戲中。

四、輪廓線

黑色的輪廓線線能為你的「精靈」提供一個良好的基本結構，它是最好的開始步驟。我們選擇黑色的原因是因為它好看且醒目。稍后，我會告訴你如何改變輪廓線的顏色來讓「精靈」顯得更真實。

兩種方法

有兩種描出輪廓線的方法，一種是直接拖拽出輪廓線，然后再進行清理修改。另一種是從一開始就用像素點一個個的填充成你想要的線條，你懂的，就是點點點。

用哪種方法取決于「精靈」的尺寸和你對像素繪畫的熟練度。如果一個「精靈」很大，那么拖拽出草圖再進行修改，要比用像素填充追求一次性通過容易的多。

在這個教程中，我們繪制的是一個相當大的「精靈」，所以我會演示第一種方法，這也更利于文字說明和圖片說明。

• 第一步：粗繪輪廓。

使用鼠標或數位板勾勒出「精靈」的粗略輪廓。不過也不要太粗略，他應該跟你想要的最終效果差不多。

這個實例中，我在草圖階段完成了輪廓線的主要部分。

【這一步最重要的是抓造形的能力，比如這兩個路飛：

，

是 不是明顯后者要像的多？這是因為后者概括路飛的特點要比前者準確的多，首先路飛的草帽是有圈紅色圓環的、路飛的大眼睛是眼白區域大，中間眼珠區域小，還有 路飛的手臂因為橡膠果實的能力而較常人長，以及不可或缺的草鞋，這些細節特征能“提醒”玩家，這個圖是在畫誰，他的形象如何。抓形能力是需要多動腦的。下 筆前好好考慮清楚自己「精靈」的人物特征，多給它加小細節才能讓它生動起來。

PS. 畫人千萬別畫這種正面人體側面腿，還有火柴桿一樣直直的手，難看的不行】

• 第二步：修改輪廓

首先，放大輪廓圖6倍或8倍，方便我們看清每一個像素。然后修改輪廓，尤其，你需要修剪掉離散的像素（輪廓線應該只有一個像素寬度），去除所有鋸齒，并添加你在第一步里錯過的細節。

一般來說，即使是較大的「精靈」也不會超過200*200像素。「以少成多」在像素圖里再正確不過了，你慢慢會發現，用極少的像素仍能表現極多的不同。

【一般獨立游戲的「精靈」都沒這么大，200200像素在優秀的畫師手中都能畫的看不出是像素畫了。選擇幾十幾十就差不多了，越大的像素圖畫起來越繁瑣，“像素味”也越淡。】

讓輪廓線簡單。細節我們之后會添加，但現在，讓我們全神貫注于「打形」，完成例如肌肉分割這樣的基礎步驟。它現在可能不像你想要畫的像素圖，但請耐心，這是一個必經的步驟。

五、顏色

隨著輪廓線的完成，我們有了一幅空白的填色圖，PS里的油漆桶和其他填充工具會幫助我們上色，填充顏色可有點難度，色彩理論是個超出本教程范圍的話題，不過，這里有些基礎概念你最好清楚。

HSB顏色模式

HSB代表色調，飽和度，和亮度。這是計算機幾種顏色模式（即：數值表示顏色）中的一種，其他的顏色模式是RGB模式和CMYK模式。大多數繪圖程序使用HSB模式采色，所以讓我們詳細講講HSB模式。

色調——你感知到的顏色。比如「紅」「橙」「藍」等。

飽和度——顏色的強烈程度。100%飽和度的顏色最鮮艷，飽和度越低的顏色暗淡。

亮度（也稱「明度」）——顏色的明亮程度，0%亮度的顏色是黑色。

顏色選擇

選擇什么顏色取決于你，但有些事項請記住：

1.飽和度低、亮度低的顏色會顯得更樸實，不那么卡通。

2.考慮色盤上的顏色關系—在色盤上離的越遠的顏色越難協調。在同一側的顏色，比如相鄰的紅色和橙色，放在一起會更好看。

3.使用的顏色越多，你的「精靈」看起來就會越混亂。只用兩種或三種主要顏色會讓「精靈」更吸引人。（想想當年的超級馬里奧，只用了紅色和褐色！）

【還是那句，不懂怎么上色就模仿別人的上色。經常收集喜歡的圖片是個好習慣，臨到要上色時，可以提出別人的色彩，做成自己的色板。具體怎么操作可以參考：設計師必備取色技巧！教你在PS里通過照片創建色板 】

填色

用繪畫程序填色很容易。如果你用的是PS，你應該用魔棒工具[快捷鍵「W」]選中區域，然后用[Alt+Del]填充前景色，或者用[Ctrl+Del]填充背景色。

六、陰影

畫好陰影是我們追求極致像素圖的關鍵一步，它決定一個「精靈」變得出眾還是糟糕。照我說的做，你會成功的。

步驟1：選擇光源

首 先，我們要挑選一個光源。如果你的「精靈」是在一個大場景里，可能會有很多局部光照在它上面（像燈光、火光、疊加光等），這些光源會混合成一種很復雜的情 況。不過，大部分情況中，選擇一個遠光源（比如太陽）是一個不錯的做法，對于游戲來說，你應該繪制一個能通用的被照亮的「精靈」，讓它能適用于盡可能多的 場景。

我通常選擇一個在「精靈」上方偏前位置的遠光源，物體頂部和前部會被照亮，而其他部分會在陰影中。這種光照下的「精靈」看起來最自然。

步驟2：畫暗面

一旦我們定義了一個光源，先用深色填充離光源最遠的區域，我們選取的「前上位置」燈光模型限定了頭的邊緣，手臂，腳等部位是在陰影中的。

記住，是光和影之間的差異讓物體顯得立體。將一張白紙揉成紙球，然后把它攤開放在桌子上——你憑什么說它不是平的？因為你能看見褶皺周圍細小的暗面。你要做的是，用陰影勾勒出衣服的褶皺，用陰影去突顯肌肉，頭發，毛皮，裂紋等。

步驟3：畫灰面

灰面屬于第二級陰影，比第一級的暗面亮，常作為軟陰影來使用?；颐媸俏矬w被間接照亮的區域，也能作為亮面到暗面的過渡區域，特別是曲面的過渡。

步驟4：涂高光

被光源直接照射的地方就會出現高光效果，高光應該適度使用（比暗面少得多），因為頻繁使用高光會分散觀看者的注意力。

先涂完陰影再上高光會讓你少頭痛很多。如果沒有陰影填充好區域，你上高光的時候就可能會畫的偏大。

注意事項：

涂陰影對于大部分初學者來說是個坎。你在涂陰影時應該遵照以下幾條規則。

1.不要使用漸變工具。這是新手最容易犯的錯誤。漸變看起來難看的可怕，而且跟真實光照完全不一樣。

2.不要使用「枕形陰影」。枕形陰影是內輪廓的陰影，它之所以叫枕頭陰影是因為像個枕頭而且沒有專業定義。

【「枕形陰影」 -- 「pillow-shading」，我問了大神@all Artplus，他也不是很確定該怎么翻譯，他的說法是意思就是像枕頭那樣的，從中間高光到四周陰影的，從高到低的變化。

我搜了搜，國外個一個博客有介紹，「枕形陰影」大致上就是這種。詳細內容在：The Pixel Art Tutorial 里面是些進階內容，都挺有用】

3.不要使用太多的陰影。人們很容易認為「越多的顏色意味著越真實」，但實際上，我們傾向于在大塊的光影中觀察物體——我們的大腦會過濾掉光影之間的細節。在基礎色上，我們最多使用兩種陰影（淺陰影和深陰影）和兩種亮面（淺亮面和高亮）。

4.不要使用太過相似的顏色。不要在一個物體上使用兩種太相似的顏色，除非你想讓你的「精靈」模糊不清。

【大部分像素風格的游戲都不會分太多層的明暗，一般都是亮部，暗部，陰影這三層明暗就夠了，甚至只分亮部，暗部，不要陰影。分的明暗層越多，自然就越逼真，越有立體感，不過再次強調一點，我們畫的像素圖并不追求逼真。PS。如果不懂陰影怎么畫，可以百度“三大面五大調”】

七、抖動網點

「顏色維持」是像素藝術家必須多加考慮的事情。有一種方法能讓你使用較少的顏色得到更多的陰影層次，這種方法叫做「抖動網點」。類似傳統繪畫中的「交叉影線」和「點畫」，把兩種顏色交錯起來，為的就是得到它們的中間色。

簡單例子

這是一個簡單例子，它運用「抖動網點（dithering）」技巧，用兩個顏色制作出了4種不同的明暗：

高級例子

對比這兩張圖片，上面那張圖片是用PS的漸變工具做的，下面那張圖片用3種顏色通過「抖動網點」做出的，注意創建中間色的不同模式，嘗試使用不同的模式來創建新的紋理。

應用

「抖動網點」能給你的「精靈」帶來復古的感覺。因為許多古老的視頻游戲嚴重依賴「抖動網點」，靠「抖動網點」來充分利用它們有限的色板。（看看MD上使用「抖動網點」的諸多例子）。我不常用這個技巧，但出于學習的目的，我將它應用在我們的「精靈」上（可能過度使用了）。

你能遵照自己的想法使用「抖動網點」。但老實說，我很少見到能將這個技術運用好的人。

*【這個也是常見的技巧，抖動不僅可以使少顏色體現出多種明暗效果，還能使物體更有質感，比如這張圖，運用抖動的磚塊看起來更有質感。

這兩張對比就更明顯了，第一張看起來非常光滑圓潤，后一個就像飽經滄桑的堅果墻或者礦石之類的，用不用「抖動網點」取決與你想表現什么樣的材質，不過我勸你謹慎使用，抖動用多了會使畫面變臟，清新風格的游戲一般不用「抖動網點」。具體操作可以看：手把手教你畫像素（二）】*

八、調整輪廓線

調整輪廓線，也叫「選擇輸出」，是一種描繪輪廓的方式。我們使用一種更接近「精靈」原色的顏色來繪制輪廓，而不是全使用黑色。此外，我們改變「精靈」邊緣輪廓線的亮度，讓光源決定我們該使用什么顏色。

直到這一步，我們一直保持著輪廓線是黑色的。這沒有什么不好的，真的，因為它很好看，而且它讓「精靈」和周圍的環境分開。但使用一直使用黑色，我們犧牲的真實性可能會超出我們預期，因為他讓「精靈」顯得更加卡通。「選擇輸出」是一種避免這現象的好方法。

【意思就是重繪一遍輪廓線，這在游戲素材繪制中是必做的，沒有哪個游戲是用黑色描邊的】

你會注意到我還使用「選擇輸出」來軟化了他的肌肉紋理。最后，這個「精靈」開始看起來像個連貫的整體而不是一堆單獨的片段了。

把這個與原來的做對比：

九、抗鋸齒

抗鋸齒的工作原理是：添加中間色到扭結的線條上，來讓線條變得平滑。例如，如果你有一條黑色的線在白色背景上，你可以在線的邊緣添加灰色的像素來使線平滑。

技巧1：平滑曲線

一般來說，你應該在線條斷裂、參差不齊的地方加上中間色來過渡。如果線條仍然看起來太不平坦，就沿著曲線的方向，再添加一個比中間色更亮的像素層。

我解釋的再好都不如讓你直接看例子，只用看下面這些圖片，你就明白我的意思了。

技巧2：圓滑駝峰

技巧3：線條減淡

應用

我們現在來對「精靈」使用抗鋸齒。請記住，如果你想要讓你的「精靈」在任何背景色上都好看，就不要在它的外緣使用抗鋸齒。否則，你會看到有一個難看的光輝圍繞著你的「精靈」，讓你的精靈看起來非常臟。

【謹慎使用抗鋸齒，特別是圖像小，像素少的圖，最好別使用，不然中間色太明顯了會讓你的「精靈」看起來朦朦朧朧的，而且經過這種抗鋸齒處理后的「精靈」是不能在所有場景通用的。每一次背景色改變，就意外著你用的抗鋸齒中間色也得跟著改變】

正如你看到的，這種效果雖然微妙，但會產生極大的不同。

為什么要手動調節？

你可能會問，為什么我們不直接使用繪圖程序里的濾鏡來讓精靈變得平滑?答案是沒有什么濾鏡能比得上我們手動調節的效果。手動調節有完全的控制權，能調節更多的顏色層次。在需要被平滑處理的區域使用任何抗鋸齒濾鏡，都會讓那個區域降低像素質量。

十、結束語

唷！到了關掉電腦來瓶冰啤酒的時候了。但不行，還差一點！最后的這部分是一個充滿熱情的業余愛好者和一個專業人士之間的區別。

退后一步，然后仔細的看看你的精靈，可能它仍然有點粗糙?；〞r間去完善它，確保所有部分都是完美的。這其實是最有趣的部分（雖然你可以已經累了）。添加細節來讓你的精靈變得更吸引人。這會是你展現技術和經驗的地方。

你 可能想知道為什么「摔跤律師」的眼睛消失了這么久，或者為什么他拿著的法院傳票是空白的。這是因為這些細節我想留到最后。也請注意我添加到他臂章上的裁剪 細節、添加到褲子上的褲門襟，還有……好吧，為什么這個男人沒有乳頭？我還調暗了他下半身的亮度，來使他的左手突出，顯得更有立體感和層次感。

你終于做完了！「摔跤律師」使用了45種顏色，大約115*150像素。現在你可以去喝啤酒了。

全過程：整個過程都很有趣。這是一個gif動畫，展示了我們的精靈不斷改進的過程。

結尾建議：

1.學習繪畫的基本原理和練習傳統工具。所有關于素描和上色的技能和知識對像素繪圖都有益處。

2.從小的「精靈」開始畫。學習像素繪畫，最難的部分在于如何用很少的像素來體現大量的細節，不要畫太大的「精靈」（這純屬浪費時間）。

3.學習你欣賞的畫家的畫法，不要害怕成為抄襲者。模仿其他人的畫法是最好的學習方式。找到自己的繪畫風格需要時間。

4.如果你沒有一個數位板，就去買一個。重復點擊鼠標沒有任何樂趣，也不會顯得你更紳士。我用的是一個小型的數位板Wacom Graphire2，它正好適合我，只占據我桌上很小的空間，而且夠便攜。你可能更喜歡大的數位板，不過買之前最好先試用下。

【用 鼠標畫其實也可以，畫小的像素圖我還覺得鼠標更好用，不過買個數位板也不貴，遲早要用得到的。Wacom Graphire2 早停產了，我現在用的是Wacom CTL-671，我認為這個是最適合新手的，不貴，大小適中，再便宜的就太小了，貴的當然壓感更好，不過我們不是美工，而且只是畫像素畫，沒必要追求太好 的裝備。680那種無線的也沒必要，用一會就得充電，還不如用連線的。PS.除了Wacom別買任何品牌的數位板，Wacom手中專利不知道多少，不是國 產能山寨的?！?/p>

5.和其他人分享你的作品然后得到反饋。說不定你會遇到一些新的極客朋友呢？

轉載于:https://www.cnblogs.com/ganeveryday/p/4790035.html

總結

以上是生活随笔為你收集整理的独立游戏人：像素风格游戏制作分享(转)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。