Yaze

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

Unity 互動藝術：著色紙 → 掃描 → 3D 模型，類似 teamLab 的互動體驗

2017-01-14

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

專案簡介

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

我負責的部分：

核心體驗： 小朋友拿著色紙（蝴蝶、蜻蜓、瓢蟲、蝸牛、樹、風車），用蠟筆著色後掃描，自己的畫作就會變成 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 分鐘一次），讓每個家庭都有機會跟五花果合照。

場景轉換技術：

天氣對角色的影響：

五花果角色互動

五花果登場：

合照時刻：

魔法互動效果：

💡 技術實作

1. 掃描器整合

多掃描器並行架構：

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

為什麼需要 10 台掃描器？

靈活配置的優勢：

圖片處理流程：

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

後端整合：

檔案管理：

2. UV 貼圖即時生成

技術重點：

影像預處理：

3. 角色行為系統

蝴蝶的飛行行為：

風車的旋轉：

蝸牛的爬行：

4. 天氣系統

技術實作：

五花果登場時機：

5. 佇列管理系統

為什麼需要佇列？

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

四佇列架構：

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

佇列流程：

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

與後端同步：

6. 事件驅動架構

為什麼使用事件驅動？

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

事件系統設計：

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

主要事件類型：

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

事件驅動的優點：

7. 後台管理系統

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

後台功能：

技術實作：

實際應用：

🎬 技術亮點

巨型 LED 牆顯示系統

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

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

技術挑戰：

1. 即時 UV 貼圖生成

挑戰：

解決方案：

2. 多角色同時運行

挑戰：

解決方案：

3. 場景管理

挑戰：

解決方案：

4. 後台管理系統

挑戰：

解決方案：

實際價值：

🏆 專案成果

互動體驗

技術成果

經驗收穫

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

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

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

🌟 設計理念

讓創作有生命

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

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

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

家庭共同體驗

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

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

📚 相關資源

8咘的搞怪樂園

樂園資訊：

四大主題區：

活動詳細資訊

媒體報導與相關連結

新聞報導：

製作團隊：

社群媒體：

🎨 類似專案參考

teamLab 互動實驗室

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

差異點：

💡 專案總結

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

技術層面

體驗設計

專案協作

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

專案資訊

Happy Coding! 🌈

專案Unity互動藝術影像處理