遊戲開發日誌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

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

--

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Silver Lining Studio 曙光工作室

Silver Lining Studio 曙光工作室

Indie Game Brand / Developer

More from Medium

NBA: On Jordan Level! Demar Derozan leads Chicago Bulls to victory in the shootout

Why you should start playing the new Digimon TCG

Make Saint St Patrick’s Day Great Again Funny Trump T Shirt

Viscerafest — Pure Boomer (Zoomer?) Shooter done right