【開発日誌】着替えさせると、その場で変わる

導入

『メルティングガールズ』のフィールドを歩き回るキャラクターは、絵ではありません。　全身の骨格から、毎フレーム描いています。

言葉で説明するより、見ていただくのが早いです。

同じ子が、衣装だけ変わりながら歩き続けています。
これは6枚の絵を切り替えているのではありません。 衣装のデータを差し替えただけで、歩き方も、体つきも、髪の揺れ方も、同じプログラムがそのまま描き続けています。

差分絵にしなかった理由

もし一枚ずつ描くとしたら、必要な枚数はこうなります。

衣装 × ポーズ × 向き × 表情

このゲームのキャラクターは、歩く・走る・殴る・撃つ・技を出す・倒れる……とポーズが数十あり、正面・背面・横の三方向があり、そこに衣装が掛かります。つまり衣装を一着足すたびに、その全部を描き直すことになります。一人で作っている以上、二着目で詰みます。

そこで逆にしました。骨と体を先に用意して、衣装は「体の上にどう乗るか」だけを書く。　一着ぶんを書けば、そのキャラクターがこの先取るポーズ全部に自動でついてきます。ゲームエンジンは使っていません。HTML5 / Canvas 2D で、この描画のためだけに書いています。

「その場で変わる」ということ

この作り方の効きめは、遊んでいるとかなり分かりやすい形で出ます。

◆ 拠点で着替えさせると、次の出撃からその姿で戦います。
差分の用意も、読み込みもありません。着せた瞬間から、それが彼女の姿です。

◆ 戦闘中に服が脱げたら、脱げたまま戦い続けます。
「脱げた絵」に切り替わるのではありません。その状態のまま歩き、殴り、倒れます。

◆ 変身を解けば、髪の色も瞳の色も戻ります。
上のGIFで最初の一着だけ髪が若草色なのはそのためです——あれが変身後の姿で、
残りは変身を解いた姿です。魔法少女たちは普段は黒髪で、変身するとコードネームの色に変わります。瞳も同じで、彼女は普段は茶色、変身すると黄色になります。

赤い瞳になっているのは、もう堕ちているからです。拠点で着替えさせられる時点で、彼女はこちら側にいます。

遊べます

インストール不要です。ブラウザのタブひとつで動きます。

▼ 体験版(PC・スマートフォン対応 / 日本語・英語・韓国語)
https://ehglab.itch.io/melting-girls

体験版で遊べるのは、チュートリアル(研究所からの脱出 〜 警備隊長)と、第一区画——ブルーメ・グリーンの攻略までです。

拠点では、捕らえた幹部たちを着替えさせられます。上のGIFの衣装も、実際に着せられるものです。

不具合や「ここが分かりにくい」があれば、コメントで教えていただけると本当に助かります。特にスマートフォンでの操作感は、まだ情報が足りていません。

※ 本作は成人向けの作品です。登場人物は全員18歳以上です。

この下は、「じゃあ楽なのか」という話です。骨で描くようにしたせいで、いま一番手こずっているところ——横顔について書いています。
無料プラン(0円)でご覧いただけます。