ひさびさに Blazor を触ってみたので簡単なアプリとして入力されたテキストの文字数をカウントするアプリを作ってみました。機能としてはそれだけです。
以下のページで公開しています。PWA を設定しているのでローカルにインストールすることも可能ですが、実際には対象の Web 画面がすぐに開けるぐらいのメリットだと思います。
タグ: Web
MonoGame で制作したゲーム「リトルセイバー」を Web (Blazor + WebGL) で動かしてみた話
Web で動くゲームを作ってみようと思った話
現在 Steam や DLsite, Microsoft Store, Google Play で配信中のアクションゲーム「リトルセイバー」ですが、動作フレームワークとして「MonoGame」を使用しています。
当ゲームは有料での販売であるため各々で体験版を配布しているのですが、よりお手軽にゲームを体験できるようにするために開発中のデモ版も含めて以前まで Web で公開していました。
その時は「Silverlight + XNA」をフレームワークとして作り公開していましたが、残念ながら 2021 年にサポートが終了し、唯一動く IE もサポートが終了してしまったため、現在 Web で試せる環境はなくなってしまいました。まあ一応「β版開発室」にはずっとページは残っているのですが。
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 でゲームを公開してみたいという方もいるかもしれないので、この調査結果が大なり小なりでも参考になればいいかなと思いました。
【β版開発室】使用文字抽出 (Blazor 版)
β版開発室で公開してみました。Blazor アプリの開発の練習を兼ねてのリリースです。本リリースすることはないのでたぶんずっとβ版のままだと思います。
機能としてはシンプルでテキストの内容から使用している文字を一覧化して出力できます。
- 文字抽出 (sorceryforce.net)
ちなみにこのプログラムは通常の HTML 版ですでに実装済みなので同じものが２つ存在している形になります。Blazor 版はクライアントで処理を完結しているのでインターネット上にテキストが流れることはありません。
また、今回 Blazor 版は PWA の機能を入れているので Web ブラウザからローカル環境にインストールすることができます。
とは言っても中身は Web ページなので使える機能については変わりはないです。まあ手軽に起動できる点としてはメリットでしょうか。
ASP.NET Core Tips に asp-append-version 関連の Tips を追加しました
以下の３つを追加しました。
- キャッシュされた古いバージョンの静的ファイルが使用されないように最新であることを示すバージョンを付加する
- 静的ファイルを wwwroot 以外のフォルダに配置する
- wwwroot フォルダにある静的ファイル以外にも asp-append-version を適用する
実のところ、本来 Tips としてあげたかったのが３つ目の「wwwroot フォルダにある静的ファイル以外にも asp-append-version を適用する」だったのですが、この Tips を書く前の前置き説明みたいな Tips も必要かなーと思い、前２つの Tips も書いてみました。
wwwroot フォルダ以外に静的ファイルを置いて asp-append-version 属性を設定してみたけどなんか動かないなーって調べてみて対応しました、という内容です。
ASP.NET Core 3.1 ベースですが、Razor ページ, MVC どちらでも動くはずです。
艦これ改修工廠検索ツール Ver 0.10 を公開しました
Web ブラウザゲーム「艦隊これくしょん」のゲームシステムの一つである、装備を改修できる改修工廠のデータ検索ができる Web ツールを作りました。
艦これで遊んでいる方なら使い方はすぐにわかると思います。改修工廠でいつ改修できるか、誰が改修できるか、改修にどれぐらい素材を消費するかがデータベース化されていますので、画面の検索条件や並び替えなどを使ってほしい情報を可視化することができます。検索条件は URL 化されていますので、お気に入りに登録しておけばすぐに呼び出すことが可能です。
また、簡易検索機能もあり、検索した結果を保存することによって画面の上側にボタンが配置されるようになります。ボタンをクリックすると保存した検索条件で即座に検索することが可能です。現在 Ver 0.10 では検索情報の保存などは Web ブラウザのローカルストレージに保存しています。ローカルストレージに保存されたデータは Web ブラウザのキャッシュクリアで消えてしまいますのでご注意ください。今後のバージョンアップではユーザー認証を用いてサーバー側で保存しようかと思ってます。
改修工廠検索ツールを開発しようと思った理由
元々は Excel に手動でデータを入れこんで並び替えなどを行っていたのですが、データ更新が面倒だったのと Web 側で一元管理できた方がいいかなぁと思って作り始めました。それにせっかく作るのであれば、自分だけではなく他の人にも使えるように公開してみました、
そもそも改修工廠データは他のサイトにもあるのになぜわざわざ Excel でデータを管理していたかというと、私個人として欲しかったデータに以下のものがあったからです。
- 余った改修用消費装備を使える改修装備を調べたかった
- 優先的に開発する装備を上部に表示できるように並び替えたかった
消費装備については、検索条件に複数入れておくことによって、その消費装備を使う装備だけを表示することができるようになっています。検索条件に曜日も入れておけばその日の分だけ見ることも可能です。
優先的に改修したい装備については、これは既存のデータだけでは判別が難しく、各々が指標を入れないと並び替えられなかったたため、各装備ごとに「優先度」を入れられるようにしました。
この値を入れておくと、並び替えで優先度を選択することによって優先度で並び替えられるようになります。
ただ、画面の説明にもあるように優先度の機能は現在仮実装扱いとなっており、他のパラメータの並び替えや検索とは別扱いになっています。これは入力値をローカルストレージに保存している影響で、検索や並び替えはサーバー側で行っているのですが、優先度だけはローカル側に値を持っているため、別々に並び替えないといけないからです。これについては今後ユーザー認証を追加した際にすべてのパラメータをサーバー側に持つことによって解決することができます。
今後について
比較的簡易な機能の Web ツールなのでそんなに機能追加することはないのですが、優先的に改良したいのは先述にもあったユーザー認証機能です。ユーザー認証を行うことによってサーバー側に優先度を保存できるようにし、優先度を検索や並び替えで統合できるようにしたいと思っています。個人情報を扱うツールではないのでユーザー名とパスワードでの認証になると思います。
そのほかいくつか改良したい点はありますが、要望等があれば考慮したいと思っています。専用の要望投稿欄は現在ありませんので、Twitter か問い合わせ入力フォームからご連絡ください。