WebGL 二次元石頭剪刀布小遊戲。
規則很普通：
- 石頭 > 剪刀
- 剪刀 > 布
- 布 > 石頭
但有趣的是在於：
輸了會脫衣服。
對,就是這麼簡單粗暴。
起因其實是「我想研究精靈圖」
一開始我根本沒想做遊戲。
我只是想研究：
- atlas
- sprite
- 圖層疊加
- 動畫裁剪
這些東西。
然後想著：「總得有個實際應用場景吧？」
於是腦子一抽：
那乾脆做個二次元脫衣猜拳。
然後項目開始朝奇怪方向狂奔。
這個項目最麻煩的其實不是遊戲邏輯
石頭剪刀布規則簡單得離譜。
真正麻煩的是：衣服層級
因為角色不是：「一張完整圖片」
而是：
- 底圖 (防粿體被抓包,特意加密了)
- 衣服 A
- 衣服 B
- 衣服 C
- 配飾
- 遮擋層
不停疊。
「脫衣」其實是圖層管理
玩家贏了：
- 按設定好的順序移除一件衣服
電腦贏了：
- 再按逆序穿回來
聽起來簡單。
實際上會遇到一堆問題：
比如「不能瞬間露底圖」
這個特別關鍵。
如果你：
先刪舊衣服
再加新衣服
中間可能會閃出底圖。
於是視覺效果會特別怪。
所以我後來用了：reveal 覆蓋邏輯
新的層會立刻頂上。
盡量避免：
「裸體一幀閃現」。
雖然本身這項目看起來不正經
但至少技術上要優雅。
WebGL 在這裡真的很舒服
這個項目我最後選 WebGL 做。
原因很簡單：圖層太多。
而且：
- alpha 混合
- 多 sprite
- 動態切換
特別適合 GPU 幹。
如果你用DOM幹,可能就會被人審查元素扒衣服🥵
Atlas 真的是好文明
項目裡大量東西都是 atlas。
也就是：一張大圖切很多小圖。
這樣有幾個好處：
- 少載入:不用瘋狂請求幾十張 PNG。
- 好管理:所有素材都在一起。
- WebGL 特別喜歡,GPU 本來就很適合這種：「一張紋理反覆取樣」。
我甚至還寫了個調試工具
這個是我後來覺得最實用的部分。
因為：調 sprite 位置真的太折磨了。
尤其是：
x
y
w
h
z-index
全手填的時候,人會瘋。
所以我直接做了個 devtools
可以：
- 勾選顯示哪些衣服
- 拖拽移動
- 即時改位置
- 改層級
- 複製 JSON 配置
瞬間舒服很多。
這個項目讓我重新理解「前端遊戲」
其實瀏覽器現在已經強得離譜。
Canvas2D、WebGL、requestAnimationFrame 這些東西組合起來。
已經足夠做很多：
- 小遊戲
- 視覺小說
- Live2D 風格效果
- 角色互動系統
甚至一些輕量 galgame。
最後
這個項目本質上還是個技術實驗,只是實驗方向稍微有點不正經。
但它確實讓我把：
- WebGL
- sprite atlas
- 圖層系統
- 動畫狀態管理
這些東西狠狠練了一遍。
而且：
用「整活項目」學技術，真的比寫 TodoList 快樂太多了。
在線試玩:https://iajue.github.io/CanvasGame/undressing/index.html
如果你還記得她: 《論網速快慢的區別》
已經不是第一次請出她整活了.(ps:赤井心，暱稱哈洽馬，是日本一位活躍在YouTube上的虛擬YouTuber，所屬事務所為hololive)
