跳過導覽
#MadeWithSketch

在 Sketch 中設計電玩遊戲:我們與 King Rabbit 幕後的團隊對談

「對於像 King Rabbit 這樣的益智遊戲來說,我覺得讓美術風格非常乾淨且易於理解至關重要。Sketch 可以是一個很棒的解決方案。」

雖然 Sketch 是一款功能強大的使用者介面設計工具,但我們總是對人們找到它的各種不同用途感到驚奇。因此,當我們看到一篇 Reddit 貼文,關於 King Rabbit —— 一款完全使用這款 Mac app 設計的遊戲 —— 我們感到非常好奇。

為了更深入了解 King Rabbit 的創作過程,我們與 RareSloth 的共同創辦人兼遊戲設計師 Brian Oppenlander 進行了訪談。以下是他是如何使用 Sketch 來創作遊戲中所有素材的故事。


可以跟我們談談你的設計背景嗎?

我擁有印第安納大學人機互動與設計的碩士學位,畢業後我在一家大型醫療保健軟體公司擔任使用者體驗團隊的互動設計師兩年。我從沒真正想過自己會製作遊戲。

我認識了一位程式設計師朋友 Austin,他後來成為我的事業夥伴。我們決定製作一款手機遊戲,並花了一年時間完成。之後,我們開始著手另一款遊戲,最終計畫轉型為自力更生的 RareSloth,並全職製作遊戲。

在醫療保健軟體公司,我們使用 Adobe Fireworks,後來轉而使用 Sketch。所以我至少有五年使用 Sketch 進行 UI 設計和遊戲設計的經驗。

可以說,大多數遊戲設計師都不會使用 Sketch 來創作他們的素材。是什麼讓你選擇 Sketch 作為你的工具?

使用 Sketch 絕對是非傳統的!我從未見過其他人使用 Sketch 進行遊戲開發。但正如你所看到的,這是可行的 —— 而我仍然樂在其中!

在我的第一款遊戲中,我使用 Photoshop 和繪圖板來繪製所有素材。這絕對是遊戲美術更「正常」的工具。但我仍然不認為自己是一位非常優秀的插畫家或畫家,所以我更擅長創作簡約的向量圖。

Sketch 的彈性足以讓我使用符號來創建我自己的「角色創造器」系統。

在我的第二款遊戲中,我想使用簡單的美術風格,這樣我可以更一致、更快速,並且能夠更充分發揮我的能力。我一開始使用 Illustrator 製作向量圖,但後來轉而使用 Sketch。

對於像 King Rabbit 這樣的益智遊戲來說,我覺得讓美術風格非常乾淨且易於理解至關重要。風格過於強烈的益智遊戲很快就會造成視覺上的干擾,這會影響解謎體驗,並可能讓人感到不知所措或沮喪。

與你之前用於遊戲製作的 Illustrator 相比,在 Sketch 中設計的過程有什麼不同?

Illustrator 讓我感覺很臃腫,而且匯出流程繁複又緩慢,這對我來說是個很大的痛點。我們必須非常頻繁地匯出素材。

Sketch 的畫板和匯出管理更勝一籌——能夠快速有效地管理和匯出素材非常重要。Illustrator 也會隨機當機,而我在使用 Sketch 時很少遇到這種情況。

我發現 Sketch 的素材管理和匯出流程比 Adobe 的產品好太多了。使用 Sketch 總是感覺輕巧許多,這讓工作變得更愉快、更有效率。

將整個美術流程都整合在 Sketch 中,確實簡化了許多事情。減少了上下文切換,也減少了在多個程式之間摸索的時間。

將 Sketch 設計轉換成遊戲成品的過程有多簡單?

我認為 Sketch 對於 2D 遊戲來說是一個很棒的解決方案。它有足夠的彈性,讓我可以使用「Symbol」建立自己的「角色創建器」系統。這些個別的身體部位素材都是 Symbol,它們會顯示遊戲支援的所有不同視角的角色預覽。在我們的案例中,我們想為 King Rabbit 製作大量的造型,所以需要重複使用動畫。透過使用範本和在 Sketch 中預覽,我們可以確保在匯出到動畫軟體之前,一切都已完美對齊。事實上,我們甚至不再需要打開動畫軟體——如果造型在 Sketch 中看起來不錯,就可以直接投入製作了。

A screenshot showing Sketch Artboards containing different parts of a rabbit character model

使用匯出路徑命名畫板,可以非常快速地在遊戲專案中更新素材。

A screenshot showing a Sketch Artboard with a crown graphic. The Artboard is named using the export path

我也建立了一個圖塊集創建器系統。圖塊集是像 King Rabbit 這樣的俯瞰視角 2D 遊戲的常見需求。在 Sketch 中設定一個也能即時預覽的圖塊集範本很容易,以確保每個像素都完美無瑕。我們將圖塊集範本用於地面、牆壁和路徑。

A screenshot showing how different wall blocks fit together to create patterns in the game

您也可以使用 Sketch,透過 9x9 的 Symbol 網格來設計和預覽您自己的重複紋理。這裡有一個用於泥土/石牆的紋理範例。

A screenshot showing two Sketch Artboards — one with a single tile of an illustrated dirt block, and the second showing how that single block can be tiled in a three-by-three grid

雖然可能有其他工具可以做到這些事情,但將整個美術流程整合在一個軟體中確實簡化了許多事情。減少了上下文切換,也減少了在多個程式之間摸索的時間。將所有東西(顏色樣式Symbol、UI 元素等等)都放在一個地方非常方便。

您有遇到任何問題嗎?您是如何克服這些問題的?

當檔案開始變得龐大,包含大量的 Symbol 時,速度就會開始變慢。我認為這是因為使用了大量的 Symbol 造成的,而 Sketch 67 似乎已經改善了這個問題。為了克服這個問題並減少記憶體需求,我將素材拆分到不同的頁面或檔案中——UI、角色、圖塊集、物品等等。

A screenshot showing 18 Sketch Artboards, each with a different kind of in-game item

您對 King Rabbit(和 RareSloth)的未來有什麼計劃?Sketch 會是其中的一部分嗎?

我們有很大的計劃!King Rabbit 是一個社群驅動的體驗,您可以參與其中,為其他玩家塑造遊戲體驗。我們的玩家已經建造了大約 150,000 個 King Rabbit 關卡,免費提供了幾乎無限的內容。

在下次重大更新中,我們將新增「兔子市集」,讓玩家可以直接與其他玩家買賣兔子。我們的造型與大多數遊戲不同,因為它們限量 100 個!我們認為讓造型稀有對玩家來說是件好事,因為它們可以保值。如果您厭倦了某個造型,您可以將其出售以換取高級貨幣並購買新的造型。這創造了一個動態的遊戲終局體驗,玩家可以競相收集兔子並炫耀他們的收藏。轉售兔子以獲利是玩家可以參與的另一個元遊戲。看看它的發展會很有趣。

我們甚至不再需要打開動畫軟體了——如果造型在 Sketch 中看起來不錯,就可以直接投入製作了。

我們正在測試的另一件事是讓設計師和藝術家使用 Sketch 提交他們自己的向量素材。例如,您可以創建自定義的兔子造型或圖塊集。設計師不僅可以從他們的貢獻中獲得報酬,還可以獲得社群的認可。

如果有設計師感興趣,他們可以在我們的網站上註冊以獲取角色和圖塊集模板,他們也可以將這些模板用於自己的項目。

我們確實計劃製作更多遊戲,但我們希望《國王兔子》繼續成為一個我們不斷改進和添加新內容的活躍遊戲。這是一個沙盒體驗,具有很大的擴展和發展潛力。

就我個人而言,我計劃繼續在我們的遊戲中使用 Sketch。我們有一個很好的素材庫,可以重複使用或重新利用於未來的遊戲,這將真正有助於加快開發時間。

您是否有任何技巧或建議可以與其他考慮使用 Sketch 設計遊戲的設計師分享?

从小处着手,反复迭代!掌控範圍是一項需要管理的技能……

我遵循一個擴張和收縮的過程。在擴張階段,你允許自己放鬆並發揮創意。這通常有點混亂。然後在收縮階段,你會回顧並重新組織,使事情變得更緊湊。重複此過程。

A screenshot of King Rabbit taken from someone playing the game on an iPad Pro

如果您總是處於收縮模式,您可能過度優化且過於完美主義。設計師面臨著創造像素完美作品的巨大壓力。過度優化是我在一些遊戲美術中遇到的陷阱——試圖讓一切都像素完美且一致會真正拖慢你的速度並限制你的發展。當然,這取決於您正在做的工作類型和您的限制。

我認為獨立遊戲開發者常犯的一個錯誤是追求過高的保真度,以至於一切都耗時太長,遊戲永遠無法完成。有效利用時間很重要,而 Sketch 幫助我保持簡潔。


您可以在 iOSAndroidSteam 上免費下載《國王兔子》, _以在其動畫互動的輝煌中欣賞 #MadeWithSketch 的藝術作品。它非常有趣。

您是否使用 Sketch 繪製過詳細的建築藍圖?創作動畫卡通系列?還是更令人印象深刻的東西?在 Twitter 上告訴我們——我們很樂意分享您的故事。

您可能也喜歡

免費試用 Sketch

無論您是 Sketch 新手,還是回來查看新功能,我們都能讓您在幾分鐘內設定完成並準備好開始最佳的工作流程。

免費開始使用
免費開始使用