続き：《同じアニメーション、3つの技術スタックで実装したらどう違うの？》
WebGL による二次元じゃんけんゲーム。
ルールは普通：
- グー > チョキ
- チョキ > パー
- パー > グー
でも面白いのはここ：
負けると服を脱ぐ。
ええ、それだけです。単純かつストレート。
きっかけは「スプライトシートを研究したかった」
最初はゲームを作るつもりなんてなかった。
ただ研究したかっただけ：
- atlas
- sprite
- レイヤー合成
- アニメーションカット
こんな技術要素。
それで考えたんです：「実際に使える場面がないと？」
そして思い付き：
じゃあ、二次元脱衣じゃんけんにすればいいと。
そしたらプロジェクトが暴走し始めた。
このプロジェクトで一番大変だったのはゲームロジックじゃない
じゃんけんのルールはシンプルすぎる。
本当に大変だったのは：服のレイヤー管理
キャラクターは「1枚の完成した画像」ではなく：
- ベース画像 (全裸バレ防止のため、わざと暗号化済み)
- 服 A
- 服 B
- 服 C
- アクセサリー
- 遮蔽レイヤー
重ね続ける。
「脱衣」の正体はレイヤー管理
プレイヤーが勝った：
- 設定された順番で服を1枚除去
コンピュータが勝った：
- 逆順で服を着せる
聞こえるのは簡単。
実際は山のような問題にぶつかる：
例えば「ベース画像が一瞬見えてはいけない」
これは特に重要。
もしこうすると：
古い服を先に消す
新しい服を後で追加する
その一瞬ベース画像がチラ見えする。
見た目がすごく変になる。
なので後で：reveal カバーロジックを使うことにした。
新しいレイヤーが即座に上に被さる。
極力避けたい：
「裸が1フレーム映り込む」
プロジェクト自体は不真面目に見えるけど
少なくとも技術的には美しくありたい。
WebGL はここで本当に心地いい
このプロジェクトは最終的に WebGL で実装した。
理由はシンプル：レイヤーが多すぎる。
しかも：
- alpha ブレンド
- マルチスプライト
- 動的切替
GPU が得意なことと完璧に合致。
DOM でやってたら、要素検査で服を剥がれる可能性もある🥵
Atlas は本当に良い文明
プロジェクトの大部分は atlas で構成。
つまり：大きな画像を小さく切り分ける。
メリットはいくつか：
- ロードが少ない：PNG を何十枚もリクエストしない。
- 管理しやすい：全素材が一箇所にまとまっている。
- WebGL が大好き、GPU はまさに「1枚のテクスチャを繰り返しサンプルする」のが得意。
デバッグツールまで作った
これは後から一番便利だったと思った部分。
なぜなら：スプライトの位置調整が本当に地獄。
特に：
x
y
w
h
z-index
全部手入力だと発狂する。
なので devtools を直接作った
できること：
- どの服を表示するかチェックボックスで切替
- ドラッグで移動
- リアルタイムに位置修正
- レイヤー順序変更
- JSON 設定をコピー
一気に快適になった。
このプロジェクトで「フロントエンドゲーム」を再定義した
ブラウザは今や信じられないほど強力。
Canvas2D、WebGL、requestAnimationFrame の組み合わせで。
十分に作れる：
- ミニゲーム
- ビジュアルノベル
- Live2D 風エフェクト
- キャラクター対話システム
軽量なギャルゲーもいける。
おわりに
このプロジェクトの本質は技術実験、ただ実験の方向性がちょっと不真面目なだけ。
でも確実に：
- WebGL
- sprite atlas
- レイヤーシステム
- アニメーション状態管理
を徹底的に練習できた。
しかも：
「ネタプロジェクト」で技術を学ぶのは、TodoListを書くより圧倒的に楽しい。
オンラインで遊ぶ：https://iajue.github.io/CanvasGame/undressing/index.html
もし彼女を覚えていたら：《ネットの速さの違いについて》
もう一度彼女にネタをやらせた。(ps:赤井心、ニックネームはハッチャマ、YouTubeで活動する日本のバーチャルYouTuber、所属事務所はhololive)
