教程信息
難度：中級
預計完成時間：1小時
正如很多古老的事物都會被再一次興起一樣，復古的遊戲也越來越受歡迎了。憑藉着強烈的復古情懷以及IOS和Andriod設備上大量的休閒類、街機風格的遊戲，復古風格的遊戲正在捲土重來。在這個教程中我將提供一些要點來幫助你創建一個復古主題的遊戲。
選擇一種復古風格
我們所說的“復古”遊戲具體指什麼呢？其實並沒有確切的定義，不過我個人認爲應該是1990年之前製作的遊戲。這包括了像Gameboy、NES（本段中括號裏的都是譯者注：俗稱紅白機，簡單的說就是小霸王那種啦）、Atari 2600（雅達利2600，問了下度娘，說這貨是鼻祖級別的）和Commodore 64（度娘說這貨是款家用電腦，不清楚跟遊戲機有啥關係，知道的童鞋幫忙科普下）等遊戲機上的遊戲，當然也包括像Pac Man（就是那個在迷宮裏吃豆子的）, Centipede（沒玩過，不知道是啥，瞭解的給科普下）以及 Space Invaders（太空侵略者，好像也叫小蜜蜂=。=好像在小霸王上玩過）這樣的經典街機遊戲。
所有這些遊戲都採用塊狀的，像素化的，位圖（或者“光柵圖”）圖像，當人們談起復古遊戲的時候往往會想起這一類型的遊戲。
光柵圖像：Pac-Man遊戲（街機），Frogger（雅達利2600），超級馬里奧兄弟（GAMEBOY）
不過，事實上早期的電子遊戲使用的是矢量圖形。像Battlezone, Asteroids 和Tempest這些遊戲，最終渲染出來的圖像是明亮發光的線條，而不是塊狀的像素。
矢量圖像Battlezone (街機),Tempest (街機), MineStorm (Vectrex)
另一種我們這些“老人家”玩過的遊戲類型是簡單的手持遊戲，它有一個單色的LCD顯示屏，遊戲的機制非常簡單。
LCD圖像： Donkey Kong Jr. (Game& Watch，據說是任天堂一款便攜式遊戲機，百度下就知道了),Mario’s Cement Factory (Game & Watch)
在這個教程中我們討論的是相對更受歡迎的光柵圖像遊戲，這裏提到其他類型的遊戲是因爲它們並不多見，我認爲遊戲設計者完全有能力做出一些很酷的這些類型的遊戲。
創建一個調色板
要創建一個令人信服的復古遊戲，你就得使用有限的幾種顏色。
復古的遊戲機只能顯示有限數量的幾種顏色，由系統決定，圖像只能顯示出黑白，灰度，以及8位或者16位的顏色。你可以從維基百科上查到特定系統確切的調色板，不過是否選擇完全與歷史上的真機顏色一模一樣這一點並不重要，只要在遊戲中保證統一的風格就行了。
儘管如今我們不會遇到像過去那樣的硬件限制了，但是在這裏把你的調色板限制爲幾種精挑細選的顏色是十分有必要的，不僅可以突出復古的感覺，同樣還可以明確遊戲的定位。來看下這兩個版本的超級馬里奧兄弟的調色板例子：
顏色相差如此之大，你甚至可以僅從色樣就分辨出兩個遊戲。
在ColourLovers.com上David Sommers有一個很棒的經典遊戲調色板集合。
具體你所選擇的顏色要取決於遊戲的主題和氣氛，只要你肯花時間去挑選出一套合適的顏色，那麼你的遊戲就會有一種經典之作的感覺。來看下這些現代作品：
by Adam Atomic的Canabalt , ShaunInman的TheLast Rocket , Polytron的Fez
如果你在挑選合適的顏色的時候遇到了問題，那麼就來看看Tyler Seitz的這一篇Pickinga Color Palette for Your Game’s Artwork（爲你遊戲的美術挑選一個調色板）非常強大的教程吧。
選擇一個像素的尺寸
辨別復古的光柵遊戲最簡單的方式就是它們粗大的像素點，在那個時代，屏幕分辨率比現在要低得多。在當今高清屏幕和Retina顯示屏的世界中，設備上的物理像素是很難看到的——根本得不到復古的塊狀外觀。
在這個例子中，角色圖像的每一個像素在屏幕上都由四個物理像素來顯示
考慮到這一點，我們需要使用多個物理像素來顯示遊戲圖像中每一個可見的像素。
你可以根據想要得到的外觀的塊狀程度來決定適合你遊戲的比例，通常情況下，放大到正常狀態下的兩倍到三倍可以得到比較理想的效果。切記，放大的越多，在屏幕上顯示的東西就越少。
我建議最好讓你的遊戲引擎來做像素縮放，這樣的話，所以的資源和文字都可以畫成100%（小圖）的，遊戲只需要簡單地將整個畫布放大到最終的大小就可以了。當然你也可以把資源畫成大像素的，但是這樣會增加文件的大小以及加載時間，同時也會影響遊戲性能。
不一致的像素尺寸看上去很不協調
如果手動縮放你的資源，會造成像素尺寸不一致的問題，在上面的例子中，注意到遊戲名稱中的像素與“Play Now”按鈕中文本中的小像素相比顯得很大，同樣，角色看上去比他的鑽石以及地面塊狀化更明顯。這些都只是細微的差別，但它們合在一起就使得整個遊戲的畫面效果下降了。
關於這一點，NevenMrgan（The Incident遊戲的製作者）在他的博客裏談到了更多。
繪製像素畫
創建好看的像素畫是非常具有挑戰性的，它需要大量的實踐，是一個很長的話題，這篇教程里根本無法完全覆蓋到，這裏有一些鏈接，可以幫助你入門：
繪圖和動畫工具
很多人都使用像Photoshop，Gimp，甚至是 MS Paint等常規的圖像軟件來繪製像素畫。
我發現如果使用Photoshop，那麼在開始給角色做動畫以及排列無縫平鋪圖時會令人感到非常沮喪。
因此，我開發了一個工具Pickle來幫助補充像實時動畫預覽、無縫平鋪預覽、地形平鋪預覽傳統工具所缺少的功能。
Pickle功能有限，不一定能滿足所有人的需求，不過幸運的是還有很多類似的應用程序，比如Pyxel Edit，ASEPRITE以及GraphicsGale等。
教程
網上有很多像素畫的教程，這裏有些曾經對我幫助很大的：
· The Pixel ArtTutorial from the Pixel Joint Forum Pixel Joint論壇上的像素畫教程
· Derek Yu’s Pixel Tutorial Derek Yu的像素教程
· PhotonStorm’s 16×16 Pixel Art Tutorial PhotonStorm的16×16像素畫教程
角色設計
使用lo-res（譯者目測是低分辨率的意思）圖像設計出生動的角色是非常有難度的一件事，如何才能在只有這麼少的像素和顏色的條件下繪製出足夠的細節來創建一個獨特的角色。
跟一般繪製像素畫一樣，角色設計需要巨大的耐心以及大量的實踐，我們可以從經典的遊戲角色中借鑑一些有用的方面。
從限制中尋找有利條件
來看看我們的盆友馬里奧，注意看他是如何用這麼少的像素來繪製一個可辨認的人物角色的。三種顏色，沒有外輪廓，沒有陰影，你怎樣才能在這些限制條件下畫出一張臉呢？看下繪製馬里奧鬍子的這些像素，它們同樣也被用來作爲他鼻子和嘴巴的邊界。
而在這種級別的細節度來繪製馬里奧的手臂，並且要跟身體有所區分而不能讓他的身體看上去是一小團亂七八糟的東西同樣也是很困難的，看到他的衣服的線條是如何將他的手臂跟身體的其他部位區分開的，天才啊！
在這個案例中，給角色添加特殊的物理屬性（面部的毛髮和服裝）確實可以把繪製人物這個工作變得簡單，即使圖像有限制條件存在。是這些限制本身成就了人物設計！
抽象化
另一個解決圖像所帶來的限制的方法是抽象化，如果對於人物的可辨認度要求不高，那爲什麼非要爲繪製一個可辨別的人物角色而煩惱呢？看看Pac-Man吧，他並非是你所認知的東西，他只是一個帶有嘴巴的黃色團狀體。
儘管Pac-Man幾乎沒有什麼物理屬性，但他確實是一個值得被銘記的角色。他的人物性格是從遊戲中來體現的——在迷宮中移動的方式，他的音效以及遇到敵人的反應。
誰說過你的遊戲中一定要有一個人物角色？爲什麼不做出下一個Pac-Man，Q*bert，或者 Qix呢？
菜單和得分文本
在創建你的標題畫面，遊戲菜單以及一些其他的文本元素，比如得分等的圖像時需要與你所有的圖像資源保持統一的風格，這就意味着要使用同一個調色板，同樣的像素尺寸和美術風格。
Hoefler和Frere-Jones的GothamBold(帶消除鋸齒)
大部分的字體顯示在屏幕上時都會消除鋸齒（平滑處理），這就意味着當我們把它們放大來適應我們的像素尺寸的時候，會在字母的邊緣看到很多噪點。並且也是不符合我們要創造的美感的，它柔和、模糊的，而不是我們所希望的棱角分明的塊狀。
Gotham Bold不帶消除鋸齒
因此，我們要顯示的字體應該是不帶消除鋸齒的，但是如果只是簡單地把一個字體不做平滑處理顯示出來是會很難看的。它們本來就不具有這樣的用途，看到它在100%尺寸時是有多麼不便於閱讀了嗎？當我們把它放大的時候，可以看到更多遊離的像素，並且分佈很不均勻。
Atomic Media的BionikaBlack
答案就是使用本身就不帶消除鋸齒的字體，它們會比較方便閱讀，尺寸小的時候也不會不清晰，而且在放大之後會有很明顯的復古外觀。
我最喜歡的一些像素字體是由Atomic Media的Matthew Bardram製作的。
使用像素字體的時候需要注意一點，每一種字體都是在特定的尺寸下才能正常顯示的，所以你得確保在這個特定的尺寸或者這個特定尺寸的整數倍下使用，比如說，你使用的是一個10pt的字體，那麼它在20或者30pt的時候正常顯示，但在此之間是不能正常顯示的。
遊戲機制
考慮下，在你當前的美術風格下什麼樣的遊戲機制是最合理的。選擇一種簡單的，經典的機制可以讓玩家進入一種復古的環境。比較經典的一些遊戲機制有太空射擊（Asteroids小行星， Space Invaders太空侵略者），platformer（Super Mario Bros超級馬里奧兄弟，Donkey Kong大金剛），冒險類遊戲（Adventure，Zelda）。
切記，在限定的美術風格下你是很難將複雜的信息傳遞給玩家的，因此就這一點來說一個簡單遊戲機制會帶來極大的好處。
你的遊戲可以簡單到何種程度？能否設計一個只是用一個按鍵來完成全部控制的遊戲？一鍵控制的遊戲在觸摸設備上是非常合適的，因爲玩家只需要把觸摸屏幕而不需要擔心會碰到非觸摸按鈕的區域。
很多巨長的跑酷風格遊戲都使用一鍵控制的方式（比如Canabalt，Jetpack Joyride，Tiny Wings），你能想到其他風格的同樣使用一鍵控制的遊戲嗎？
失真效果
如果你在計算機上的模擬器中玩過你很喜歡的舊式街機遊戲，那麼你一定會發現這感覺並不是完全一樣的，相比之下，計算機顯示器也有點太清晰了吧，不像街機顯示器或者小時候那種老式的CRT電視機那樣看上去模糊，抖動，扭曲。
有人可能會覺得這是好事，我們不需要再去忍受過去那個年代裏的失真度了，但給一個復古風格的遊戲重新添加一些模糊效果會更有意思。
以下是一些可以模擬出老式CRT屏幕的方法實例：
Scan Lines（掃描線）：你可以使用一個很細的，間距較小的水平白線條靜態圖像來模擬CRT顯示器上的掃描線。只要把它們放在遊戲的最上層，調整下不透明度和混合模式，使其達到你想要的樣式和強度。
Noise（噪點）：高斯噪點可以給你的遊戲一個不錯的質感，理想狀態下，噪點是會運動的，如果大量連續的噪點會對遊戲性能造成影響的話，那麼用一個靜態圖像效果其實也足夠好了。
Blur（模糊）：一個小數值的模糊可以給你的圖像添加一些柔和度，不過不要太大，你至少要能看到這些像素。
Color Fringing（彩色鑲邊）：我最喜歡的一種老式效果就是添加一點點RGB彩色鑲邊，你可以將遊戲畫布分離到獨立的紅，綠，藍通道，並且移動一點點，使得他們稍稍不對齊，這個效果在運動的時候真的是非常棒的，但也會給處理器增加很大的負擔，因此使用的時候要有限度。在另外一個教程中，我將展示如何使用AS3實現這個效果：Createa Retro CRT Distortion Effect Using RGB Shifting（移動RGB來創建一個復古CRT失真效果）。
Combination（組合）：把幾種效果合起來會帶來最大的樂趣！
你還可以添加一個上下運動的橫條來模擬有些小故障的CRT顯示器。
Flash遊戲Cronus X在菜單變換的過程中就很好地實現了很多這樣的功能，如果你擔心這些效果會對遊戲性能造成不良影響，那麼這會是一個不錯的解決方案。
創新
不要被老式遊戲的這些約束所束縛，能在遊戲中享受到“復古”的感覺帶來的樂趣比完全還原歷史上那些遊戲來得更重要。
儘量不要去嘗試還原那些經典的space-shooter（太空射擊）或者platformer（平臺）遊戲，加入一些創新的元素，可以讓你的遊戲顯得與衆不同，把復古的美感作爲一個起點，不斷地往裏面添加你自己獨特的風格和元素來創造一個全新的遊戲。再融入些現代感的音樂，音效，或者元素（像粒子特效），經典的街機遊戲中會更富樂趣。
融入了令人眼花繚亂的現代矢量風格的街機遊戲GeometryWars，建立在花哨的背景圖形之上，配上現代電子音樂的經典街機遊戲SpaceInvaders Extreme，以及可以建立3D世界的經典2D像素畫平臺遊戲Fez都是這方面的優秀案例。
祝你們遊戲製作愉快！
到這裏就要結束了，祝你們好運！在評論裏給我個鏈接讓我看看你們所做的，我很期待能看到你們的復古遊戲作品！