Spriters：新希望。

在過去的十年中，由於新興技術的出現，電玩遊戲呈現爆炸性成長。一開始，所有遊戲擁有的只有很棒的遊戲玩法和像素。但在過去的幾年裡，3D 遊戲變得更加主導，而現在隨著 HTML5 的興起，繪圖師（spriters）可能會再次推動遊戲的像素！

對於開發人員來說，HTML5 最吸引人的一點是它可以跨多個平台運行——從互聯網到手持設備。隨之而來的是藝術上的一些限制。然而，偏好經典方法的藝術家會發現這個平台為他們提供了蓬勃發展的途徑，即透過像素藝術（pixel art）。

對於藝術家來說，HTML5 最酷的一點是開發更多像素藝術遊戲的可能性。這類遊戲具有一種獨特的魅力。當您查看像素遊戲中的圖像時，您會看到構建塊——構成美麗構圖的骨骼。我非常尊重那些能以少勝多（make more with less）的藝術家。當您觀看大型高解析度遊戲時，很容易忘記構成圖像的數千個像素。像素藝術家則是從零開始構建圖像。要實現這一目標，需要計劃、深思熟慮，以及非常強烈的色彩理論意識。

像素推動（pixel pushing）的部分樂趣在於完成背景或角色時所獲得的成就感。這讓人想起完成一套樂高積木：所有的小零件都安裝在正確的位置，創造出又大又酷的東西。對於尚未嘗試過像素藝術的藝術家，我強烈推薦將其作為一種練習。它能磨練心志（builds character）。

所以這就是讓我興奮的部分：開發一款完整製作的像素藝術遊戲的可能性。像 Pixel Joint 這樣的論壇上充斥著許多作品，簡直是在懇求被製作成長篇遊戲。您能想像一款完整的遊戲，是用這些藝術家製作「一張」圖像所花費的時間與心血來打造的嗎？！那將會是傳奇（LEGEN (wait for it) DARY）。還有這個：CanvasCycle。令人震撼。如果將這種顏色循環（color cycled）背景用於橫向捲軸冒險遊戲中，效果將會非常史詩！

最近的像素遊戲中一個很好的例子是 Sword & Sworcery。我很想看到更多這樣的新遊戲。HTML5 的跨平台便利性意味著遊戲開發的持續成長以及對像素藝術家更高需求。事實上，您可以使用 HTML5 製作一款非常出色的像素遊戲。有人可能會說像素藝術是低解析度的垃圾，但我看到的是數位點畫法（digital pointillism）以及一種否則可能會消失的美麗藝術形式。

相關： Unity Asset Store — 現成的藝術作品、工具和模板可直接放入您的 Unity 專案中.

要點

• HTML5 的跨平台觸及率是像素藝術再次蓬勃發展的最大原因——一套資源集可以在瀏覽器、手機和平板電腦上運行。
• 像素藝術並不是你不得不妥協的限制；而是一門強迫你精進構圖、色彩理論和規劃的學科。
• Canvas 元素和 CanvasCycle 等工具開啟了在 3D 管線中真正難以實現的技術（如調色板循環、程序化背景）。
• 對於小團隊來說，開發一款完整製作的像素藝術遊戲是一個可以實現的目標，而非白日夢——障礙在於工藝和時間，而非技術。
• 如果您是一位尚未嘗試過像素推動的藝術家，請將其視為一種練習。它能磨練心志。

為什麼 HTML5 改變了像素藝術家的計算方式

HTML5 的主打賣點很簡單：一次編寫，隨處運行。在幕後，主力是 <canvas> 元素，它使 JavaScript 可以直接存取可以逐幀繪製的點陣圖。對於像素藝術家來說，這是一份禮物。您不需要與紋理管線或著色器編譯器作鬥爭，而是在網格上繪製顏色矩形，這正是像素藝術最初的製作方式。

比較兩個世界：

關注點	傳統 3D 管線	HTML5 Canvas / 像素管線
資產創造	建模、UV 映射、綁定、紋理	在固定像素網格上繪製，導出精靈表 (sprite sheet)
檔案大小	大型網格和紋理	微小的 PNG 和索引調色板
縮放	取決於解析度，需要 LOD
移植	針對每個平台的建置和著色器	一個程式碼庫，多種瀏覽器和設備
藝術方向風險	容易看起來很普通	預設就具有獨特性

不過，這種權衡是真實存在的。在許多情況下，Canvas 渲染受 CPU 限制，您必須仔細考慮每幀推送多少個精靈。您還必須小心處理設備像素比率（device pixel ratios），否則您精心放置的像素在高 DPI 螢幕上會模糊成一團。解決方法是渲染到低解析度的背景畫布，並在禁用圖像平滑（image smoothing）的情況下將其放大——這是每個 HTML5 像素開發人員最終都會學習的技術。

我們的選擇： Udemy Game Development Courses — 涵盖 Unity、Unreal、C++、C# 和着色器编程的点播课程.

「以少勝多」背後的工藝

當您查看像素遊戲中的圖像時，您會看到構建塊——構成美麗構圖的骨骼。我非常尊重那些能以少勝多的藝術家。當您觀看大型高解析度遊戲時，很容易忘記構成圖像的數千個像素。像素藝術家則是從零開始構建圖像。

要實現這一目標，需要計劃、深思熟慮，以及對色彩理論有非常強烈的掌握。以下是將優秀像素藝術與雜訊區分開來的幾個實用原則：

• 限制你的調色板。 經典硬體施加了嚴格的限制——例如，NES 只能在少量同時顯示的顏色中運作。限制會迫使你選擇真正能發揮作用的顏色。
• 使用選擇性輪廓。 全黑的輪廓會使精靈（sprite）顯得扁平。彩色的、斷開的輪廓則能暗示光線與形體。
• 控制明度（Values）。 瞇起眼睛看你的精靈。如果剪影無法被辨識，再多的細節也無法挽救它。
• 尊重網格。 手動消除鋸齒（Anti-aliasing）、一次處理一個像素是一項技能——但知道何時不這樣做同樣重要。
• 以圖塊（Tiles）思考。 由可重複使用的圖塊建構的背景生產成本更低，且更容易製作動畫。

這就是為什麼像素藝術獎勵規劃。你無法將薄弱的構圖隱藏在高多邊形數後面。每個像素都是一個決定，而觀看者能看到所有這些決定。

色彩循環：被遺忘的超級力量

還有這個：CanvasCycle。令人震撼。色彩循環的背景如果用於橫向捲軸冒險遊戲中將會非常史詩！

對於沒見過的人：色彩循環（color cycling）是一種根本不移動任何像素的技術。相反地，你旋轉索引調色板中的條目，圖像就會呈現動畫效果——水流動、火把閃爍、天空變幻。它是 8 位元和 16 位元時代的主流技術，而且運行成本極低，因為你只需重寫一個小調色板，而不是重新繪製整個場景。

CanvasCycle 透過將經典的色彩循環藝術作品渲染到 HTML5 畫布中，在網路上復興了這一技術。對於橫向捲軸冒險遊戲來說，其吸引力顯而易見：生動且有呼吸感的背景，與手動製作每一幀動畫相比，幾乎不需要 CPU 成本。如果你正在開發 HTML5 遊戲，且想要在不影響效能的情況下營造氛圍，調色板循環是工具箱中最被低估的工具之一。

相關： Amazon: Game Dev Books & Gear — 遊戲程式設計書籍、機械式鍵盤、顯示器和開發台硬件.

從一張圖片到一個完整的遊戲

所以這就是讓我興奮的部分：開發一款完整製作的像素藝術遊戲的可能性。像 Pixel Joint 這樣的論壇充滿了極其精美的作品，簡直是在懇求被製成長篇遊戲。你能想像一款完整的遊戲，是用這些藝術家製作「一張」圖像所花費的時間與心血來打造的嗎？！那將會是傳奇（等一下）級的（LEGEN-DARY）。

華麗的靜態圖與正式發行的遊戲之間的差距，是大多數專案夭折的地方，而誠實面對原因是很重要的：

• 單個主角精靈可能需要數小時。一套完整的動畫則需要數天。 待機、行走、攻擊、受傷、死亡——每一個都是獨立的難題。
• 背景數量倍增。 橫向捲軸遊戲需要視差層（parallax layers）、過渡效果以及能無縫拼接的圖塊。
• UI 也是藝術。 選單、字體和圖標都需要同樣的用心，而像素字體本身就是一門專業。
• 一致性是最困難的部分。 在數百個資產中保持統一的風格，既是管理問題，也是藝術問題。

好消息是 HTML5 降低了發行的「技術」門檻。你不需要主機開發套件或發行商。你只需要一個畫布、一個遊戲迴圈（game loop）以及完成作品的自律。這就是為什麼像素藝術社群和 HTML5 社群如此契合——兩者都獎勵那些喜歡從零開始構建事物的人。

如果您正在購物： Construct 3 — 基于浏览器的无代码 HTML5 引擎，可导出到 Web、移动设备和桌面.

學習 Sword & Sworcery

最近像素遊戲的一個絕佳例子是 Sword & Sworcery。我很想看到更多這樣的新遊戲。它之所以具有啟發性，不僅在於藝術，還在於藝術、音樂和節奏如何協同運作。像素美學並非裝飾，而是整體的氛圍。它證明了一個具有強烈視覺識別的小團隊，可以做出感覺比預算規模更大的作品。

如果你在研究它，請觀察它如何使用有限的調色板、如何讓場景留白，以及它如何將螢幕視為一個構圖而非進入 3D 空間的視窗。這些經驗教訓可以運用到任何 HTML5 專案中。

給有抱負的精靈繪製者的實用建議

對於還沒嘗試過像素藝術的藝術家，我強烈推薦將其作為一種練習。它能磨練心志。以下是幾個能讓你真正堅持下去的入門方法：

• 重新創作一些小東西。 選擇一個你喜歡的精靈並逐像素地重建它。你從模仿中學到的東西比從閱讀中更多。
• 在固定尺寸下工作。 從 16×16 或 32×32 的畫布開始，拒絕透過放大來作弊。
• 研究調色板。 像 Lospec 這樣的工具提供了社群調色板，你可以直接將其載入到 Aseprite, GraphicsGale 或 Piskel 中。
• 儘早嘗試動畫。 即使是兩幀的彈跳，也能比靜態傑作讓你學到更多關於可讀性的知識。
• 發布作品並接受批評。 像 Pixel Joint 和像素藝術的 subreddits 這樣的社群會告訴你真相，而這正是你所需要的。

像素推敲（pixel pushing）的部分樂趣在於完成背景或角色時獲得的成就感。這讓人想起完成一套樂高積木：所有的小零件都安裝在正確的位置，創造出宏大且酷炫的東西。

未來之路

HTML5 的跨平台便利性意味著遊戲開發的持續成長，以及對像素藝術家（pixel artists）更高的需求。事實上，您可以使用 HTML5 製作一款非常出色的像素遊戲。有人可能會說像素藝術是低解析度的垃圾，但我看見的是數位點畫法（digital pointillism）以及一種若非如此可能就已消逝的美麗藝術形式。

技術不再是瓶頸。瀏覽器速度很快，canvas 功能強大，而且工具——從 Aseprite 到 Tiled，再到基於它們構建的遊戲引擎——都已成熟。剩下的就是始終重要的同一件事：工藝、耐心，以及願意一次放置一個像素，直到美麗的事物出現的毅力。

乾杯！

Jacob Weberg 是 Massively Fun 的數位藝術家。他喜歡開發遊戲、玩遊戲和 Easy Cheese。

常見問題

什麼是 “spriter”？

Spriter 是創建「精靈」（sprites）的藝術家——精靈是用於遊戲中角色、物件和效果的小型網格對齊 2D 圖像。這個術語來自遊戲開發的經典時代，當時精靈是主機可以在螢幕上獨立移動的硬體物件。如今，這個詞廣泛用於任何從事遊戲像素藝術的人。

為什麼 HTML5 如此適合像素藝術遊戲？

HTML5 的 canvas 元素允許 JavaScript 直接繪製點陣圖，這與像素藝術的製作方式自然契合。再加上單一程式碼庫即可跨瀏覽器、手機和平板電腦運行，這意味著小團隊可以在所有平台發布像素遊戲，而無需針對每個平台重新構建。較小的資源大小也意味著網頁載入時間較快。

什麼是顏色循環（color cycling），為什麼它很重要？

顏色循環透過輪轉索引調色盤中的項目而非移動像素來使圖像產生動畫。這在 8 位元和 16 位元遊戲的水、火和天空表現中很常見，且運行成本極低。CanvasCycle 在 HTML5 canvas 中示範了這項技術，對於營造氛圍的橫向捲軸背景來說，這是一個很棒的技巧。

我需要昂貴的軟體來製作像素藝術嗎？

不需要。像 Piskel、GraphicsGale 和 Aseprite（付費但價格低廉）等免費或低成本工具，已涵蓋了大多數 spriter 所需的一切。比工具更重要的是您對色彩、構圖和克制感的掌握。許多著名的像素遊戲都是使用比現代 3D 套件簡單得多的工具製作的。

如何在高解析度螢幕上保持像素藝術清晰？

將遊戲渲染到低解析度的背景畫布（backing canvas）上，然後在關閉影像平滑（image smoothing）的情況下放大該畫布以適應顯示器。這能保留銳利的像素邊緣而非使其模糊。正確處理裝置像素比（device pixel ratio）是每個 HTML5 像素開發人員遇到的首個技術障礙之一。

像素藝術只是一種懷舊之情嗎？

一點也不。像素藝術是一種刻意的美學選擇，具有真正的優勢：它在小尺寸下仍具可讀性，製作與發布成本低，且在充滿外觀相似 3D 遊戲的市場中極具辨識度。許多現代遊戲選擇它出於藝術原因，而非受限於此。正如我之前所說，這是數位點畫法。