SUI
SUI
miniature

我先是建構了一間小屋,然後成就了一個迷你世界

SUI·2026.10.20

一開始,我只是想要蓋一間角色在裡頭自己生活的微縮小屋

一開始我沒有想要建構什麼迷你世界,並不是什麼大的構想,我只想做一間小屋。

這個念頭來自 X 上ちーず san 的一件作品。ちーず san 用 GPT-6 Astra,只下了一段 Prompt,大約五分鐘就做出一間可愛的動森小房間。

第一次看到的時候,我真的覺得很驚喜。我想:這個形式剛好可以把角色設計、3D 建模、動態和互動開發一次講清楚。比起一張一張的作品圖,我更想給人一個能實際打開、實際玩的小東西。剛好接下來是羊年,我想,那就讓一隻小羊來當主角吧。

一段 Prompt 很適合快速看到效果,但我想做的是一間可以一直長大的房間:之後要加家具、換角色,讓角色自己生活,還要加上互動。

於是有了羊貝貝和她的小屋。羊貝貝的英文名字叫 baaaaa,就是羊「咩~」的叫聲。牠是一隻約2頭身的小羊,白色大圓頭、豆豆眼、粉紅小鼻子,穿白 T 配粉紅吊帶褲,看起來質感就像霧面的軟膠玩具。

羊貝貝的 3D 三視圖:正面、斜側、側面、背面。
羊貝貝的 3D 三視圖:正面、斜側、側面、背面。

我給這間小屋定了三個目標:

  • 作品集展示:一個完整、可以操作的小產品。
  • 節慶傳播:讓人寫一張羊年賀卡,用 LINE 寄給心裡惦記的人。比起一張貼圖,我希望祝福是一句一句寫下來、親手裝進信封裡的。
  • 療癒陪伴:就算什麼都不做,小屋也要是「活著」的,讓人想多看一下。

從像素到一間粉紅色的 3D 微縮小屋

羊貝貝不是一開始就是 3D 的。我先把我設計的平面概念圖縮成 24、32、48 像素,確認多小還認得出是牠。接著用 11 色調色盤重畫,再合併成 7 色,最後只換羊毛的顏色,選出 8 種毛色。

從左到右:最早的概念圖、自動縮成 48 像素、手動整理過的像素版。
從左到右:最早的概念圖、自動縮成 48 像素、手動整理過的像素版。

但看著看著並不順眼,所以後來把像素版定下來的比例和配色,原封不動地建立了 3D 版本。

3D 羊貝貝的小屋是一間微縮的立體娃娃屋:粉紅色的牆、淺蜂蜜色的木地板,放著書桌和筆電、點心矮桌、床、毛線籃、衣櫃和書櫃。整間屋子和羊貝貝都是用程式一塊一塊組起來的,沒有載入任何外部模型。顏色只能從同一份色票拿,不描邊、不加腮紅、眼睛不反光。我後來發現,這些限制比「可愛一點」更能守住一致的感覺。

現在的羊貝貝小屋:左牆衣櫃旁就是那扇白色的神祕小門。
現在的羊貝貝小屋:左牆衣櫃旁就是那扇白色的神祕小門。

羊貝貝會自己過日子:寫卡、吃點心、讀書、午睡、織毛線。沒人操作時,牠會自己挑下一件事做,繞開家具走過去。訪客可以幫牠換裝,讓牠寫一張賀卡。收件人在 LINE 裡拆開信封,底下有一個「也回一張小羊賀卡」的按鈕。寫卡、分享、收卡、回卡,祝福就這樣一張接一張傳下去。

10 月 6 日,第一版部署上線,小羊正式取名叫羊貝貝。之後一個禮拜接上 LINE 分享、加上「關於小屋」和一支 42.5 秒的宣傳影片。第一週的數據告訴我,很多人卡在 App 內建瀏覽器的載入,我就做了羊貝貝抱著紙箱小跑步的載入畫面。

還有一件小事,後來變得很重要。我在左牆衣櫃旁邊放了一扇白色小門,點一下,它會晃一晃,冒出一句「神祕的門,這是要去哪?」當時我也還不知道答案,只知道門的後面,之後應該要有別的作品。

第二間小屋:春男和他的 78 張牌

春男塔羅牌是我今年年初就開始發展的專案。原本我在找可以有多種動態表現的主題,後來發現塔羅牌每張牌都是一個小故事,剛好很適合。

最早的起點是我在 Instagram 上的這篇貼文。那時正逢春分前夕,我開始設計「春男塔羅牌」。我也從春男的三視圖開始,再根據牌義發展成視覺。但 78 張牌卡其實是很大的生產量,我一張一張地了解故事、慢慢調概念,再一張一張地用 Nano Banana 精修生成,花了很長的時間。

審判、聖杯八、愚者,這裡是春男的塔羅小屋最終定稿的設計。
審判、聖杯八、愚者,這裡是春男的塔羅小屋最終定稿的設計。

春男是一隻圓滾滾的藍色小貓,英文名字叫 Haruo。他有一顆大圓頭,手短腳短,最喜歡披著一件撒滿小星星的斗篷。原型是我家那尊很重的胖毛孩子春男。我用他為原型製作一副他專屬的塔羅牌,78 張牌的主角都是他。

春男的 3D 三視圖:正面、斜側、側面、背面。
春男的 3D 三視圖:正面、斜側、側面、背面。

做羊貝貝小屋的經驗,在這裡馬上派上用場。我把發展好的概念牌卡作為基礎,一開始試過扁平的 SVG,太平面;也試過深度視差的版本。最後都封存起來,改走羊貝貝小屋那種立體、霧面、程式建模的玩具風格。小屋的骨架也是同一套:L 形微縮娃娃屋、狀態機加五個日常行動、隨意模式和衣櫃換裝。

春男的塔羅小屋:和羊貝貝同一套 L 形娃娃屋骨架,換成星空和水晶球。
春男的塔羅小屋:和羊貝貝同一套 L 形娃娃屋骨架,換成星空和水晶球。

真正花時間的是牌。因為每張牌都要是一個會動的立體小舞台:春男有時候當愚者、有時候當皇后,騎著胖胖的玩具馬當騎士,粉紅兔、小惡魔、天使和小白狗也會來客串。構圖和牌義以偉特塔羅為底;死神、惡魔、高塔這些難牌,我保留牌義,但改成溫柔、帶一點幽默的版本。點一下牌上的春男,他會跳起來跟你打招呼。

占卜的流程也改了三版才定案。第一版要訪客打字提問,第二版是弧形牌陣加上解說和天使的祝福,我都覺得太多了。現在的做法很簡單:在心裡默念問題,春男發三張牌,過去、現在、未來,一張一張慢慢翻開。問題只放在你心裡,網站上沒有地方輸入,牌義也不接 AI。塔羅牌不替你做決定,只陪你把心裡的事攤開來看一看。

春男的塔羅小屋在 10 月 12 日上線,當天發了 v1.0.0,接著又做了英文版和日文版。這時候,我有了兩間小屋。

兩間小屋之後

有了兩間小屋,問題就來了:它們要怎麼連在一起?

我曾經想讓羊貝貝的小屋直接把路徑轉到春男那邊,很快又把這個想法撤回了。春男並不是羊貝貝小屋的一部分,兩間小屋應該平起平坐,由上面一層來接它們。那扇「神祕的門」要通往哪裡,答案在此時也變得清楚了:門外不是一個選單,而是一個世界。

這就是迷你世界(Mini World)。它就像是動物森友會裡的一座小島,只是在小島上的每間小屋是一個獨立的作品。訪客從上方俯瞰整座島,點一間小屋,鏡頭飛到門口、門打開、推進去,就到了那間小屋。從小屋回來,鏡頭會從同一扇門退出來。

迷你世界的午後:春男的藍屋頂在高台上,羊貝貝的圓屋頂在右邊水邊,左邊是樹洞和搭鷹架的預計上線的紫微相談室。
迷你世界的午後:春男的藍屋頂在高台上,羊貝貝的圓屋頂在右邊水邊,左邊是樹洞和搭鷹架的預計上線的紫微相談室。

我在這裡做了一個重要的決定:迷你世界只負責「看到小屋、點進去」,不把小屋的功能搬進來。兩間小屋用的套件、版本都不一樣,硬合在一起會互相牽制;用 iframe 嵌進來,手機效能、LINE 分享、數據追蹤都會出問題。所以每間小屋繼續是自己的作品,各自部署;迷你世界是把它們串起來的那條路。

還有一個技術上的取捨。迷你世界的島、樹、小屋外觀和居民,全部都是用 three.js 一塊一塊用程式組起來的,和兩間小屋採同一套霧面玩具風格。老實說,用程式繪製的圖面,跟在 Blender 裡細細建模、打光、烘焙材質相比,畫面的精緻度還是有一段差距。

但它的好處是輕。不用下載一個個外部模型檔,打開網頁就能比較快看到整座島。迷你世界是作品集的入口,是一個讓人點來點去的 web app 介面,對它來說,快一點打開,展示多一點細節更重要。

這座島也開始有自己的生活。羊貝貝和春男走出各自的小屋,在島上散步、坐長椅、去碼頭、照顧田、找朋友聊天,下雨會撐傘,晚上會回家。島上有三隻小貓、會浮上來噴水的鯨魚、山頂的燈塔;花依月份開,櫻花和楓葉跟著季節變色,天色跟著你的當地時間。除了兩間營業中的小屋,島上還有搭著鷹架的紫微相談室、即將開放的樹洞,和兩塊空地。

10 月 19 日做出第一版,10 月 20 日第二版上線到 sui.funkuki.com/mini-world。

從一間小屋,到一個世界

回頭看,從羊貝貝的小屋上線到迷你世界上線,中間只隔了兩個禮拜。我並不是先畫好一張大地圖才開始蓋的。我先是建構了一間小屋,做第二間的時候,才發現它們需要一個地方放在一起。

從靈感到迷你世界:兩條線、三個作品。
從靈感到迷你世界:兩條線、三個作品。

每間小屋都是一個完整的小故事:一個是把祝福裝進信封寄出去,一個是陪你把心裡的事攤開來看。迷你世界不替它們說故事,只是讓這些故事住在同一座島上,居民可以互相串門子。

這座島還在 MVP 階段。接下來,兩間小屋要加上「角色打開大門走出去」的過場,紫微相談室和樹洞也會陸續開放。再往後,我想讓訪客都能擁有一個自己虛擬的角色,用鍵盤或手指在島上走一走,自己去敲每一扇門。

另外,

那扇衣櫃旁的小門,現在我知道它通往哪裡了。:)

Share
Hi, 我是 Sui!專攻品牌策略與體驗設計的數位產品設計師。
我在這裡記錄我的數位作品,同時也記錄產品開發的歷程,有時也留下一些生活雜記。

Continue reading