光禾在職期間專案。

「兄弟 FANS」這款 App 是繼「兄厲害」維運結束後，與工研院合作推出的改版。改版有以下幾點特色：

  1. 加入更多賽事資訊，除了原先中信官網的內容，再加上部分中職官網資訊，讓球迷有一站式體驗。
  2. 整合洲際現場畫面，即時顯示投球彈道畫面。
  3. 以球迷為出發點，設計現場掃 QRCode 集點機制。
  4. 加入 AR 遊戲，為賽事助興。

新版球隊資訊與粉絲集點畫面截圖

新版 App 除了功能上的調整，也在整體體驗上加上許多動畫，例如：Lottie 的 Splash Screent 等，增加 App 的活潑感。

[{"url":"brother-fans-13.png","alt":""},{"url":"brother-fans-02.png","alt":""},{"url":"brother-fans-05.png","alt":""},{"url":"brother-fans-01.png","alt":""}]

改版由工研院負責企劃和設計，光禾負責開發。而我在專案中負責的項目包含：

  1. App 開發，使用 Flutter 部署雙平台。
  2. 後端開發與建置，使用 Flask + Firebase functions 部署，串接其他第三方資料供 App 使用。
  3. WebAR 開發，使用 Onirix Web AR 服務，使用 js 開發三款 AR 遊戲，並嵌入 App 中。

賽事資訊畫面截圖

[{"url":"brother-fans-08.png","alt":""},{"url":"brother-fans-09.png","alt":""},{"url":"brother-fans-07.png","alt":""},{"url":"brother-fans-11.png","alt":""}]

AR 遊戲製作

專案時程約有三個月時間，為了開發快速，AR 遊戲採用 Onirix 這套現有的 WebAR SDK 服務來開發，遊戲內容分別有：

  1. 家庭席小遊戲：四周佈滿棒球，在限時內抓到棒球來得分。
  2. 集氣遊戲：用金幣投擲猛瑪象，擊中就會讓猛瑪象變得更強大。結合 cannon.js 碰撞偵測。
  3. 商品互動：將相機對準特定商品出現 AR 效果並可拍照。使用 image tracking 技術。