專注旅人App(Focus Traveller)美術開發筆記。

專注旅人 Focus Traveller 在 iOS 平台上架中。下載連結請按我

專案起源

大約2020年尾左右,適逢我在日頭遊戲的專案 Carto 告一段落,團隊成員們決定休生養息一段時間,而我因為有生活費的壓力,開始煩惱這段空窗期該怎麼度過,瞬間一股中年危機的味道撲鼻而來。如果是七、八年前的自己,應該會很瀟灑的開始準備 portfolio 投履歷,然而這幾年,彈性工時的日子過慣了,回去一般職場的意願真的不高,一來是遊戲業的主流技能需求對我來說很吃力不討好,二來是高強度的職場生活,很難抽身去照顧小孩。

D的早期概念手稿
beomjin___kim的instagram

視覺風格

因為 D 和我的喜好蠻接近的,所以視覺方面基本上就是放手給我執行,一開始以他的概念手稿為起點,繪製了一些草圖:

早期風格測試(1)
早期風格測試(2)
把最初的斜坡草稿拿來重新思考
測試各種色彩氣氛
加了巨樹,感覺更有氣勢和層次感
我和友人D都喜歡這個版本
以木內達(Tatsuro Kiuchi)為關鍵字的建議搜尋
木內達朗原作
photoshop →filter →filter gallery →Cutout 效果,右邊數值稍微調整一下
分離出簡單的色塊
歸納出作品的色票

仔細分析之後,歸納出幾點結論:

  • 我腦中對這個場景映射的畫面是「愜意的夏日午後」,就像國小的暑假,每天聽著蟬鳴,不用煩惱今日是禮拜幾,打著紅白機,忘了時間的流動。藍色系的場景會是個不錯的方向,讓人感覺沈靜、專注,聯想到好天氣。
  • 地板用接近白色的米白,和藍色是對比,也像畫布一樣,角色可以畫得很鮮明,走在上面不必怕被搶掉視覺焦點。
  • 形狀盡量簡單俐落,在「扁平感」與「空間感」中抓出一個灰色地帶,剩下的交給觀者去腦補。
場景元件用到的筆刷
80%完成品

場景動態製作

整體來說較費工的部分是要在 AE 做出一個能夠無限 loop 的場景,我是用比較土炮的方式直接去key,如圖片所示,前景的樹叢是一個層級,建立成一個 comp,裡面包含 A+B+C 圖層,這時我會再複製一份成 A1+B2+C2,橫移到畫面外,然後讓六個圖層整體往左移動,直到 A1+B2+C2 和 A+B+C 在 timeline=0 的位置重合,這樣可以完成該層級的 loop。

樹叢圖例
場景製作在AE的環境
場景圖層數量
開始專注 →過場動畫 →爬山

UI製作

figma介面
UI mockup (1)
UI mock (2)
專注按紐

角色設計

角色製作也是沒有太多預設想法,初期很隨性的畫了一些 thumbnail,有比較偏電玩的、也有比較插畫風的,本來想用非常簡化的呈現方式,例如完全省略五官,但覺得有點疏離感,所以最後決定還是保留眼睛。角色風格的決策比較快,主要訴求是能無違和融入在場景中,盡量可愛、討喜。

角色風格發想
第一隻正式角色
角色在 spine 中綁骨架+調動畫
斜坡上走路的walk-cycle
專注旅人全部角色

結語

這是我第一次負責做 app 的美術,對我來說最困難的地方是視覺素材和整體 UI 怎麼配合,包括轉場、視覺引導、時間的控制、多國語言的排版問題等等,確保使用者體驗起來不會感到突兀,而且畢竟不是在遊戲引擎,所以效果呈現上必須要有所節制。

如果您喜歡這篇內容,請拍大力點讓我知道!👏 以後會考慮撥出一點時間來寫Medium喔~
也歡迎追蹤我IG:JimmyKuang | 遊戲作品:Carto | App作品:專注旅人

--

--

遊戲美術 | 台灣

Love podcasts or audiobooks? Learn on the go with our new app.

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