Ya-Hsuan Chang's profile

AR Game: 足球PK大戰

FACEBOOK AR 限時動態 - 足球 PK 大戰
「PK 大戰」為梅林鬍子實驗室內部研發案例,期望透過內部研發各種 AR 應用,增加曝光度與聲量。故因應 2018 世足賽與 AR 潮流,研發一款專門在  Facbook 上應用的 AR Game,讓民眾能用最簡單的方式一起瘋世足!

整體視覺調性規劃 - 將2018 世足主視覺調性轉化,創造童趣互動足球小將!」
以 2018 世界杯足球賽 LOGO 做為視覺參考,並將各種會在世足賽中出現的人、事、物,列入設計概念中(如球迷會帶的彩色爆炸頭、條紋足球衣...等),創造出獨特的AR 角色,整體 AR Game 視覺風格也依此角色的插畫風格去做延伸。UI 元件及按鈕設計,也延續此風格。由於此風格平面化,故在按鈕部分會增加陰影,讓使用者可以更快速辨識出按鈕。
文字/色彩計畫
為配合美術風格,在英文字體的部分,選擇了童趣感十足的Comix Heavy,增加整體視覺風格的完整度與趣味性。標題的標準字,則是仿Comix Heavy的字型特徵去設計的,故讓其呈現粗細不一、歪斜感。

色彩選用亦根據2018世足主視覺的「紅、藍、金」配色去發展,捨棄漸層營造出的華麗氛圍,改以實色呈現去增加卡通感,讓整體更顯逗趣。

主要功能 與 UI設計
在Facebook 限時動態圖框中,不像一般的AR App自由度較高,我們必須考量Facebook平台上的限制,例如:整體檔案大小、UI引導、介面設計要如何避開原始AR Camera的Icon...等諸如此類的細節。故在設計上希望盡量精簡體驗流程,讓使用者可以順利的玩樂。

主要功能為「歡迎頁、遊戲提示(玩法)、遊戲介面、失敗介面」四大項。前三項基本設定在同一個介面流程上,使用者無須做任何特殊操作,只要跟著指示走,就能順利進行遊戲!
由左至右:歡迎頁、遊戲提示(玩法)、遊戲介面
歡迎頁
・ 梅林鬍子實驗室的露出是歡迎頁的主要重點,以紅色彩帶式UI做重點呈現,並搭配AR的主題名稱,做標題UI設計。
・ 角色臉部挖空,為的是避免使用者「誤開後鏡頭」,而無法進行遊戲。

遊戲提示
・ 考慮Facebook效能問題,提示以純文字呈現,讓使用者透過文字,清楚明白遊戲方始。
・ 嘴部辨識成功後,提示才會消失,並開始遊戲。

遊戲介面
・ 場景設計分為兩部份:球場、深色看板。
・ 球場:主要互動區,將角色與球的移動範圍都設計在此區中,以利使用者專注於此。
・ 看板:為清楚顯示得分數,故無做多餘的視覺裝飾及引導。
遊戲失敗介面
失敗頁
・ 版面變成黑白色調,呈現失敗氛圍。
・ 「Failure」UI,提示使用者遊戲結束。
・ 紅色Replay按鈕,有利使用者重新開始遊戲。
玩家排行計分板設計
計分板
若未來可發展成獨立AR App,則可以加強遊戲流程體驗,與設計更多回饋,讓使用者不斷回流遊玩。而計分板則是遊戲常見的「競爭機制」。
・ 設計線上使用者連線,予以計分,增加遊戲競爭感,強化遊戲體驗。
・ 一次顯示五個排名,讓版面簡單化。
・ 以失敗時的臉部表情作為排行大頭照,增加趣味度。
・ 玩家所在的名次,卡片設計尺寸較大,凸顯玩家位置。
・ 整體視覺延續遊戲風格,以簡單的大草地當作計分背景。
角色動態設計
角色動態設計
・ 以張嘴觸動守門員防守的機制來發想,在手部動態上演繹上做變化,並製成Loop的動態,以利工程師在任何時刻呼叫動態都能保持畫面的流暢。
・ 動態設計分為三階段,分別對應嘴巴張開大小,而有長短手的變化,增加趣味惡搞感。



Directed by:梅林鬍子實驗室 Merlin's Mustache Lab
Project Manager:Ria Chang
Visual Designer (Visual/ UI): Ya-Hsuan Chang
Motion Designer: Ya-Hsuan Chang
Engineer:Che Wei Hsu
Director:Ethan Chen
Release:May. 2018

AR Game: 足球PK大戰
Published:

AR Game: 足球PK大戰

為歡慶2018世足賽,並展現更多元的AR應用,梅林鬍子實驗室特別製作了此「足球PK大戰」,供球迷們玩樂與享受世足賽的美好氛圍!

Published: