遊戲微科普：畫素的魅力

畫素風是久盛不衰的遊戲美術型別，畫素給人的第一印象是簡單，但深究起來有著大大的學問。我們熟悉的開羅系列、元氣騎士、我的世界……說來都是畫素風，但是它們美術上的差異也十分明顯。

下面一起來簡單瞭解下畫素風到底是什麼風吧！


Part 1 畫素那點事

我們經常會聽見這些和畫素有關的詞：點陣、8bit等等。

“點陣圖”就是點陣圖。

在電腦課上我們學過，向量圖無論在螢幕上放多大，它的邊緣都是清晰的；點陣圖不然，將其放大會發現一個個小方塊，那就是所謂的畫素。我們熟悉的720p、1080p，所代表的都是影象縱向畫素點數量。

嚴格地來說，再精細的點陣圖都是畫素構成的，我們所稱“畫素風”，往往是指肉眼可見有小方塊的美術風格。拼豆、十字繡、馬賽克、led燈牌……其實都是一種畫素藝術。

畫素往往代表著復古。

過去之所以採用畫素遊戲畫面，一是顯示裝置的限制，二是遊戲機記憶體大小的限制。
下面是畫素時代幾個著名的遊戲機，它們代表作的圖片都可以在本文中找到（一眼就可以認出來）：

任天堂 Game Boy 掌機（89年）為黑白液晶螢幕，僅能顯示4級灰階。代表作《俄羅斯方塊》；

任天堂紅白機 FC （83年）可以顯示48色和5灰階，同螢幕最多顯示其中13色。代表作《超級馬里奧兄弟》；

雅達利2600（77年）支援160 X 192解析度螢幕，最高128色。代表作《吃豆人》。


“位”是什麼東西：

據說減少顏色位數、使用8bit音樂可以讓遊戲作品更有畫素復古風味。

1、顏色

我們常說的8位、16位、32位指顏色深度（ n-bit colour ），也稱為位深度。位數越大意味著影象的顏色可以更加豐富和過渡自然。

1位：黑白二色；
4位：2^4=16種顏色；
16位：RGB模式下，R（紅）B（藍）各有2^5=32種取值；G（綠）有2^6=64種。
24位（真彩色）：RGB各有 2^8=256 種取值

2、音訊

8bit風音樂中的8bit，從定義上來講指音訊取樣位深。

我們現在所謂8bit風格，其實叫晶片音樂（ Chiptune ），是一種使用可程式設計音訊發生器晶片合成的電子音樂，盛行於1980年代到1990年代間，因此格外有年代感。

Part 2 畫素圖形風格

到了最喜歡的欣賞畫素遊戲藝術魅力的環節！其實並沒有嚴格的畫素風分類，參考了部分資料後，筆者按主觀感受將其大致劃分了六種。

下例手遊的截圖均來自論壇玩家/遊戲官圖，具體都有什麼遊戲先有請課代表來作答（x）

一、黑白

顧名思義，除了黑白色系沒有其他任何顏色，有灰階的存在所以並非等於1位色遊戲。聽上去簡約，但運用一定技法也可以表現相當複雜的圖案。

同為黑白，以下三者大相徑庭：




最後這個遊戲額外特別。《奧伯拉丁的迴歸》（Return of the Obra Dinn），今年3月獲得了GDCA的最佳敘事獎，IGF的最佳敘事獎和Grand Price三個獎項。最新訊息於2019年秋季登陸Switch平臺。

這張截圖看上去包含了灰階，但卻是不折不扣完全黑白的1位色遊戲——其大量運用了“抖動”技法（見 part 3 ）。

二、簡約色塊風

無描邊，用色塊來表現形狀的風格。色塊上表達立體感的陰影較少。

雖然乍看之下不那麼精緻，但能形成獨特的氛圍，在劇情遊戲中恰好能不喧兵奪主。





三、簡約卡通風

色彩鮮亮，有描邊，立體感表現不深。選擇這種風格的遊戲作品都和可愛、輕鬆、治癒聯絡在一起。（你摸著良心再說幾遍）

優秀的配色可以讓畫面豐富而不雜亂，讓人賞心悅目～

用以角色塑造的效果非常好。






四、立體風

畫素更小，在顏色處理上更為精細，人物、環境的層次很明顯，並且能在一定程度上體現出物體的材質。到這種程度的作品就已經相當成熟（從美術上來講），擁有自己的藝術特色。







五、藝術風

更注重整體的氣氛渲染，以達到特殊的藝術效果。

可以看成是把其他美術風格的東西拿來，運用到畫素本質之上。




六、等距視角風

等距視角不是畫素獨屬。《紀念碑谷》就是一款等距視角作品。

相比起最復古的橫版、縱深平面而言，等距視角太過特別了！視角自帶了立體感，用簡單顏色即可打造2.5d效果。再深入下去，就演變成了立體畫素的風格。




part 3 來學習畫素畫吧！

下文內容包含一些大佬的教學及說明，有基礎也有進階內容，點選閱讀原文可以跳轉至原帖，詳細檢視出處。

一、16*16可愛畫素圖形繪製

iLKke大佬教你畫青蛙



經過最簡單的四步（輪廓-鋪色-立體色-輪廓色），就可以繪製出下面這些可愛的小圖示，只要有畫素格，模仿起來相當容易。

二、進階畫素技法

最簡單的畫素風格是純平面的，要達成立體過渡的效果，其一是增加顏色數量，其二是運用陰影、“抖動”等技法。


抖動是將兩種顏色的畫素網狀排布，當圖片尺寸較大，畫素較多時可以使用這種手法。為了過渡自然，兩種顏色不應差距過大。

畫素藝術指南：抖動及抗鋸齒教學

抖動的功能類似於漫畫中網點承擔的部分功能。抖動不一定是規律的，不同抖動手法能產生不同效果，如上圖所示：第一張是在抖動中加入一些形狀；第二張是抖動疊加，多種顏色得以構成過渡；第三張是隨機抖動（通常不建議使用）。

關於手動抗鋸齒：因為畫素的限制，斜線的邊緣不可能是平滑的，而是呈現階梯鋸齒狀。下圖左上的鱷魚輪廓因此稍顯生硬。此時我們可以對其進行抗鋸齒處理（下圖右）。在黑色輪廓線上填上少量綠色畫素，使整體視覺效果更加柔和。


除此之外，還需要如圖左下一般，根據設定光源調整輪廓線的顏色，使影象更立體。

三、精細畫素作畫步驟

這是更復雜的作畫步驟，在單一影象上運用了豐富的色彩。

精細畫素風格的遊戲都是如此繪製，放在螢幕上看很小的圖示，拆解來看步驟其實完整複雜——畫素風並不是偷工減料圖省事，它要花費設計師大量的精力去繪製。
（對於我們而言，只要盡情欣賞大佬作品就可以了！）

slynyrd大佬精細畫素畫以及畫素動畫教學



最後，想要作畫，肯定離不開工具。現在能畫畫素畫的電腦及手機軟體相當多，這裡只推薦一個：畫素畫編輯器 Pixel Studio，可以滿足各個層次的需要。

參考：indienova公眾號文章《【遊戲開發】自學畫畫素畫#2: 二維平面畫素介紹》

作者：Sean
來源：TapTap
地址：https://mp.weixin.qq.com/s/I2bcQnJBG-gkC5PzWV35EA