遊戲中的美術策略 —《Zombie Hazard》的動物殭屍有什麼設計秘訣?

Mr. Qoo

ZB00

以下為TGDF官方新聞稿:

7Quark 工作室獨立開發的 Zombie Hazard 是一款結合守塔要素的射擊遊戲,除了遊戲本身的爽快節奏外,帶有強烈美式風格的美術也相當吸睛。製作人郭秉宸也在本次講座中,分享了許多製作上的美術設定細節。

遊戲風格與基本設定

 

遊戲題材

郭秉宸表示,由於殭屍題材已經太多人做,且植物大戰殭屍等名作基本上已經成為人類殭屍形象的代表。在比較過市面上的遊戲後,最後決定以動物殭屍來塑造敵人形像,一方面題材較新穎,另一方面可愛的擬人化動物,市場接受度也比人型殭屍來的廣。

美術風格

在美術角色設計方面,採用了先以色塊突顯主角,再描線加強輪廓的手法。因為敵人形象是支撐遊戲的主軸,這樣的作法能夠省略不必要的細節,讓角色帶有很強的視覺衝擊力,因此也是現行休閒遊戲最受歡迎的風格之一。

ZB01

配色方式

遊戲的主要配色屬於明亮的暖色調,也因此在想強調的地方就能透過對比色的方式呈現,例如敵人與火光之間的強烈配色對比。

ZB02

彩度配置

彩度在遊戲中,是能有效左右玩家感受的重要因素。郭秉宸舉例,當你在線上遊戲剛開始時,新手村的裝備一定是又灰又醜,但隨著等級提升與裝備稀有度等條件,裝備的外觀也會越來越亮麗。同理也可以套用在其他方面,例如下圖中 Zombie Hazard 中的雜魚小兵與高階敵人的彩度差異。

ZB03

立體度的塑造

當遊戲只有固定場景,無法藉由畫面變化來呈現景深時,美術人員就必須運用一些小技巧提高畫面的立體感。由左下角的圖片可以看出,在加上陰影後的明顯差異。此外,遠近景的物件也能一口氣增加立體感,但要小心別讓不重要的背景物件干擾遊戲,且要考量 UI 的配置。在 Zombie Hazard 中,考量到玩家操作的方便性與畫面平衡,UI 基本上都壓在較不重要的近景城堡上。

ZB04

動畫抽格

在設計遊戲時,如 Zombie Hazard 這類休閒類遊戲常會遇到記憶體不足或檔案過大的兩難,這時縮圖與動畫抽格就是常用的小技巧。但由於 Android 系統尺寸不定,縮圖有可能會影響畫質表現,抽格或許是比較實用的方法。以 Zombie Hazard 舉例,一般的敵人行走動作需要 10 張左右的圖,但卡通形人物只要 6 張左右,有些角色最後更縮到只剩 2 張(而且走路鈍鈍的反而比較像殭屍)。

介面設計

 

版面配置

許多人或許會認為,手機遊戲市場也已經熱了一段時間,應該有各種最好的比例配置範本或規則。但郭秉宸坦承,其實沒有黃金比例這件事,原因是即使遊戲類型相同,操作、美術、玩法都會有所不同,最好還是交給使用者實測。 例如 Zombie Hazard 一開始其實是採橫向玩法,但玩家抱怨怪物來的太快且壓迫感太大,才大幅修正成直式玩法,與其苛求比例,不如讓玩家玩得開心重要。

ZB05

計劃過的規格書

所有的版面配置最好在進入美編前就已經做好完整規劃,避免在上圖後又必須回來砍掉重練,或是不知道問題出在哪裡。最好還能提早放到裝置上看看,比如平板比手機大很多,旁邊多出來的區域是按比例放大還是填上其他物件,都要考慮清楚。

ZB06

資訊的重要程度

當遊戲開發到一個階段,合作廠商或許會開始提一些建議,比如今天說角色等級要更清楚,明天說分數或金幣要更清楚,版面朝夕令改反而最後甚麼都不清楚。這時候還是乖乖進行實測,從玩家的角度來思考吧。

ZB07

給開發者的心理建設

 

最後,郭秉宸給出了幾個開發過程中的心得,當做給其他開發者的建議,尤其針對美術強的團隊:
‧你無法放棄 UX
人們可能因為遊戲很好玩,畫面醜一點也沒關係,但人們不會因為美美的介面就去玩一個無聊的遊戲。

‧很少會有人因為 UI 稱讚你
當然也有像紀念碑谷或 Cytus 這樣的特例,但絕大多數情況(包括上述兩款遊戲),人們真正喜歡上的還是遊戲體驗,UI 只是其中一環,很少會被獨立拿出來稱讚。
‧與其看聖經,不如多看好遊戲。
彷間有很多遊戲開發書籍,也不乏製作「聖經」,但絕大多數都不可靠,不如多看市面上受歡迎的好遊戲。
‧UI 設計與繪師一樣重要
郭秉宸提到,團隊中的美術常常一聽到 UI 眼神就死了,因為人人都想當大手繪師,不想每天都在搞一些小 ICON。不過他也盡力說服這些員工,繪師等工作比較偏向用抽象思考吸引玩家,UI 設計則是理性的邏輯訓練,兩者在遊戲開發上都擁有重要的地位。
‧記得要實際操做看看 UI
雖然聽起來理所當然,不過很多新手設計師做完 UI 後就直接放生介面了。一定要經過使用者實測,才會發現如按鈕不好按、是否干擾遊戲畫面、操作不順暢等問題。
‧修改是常態
遊戲很少有做完的一天,開發過程中大幅修改也是常態。即使今天遊戲本身沒甚麼問題,也可能在上市後因為系統、成本、硬體等因素需要繼續改良。

TGDF官方網站

TGDF官方臉書

在QooApp開啟