專案起源
大約2020年尾左右，適逢我在日頭遊戲的專案 Carto 告一段落，團隊成員們決定休生養息一段時間，而我因為有生活費的壓力，開始煩惱這段空窗期該怎麼度過，瞬間一股中年危機的味道撲鼻而來。如果是七、八年前的自己，應該會很瀟灑的開始準備 portfolio 投履歷，然而這幾年，彈性工時的日子過慣了，回去一般職場的意願真的不高，一來是遊戲業的主流技能需求對我來說很吃力不討好，二來是高強度的職場生活，很難抽身去照顧小孩。
這時候想到一個不願具名的友人 D，曾跟我提過要不要一起在下班時間做side project，那時因為 Carto 即將發售，忙得不可開交就暫時作罷，現在對我來是一道曙光，一通電話給他，很阿莎力的開啟接下來的合作。
與 D 碰面後，談到他想要製作一款自己都很喜歡用、視覺表現突出的產品，聊了幾個過去他很想要嘗試的概念，於是我們決定結合時下最流行的登山主題與番茄鐘，隨著你專注在做手邊的事，手機中的旅人也努力的往山頂邁進。
這個階段 D 傳給我一張 Beomjin Kim 的 作品當範例，他希望整體美術是朝向氛圍感，看久了也不會很膩的作品。
我本身沒有在用這類的生產力工具，坦白說，我對於這類的蕃茄鐘工具能否真正約束我感到懷疑(笑)。做了一些競品調查，讓我驚訝的是這類的生產力工具居然如此之多，而且當中不乏有訂閱機制、以及付費解鎖更多工具的收費方式。只能說現代人用盡各種 app 工具讓自己遠離手機，聽起來好像哪裡怪怪的。
這個專案最讓我感到興奮的，是我們在討論之中，激盪出一個日後可能會增加的新功能，再此先賣個關子，因為還不確定是否能實現它。在那之前，我們都同意先設一個較為可行的目標，就是讓使用者能經歷爬山 → 休息 → 路徑紀錄 → 爬山 → 登頂，這樣的一個簡單循環。優先順序是把這個循環先打磨到一個可以端上檯面的程度，再來想研擬後續的計劃，畢竟我們都還沒有經驗。
2021年1月專案正式起跑，我和 D 分兩路進行，我的部分先繪製關鍵場景，初期先著重在嘗試各種可能性，從中梳理出美術表現該走的方向。D先在 figma 用一些暫時的素材串接整個 app 的流程，並且列出一些 SPEC，兩邊對 app 有什麼想法就互相討論，我們希望二月初的時候美術風格能夠定調，三月初的時候能把整個功能都串接完畢。
視覺風格
因為 D 和我的喜好蠻接近的，所以視覺方面基本上就是放手給我執行，一開始以他的概念手稿為起點，繪製了一些草圖：
個人覺得第二張圖的風格有點太粉嫩，所以繼續做別的嘗試。
一開始的斜坡場景是我比較喜歡的一張，我試著把地面簡化一下，讓他以後有無限延伸的可能（考量到場景動態），後面加上一些樹，增加場景的裝飾性。
個人覺得色彩氣氛至關重要，這邊有點拿不定主意，做了很多版本拿去問朋友，大家意見都不太一樣，就先擱置著。
過了幾天覺得上個版本有點弱，決定加一點巨樹來瞧瞧，結果瞬間變得酷炫許多，不僅增加了場景層次和趣味，巨樹的表面也是一個可以呈現光影的工具。
我們挑出了色彩表現比較大膽的一張，覺得可以以此為基礎再發展看看，但經過了一兩天沈澱後，我認為這個路線太像奇幻 indie game 了，我擔心如果做得像遊戲，就會被迫擺到遊戲的維度上做比較，這樣反而顯示了我們互動效果上的貧乏。
這時候我上 pinterest 尋找靈感，看到了我很喜歡的藝術家 — 木內達朗（Tatsuro Kiuchi），和其它相關的建議搜尋，覺得這也許是個可行的方向。總體來說寧靜又簡約，寥寥幾個平面的色塊就營造出優秀的空間感。細微的質感充滿視覺趣味。類似版畫的油墨擦痕，也抵銷了數位繪圖的生硬感。
我把木內達朗的其中一幅作品拿到 photoshop 中來簡化一下：
仔細分析之後，歸納出幾點結論：
- 我腦中對這個場景映射的畫面是「愜意的夏日午後」，就像國小的暑假，每天聽著蟬鳴，不用煩惱今日是禮拜幾，打著紅白機，忘了時間的流動。藍色系的場景會是個不錯的方向，讓人感覺沈靜、專注，聯想到好天氣。
- 地板用接近白色的米白，和藍色是對比，也像畫布一樣，角色可以畫得很鮮明，走在上面不必怕被搶掉視覺焦點。
- 形狀盡量簡單俐落，在「扁平感」與「空間感」中抓出一個灰色地帶，剩下的交給觀者去腦補。
這時我以參考圖的色票為基礎，調出自己需要的場景顏色，並且開始實驗筆刷效果，去對應不同的物件（樹、草、石頭紋路…等等）。
最後慢慢繪製出接近完成品的樣子：
場景動態製作
整體來說較費工的部分是要在 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)
爬山的場景最後多達22層個圖層，不過需要處理 loop 的只有其中10個(褐色圖層的部分)，所以我們只要取它們時間長度的最小公倍數，得出總長度是25分鐘，聽起來蠻嚇人的，還好最後匯出的檔案大小是在可以接受的範圍內，進場景前其實會有一點 lag，所以我們在進場景前加了一個請使用者深呼吸的轉場效果，除了增加儀式感，也爭取更多的讀取時間。
因為有 Lottie 這個工具，所以我們只要在 AE 把每個場景或動態都包在一個 comp 裡面，再用 bodymovin 匯出 json 檔交給程式端去整合，對美術或程式來說都是比較省事的做法。
UI製作
因為個人沒有接觸過 figma，所以刻 UI 以及整體的使用者體驗，是交給 D 負責，我這邊僅就美術觀點在 photoshop 出了幾版 mockup 給他參考。
我們的「專注」和「開始專注」的按鈕，因為涉及比較客製化的動態效果，也是在 AE 中完成，以 bodymovin 輸出。
角色設計
角色製作也是沒有太多預設想法，初期很隨性的畫了一些 thumbnail，有比較偏電玩的、也有比較插畫風的，本來想用非常簡化的呈現方式，例如完全省略五官，但覺得有點疏離感，所以最後決定還是保留眼睛。角色風格的決策比較快，主要訴求是能無違和融入在場景中，盡量可愛、討喜。
摸索了一下角色的身材比例後，產出了第一隻角色 model 0，迫不急待把他抓來測試一番啦，把它進行簡單的拆解後，匯入 spine 中進行動畫測試。
初期規劃九隻角色，特別角色「淘迪熊」登頂時會有額外的表演，陸續規劃有更多角色推出。角色素材檔 aPNG ，是我們整體 app 容量占比最大的部分，一度超過 200MB ，後來角色素材改成 app 內另外下載，暫時解決了這個問題。
結語
這是我第一次負責做 app 的美術，對我來說最困難的地方是視覺素材和整體 UI 怎麼配合，包括轉場、視覺引導、時間的控制、多國語言的排版問題等等，確保使用者體驗起來不會感到突兀，而且畢竟不是在遊戲引擎，所以效果呈現上必須要有所節制。
目前其他成員都是利用下班時間遠端協作，後續的維護、增加新功能也是一大挑戰，但是看到自己的成品順利上架，還是很有成就感，希望這個開發心得能拋磚引玉，認識到新朋友，歡迎交流討論啦～
我的IG：JimmyKuang
專注旅人IG：Focustraveller.co
如果您喜歡這篇內容，請拍大力點讓我知道！👏 以後會考慮撥出一點時間來寫Medium喔～
也歡迎追蹤我IG:JimmyKuang ｜ 遊戲作品：Carto ｜ App作品：專注旅人
