不穿裙子的便利商店 開發日誌vol.3

MABi
Black Mercury Studio
6 min readApr 2, 2020

開發日誌vol.3

遊戲介面與功能架構測試 ( 上 )

大家好! 我是不穿裙子的便利商店的企劃 麻痺

感謝大家觀賞第三篇的遊戲開發日誌,我們也會繼續努力加快開發的腳步!

那麼本次的日誌會把重點放在遊戲介面上的設計與基本功能架構上。

同時也邀請團隊負責UI與主視覺設計的美術 來跟大家分享他的設計理念。

當取得便利商店內容資料時,即發現有許多的按鈕要呈現在主畫面上。

包括商品研發、進貨、活動、排班…等,大致上會有8個主要的使用按鈕。

加上金錢、行動點、時段等重要數據需呈現,可想而知有許多遊戲的資訊將即時的呈現在玩家面前,排滿整個版面。

所以在配合”便利”的第一想法上,是將相關系統統整起來,盡可能放在同一區塊做設計主軸。

最終歸納成「商品管理」、「店面擴建」、「營業活動」、「員工排班」四大系統介面。

確定好方針後,就以塊狀式結構進行視覺編排。

預定介面的功能與彈跳視窗的介面

而主要的遊戲畫面 ( 商店內部 ) 則是預想了三個不同的視角效果。

「三個主畫面的設計主要是想透過視角去做呈現不一樣的臨場感」

第一個俯視角是大部分經營類遊戲最常見畫面呈現,在這個視角中,玩家能最直接的看到整體商店的經營狀況,不管是客人進到店內,還是店內設施和商品的使用狀況都可以很直覺的操控和調整。

較為常見的俯視角主畫面

第二個視角則是比較接近第一人稱視角看店內的形式,透過顧客的視角去觀看店內各個區塊的狀況,可以實際看到店員、客人、商品有更加實際的互動效果。

比較接近顧客看店內的視角

第三個視角則是把視角固定在以櫃檯為主,在這個視角玩家可以更直觀地感受到櫃檯設備升級與增加的視覺回饋。

固定在以櫃檯和櫃檯設施為主的視角

最後決定還是使用最常見的俯視角當作遊戲主畫面呈現,並且稍微規劃了一下店內會出現的設施與空間應用的部份。

參考國內常見的超商企業識別,用來協助統整主色調。

包含畫面想呈現的簡易感、未來風都在考量範圍內,讓整體遊戲看來更像一個企業系統。

如員工服裝、介面設計、菜單按鈕都在同一色系上。

誠如畫面所見,藍綠色系和黑色會讓人覺得乾淨簡單,一開始最初版的店員服裝設計上使用此配色。

第一版本主選單試畫
第一版的製服配色

但整體偏寒顯得有些暗沉,於是想帶入些活潑的色彩,暖色系裡就屬橘色最為跳動。

後來經過幾次開會討論與更動後,團隊得到外包的角色原畫美術已經決定好的服飾資訊。

外包美術第一版便利商店制服設計

於是配合原畫完成的店服,再次調整色調與風格,可以感受到服裝上有很濃厚的日式便利街風。

配合外包美術的服裝重新設計的主畫面
加上底色後的主畫面試畫

不過後來整體呈現出來的主色調與風格太接近咖啡廳的感覺,與原先的便利商店概念有太大的差距,所以最後還是決定使用寶藍加褐色系當作視覺主色調的配色,該色系便是最後的主軸方針。

地中海風格
稍微加上了一些販售的商品的商店內部
最後配合整體色系後調整的店服(尚未完稿版本)

而在功能上,我們開始嘗試試做遊戲核心系統研發和改良的基本架構測試。

按照vol.2開發日誌中提到了,整體的流程就是點選商品研發、選擇商品種類,最後選擇研發額度後確定,就會跑出相對應種類和額度分類的商品。

商品功能研發雛形(低開發成本)
商品功能研發雛形(中開發成本)
商品功能研發雛形(高開發成本)

而在遊戲改良系統的部分,則是可以在改良的時候預覽到預計會更動的改良數值和原先的數值比對,並且在改良後提升星數。

商品改良系統雛形

兩個遊戲最主要的核心功能的雛型大致上就是這樣,後續我們再加上上商品管理、進貨、員工排班與正式回合計算,遊戲最基本的雛型就會出來了。

--

--