遊戲開發日誌3|《傾聽畫語 Behind the Frame》程式設計:模擬油畫筆觸的二三事

由曙光工作室(Silver Lining Studio)開發的《傾聽畫語 Behind the Frame》,是一款關於繪畫、拼湊和修補的敘事解謎遊戲。 預計將在2021年發行,於 Steam 平台推出 PC 版,以及在 Google Play Store 和 Apple Store 推出手機版。

本篇文章將從程式設計觀點出發,帶大家討論遊戲中油畫筆觸的模擬,以及實際設定過程要如何完成筆刷,希望提供給開發者一些遊戲製作參考。

畫家繪畫操作的還原

作為一款以畫家為主角的遊戲,如果在遊戲中沒有機會體驗畫圖,那是不是太無趣了呢?

為了讓玩家能夠沈浸體驗在角色設定的「畫家」身份,可以體驗到近似繪畫的操作,團隊每一位成員都絞盡腦汁,希望將遊戲玩法和解謎結合「繪畫」元素在一起,於是在遊戲中我們設計了三種與畫家有關的解謎操作,分別是「油畫繪製」、「素描」和「塗色修補」,其中與故事主軸最為相關的繪畫解謎,是一幅主角為了參展而每天日以繼夜努力繪製的油畫作品。

接下來就一步一步帶大家來看看程式是如何還原繪製油畫的效果!

繪畫效果「填色」的重要性

首先,在討論如何製作效果前,先和大家說明油畫繪製的操作在《傾聽畫語》中,希望帶給大家什麼樣的體驗?

這個繪畫謎題關卡的設計重點,是要讓玩家在 360 環景中四處尋找線索,並在解開線索後,找出完成畫作所需要的顏料,並在畫布的各區塊填上正確的顏色,進而幫助主角完成參展的畫作。

《傾聽畫語》開發中遊戲畫面

也因為如此的玩法設計與其串連整個遊戲的重要性,我們希望玩家可以同時體驗到油畫筆觸在畫布上帶來的渲染效果、感受顏料塗抹在畫布上的表現,藉此引導玩家將自己帶入畫家的身份,享受完成作品繪製的過程。那麼「填色渲染」要怎麼讓它更為豐富?首先需要考量的便是「油畫的筆觸」。

油畫筆觸的誕生

關於「塗色」體驗,在許多遊戲中不算少見,但在遊戲中能夠有繪製油畫體驗的遊戲相對來說卻很少,更不用說是要模仿真實筆刷的呈現,因為光是各種筆毛的差異,以及在畫布所留下的隨機不同的筆觸,讓我們經歷了很多的嘗試與設計。同時,我們不僅是要還原隨機筆觸,更要讓整體符合遊戲美術的賽璐璐風格,因此,最後我們決定製作「筆刷設定工具」,讓設定繪圖筆刷時可以做到更為細緻。

那麼「筆刷設定工具」是什麼呢?

想必大家和身為程式我一樣,一開始對於電腦繪圖時不可或缺的筆刷設定可以說是一無所知。但在和團隊中美術夥伴經過多次討論後,最後才理解並且發現了一些有關製作筆刷時不可或缺的設定。

首先,對於筆刷來說,有兩個相當重要的紋理貼圖(texture)存在。

第一個是決定形狀,選擇帶透明度的筆頭貼圖,另一個是決定畫出來樣式的拼貼貼圖(tile)。調整筆刷就是將兩者組合,將筆頭貼圖藉由 Alpha Clip 來獲得形狀,再隨機取樣拼貼貼圖的顯示位置,將處理完的圖樣貼到繪製出來的位置上,我們將這兩者組合後,就可以進行簡單的圖樣繪製了。

不過當我們完成了筆刷效果,接下來還會有個問題需要解決,那就是如果遊戲操作時直接以手指觸控或是滑鼠點擊,畫面顯示的繪製圖樣的位置,會讓筆刷繪畫的點非常分散無法連貫。

以滑鼠位置直接繪製筆刷呈現分散

所以為了讓筆刷是連續效果,我們使用內插函數,將取樣到的滑鼠位置(點)之間補上中間點,以下是導入內插函數之後的效果。

導入內差函數後筆刷效果

綜合上述的兩種做法,就可以做出最簡單的筆刷效果,並且因為有對拼貼貼圖(tile)隨機取樣所帶來的隨機性,所以繪製出來的每一筆都會有所不同,增添繪製效果的變化性和多樣性!除此之外,還可以將繪製圖樣加上隨機的旋轉,讓每次筆刷出現的圖片都會旋轉變化角度,或是隨著移動速度讓筆頭圖片的有不同大小變化等等的效果,可以自行加上各種不同的變化後,就可以讓油畫筆刷的樣式不再單調而豐富。

《傾聽畫語》開發中遊戲畫面

尾聲

在開發筆刷這個功能時,遇到最大的挑戰是面對了一個對程式來說,非常不熟悉的領域,多虧了美術協助理解筆刷設定的習慣,以及反覆的溝通嘗試,最終才得以模擬出油畫效果,為我們的遊戲增添沈浸體驗的要素。希望大家在閱讀完這次的開發日誌後,都可以設計出自己理想中的筆刷效果喔!

《傾聽畫語 — 最美好的景色》故事序章

一如往常,暖和的晨光伴隨著輕快的鳥鳴聲,畫家再度執起她的畫筆,只有在偶爾休息片刻時,仰望窗外的風景。

然而,如此平凡不過的日常,偶然萌生了一些小變化。迷路的小貓、同樣在作畫的鄰居老先生、泛黃的手寫紙條⋯⋯看似毫無關聯,卻又如此熟悉⋯⋯

更多資訊,歡迎至官網與社群平台:http://linktr.ee/silverlining_ww

作者介紹

程式Harrison

一個從學生時期開始不斷做遊戲的小小開發者, 不管身處哪個時代都為了做遊戲而肝。