五花果的後花園 - 讓小朋友的畫作在大螢幕中活起來

專案簡介

這是高雄「8咘的搞怪樂園」中「5花果」主題區的互動裝置，由五月天演唱會幕後團隊「必應創造」打造的大型親子樂園（2017年1-2月，8000坪場地）。

我負責的部分：

• 五花果場景的互動設計
• 著色紙掃描後貼圖到 3D 模型的技術實作
• 場景中的天氣變化、彩虹效果、角色互動

核心體驗： 小朋友拿著色紙（蝴蝶、蜻蜓、瓢蟲、蝸牛、樹、風車），用蠟筆著色後掃描，自己的畫作就會變成 3D 模型在巨大螢幕中活起來，可以跟五花果角色一起合照。

類似專案： 日本 teamLab 互動實驗室的互動藝術裝置

技術棧： Unity + 掃描器整合 + UV 貼圖即時生成 + Web 後台管理（PHP + MySQL）

🎨 互動流程

創作到呈現

1. 小朋友拿到著色紙
   ↓
2. 用蠟筆塗上顏色
   ↓
3. 放到掃描機掃描
   ↓
4. 系統讀取掃描圖片
   ↓
5. 自動貼到對應 3D 模型的 UV 貼圖
   ↓
6. 3D 模型出現在巨大螢幕中
   ↓
7. 畫作在場景中移動（蝴蝶飛、蝸牛爬、風車轉）
   ↓
8. 五花果角色出現，可以合照

🦋 六種角色

1. 蝴蝶

• 動作：在場景中飛舞
• 路徑：隨機飛行，偶爾停在花朵上
• 動畫：翅膀拍動、緩慢盤旋

2. 蜻蜓

• 動作：快速飛行
• 路徑：直線與轉彎，速度較快
• 動畫：翅膀震動、懸停

3. 瓢蟲 (Ladybug)

• 動作：在地面爬行
• 路徑：蜿蜒移動，偶爾停下來
• 動畫：翅膀收合、觸角擺動

4. 蝸牛

• 動作：在地面緩慢爬行
• 路徑：沿著地面路徑移動
• 動畫：觸角擺動、身體蠕動

5. 樹

• 動作：固定在地面，隨風搖曳
• 位置：隨機生成在場景各處
• 動畫：樹葉擺動

6. 風車

• 動作：固定位置，持續旋轉
• 位置：場景中的地標
• 動畫：葉片旋轉（風大時轉快）

🌈 場景互動

天氣變化

精心設計的六段式循環：

1. 白天 (10分鐘) → 2. 晚上 (10分鐘) → 3. 白天 (3分鐘)
    ↓
4. 下雨 (2分鐘) → 5. 彩虹 (3分鐘) → 6. 五花果逛花園 (2分鐘) → 回到步驟 1

完整循環時間：30 分鐘

這個循環設計讓場景有豐富的變化，同時確保五花果角色定期出現（每 30 分鐘一次），讓每個家庭都有機會跟五花果合照。

• 視覺效果：
  • 白天：明亮光照、藍天白雲、雲朵緩慢飄移
  • 晚上：光線變暗、星空效果、月光照射
  • 下雨：雨滴粒子效果、地面水花、光線更暗
  • 彩虹：雨停後天空出現彩虹，逐漸淡入
  • 五花果逛花園：五花果角色登場的特殊時段

場景轉換技術：

• 使用 Shader BlendAlpha 技術進行場景材質的平滑混合
• 天空、地面、遠景材質在不同天氣狀態間流暢過渡
• 避免突兀的場景切換，提供自然的視覺體驗

天氣對角色的影響：

• 下雨時蝴蝶、蜻蜓會躲到樹下
• 風大時風車轉得更快
• 彩虹出現時五花果角色準備登場

五花果角色互動

五花果登場：

• 彩虹出現時，五花果從場景中走出來
• 跟小朋友創作的角色互動
• 家長可以拍照留念

合照時刻：

• 五花果會停在畫面中央
• 小朋友的作品圍繞在周圍
• 形成一個溫馨的合照畫面

魔法互動效果：

• 五花果有兩種表情狀態（正常、開心）
• 當五花果碰觸到其他角色（蝴蝶、蜻蜓等）時，會觸發魔法效果
• 魔法效果持續 5 秒，被觸碰的角色會發光、改變顏色或產生特效
• 使用 Unity 物理碰撞系統（OnCollisionStay）檢測五花果與其他角色的接觸
• 這個設計讓五花果「逛花園」時更有互動性，小朋友會期待五花果碰到自己的作品

💡 技術實作

1. 掃描器整合

多掃描器並行架構：

這個專案整合了 10 台掃描器同時運作，這是系統設計的一大技術挑戰：

• 10 台掃描器：分散在場地不同位置，讓小朋友可以同時創作
• 不同資料夾：每台掃描器掃描後將圖片存到各自的資料夾（例如：C:/5Flower/SCAN1, C:/5Flower/SCAN2, …）
• 後台動態配置：資料夾與角色類型的對應關係由後台管理系統設定
  • 例如：SCAN1 資料夾 → 蝴蝶
  • 例如：SCAN2 資料夾 → 蜻蜓
  • 可以隨時調整配置，不需要改程式碼
• Unity Scanner 模組：同時監控 10 個資料夾，偵測任一資料夾的新檔案

為什麼需要 10 台掃描器？

• 處理效率：45 天展期，大量小朋友排隊創作，單一掃描器會造成嚴重排隊
• 分散人潮：10 個掃描站分散在場地各處，避免單點擁擠
• 動態負載平衡：根據現場需求彈性分配掃描器
  • 例如：蝴蝶很熱門，可以讓 3 台掃描器（SCAN1、SCAN2、SCAN3）都處理蝴蝶
  • 例如：蝸牛比較少人畫，只需要 1 台掃描器處理
  • 後台即時調整：不需要重啟系統或改程式碼，直接從後台修改資料夾與角色的對應關係

靈活配置的優勢：

• 即時應變：現場發現某角色排隊太長，立即調整增加處理該角色的掃描器數量
• 資源優化：10 台掃描器可以根據實際需求動態分配，不會有掃描器閒置
• 使用者體驗：減少熱門角色的排隊時間，提升整體流暢度

圖片處理流程：

1. 檔案偵測：Scanner 模組同時監控 10 個資料夾，偵測到新檔案時觸發處理
2. 角色辨識：根據圖片來自哪個資料夾直接決定角色類型
   • 例如：從 SCAN1 資料夾來的圖片 → 查詢後台配置 → 蝴蝶
   • 例如：從 SCAN5 資料夾來的圖片 → 查詢後台配置 → 樹
   • 不需要影像辨識，純粹根據資料夾路徑對應
3. 影像裁切：
   • 掃描原圖尺寸：620 × 876 像素
   • 裁切區域：從位置 (138, 10) 開始，裁切 600 × 600 像素的正方形區域
   • 去除多餘的邊框與掃描參考線
4. 轉換為 Texture2D：將裁切後的圖片轉換為 Unity 可用的貼圖格式
5. 貼圖套用：建立新的 Material，將 Texture2D 套用到對應的 3D 模型
6. 角色生成：在場景中生成新的 3D 角色，開始其生命週期

後端整合：

• API 呼叫：與 PHP 後端 API 溝通，取得角色類型、編號等資訊
• 計數器更新：呼叫 scanner_counter.php 更新已掃描的角色數量
• 貼圖上傳：將 Texture2D 編碼為 Base64，透過 uploadTexture.php 上傳到伺服器
• 資料同步：確保 Unity 場景與後台資料庫保持一致

檔案管理：

• 掃描完成的檔案移至已處理資料夾
• 避免重複處理同一張圖片
• 維持系統穩定運行

2. UV 貼圖即時生成

技術重點：

• 預先設計好 3D 模型的 UV 展開圖
• 將掃描圖正確對應到 UV 座標
• 建立新的 Material 並套用掃描圖作為主要貼圖
• 處理可能的圖片歪斜、色彩偏差

影像預處理：

• 自動旋轉：修正掃描時的歪斜
• 裁切：去除多餘的邊緣
• 色彩校正：調整亮度與對比

3. 角色行為系統

蝴蝶的飛行行為：

• 隨機選擇目標位置，朝目標移動
• 使用線性插值（Lerp）平滑移動
• 上下浮動模擬飛行（使用 Sin 波形）
• 到達目標後重新選擇新目標
• 下雨時會找最近的樹躲雨

風車的旋轉：

• 固定位置持續旋轉
• 旋轉速度隨天氣改變（風大時轉快）

蝸牛的爬行：

• 沿著地面路徑緩慢移動
• 觸角擺動動畫
• 遇到障礙物時轉向

4. 天氣系統

技術實作：

• 定時切換天氣狀態（白天 → 晚上 → 白天 → 下雨 → 彩虹 → 五花果逛花園）
• 調整主光源亮度模擬天氣變化
• 雲朵移動速度隨天氣改變
• 雨滴使用粒子系統（Particle System）
• 彩虹物件淡入淡出效果
• 通知所有角色天氣改變（讓他們做出反應）

五花果登場時機：

• 彩虹出現時觸發
• 五花果角色從場景邊緣走入
• 停在畫面中央供拍照

5. 佇列管理系統

為什麼需要佇列？

由於現場持續有小朋友創作並掃描作品，系統需要管理：

• 等待處理的掃描圖片
• 正在顯示的角色
• 即將離開場景的角色

四佇列架構：

1. inQueue（入場佇列）
   • 剛掃描完成、等待進入場景的角色
   • 系統會判斷場景中是否有空間
   • 確保場景不會過於擁擠
2. freeQueue（空閒佇列）
   • 可重複使用的角色編號池
   • 當角色離開場景後，其編號會回收到此佇列
   • 避免角色編號無限增長
3. displayQueue（展示佇列）
   • 目前正在場景中活動的所有角色
   • 系統會限制此佇列的最大長度（例如 50 個角色）
   • 超過上限時，最早進入的角色會移到 outQueue
4. outQueue（離場佇列）
   • 準備離開場景的角色
   • 這些角色會執行離場動畫（例如淡出、飛離螢幕）
   • 離場完成後，角色被銷毀，編號回收到 freeQueue

佇列流程：

掃描完成 → inQueue → 等待空位 → displayQueue → 展示一段時間 → outQueue → 離場 → 編號回收至 freeQueue

與後端同步：

• 佇列狀態的每次變更都會呼叫 updateQueueStatus.php 同步到資料庫
• 後台管理介面可以即時看到各佇列的狀態
• 定期呼叫 cleanInQueue.php 清理異常的入場佇列資料

6. 事件驅動架構

為什麼使用事件驅動？

場景中有多種系統需要互相通訊：

• 天氣系統改變時，角色需要做出反應
• 五花果登場時，需要通知相機系統準備拍照
• 佇列狀態改變時，需要更新後台資料

事件系統設計：

使用 C# Delegate 與 Event 機制建立鬆耦合的事件系統：

主要事件類型：

1. 天氣變化事件
   • 當天氣切換時廣播給所有角色
   • 角色根據新天氣狀態調整行為（例如下雨時躲避）
2. 五花果登場事件
   • 彩虹階段結束時觸發
   • 通知五花果角色開始登場動畫
   • 通知相機系統切換到合照模式
3. 角色生命週期事件
   • 角色生成、進入場景、離開場景時觸發
   • 用於更新佇列狀態、同步後端資料
4. 碰撞互動事件
   • 五花果碰觸其他角色時觸發
   • 通知被觸碰的角色播放魔法效果

事件驅動的優點：

• 解耦合：各系統不需要直接引用對方，只需訂閱事件
• 擴充性：新增功能時只需訂閱相關事件
• 維護性：修改某個系統不會影響其他系統

7. 後台管理系統

功能需求： 因為展期長達 45 天，現場會持續有新的角色產生，需要一個後台系統來管理這些角色。

後台功能：

• 即時監控：顯示場景中所有活動中的角色
• 角色資訊：每個角色的類型、位置、使用的貼圖
• 圖片預覽：查看每個角色使用的是哪張掃描圖
• 角色管理：可以手動刪除或更新特定角色

技術實作：

• Web 介面：使用瀏覽器存取後台，方便現場工作人員操作
• 即時同步：後台與 Unity 場景透過網路通訊保持同步
• 角色列表：顯示所有角色的 ID、類型、位置座標、貼圖檔名
• 操作功能：
  • 刪除角色：從場景中移除指定的角色
  • 更新貼圖：替換角色的貼圖（如果掃描有問題需要重做）
  • 查看詳情：放大檢視角色的貼圖

實際應用：

• 管理角色數量（避免場景過於擁擠）
• 移除有問題的角色（例如掃描失敗、貼圖錯誤）
• 監控系統狀態（確保系統正常運作）

🎬 技術亮點

巨型 LED 牆顯示系統

硬體規格：十幾公尺寬的 LED 牆

• 解析度：1920 × 426 像素
• 螢幕尺寸：約 10+ 公尺寬的巨型 LED 顯示牆
• 比例：約 4.5:1 的超寬比例（遠寬於一般 16:9 螢幕）

為什麼需要這麼大的螢幕？

• 展場規模：8000坪的大型親子樂園，需要巨型螢幕讓遠處的家庭也能清楚看到
• 沉浸感：十幾公尺寬的巨型畫面營造強烈的視覺衝擊，小朋友站在 LED 牆前會有「進入畫中世界」的感受
• 多人同時觀賞：巨型 LED 牆可以讓數十組家庭同時觀看，不會擁擠
• 橫向場景：超寬比例非常適合呈現「花園」的寬廣感，蝴蝶、蜻蜓可以在寬廣的空間中飛翔

技術挑戰：

• 正交投影相機設定：使用 Unity Orthographic Projection（垂直投影），避免透視變形，讓畫面保持平面化的「繪本風格」
• 超寬視野範圍：正交相機需要調整 Size 參數以覆蓋超寬的橫向範圍（4.5:1 比例）
• UI 布局：介面元素需要針對超寬螢幕重新設計，確保畫面兩側也有內容
• 效能優化：巨型螢幕意味著需要渲染更寬的視野，需要特別優化以維持流暢度
• 內容設計：場景設計需要充分利用橫向空間，讓十幾公尺寬的畫面每個區域都有動態內容
• 角色分布：需要考慮角色在巨大空間中的分布，避免全部擠在中間

1. 即時 UV 貼圖生成

挑戰：

• 掃描圖可能有歪斜、顏色偏差
• 需要快速處理（等待時間不能太長）
• 貼圖需要正確對應到 3D 模型

解決方案：

• 影像預處理：自動旋轉、裁切、色彩校正
• UV 對應：預先設計好 UV 展開圖，確保貼圖正確
• 快取機制：重複的圖案可以快速生成

2. 多角色同時運行

挑戰：

• 場景中可能有數十個 3D 模型同時活動
• 每個角色都有自己的行為邏輯
• 需要維持流暢的 60 FPS

解決方案：

• LOD (Level of Detail)：遠處的模型使用低精度版本
• 物件池 (Object Pooling)：重複使用物件，減少記憶體配置
• 行為優化：使用簡單的路徑規劃，避免複雜計算

3. 場景管理

挑戰：

• 8000 坪的樂園，需要大螢幕顯示
• 小朋友會持續創作，角色數量不斷增加
• 需要避免畫面過於雜亂

解決方案：

• 角色上限：設定場景中同時存在的角色數量上限
• 生命週期：角色在場景中活動一段時間後自然消失
• 區域管理：角色只在特定區域活動，避免全部擠在一起

4. 後台管理系統

挑戰：

• 45 天展期，角色數量不斷增加
• 需要即時監控場景狀態
• 現場工作人員需要能管理角色

解決方案：

• Web 後台介面：開發獨立的 Web 管理系統
• Unity 通訊：Unity 場景與後台透過 HTTP API 或 WebSocket 同步
• 即時監控：後台可以看到每個角色的位置、類型、貼圖
• CRUD 操作：
  • Create：（由掃描系統自動建立）
  • Read：查看所有角色列表與詳情
  • Update：更新角色的貼圖（重新掃描時）
  • Delete：移除有問題的角色

實際價值：

• 現場工作人員可以快速處理問題（例如掃描失敗、貼圖錯誤）
• 監控系統健康狀態（角色數量、效能）
• 45 天長期運作的必要工具

🏆 專案成果

互動體驗

• ✅ 高參與度：小朋友非常喜歡看到自己的畫作「活起來」
• ✅ 家庭互動：家長跟小朋友一起創作、一起欣賞
• ✅ 拍照留念：五花果登場時，很多家庭搶著拍照

技術成果

• ✅ 穩定運行：展期45天（2017/1/14-2/28），系統穩定運行
• ✅ 即時處理：從掃描到出現在螢幕，約 10-15 秒
• ✅ 流暢體驗：即使場景中有數十個角色，仍維持 60 FPS

經驗收穫

類似 teamLab 的互動藝術：這個專案讓我體驗到「技術」與「藝術」結合的魅力。不只是寫程式，而是創造一個讓人驚喜的體驗。

使用者導向設計：小朋友是最直接的觀眾，他們的反應會立刻告訴你設計得好不好。這讓我學會從使用者的角度思考。

大型專案協作：這是必應創造的大型專案，需要跟美術、硬體、現場團隊密切配合，學到了跨團隊溝通的重要性。

🌟 設計理念

讓創作有生命

傳統著色： 小朋友畫完後，作品只是一張紙

五花果體驗： 畫完後，作品變成 3D 角色在大螢幕中移動，還會跟天氣互動、跟五花果角色一起出現

這種「作品活起來」的感覺，讓創作變得更有意義，也讓小朋友更有成就感。

家庭共同體驗

不只是小朋友玩，家長也會：

• 陪同創作（幫忙選顏色、討論怎麼塗）
• 一起等待作品出現（期待的過程）
• 一起欣賞作品在螢幕中活動
• 一起跟五花果合照

這是一個家庭共同參與的體驗，而不只是把小朋友丟去玩。

📚 相關資源

8咘的搞怪樂園

樂園資訊：

• 地點：高雄夢時代正對面廣場
• 時間：2017年1月14日至2月28日
• 規模：8000坪，可容納4萬人
• 製作團隊：必應創造（五月天、林俊傑、田馥甄演唱會幕後團隊）

四大主題區：

• 8咘、淘7蛋、小2魔、5花果（我負責的部分）

活動詳細資訊

• 展期：2017/01/14～02/28（45天，橫跨農曆春節）
• 營業時間：10:00～20:00
• 演出時間：15:00、19:30
• 地點：高雄夢時代正對面廣場（時代大道與中華五路口）
• 規模：8000 坪
• 門票：
  • 兒童票 350 元
  • 陪同票 200 元
  • 90 公分以下未滿一歲兒童免費

媒體報導與相關連結

新聞報導：

• 高雄期間限定「8咘的搞怪樂園」開幕！陪小朋友過春節 - ETtoday旅遊雲
• 五月天演唱會幕後團隊 8000坪搞怪樂園 - MOOK景點家
• 8咘的搞怪樂園 五月天加持 - 中國時報
• 高雄場現場遊記 - 跟澳門仔凱恩去吃喝玩樂
• 8咘的搞怪樂園活動資訊 - abic愛貝客親子遊

製作團隊：

• 必應創造 B’in Live 官網
• 必應創造 Instagram

社群媒體：

• 8咘的搞怪樂園 Instagram 地標 - 現場照片與民眾分享

🎨 類似專案參考

teamLab 互動實驗室

日本 teamLab 也有類似的互動藝術裝置：

• 小朋友的畫作變成動畫在牆上移動
• 可以跟畫作互動（觸碰、拍打）
• 多人創作的作品會在同一個空間中互動

差異點：

• teamLab：觸碰互動、投影技術
• 五花果：3D 模型、天氣變化、角色登場

💡 專案總結

「5花果」是一個結合技術與藝術的互動專案，讓我學到：

技術層面

• 影像處理：掃描圖的預處理與 UV 貼圖生成
• Unity 3D：角色行為系統、天氣系統、場景管理
• 效能優化：多角色同時運行的優化技巧
• 後台管理系統：Web 介面、即時監控、角色 CRUD 操作

體驗設計

• 情感連結：讓小朋友的創作「活起來」
• 家庭互動：設計讓全家人都能參與的體驗
• 驚喜時刻：五花果登場、彩虹出現的高潮設計

專案協作

• 跨團隊合作：與必應創造團隊的協作經驗
• 大型活動執行：8000坪場地、45天展期的挑戰
• 現場應變：處理各種突發狀況

這個專案讓我體會到：技術不只是工具，更是創造美好體驗的手段。當看到小朋友眼睛發亮地指著螢幕說「那是我畫的！」時，就知道所有的努力都值得了。

專案資訊

• 專案名稱：5花果
• 所屬樂園：8咘的搞怪樂園（高雄）
• 製作團隊：必應創造
• 技術棧：Unity + 影像處理 + UV 貼圖 + Web 後台管理
• 展期：2017年1月14日至2月28日
• 我的角色：場景互動設計、掃描貼圖技術實作、後台管理系統開發

Happy Coding! 🌈