いつのまにか湯婆婆カレンダーに空きがあったのでなんとなく埋めようと思いました．
@torifukukaiou さんに用意していただいた こちらのランキング をゲーム化しました。コンテンツはそのままでビューをランキング形式からゲーム形式に変えた感じだと思っています．
デモはこちら: https://yushiomote.github.io/mcp2/
(WelGL2 なので一部モバイルブラウザでは動かないかもです．PC 推奨です)
- 湯婆婆 2D プラットフォーマー
- 千尋を操作して敵として出現する湯婆婆たちを倒します
-
A,Dで左右移動、Wでジャンプ、Jで攻撃 - 先にクリックしてフォーカス合せる必要あるかもです
-
- 湯婆婆 1 体はこちらのランキングの 1 記事に対応している
- 記事の湯婆婆が具現化して襲ってくるイメージ
- 湯婆婆の HP は
LGTM の数 + 1
クオリティ低いです。当たり判定ガバガバです．ジャンプ力以上の深い窪みがあって出れなくなる場所があります。湯婆婆多すぎて多分誰もクリアできないと思っています。160件くらいランキングにエントリしているので 160 体の湯婆婆が spawn しています．全ての湯婆婆の spawn 位置を確認できていません。湯婆婆が場外になってしまっているなどありましたら謹んで対応します。
コードがこちらに公開してあります。 https://github.com/YushiOMOTE/mcp2
実装の概要
正月に Bevy という Rust のゲームエンジンで遊んでいる頃に湯婆婆カレンダーの空きを発見して、ちょうどよいのでアセットをこしらえてゲームにしました。
Bevy とは
Rust 製のよさげなゲームエンジンです。
Web ブラウザ (WASM)、Android、iOS など色々なプラットフォームに対応しています。最近 0.4 になって WASM でのレンダリングに対応しました。筆者の環境は WSL2 で GUI を用意してなくて、最初から WASM 一択で試していましたがやりたいことできてます。
Bevy は Unity などで採用されている ECS (Entity Component System) という設計を使っててオブジェクト指向よりもさらに柔軟で多様なゲームオブジェクトを表現しやすくなっています。オブジェクト指向に比べて ECS と Rust は相性が良いように思いました。Rust は複雑な包含関係を持つと mutability 管理がネックになるので。Bevy の ECS は Amethyst など他の Rust ゲームエンジンの ECS よりも boilerplate が少ない印象を受けました。
Bevy では ECS 、グラフィックバックエンド、アセット管理などの様々な機能に対して Plugin が実装でき非常に拡張しやすい構造になっています。結果、色々な便利 Plugin が用意されています。
ただ Bevy は、まだ絶賛開発中なので刻一刻と変化しているので注意が必要な印象でした。よって Plugin も最新の Bevy 本体に対応してたりしてなかったりするので注意が必要です。
地形の描画
地形の作成には tiled というツールを使いました．
このツールを使うと GUI で簡単にタイルマップを作成することができます．このエディタの出力するファイル仕様は オープン になっていて， Rust でも既存の crate を使って簡単に取り込むことができます．
タイル画像はこちらの Tiny Platform Hill という素材を使いました．
bevy_tiled という Plugin を使えば tiled が吐くファイルを読み込んでレンダリングまで一気にやってくれそうでしたが、現時点では WASM (wasm32-unknown-unknown) ではすっとは使えなそうでした．
なので，代わりに tiled のファイルを事前にパースして必要な情報だけバイナリに組み込んでおいて，実行時に自分で地形を生成するロジックを書きました． tiled-rs という crate を使えば簡単に取り込めます．
キャラクターの描画
コードしか書けない人間ですが，千尋と湯婆婆とHPゲージと波動拳を MS ペイントで一生懸命ぽちぽちしました。
(注: 千尋のつもり)
(注: 湯婆婆のつもり)
(注: ハートのつもり)
Bevy ではスプライトアトラス（複数のスプライト画像の集合）をかんたんに取り込む機能もそろっています．
物理計算と衝突判定
物理計算には bevy_rapier を使うと良さそうに見えましたが、今回は ECS を試す意味で手で実装しました。単純に重力加速度を毎フレームごとに加算する，壁や地面に接したら速度を殺す程度の処理です．
衝突判定も単純に矩形の重なりを判定しました。
bevy_rapier も別途試してみましたが、WASM でも動作していてよい印象を受けました。よりちゃんとした物理計算をしたい場合はつかいたいところです。
デプロイ
Github Actions でコンパイルして， Github Pages にデプロイしています．
Github Actions で 1) こちらの湯婆婆ランキングページをダウンロード & パースしてアセットの生成， 2) Rust をコンパイル ＆ WASM 化して，3) 生成したアセットもろとも Github Pages にデプロイしています。Github Actions の job を走らせると最新のランキングがゲーム化されます。
まとめ
趣味で時々 Rust でゲームを作るのですが， Bevy はなかなかよい印象を受けています．ECS を採用していること， 少ない boilerplate， Plugin ベースの豊富な機能．今後の成長を期待しています．
