small-topBguppp
startButton
#Unity  #橫向卷軸  #使用者經驗設計

河馬小姐: 密室逃脫遊戲延伸至面對社會框架的省思

專題期間

半年

我的角色

程式設計

負責任務

程式撰寫、使用者經驗、流程規劃

成果

數位內容與互動遊戲類/銀牌獎

負責任務

程式撰寫、使用者經驗、流程規劃

成果

數位內容與互動遊戲類/銀牌獎

專題期間

半年

負責任務

程式撰寫、使用者經驗、流程規劃

我的角色

程式設計

成果

數位內容與互動遊戲類/銀牌獎

#Unity  #橫向卷軸  #使用者經驗設計

2020.06 ~ 2020.12

河馬小姐 : 從密室逃脫遊戲延伸至面對社會框架的省思

專題期間

九個月

我的角色

程式設計

負責任務

程式撰寫、使用者體驗、流程規劃

成果

數位內容與互動遊戲類/銀牌獎

▪ 概覽 ▪

01.專題背景

選擇「2D網頁卷軸遊戲」作為主題,風格是手繪、療癒,內容是解謎結合密室逃脫。

02.角色與輸出

在團隊中,我與其他組員一起合作規劃,負責遊戲的程式、版面調整及遊戲流程產出。

03.專題挑戰

在當時技術上的限制,輸出網站必跑版、專題教授不會遊戲,我們需要在時限內找到可行的解決辦法。

04.成果及後續

最終作品獲得校內遊戲類銀牌,老師推薦下參與2020大專院校創業實戰模擬平台比賽。

1 | 專題主題

以「2D網頁卷軸遊戲」作為主題,呈現手繪、療癒的密室逃脫遊戲。

2 | 角色與輸出

3 | 專題挑戰

團隊中,與組員一起合作規劃及溝通,我負責遊戲的程式、版面調整以及遊戲流程產出。

在當時有些技術上的限制,Unity輸出網站必跑版、專題教授不會遊戲,需要在時限內找到可行的解決辦法。

最終作品獲得校內遊戲類銀牌,老師推薦下參與2020大專院校創業實戰模擬平台比賽。

4 | 成果及後續

成果產出遊戲設計困境處理反思學習

▪ 目錄 ▪

▸ 成果產出 ◂
共 3 項

河馬小姐

* 點擊按鈕,進入河馬小姐遊戲,記得開全螢幕遊玩喔! *

校內競賽

2020年靜宜大學資院畢專競賽 | 數位內容與互動遊戲類 - 銀牌

grand togeter

展覽當天用一些前次專題的紙還有回收紙板做的關卡小屋做展示。

我們有準備抽獎活動,現場體驗遊戲的人都可以拿,禮物是遊戲場景的明信片。現場也有發送河馬頭像的貼紙,背後有遊戲網址製成的qrcode。
當天200份小禮物都被抽光了,反響很不錯。

gfgfg
校外競賽

參與2020大專院校創業實戰模擬平台比賽。

m4
m2
mm3
m3
d1
d22

很可惜,由於我們回覆時間不及時。即使有不少關注度,也沒有獲得注資。

這次失敗經驗讓我們了解,分配人力的重要性,負責網頁回覆,掌握最新進度。

其次,文創的商業價值,幾乎都是周邊。再轉商業化的同時也要注重關聯性及顯而易見的獨特性,以下留言給出問題是我們產品似乎沒有突破一般文創產業,是我們可以再努力的部分。

▸ 遊戲設計 ◂
共 9 項

設計流程
long
process
前期規劃
sgj

先選定了主題,再延伸出遊戲的風格、遊戲流程還有設備跟技術需求,最後做出進度規劃。

talk hippo
大綱

女主角被家族詛咒綑綁,必須在28歲前找到屬於自己的「右邊先生」,失敗就會成一隻「河馬」。這時候出現一位小精靈,說要解救她,就必須先破完四個關卡,她就可以找到右邊先生!

目的

因為周圍免不了遇到跟故事中女主角一樣的情況,例如:沒對象是因為不像女生、年紀到了就該結婚…那些可能別人「為你好」的意見。

細想,這些意見都是你需要的嗎?

《圖文不符》的海報裡有個標題:「在性別之前,我是個人」,不要因為我的性別而幫我貼上「你就該怎麼做」的標籤。

希望透過這個遊戲,給大家一個思考的空間,意識到自己的價值要自己來定義

結局

遊戲的結局會是一個二選一的選擇題。

 1 |  選擇一直糾結在擺脫標籤,那你就會是一隻河馬。

 2 |  已經不再在乎是否被當作河馬(剩女的標籤)看待,那不論你是否成為河馬,對你而言,你就是你。

遊戲流程
flowflow ll
介面設計

主要色為紫色,因有打破刻板印象的故事性,是大眾印象裡代表兩性的紅色與藍色綜合而成。

設定主要受眾是女性,整體是卡通手繪風格,想給玩家感受到可愛與精緻。並使顏色設計上鮮豔飽和以增加辨識度。

關卡的介面維持「一致性」不會雜亂,除了開頭與結尾按鈕置中,遊戲中的按鈕都靠右邊以增加「易用性」

角色設計

故事角色都有對應的象徵。

untro hippo sPeople
關卡設計

每關都有一位男主人,根據不同角色個性,搭配出可以表達其性格的顏色氛圍。

clour

再根據上面配色,把關卡(房間)的背景進行上色。

house

▸ 困境處理 ◂
共 2 項

提示改善

被忽略的遊玩提示    
在做好關卡之後,我們請同學試玩,提供我們調整難度及方向。

c1b

其中我發現的問題

1|玩家一進入遊戲的介面,會不知道要先關閉「教學便條紙」。(便條紙不明顯)

2|玩家不會看完教學內容就直接開始。(字數過多)

3|玩家不太能把「教學便條紙」上的小圖跟遊戲裡的圖做連結,沒有達到預期的教學目的。(便條紙上的圖示不夠直覺)

c1a

在經過改版後

1|便條紙不明顯:
背景增加半透明黑底,增加便條紙的對比度。

2|字數過多:
精簡字數,段落分明。

3|便條紙上的圖示不夠直覺:
把便條紙上的圖示去除,改成動態的箭頭來達到提示的目的,提高注意效果。

輸出跑版

輸出成WebGL都會跑版   
在Unity裡面試玩都不會出現的問題,一但輸出網頁版感應器就會跑掉。因為問老師只說這是Unity網頁輸出的Bug。

對於這部分的限制,調整無數次每次跑版程度不一,我能做的只有把感應器做大,盡可能不影響玩家體驗。

c2ba

(綠色的邊線是感應器範圍)

缺點是有可能明明沒按到正確物件但誤觸到。

c2


可惜有時限、技術也不夠純熟,後來有加入程式設計的社團學習,希望可以把遊戲做更完善。

▸ 反思學習 ◂

fgfgfteamphoto

從專題中深刻體會

1|使用者的感受最優先:
我從看玩家玩的過程中發現,玩家不見得能感受到我們想展示的。我們要清楚誰才是「使用者」,感受的出發點是誰,經過取捨之後再做呈現,才能做出更好的遊戲。

2|多方嘗試會有新收穫:
很多問題,要自己在網路上改程式碼來解決。至今解決了很多的bug,把無法具體用專業名詞找解答的問題一件件解決讓我獲得滿滿成就感是一開始預想不到的!

感謝我的三個夥伴,大家透過這個專題,都有所成長,也讓我獲得寶貴經驗以及用更多元的角度去看待各個問題。

Button Textnext02

有任何想法觀迎與我聯繫📬

ei15200405@gmail.com
©by PeiYiHan