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

KHChen 陳冠宏
10 min readJun 29, 2021

--

專注旅人是一款視覺導向、結合登山主題的蕃茄鐘 App,隨著你專注的時間越久,你的夥伴就離山頂更近一步,讓旅人帶你一起進入心流吧!

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

專案起源

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

這時候想到一個不願具名的友人 D,曾跟我提過要不要一起在下班時間做side project,那時因為 Carto 即將發售,忙得不可開交就暫時作罷,現在對我來是一道曙光,一通電話給他,很阿莎力的開啟接下來的合作。

與 D 碰面後,談到他想要製作一款自己都很喜歡用、視覺表現突出的產品,聊了幾個過去他很想要嘗試的概念,於是我們決定結合時下最流行的登山主題與番茄鐘,隨著你專注在做手邊的事,手機中的旅人也努力的往山頂邁進。

D的早期概念手稿

這個階段 D 傳給我一張 Beomjin Kim 的 作品當範例,他希望整體美術是朝向氛圍感,看久了也不會很膩的作品。

beomjin___kim的instagram

我本身沒有在用這類的生產力工具,坦白說,我對於這類的蕃茄鐘工具能否真正約束我感到懷疑(笑)。做了一些競品調查,讓我驚訝的是這類的生產力工具居然如此之多,而且當中不乏有訂閱機制、以及付費解鎖更多工具的收費方式。只能說現代人用盡各種 app 工具讓自己遠離手機,聽起來好像哪裡怪怪的。

這個專案最讓我感到興奮的,是我們在討論之中,激盪出一個日後可能會增加的新功能,再此先賣個關子,因為還不確定是否能實現它。在那之前,我們都同意先設一個較為可行的目標,就是讓使用者能經歷爬山 → 休息 → 路徑紀錄 → 爬山 → 登頂,這樣的一個簡單循環。優先順序是把這個循環先打磨到一個可以端上檯面的程度,再來想研擬後續的計劃,畢竟我們都還沒有經驗。

2021年1月專案正式起跑,我和 D 分兩路進行,我的部分先繪製關鍵場景,初期先著重在嘗試各種可能性,從中梳理出美術表現該走的方向。D先在 figma 用一些暫時的素材串接整個 app 的流程,並且列出一些 SPEC,兩邊對 app 有什麼想法就互相討論,我們希望二月初的時候美術風格能夠定調,三月初的時候能把整個功能都串接完畢。

視覺風格

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

早期風格測試(1)
早期風格測試(2)

個人覺得第二張圖的風格有點太粉嫩,所以繼續做別的嘗試。

把最初的斜坡草稿拿來重新思考

一開始的斜坡場景是我比較喜歡的一張,我試著把地面簡化一下,讓他以後有無限延伸的可能(考量到場景動態),後面加上一些樹,增加場景的裝飾性。

測試各種色彩氣氛

個人覺得色彩氣氛至關重要,這邊有點拿不定主意,做了很多版本拿去問朋友,大家意見都不太一樣,就先擱置著。

加了巨樹,感覺更有氣勢和層次感

過了幾天覺得上個版本有點弱,決定加一點巨樹來瞧瞧,結果瞬間變得酷炫許多,不僅增加了場景層次和趣味,巨樹的表面也是一個可以呈現光影的工具。

我和友人D都喜歡這個版本

我們挑出了色彩表現比較大膽的一張,覺得可以以此為基礎再發展看看,但經過了一兩天沈澱後,我認為這個路線太像奇幻 indie game 了,我擔心如果做得像遊戲,就會被迫擺到遊戲的維度上做比較,這樣反而顯示了我們互動效果上的貧乏。

以木內達(Tatsuro Kiuchi)為關鍵字的建議搜尋

這時候我上 pinterest 尋找靈感,看到了我很喜歡的藝術家 — 木內達朗(Tatsuro Kiuchi),和其它相關的建議搜尋,覺得這也許是個可行的方向。總體來說寧靜又簡約,寥寥幾個平面的色塊就營造出優秀的空間感。細微的質感充滿視覺趣味。類似版畫的油墨擦痕,也抵銷了數位繪圖的生硬感。

我把木內達朗的其中一幅作品拿到 photoshop 中來簡化一下:

木內達朗原作
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。

以樹叢為例,綠色部分是上述的 (A+B+C),橘色是 (A1+B1+C1)

樹叢圖例
場景製作在AE的環境
場景圖層數量

爬山的場景最後多達22層個圖層,不過需要處理 loop 的只有其中10個(褐色圖層的部分),所以我們只要取它們時間長度的最小公倍數,得出總長度是25分鐘,聽起來蠻嚇人的,還好最後匯出的檔案大小是在可以接受的範圍內,進場景前其實會有一點 lag,所以我們在進場景前加了一個請使用者深呼吸的轉場效果,除了增加儀式感,也爭取更多的讀取時間。

開始專注 →過場動畫 →爬山

因為有 Lottie 這個工具,所以我們只要在 AE 把每個場景或動態都包在一個 comp 裡面,再用 bodymovin 匯出 json 檔交給程式端去整合,對美術或程式來說都是比較省事的做法。

UI製作

figma介面

因為個人沒有接觸過 figma,所以刻 UI 以及整體的使用者體驗,是交給 D 負責,我這邊僅就美術觀點在 photoshop 出了幾版 mockup 給他參考。

UI mockup (1)
UI mock (2)
專注按紐

我們的「專注」和「開始專注」的按鈕,因為涉及比較客製化的動態效果,也是在 AE 中完成,以 bodymovin 輸出。

角色設計

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

角色風格發想
第一隻正式角色

摸索了一下角色的身材比例後,產出了第一隻角色 model 0,迫不急待把他抓來測試一番啦,把它進行簡單的拆解後,匯入 spine 中進行動畫測試。

角色在 spine 中綁骨架+調動畫
斜坡上走路的walk-cycle
專注旅人全部角色

初期規劃九隻角色,特別角色「淘迪熊」登頂時會有額外的表演,陸續規劃有更多角色推出。角色素材檔 aPNG ,是我們整體 app 容量占比最大的部分,一度超過 200MB ,後來角色素材改成 app 內另外下載,暫時解決了這個問題。

結語

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

目前其他成員都是利用下班時間遠端協作,後續的維護、增加新功能也是一大挑戰,但是看到自己的成品順利上架,還是很有成就感,希望這個開發心得能拋磚引玉,認識到新朋友,歡迎交流討論啦~

我的IG:JimmyKuang

專注旅人IG:Focustraveller.co

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

--

--

KHChen 陳冠宏