嗨大家好,我們是SIGONO的美術設計團隊,
龍脈常歌作為一款著重劇情與敘事的遊戲,在遊戲中的關鍵劇情等時間點會出現遊戲插圖來協助營造沈浸感、推動劇情。
閱讀本文,你會學到插畫設計師如何與團隊協作,製作出栩栩如生的遊戲插畫!
事情是這樣開始的…
製作人:(丟)
ME:這個有17MB、厚達兩百頁、有一堆字的文件是….
製作人:這是劇本初稿,作畫前要全部看過一遍喔。
ME:😐
事前準備:閱讀劇本
為了做到準確傳達遊戲氛圍,事前研讀劇本是必要的。
除了台詞之外,場景的大致外觀、場景配置、情境與角色情緒等在劇本裡都有標注。
以故事中,女配角駕駛太空船「紅樓」,接走眾人的這一張插圖為例,它在劇本上的描述是這樣的:
繪製草圖
這邊描寫的是太空船第一次在男主眾人前登場時的景象,想營造出一種在巨大的風暴與灰塵後看清來者的視角,所以一開始採用了仰視角構圖。
製作人:…
ME:好,我會測試效果
製作人:我什麼都還沒說啊XD
接下來我們要進入一個團隊成員們都很熟悉的環節
原型測試
是的!有了草圖之後,我們就可以馬上放進遊戲引擎中,與台詞、頭像、遊戲流程、音樂等串接在一起測試效果。這時候,所有的素材都還是很粗糙的草案,但經過整合測試之後,可以早期發現許多在完成之前需要改進的地方,並立刻進行修正。
這張草稿我們測試後發現以下幾個缺點:
- 只能看到眾角色的後腦,無法呈現逃亡的慌亂情緒與張力
- 仰望的視角與前一幕遊戲視角有些類似,運鏡顯得單調
經過討論後決定調整構圖,變成這樣:
我們把構圖改成從菈米亞的視點俯瞰停機坪,這麼做有以下好處:
- 能清楚看到逃亡的三人的身影與表情,彰顯落難、弱勢的感覺
- 鏡頭上從遊戲的仰望轉換到俯瞰視角,視覺上更加豐富
正式完稿
好的,上一個草稿我們同樣在引擎中進行確認,一切看似都沒問後馬上開始進行完稿:
等等,好像哪裡不對!
由於進行測試的插圖還是黑白草稿,所以千萬別忘了參考模擬圖與測試場景的色彩,對整體顏色進行調整。色調與光線必須要與關卡有連貫性,才能讓玩家更能夠帶入整體的氛圍之中,簡單的說就是要「連戲」。
比對概念圖之後發現整體火光的亮度不足,因此在各處加了一些火焰的環境光。
到這邊,就算完成了吧?
製作人:插圖如果動起來,一定更代入吧。
ME:嗯,圖層如果分清楚,動起來會蠻漂亮的
製作人:妳都這麼說了,應該都有整理吧?
ME:… 🙂
製作人:…你有好好整理吧?
ME:…… 🙂
於是乎,團隊還有下一個階段要進行
為插圖加上動態效果
圖層管理
圖層管理在協作上是非常重要的一環,因為插圖並不是畫完就完成了,後續可能會經過各種調整、再利用、交接,沒有經過整理的話這些過程將會變得非常困難重重。
錯位(Parallax)
錯位是遊戲開發很常用的一個技巧,簡單的說就是利用不同層次的捲動速度差異營造出遠近的錯覺,進而形塑空間的立體感。首先我們將插圖分為三層:
- 前景:菈米亞,捲動速度快
- 中景:艾妲,捲動速度中等
- 遠景:李莫&大魁,捲動速度慢
接著只要把各層設定好遠近距離的參數,就能透過我們自家開發的工具自動套用事先設計好的公式,呈現出各種不同的視差效果。
\最後再加上特效就大功告成啦/
插圖在繪製的時候會先將煙塵、燈光等等特效分開繪製,最後再由3D美術在遊戲引擎中製作出更有動感的特殊效果,讓畫面更加生動。
附帶一提,相信眼尖的玩家應該有發現遊戲中的部分插圖角色的眼睛是會閃動的。這些其實也是特效的一部分。
如果拿掉特效的話就會變成這樣
還有這樣
嗯,總之謝謝大家的觀賞,看了上述的介紹相信你會發現,要完成遊戲中的插圖不只是畫出一張美麗的圖片就完成了,它同時也包括了:
- 理解劇本並反覆在遊戲中測試,使其融入遊戲情境與氛圍
- 確保圖片符合規格,能順利交棒給其他夥伴增添更多效果
本文由SIGONO的美術設計團隊多人共同撰寫。對於插畫有興趣的話,你還可以到DeviantArt、ArtStation看看好作品;關於錯位(Parallax)想瞭解更多的話,可以參考以下影片:
關於《 OPUS:龍脈常歌 》
一個結合太空探索與冒險解謎的敘事遊戲。未知的小行星「龍脈」由於其礦藏蘊藏的巨大能量,成為眾人爭奪的目標,能唱出龍脈之歌的少女 — — 艾妲,將與立志探索龍脈的少年一同冒險,揭露宇宙的遠古神話。
如果有興趣,歡迎看看我們的遊戲:
https://store.steampowered.com/app/1504500/OPUS/
SIGONO講堂
關於遊戲開發還想了解更多嗎?歡迎閱讀其他 SIGONO 講堂的文章:
👉 閱讀《OPUS:龍脈常歌》遊戲美術開發 — 角色設計
👉 閱讀《OPUS:龍脈常歌》遊戲開發精華 — 關卡設計
👉 閱讀《OPUS:龍脈常歌》遊戲美術開發 — 機械設計
謝謝你閱讀到這裡,如果有任何疑惑或想法,歡迎留言告訴我們!
如果你願意給我們一點愛與鼓勵,請拍手 1–10 下👏
如果這篇文章有幫助到你,請拍手 20–30 下👏👏
如果想看我們分享更多,請拍好拍滿 50 個熱情的拍手讓我們知道👏👏👏
如果想持續追蹤我們的最新文章,歡迎追蹤 SIGONO 的 Medium