「もちほっぺ・メーカー」を公開しました！ — 好きすぎて作ってしまった話

こんにちは、saba です。

聞いてください。作ってしまいました。

トリッカル もちもちほっぺ大作戦 というゲームがありまして。……あの、キャラのほっぺをぐにーっと引っぱって、ぱっと離すと ぷるんっ と戻る、あの手触り。あれが好きすぎて、気づいたら「自分の好きな画像で、あれをやりたい」という欲求が抑えられなくなり——Web おもちゃにして公開しました。

その名も もちほっぺ・メーカー。

どんなおもちゃ？

遊び方はたった 3 ステップです。

1. いれる — 好きな画像をドロップ / ファイル選択 / ペースト（サンプルもあります）
2. ぬる — もちもちにしたいところ（＝ほっぺ）をブラシで塗る
3. あそぶ — つまんで引っぱって、離すと ぷるんっ

引っぱるほど「もちっ」と抵抗が増して、フリックしながら離すと勢いよく揺れます。スマホなら両ほっぺ同時づかみも。遊んでる様子は動画（WebM）や GIF で保存してシェアもできます。

“ぷるん” の正体はバネ物理

いちばんのこだわりは、当然あの手触りです。「引っぱる → 離す → ぷるんっと戻る」をバネの物理シミュレーションで実装しました。

指でつまんだ点をバネで引っぱり、離すと戻ろうとする力＋揺り戻し（減衰しながら振動）が働く——という、いわゆるダンパー付きバネです。やわらかさ・のびる量・ゆれ具合は設定でいじれるようにしていて、この係数をちょっと変えるだけで「こんにゃく」から「つきたての餅」まで手触りが激変します。ここの調整が沼で、一番時間を溶かしました。

描画はエンジンに頼らず、自前の WebGL メッシュ変形

画像をぐにゃっと歪ませる部分は、画像をメッシュ（格子）に貼って、つままれた頂点を動かして変形しています。これを ゲームエンジンもフレームワークも使わず、素の WebGL で自前実装しました。

• 画像をテクスチャとしてメッシュに貼る
• ほっぺに塗ったマスクの範囲だけが変形するように重み付け
• バネ物理で動いた頂点座標を毎フレーム GPU に渡して描画

「ライブラリに頼らず手触りを 1 から作る」のがやりたかったので、シェーダーもメッシュ生成も自分で書いています。……正直けっこう大変でしたが、そのぶん挙動を隅々までコントロールできました。

塗った場所だけがもちもちする理由

全体が歪むと「ただ画像が伸びてるだけ」になってつまらない。塗った範囲（ほっぺ）だけがもちもちして、それ以外は固定されるからこそ「ほっぺをつまんでる」感が出ます。

そこでマスクの仕組みを入れました。ブラシで塗った領域を別キャンバスに記録し、その濃さを変形の重みに使っています。スマホでは二本指で拡大・回転しながら細かく塗れるように、マルチタッチ対応も入れました。

技術スタック（軽量です）

• Vite + TypeScript — ビルドはこれだけ
• 素の WebGL — 描画・メッシュ変形・シェーダーは自前
• 外部ライブラリは gifenc 1 個だけ — GIF 書き出し用。しかも Web Worker で動かして、エンコード中も UI が固まらないようにしています
• 録画は WebM が MediaRecorder、GIF が上記 worker

まとめ

• 好きなゲームの「ほっぺぷるん」が好きすぎて、Web おもちゃにしました
• “ぷるん” はダンパー付きバネ物理、描画は自前 WebGL メッシュ変形、塗った所だけ変形するマスク付き
• 依存ライブラリは GIF 用の 1 個だけ、GIF は Web Worker でエンコード

作ってる間、ずっとほっぺを引っぱって笑ってました。開発というより遊びでした。ぜひ好きな画像で、あの手触りを味わってみてください。

▶ あそび場で遊ぶ ／ ソースコード（GitHub）

ではでは！