MonoGame で制作したゲーム「リトルセイバー」を Web (Blazor + WebGL) で動かしてみた話

Web で動くゲームを作ってみようと思った話

image

現在 Steam や DLsite, Microsoft Store, Google Play で配信中のアクションゲーム「リトルセイバー」ですが、動作フレームワークとして「MonoGame」を使用しています。

当ゲームは有料での販売であるため各々で体験版を配布しているのですが、よりお手軽にゲームを体験できるようにするために開発中のデモ版も含めて以前まで Web で公開していました。

その時は「Silverlight + XNA」をフレームワークとして作り公開していましたが、残念ながら 2021 年にサポートが終了し、唯一動く IE もサポートが終了してしまったため、現在 Web で試せる環境はなくなってしまいました。まあ一応「β版開発室」にはずっとページは残っているのですが。

image

Unity など他のゲーム開発プラットフォームでは WebGL がサポートされていたりしますが、MonoGame では現時点で Web 版はサポートされていません。しかし実験的に開発はしているらしく、コミュニティを見てみたら一応 Web 上で動くライブラリを公開しているようでした。

内部的な動作ベースは WebAssembly となっているため、これまでの Flash や Silverlight とは異なり多くのブラウザでサポートされています。今後 (現在もですが) Web ブラウザで手軽に遊べるゲームを作るなら WebAssembly + WebGL ベースで作るのが良いかと思います。

WebGL で動かせるライブラリが見つかったので、今後 Web でゲームのお試し版を公開する可能性があるかもしれないことも考え、試しに現在のゲームを Web 版で動かせるかどうか試してみました。

実際に動かしてみた動画

実際にどうやったのかなどは後で書きますが、結果としては「動かすこと」はできました。どんな感じに動いているかは動画としてアップしましたので見てみてください。

ニコニコ動画

Youtube

ちなみにこのゲームを動かしているサイトは開発目的で作ったものなので非公開となっており一般の方が遊ぶことはできません。理由としては使用しているライブラリがまだ未完であるのと、遊べるレベルまで最適化するのが非常に面倒だったためです。

使用しているライブラリなど

今回使用しているライブラリは MonoGame の開発者でもある nkast さんが個人的に作ったライブラリとなっています。

該当するコミュニティのページは以下となっています。

またビルド・実行可能なサンプルプログラムも公開されています。

フレームワークとしては「Blazor WebAssembly」+「WebGL」+「.NET 6」+「C#」で動く形となっています。

動くプログラムを確認するならサンプルプログラムを触ってみるのが手っ取り早いですが、ライブラリは nuget でも公開されているので新規プロジェクトとして制作することもできます。

プログラムの移行に関していろいろやったこと

WebGL 版も MonoGame ベースのフレームワークとして作られているので大部分のコードについては変更することなく移行することができました。ただ本ゲームは 2D ベースなので 3D ベースのゲームプログラムの場合はどのぐらい影響があるかは分かりません。また、大部分は変更はありませんでしたが Web ブラウザで動くプログラムになってしまうので、いくつかは変更が必要になるものはありました。ここではゲーム固有部分ではなく誰にでも影響がありそうな修正箇所についていくつか書いてみたいと思います。

Effect (.fx) コンテンツは使用できない

デフォルトで実装されているエフェクトは分かりませんがコンテンツパイプラインから読み込む形の Effect は使用できないみたいです。`Content.Load` で読み込もうとした時点でエラーになります。2D でもカスタマイズした描画を実行している場合は注意が必要です。3D は特に影響が大きいのではないでしょうか。

リトルセイバーでは被弾時の白点滅にエフェクトを使っていたのですが今回省きました。

Song クラスは使用できない

BGM 再生などに使用されることがある `Song` クラスは使用できません。こちらも `Content.Load` でエラーになります。BGM を流したい場合は効果音と同じ `SoundEffect` クラスを使用する必要があります。`Song` クラスはストリーム再生できるメリットがあるのですが汎用性が低いこともあり、リトルセイバーでは `SoundEffect` で BGM を再生していたため手間はあまりありませんでした。

GamePad は使用できない

`GamePad` クラスで何らかのアクセスをしようとしただけでエラーになります。キーボードやマウスは使用可能です。Web ブラウザではゲームパッドの対応が元々難しかったりするので仕方ないですね。

Load 用コンテンツ (.xnb) を実行ファイルに埋め込み

WebGL 版のライブラリでは `wwwroot` フォルダ内にあるファイルからコンテンツを読み込むように作成されていますが、テスト段階でなぜか読み込めない場合がありました。キャッシュの問題なのかなんなのか不明だったため、コンテンツファイルはすべて「埋め込みリソース」として実行ファイルに埋め込むようにしました。これが原因か分かりませんが、先述のサンプルプログラムでも一部そのようにカスタマイズして読み込んでいるコードがあったりします。

コンテンツファイルを埋め込むと初回ダウンロード時にすべてのファイルをダウンロードする必要があるので読み込みに時間が掛かります。ただし、全て読み込んでからゲームを動かすのでゲーム実行中の読み込みスピードは上がります。逆に `wwwroot` に置くパターンは初回のゲーム読み込みは早いですが、コンテンツが必要なタイミングでインターネットからダウンロードするので途中の読み込みは遅くなります。

テクスチャーで Dxt3 は使用できない

おそらく WebGL 版にデコーダーがないので `Content.Load` でエラーになります。`SpriteFont` もデフォルトでは `Compressed` (Dxt3) になっているので、普通に作ってるとエラーになります。テクチャーフォーマットは `Color` にしておけば大丈夫です。

SpriteFont.Characters は使えない

使っている人がいるかどうかは分かりませんが `SpriteFont` に何の文字が含まれているかをチェックするためなどの目的で `Characters` プロパティは使用できません。

暗号化やハッシュのライブラリは使用できない

これは MonoGame 側の話ではなく Blazor 側の話です。一応クラスはあるのですが使おうとするとサポートされていないという Exception が発生します。代わりに `BouncyCastle.NetCore` などのサードパーティライブラリを使用する必要があります。ただ今後の .NET のバージョンで暗号化やハッシュがサポートされる可能性はあります。

ローカルファイルへの書き込みはできない

Web ブラウザで動作するものなのでローカルへのファイル書き込みは出来きず代案が必要となります。...とはいうものの実は一時的にできたりはしますが、結局は永続化はできないので対処は必要です。ローカルストレージやインターネット上の Web ストレージなどを使用する必要があります。

SoundEffect の音量が正しく設定できない

これはおそらく不具合だと思うのですが、`SoundEffect.Volume` プロパティを設定しても必ず 100% の音量で再生されてしまいます。対処法としては元のサウンドファイルの音量を下げるしかないのですが、さすがに面倒なので放置しています。ただなぜか再生中には音量は変更できるようです。

パフォーマンス関連

おそらくこれが一番影響がでかいのではないかと思います。ネイティブで動くコードと WebAssembly で動くコードではパフォーマンスに大きな差があるため、ネイティブでギリギリまで調整して動いているプログラムは Web で動かそうとするとほぼ動かすことが困難になるのではないかと思います。ちなみにどれぐらいパフォーマンスが落ちるかについては先述の動画で確認できると思います。

ただ WebAssembly はまだ発展途上なので今後少しづつ改善はされていくと思います。それでもネイティブに勝てることはないと思うので Web 版が正式リリースの対象に含まれているゲームの場合は定期的にパフォーマンスの確認をしていった方がよいと思います。

まとめ

今回 WebGL 版としてゲームを動かせるか試してみたのですが、目的としてはローカルで動くゲームをまずは手軽に Web 上で遊んで確認できるような環境を作りたかったというのがあります。

リトルセイバーについてはすでに本リリースしているので今のところそういう環境が必要という場面にはなっていないですが、今後そういったこともあるかもしれないので興味的なものも含めて試してみました。

もしかしたら WebGL でゲームを公開してみたいという方もいるかもしれないので、この調査結果が大なり小なりでも参考になればいいかなと思いました。

MonoGame 3.8.1 で「共有プロジェクトにある mgcb ファイルをダブルクリックしても MGCB Editor を開けない問題」「MGCB Editor でビルドしても無反応な問題」の対応方法

共有プロジェクトにある mgcb ファイルをダブルクリックしても MGCB Editor を開けない問題

まずこの現象については MonoGame 3.8.1 のテンプレートから「MonGame Shared Library Project」を作成すれば確認できます。今回の共有プロジェクトは mgcb がビルドできるので便利です。

作成後「Content/Content.mgcb」をダブルクリックしても MGCB Editor は起動しません。

image

ちなみに他のプロジェクトはダブルクリックすれば開けます。

image

image

MGCB Editor でビルドしても無反応な問題

まず他のゲームプロジェクトで開いた MGCB のプロジェクトはビルドをすれば通ります。

image

しかし、この MGCB Editor から他の MGCB プロジェクト、例えば先ほどの共有プロジェクトで作成された mgcb ファイルや、他のフォルダにコピーした mgcb ファイルを開いてビルドしても全く無反応になります。

image

image

対処方法

他のプロジェクトとの差異を調べてみたのですがどうやら mgcb ファイルのある場所から見て「..\.config\dotnet-tools.json」ファイルがあるかどうかでダブルクリックで開けたりビルドができるようになるみたいです。

image

なので共有プロジェクトの場合は、一度他の MonoGame のプロジェクトを作成してから「.config」フォルダを共有プロジェクトにコピーすればダブルクリックで開けるようになり、ビルドもできるようになるみたいです。

image

image

ちなみにプロジェクトとは全く関係ない場所に mgcb ファイルを置いている場合は下の図のように1階層上のフォルダに .config フォルダを置いておけばビルドはできるみたいです。ちょっといまいちですが。まあ単独でビルドすることはあまりないとは思います。

image

image

ちなみになぜこんなことになっているかというと、OS に MGCB Editor をインストールさせてしまうと、バージョンの異なるプロジェクトが複数あった場合に問題になることが多いため、プロジェクトにくっつけてしまいバージョンは全てプロジェクト依存にさせれば問題はなくなるだろう、ということらしいです。以下の記事にそれっぽいことが書いてありました。

【MonoGame】 3.8.0 の MGCB Editor を削除する方法

2022/07 に MonoGame 3.8.1 がリリースされ MonoGame のテンプレートや MGCB Editor は Visual Studio 2022 の拡張機能に全て統合されました。

ただ、3.8.0 で使用していた MGCB Editor は「dotnet tool」でインストールしているため、3.8.1 をインストールしたあとも残り続けます。これを削除するにはコマンドプロンプトなどで以下の手順を実行します。

インストールされている .NET Tool を確認します。

dotnet tool list --global

その中に以下のものがあるか確認します。

  • dotnet-mgcb             3.8.0.1641      mgcb
  • dotnet-mgcb-editor      3.8.0.1641      mgcb-editor

あった場合は以下のコマンドをそれぞれ実行して削除します。

dotnet tool uninstall --global dotnet-mgcb

dotnet tool uninstall --global dotnet-mgcb-editor

もう一度リストを表示してなくなっていることを確認します。

image

ちなみにスタートメニューには MGCB Editor のショートカットは残ってしまうのでクリックして削除してください。

MonoGame 公式サンプルプログラムの Tips を2本公開しました

MonoGame の公式サイトにサンプルプログラムがあるのですが、公開されているものはすべて英語コメントでプロジェクトのみがアップロードされている形となっています。

なので今回その中から最初の2つを日本語で解説しつつコメントの日本語化してみました。以下の2つのサンプルが対象です。

  • Aiming
  • Audio3D

他のプロジェクトも解説していこうかと思ったのですが、現在公開されているサンプルは以前の MonoGame のバージョンで作られたものも多く、残念ながらそのまま MonoGame 3.8 に持っていけないものもあったため移行作業は中断しています。

今後の公開については気が向いたらレベルで見ていただければと思います。

公開ページは以下の場所にあります。

リトルセイバーのプレイデモムービー#16, #17をニコニコ動画にアップしました

体験版を公開しましたのでそちらもよろしくお願いします!

]]>

ゲーム「リトルセイバー」の公開時期変更について

ゲーム「リトルセイバー」の開発も佳境に入り2月に公開を予定しておりましたが、予想以上にゲーム制作のほうに時間が取れなかったのとテストに時間がかかっていることもあり、2月の公開が難しい状況となっております。そのため、ゲームのリリースは3月にずれ込む見込みとなってしまいました。ゲームの公開とプレイを楽しみにされていた方申し訳ありませんでした。

とはいうものの何もせずにそのまま3月に流してしまうのも申し訳ないので、本来完全版と体験版のリリースを同時に行う予定でしたが、先に体験版のみをリリースしようかと思います。

体験版の公開日については2月ぎりぎりの28日をめどに公開を予定しています (とはいっても平日にとれる作業時間が皆無なのでこれも厳しいと言えば厳しいのですが…)。体験版の中身については1月に仙台コミケで配布した体験版CDからいくつか修正の入った Ver 1.01 版となります。Ver 1.00 と同様最初のいくつかのステージが遊べるようになっているのとイベントシーンなどが省かれたものとなっています。主に戦闘などをメインに遊べるバージョンとなっております。注意点としてはセーブデータは完全版のほうには引き継ぐことはできません。

完全版のリリース時期についてはもう2~3週間ほど先になるかと思います。申し訳ありませんがそれまでもう少々お待ちください。

]]>

リトルセイバーのプレイデモムービー#14, #15をニコニコ動画にアップしました

仙台コミケでディスプレイとして流していたデモムービーの第2弾と第3弾をそれぞれ3分バージョンに編集してアップしました。

ゲーム制作の進捗については別の記事で書こうかと思っていますがいろいろ忙しくて少し遅れ気味です。2月中にはなんとかしたいとは思っているのでもう少々お待ちください。(ちなみにアップしている動画はすでに編集済みのものなので動画制作に時間がかかっているわけではありません…)

]]>

ゲーム開発デモ版 Ver 0.60 を公開しました

2018-03-21_Ver0.60

Ver 0.50 の公開から5か月ほど経ってしまいましたが、ようやく 0.60 を公開しました。割と早い段階でひととおり修正などが終わったら公開しようかと思っていたのですが、修正が終わる前にこれも直したい、あれも付け加えたいなどやってたため遅くなってしまいました。

今までと同じ通り戦闘ステージのみを遊べるようになっています。正直なところ Ver 0.40 以降からはそんなに変わったところはないと思います。実際には戦闘ステージ以外のメニュー画面の作りなどもやっているので、デモ版に反映されているところが少ないというところが実情です。

基本的な機能については大体できている感じで、後はいくつかの機能追加とコンテンツの作りこみが今後の作業範囲となっているので、おそらく今後リリースするデモ版もあんまり変わり映えはしないと思います。デモ版にいろんなコンテンツを埋め込んでみてもいいのですが、それだとデモ版であるにも関わらず重いものに出来上がってしまうので、実際に作り上げたものが遊べるのは本リリースの時だと思います。

更新内容とかはデモ版のページに書いてありますのでそちらを参照してください。一部操作キーが変わりましたが、それ以外は今までのデモ版と大体同じ動きになっています。

デモ版は以下のページ先で遊べます。例のごとく Silverlight を使っているので、対応する Web ブラウザは Internet Explorer のみです。初めてプレイされる方はSilverlight のインストールと GPU の有効化設定を行ってください。

開発に関してちょっと余談。

現在開発は Visual Studio 2015 で行っているのですが、いつのころからかアップデートをしてから Silverlight のアプリをデバッグ実行しようとしても Silverlight の Develop 版をインストールしてくださいとエラーがでて、まったくデバッグ実行できなくなってしまいました。まあ、Silverlight の開発サポートも停止されているので仕方ないところもあるのですが、前のバージョンの Visual Studio をインストールするのも嫌なので実行時のログ出力だけで頑張っています。とはいっても実際の開発は UWP で行っているので、そちらで一通り動いたら Silverlight で動かしてみるって感じなので、Silverlight 版でテストするということは実際にはそんなにないです。ただ Silverlight で動かしたときの固有のエラーが出たりすると原因を探すのが結構大変なのですが…( ^ ^;)

]]>

MonoGame 3.6 の UWP10 プロジェクトでキーボード操作を行うと遅延する

通常 Keyboard.GetState メソッドでキーボードの状態を取得すれば現フレームの段階でのキーの押下状態を取得できます。一度に複数のキーを同時に押しても問題ありません(キーボードの配線によってはキー同時押下の上限はあります)。

しかし、UWP10 のプロジェクトを作成し、Windows 10 の環境で実行すると、押下状態を瞬時に取得することはできず、段階的に1キーずつ取得されるような動作になってしまいます。しかも、しばらく押したままにして離すと、一定時間押下中判定のままになってしまい、その後これまた段階的に1キーずつ放すような状態の取得を行います。

ちなみに UWP8.1 のプロジェクトで同じ処理を行うとまったく問題はありません。

参考にその動作を録画してみたので、実際に見てみるとわかると思います。最初が UWP8.1 のプロジェクトでそのあとが UWP10 のプロジェクトでの動作です。

この件についてコミュニティで探してみると同じような報告があり、どうやら MonoGame 3.6 での Windows 10 用の実装に問題があるようです。3.6 リリース後に修正したとの書き込みがあり、とりあえず修正したものを使いたい場合は開発ビルド版を使ってくださいとのことですが、ダウンロードページでそれをダウンロードしようとしてもファイルが見つからないようでした (リンクミス?)。

とりあえずは現状で我慢するか、開発版を探す、UWP8.1 を使う、3.7 を待つのいずれかになりそうです。私はずっと UWP8.1 版を使っていたので気づきませんでした( ^ ^;)。

]]>

ゲーム開発デモ版 Ver 0.50 を公開しました

2017-10-21_ゲームデモ版0.50

最近全然投稿できていなくてかなり間が空いてしまいましたがなんとかやっています。

制作動画のほうも一応話すネタとかはあるのですが、収録するタイミングが全然取れなくてあちらの方も投稿が止まっている状態です。ただ、制作のほうはスローペースですが作っており、今回デモ版を公開するに至りました。

とはいうものの、Ver 0.50 は何をメイン機能として公開しようかと考えていたのですが、これといって押せるような機能はなく、プレイしてみるとわかるのですが見た目とかは Ver 0.40 と大して変わっていません。まあ正直なところゲーム基盤は大体できてきたかなーっていう感じで、後は微調整とかテストとかコンテンツ制作とかデータとか作りこんでいく段階になっているので、今後のバージョンもそんなに見た目とかは操作感とかは変わらないかと思います。

Ver 0.50 の公開が遅くなったのもこのせいで、どの段階で区切りをつけようかと考えていてずるずる伸びていってしまったので、とりあえず現状でいったん区切ろう、ということで今回公開しました。

ちなみにゲームについてですが、操作方法とかは Ver 0.40 と同じです。ステージも1つのみで開始時にゲーム難易度を選択できます。今回仲間メンバーの数をかなり増やしたので、Ver 0.40 のように 0 になることはほとんどなく、難易度も前よりは簡単になっていると思います。ただ、敵味方共に強い攻撃を使うことがあるので油断せずに戦ってください。

ゲームは以下のページから遊ぶことができます。いつものように Internet Explorer & Silverlight でプレイしてください。

ほんとは UWP 版でプレイしてもらいたいのですが、こんな感じにデモ版のような感じで配布できるのかがわかっていないので様子見しています。Silverlight 版だとどうしてもカタついた動きになってしまうんですよね。

]]>