2D 圖層打造 3D 黏土風互動網站：益盛小島與網頁遊戲製作紀錄
為什麼我們想做一座互動小島？
一般公司的服務介紹頁，通常是圖片、標題和一段文字。
這樣做沒有不好，但我們想試試另一種方式。
如果把益盛科技的服務變成一棟棟房子，讓訪客像逛遊戲地圖一樣，點擊房屋認識不同服務，會不會比較有趣？
於是，我們開始製作「益盛小島」。
島上有樹、有房子、有小橋，也有不同角色。每棟建築代表不同的服務，訪客可以自由探索。
後來看到社群上流行的 3D 政策島，我們也研究了它的技術做法。
兩者都使用小島作為資訊介面，但實作方式不同。
一、為什麼選擇 2D 圖層，而不使用即時 3D？
3D 互動網站可以透過 Three.js、WebGL 等技術，在瀏覽器中建立真正的立體模型。
以近期受到關注的政策島為例，場景中的建築、樹木與人物，可以透過程式化幾何與 3D 模型組合呈現。
這樣的做法有一個優點：能夠控制立體物件、鏡頭、光線及場景變化。
不過，益盛小島想呈現的重點不太一樣。
我們希望房子看起來像手工捏製，屋頂圓潤、樹葉有厚度，角色則有柔和的黏土玩具質感。
這些效果也可以用 3D 建模製作，但需要投入模型、材質、光影與場景調整的工作。
考量我們想要的視覺效果、製作流程及後續擴充方式，最後決定採用：
預先製作具立體質感的圖片素材，再透過 HTML、CSS 和 JavaScript 組成互動網站。
這不是即時渲染的 3D 場景，而是利用 2D 圖層呈現立體視覺。
訪客看到的是一座有 3D 黏土質感的小島，實際互動則由網頁程式控制。
二、第一步：先畫佈局，不急著製作圖片
我們沒有一開始就做完整的小島。
先用簡單的佈局圖，決定主要元素的位置：
- 中央放置一棵大型橘色樹木。
- 周圍安排代表不同服務的建築。
- 透過小橋、溪流與石板道路連接場景。
- 保留角色活動和互動視窗需要的空間。
這一步解決的是後續的維護問題。
如果沒有先決定佈局，等到素材都完成才調整位置，很容易發現房子互相遮擋，或角色沒有足夠的活動空間。
三、第二步：建立統一的 3D 黏土視覺
圖片素材最大的挑戰之一，就是風格一致性。
同樣是「可愛的房子」，不同次製作的結果，可能一張比較像塑膠模型，另一張則像陶土。
如果直接拼在一起，整座島就會缺乏一致感。
因此，我們先建立共同的視覺規範：
- 圓潤、偏 Q 版的比例。
- 手工黏土般的材質細節。
- 柔和光線與溫暖的窗戶燈光。
- 相近的觀察角度。
- 一致的色彩與陰影方向。
之後每製作一棟房子或角色，都沿用這套規範。
這樣做雖然需要反覆調整，但後續增加素材時，比較不容易出現明顯的風格差異。
四、第三步：房子和角色分開製作
這是我們認為很實用的一個決定。
不要把整座島做成一張無法拆解的圖片。
我們將主要素材分開處理：
- 小島底圖。
- 各棟服務建築。
- 不同角色及其表情、動作素材。
- 需要獨立控制的場景裝飾。
角色製作時，也會先建立正面、側面與背面等視覺參考，減少角色在不同動作下突然變樣的問題。
素材完成後再去背、調整尺寸及定位。
這樣後續如果想增加一間商店，或替換某個角色，就不需要重新製作整座小島。
當然，2D 疊圖也有自己的限制，例如不能像真正的 3D 模型一樣任意旋轉鏡頭，物件遮擋與移動方向也需要另外處理。
所以我們選擇在視覺自由度與製作成本之間取得平衡。
五、第四步：使用前端程式讓小島可以互動
有了圖片素材，還不代表互動網站就完成了。
接下來，我們使用 HTML、CSS、JavaScript 等前端技術，替場景加入互動。
點擊建築
訪客可以點選小島上的建築，開啟對應的服務介紹。
角色對話
角色可以顯示對話內容，部分角色也會有不同的動作與表情。
場景動畫
利用 CSS 動畫及 JavaScript 控制，呈現呼吸、揮手、移動或其他小動作。
手機版操作
小螢幕可以移動視角範圍，按鈕與文字也依手機操作需求調整。
我們也特別檢查人物與對話框的位置，讓電腦、手機直放、手機橫放三種尺寸下，對話框都不會互相蓋住。
我們希望使用者操作時，感覺自己真的在探索一座小島，而不只是點擊一張圖片。
六、讓小島擁有自己的時間與天氣
小島完成基本互動後，我們又增加了日夜和天氣系統。
白天與夜晚
網站可以依訪客所在地的時間，自動切換白天或夜晚，也提供手動切換功能。
白天能看到明亮的天空，夜晚則會出現燈光與不同的場景氣氛。
臺中天氣
小島會參考中央氣象署的臺中天氣資料，呈現晴天、陰天、雨天或霧氣等不同狀態。
為避免氣象資料的授權碼直接出現在前端，我們透過伺服器端的輕量 PHP 程式轉接天氣資訊。
角色作息
到了晚上，部分角色會進入休息狀態。
這些功能不一定是傳統公司官網需要的，但能讓小島更像一個持續運作的小世界。
七、從互動網站延伸到網頁遊戲與學習功能
一開始只是想介紹服務，後來我們發現小島也可以延伸成網頁遊戲：不用安裝 App，打開瀏覽器就能玩，還能結合學習內容。
魚老闆的鹽酥雞攤
魚老闆的鹽酥雞攤是一款直接在瀏覽器玩的網頁遊戲，訪客可以體驗點餐、炸食材、調味與出餐的過程。
目前的版本以接單、炸食材、調味和出餐為主。我們也正在規劃下一階段的玩法，希望它不只是玩一次就結束，而是讓人想再回來幫魚老闆顧攤。
接下來預計逐步加入：
- 營業目標與過關挑戰：每一輪設定不同的出餐目標，讓玩家試著在客人失去耐心前完成訂單。
- 賺錢與攤位升級：透過營業累積遊戲幣，逐步解鎖設備、裝飾或新功能。
- 新客人與特殊訂單：增加有不同喜好、耐心和點餐習慣的客人，讓每次營業有一點變化。
- 成就與回訪獎勵：記錄玩家達成的挑戰，增加持續經營小攤的樂趣。
這些都還是後續更新方向，會依實際開發和試玩狀況調整，不代表目前版本已經開放。想先來試試手速，可以到 魚老闆的鹽酥雞攤 玩玩看。
注音樂園：把小一國語變成可以玩的教室
注音樂園是後來加進小島的學習空間。點開浮島上的小屋，就會走進一間有彩旗、圓拱窗、木櫃和玩具箱的黏土教室，戴著 abc 帽的林小鷹站在左下角，陪小朋友選課。
我們把第 1 到第 9 課做成九塊彩色積木，放進牆上的 3×3 格子。小朋友直接點課號，就能進入那一課；右邊的玩具箱則是綜合複習，右上角的星星罐顯示累積獲得的星星。
同一課，安排不同的練習方式。進入課程後，林小鷹旁邊會列出這一課的新符號與結合韻。小朋友可以從認識注音、聽音選符號、聲調小豬、看圖拼注音、翻牌配對、拼拼樂、找找看七種練習中，選一個開始玩。
有的遊戲要聽聲音選符號，有的要辨認聲調，也有把注音逐一排進格子、翻牌配對圖片與注音的玩法。完成一輪後會獲得星星，林小鷹也會出來鼓勵；累積的星星保存在使用者自己的瀏覽器裡。
詞語照課本，插圖另外製作。課程內容依提供的課本照片整理，沒有出現在照片裡的詞先不加入。畫面上的 139 張詞語插圖另外製作，沒有使用或裁切課本圖片；字詞和注音放在程式資料裡，核對時可以逐項修正。
注音的聲音，是請 Kiki 和 Coco 兩位小朋友親自錄的。製作時，我們發現合成語音在念單一注音符號時不夠理想，也希望孩子聽到的是自然的真人聲音，所以請家裡的 Kiki、Coco 擔任小小配音員。錄好的音檔會依停頓分段，再逐段聽、核對注音；雜音和需要重錄的片段則另外處理，確認後才放進遊戲。
只是兩位小小配音員的「童工工作時間」有限，錄到一半就想去玩了，沒辦法要求太多（笑）。目前還有部分語音正在陸續補錄，如果玩到某些地方聲音尚未完整，也請大家多多包涵。我們會慢慢補齊，希望讓小朋友一邊玩、一邊聽見 Kiki 和 Coco 的聲音。
介面也經過一輪調整：保留角色和黏土場景原本的色彩，把卡片改成暖白、描邊改成淺暖灰，再用淡粉、淡黃和鼠尾草綠區分按鈕。課號、注音和選單仍是網頁元件，可以點擊、更新文字，也能依螢幕尺寸調整；背景圖負責營造教室氣氛。
為你禱告
在教會旁，訪客可以寫下想禱告的事，得到一段事先準備的禱告文字與經文。
這個功能沒有使用 AI 即時生成禱告內容，也不會將訪客輸入的文字傳送到我們的主機或儲存起來。
我們希望它是一個可以安心使用的小角落。
八、網站的技術架構
益盛小島主要採用靜態前端頁面，搭配少量伺服器端功能。
| 項目 | 技術方式 |
|---|---|
| 場景呈現 | 2D 圖片素材與圖層定位 |
| 視覺素材 | 預先製作的黏土質感圖片 |
| 互動功能 | JavaScript |
| 動畫效果 | CSS 動畫與 JavaScript |
| 響應式排版 | CSS Media Queries |
| 天氣資料 | 中央氣象署資料與 PHP 轉接 |
| 資料庫 | 核心場景不需依賴資料庫 |
這種做法的優點是製作彈性高，房子、角色和互動功能可以分階段增加。
需要注意的地方則包括素材載入、圖片最佳化、手機效能及多圖層的定位管理。
因此，我們也會針對手機上的字體大小、點擊範圍與畫面操作持續調整。
九、這次製作給我們的心得
做完益盛小島，我們最大的感想是：
網站不一定要選技術最複雜的做法，而是要選最適合內容的方式。
真正的 3D 建模能提供自由鏡頭與立體互動，2D 圖層則適合需要高度一致視覺、固定視角與獨立素材管理的場景。
兩者沒有誰一定比較好。
我們想做的是一座有黏土手作感、可以自由探索，還能持續增加內容的小島。
現在它已經不只是企業服務介紹頁，而是一個會隨時間、天氣和角色活動改變的互動網站。
如果你也有想法，想把品牌介紹、教育內容或遊戲體驗做成互動網頁，不一定要從完整 3D 系統開始。
先想清楚希望訪客看到什麼、可以做什麼，再決定適合的技術。
來益盛小島走走
益盛科技提供網頁設計、互動網站、網頁遊戲開發、系統開發、AI 應用及 SEO 相關服務。
