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

image

前回の投稿

今回の記事は前の投稿の後日談になるので前回の記事を読んでいない場合は読むことをお勧めします。

nkast.Xna.Framework.Blazor がバージョンアップされました!

ゲームフレームワーク「MonoGame」で作ったゲームを Blazor で動かせるライブラリ「nkast.Xna.Framework.Blazor」が 3.8.9100 から 3.8.9101 にバージョンアップされました!

数字を見るとマイナーバージョンアップのように見えますが、内容的にはかなり大きな改善が入っています。改修内容を見てみると私が報告した不具合と、なんと私が書いたブログの内容がいくつか反映されているようでした。

主なバージョンアップ内容

バージョンアップ内容についてはコミュニティの以下の投稿に書いてあります。(一部私宛の返信の内容になっています)

バージョンアップ内容を簡単にまとめると以下のようになります。

  • SpriteBatch のパフォーマンスが大幅に向上 (←これがすごい)
  • SoundEffect.Volume の設定が反映されない不具合修正
  • DXT3 圧縮がサポート

まず SoundEffect.Volume の不具合が直ったのでわざわざ音量を調整した音声ファイルを用意する必要はなくなりました。さすがにそれは面倒なのでやっていませんが。こちらはコミュニティに報告した内容が反映されています。

DXT3 圧縮もサポートされたので、SpriteFont などのコンテンツを作成する際にわざわざ別なフォーマットを選択する必要がなくなりました。こちらはなぜかブログに書いていた内容が反映されています。

そして一番影響が大きいのが SpriteBatch のパフォーマンスが上がったことです。プログラムを変更することなくライブラリを更新するだけで 2D のゲームのパフォーマンスが大幅に上がります。どのぐらいパフォーマンスが上がったかは動画を上げましたので前回の動画と比較して見てみてください。

プレイ動画

以下は前回、バージョン 3.8.9100 で作成したゲームを動かしてみたときの動画です。動画の内容は前回と同じものです。

ニコニコ動画

Youtube

そして今回、バージョン 3.8.9101 に更新してゲームを動かしてみた動画が以下になります。

ニコニコ動画

Youtube

見てもらえれば一目瞭然ですが、ちょっとどころではなく数倍ぐらいパフォーマンスが上がっているように見えると思います。パフォーマンスが上がっていると行ってもさすがにネイティブに比べれば劣りますが、多少低スペック向けにゲームを調整すれば Blazor 版でも十分に実用に耐えられるゲームが動かせると思います。

バージョンアップの経緯

今回 Blazor 版で実装するにあたりライブラリの中の `SoundEffect.Volume` で不具合を見つけたのでコミュニティの Blazor のスレッドで報告しました。Blazor 版のライブラリはお試し版であることもあり、せっかくゲームを動作させてみたので Blazor で動かしてみたらこうなったよ、という動画も一緒に作って投稿しました。動画にはブログのリンクも付けてあります。

その後コミュニティで nkast さんから返信を頂いたのですが、回答を頂いた内容を見るとコミュニティに投稿した内容や動画の内容だけではなく、私がブログに書いた内容についても回答を頂いていました。本人に確認したわけではないので本当かどうかは分かりませんが、おそらく日本語で書いたブログをわざわざ読んでいただいたんだと思います。

前回の調査内容に対しての相違点

先述の通り、nkast さんに前回の記事を読んでいただいたらしく、いくつかの調査内容は正しくないものがあるようでした。以下相違点について記載します。書いてる内容はコミュニティで回答いただいたものと同じです。

Effect (.fx) コンテンツはシェーダモデル 2.0 まで対応可能

前回 Effect コンテンツはサポートされていないと書きましたがシェーダモデル 2.0 までなら対応されているようです。確かに私がゲームで使用していたのはシェーダモデル 4.0 なので対象外ですね。

ちなみにシェーダモデル 2.0 にしたら動きました。

Load 用コンテンツ (.xnb) の配置場所

こちらについてはコンテンツを実行ファイルに埋め込むか、静的ファイルとして `/wwwroot/Content/` に配置するかの2択であることは前回説明した通りです。

`/wwwroot/Content/` に配置した際にうまく読み込めない件については Web サーバーで .xnb ファイルの MIME タイプを 'application/octet-stream' にするとうまくいくという回答を頂きました。ただ、こちらは試していないので実際に使う方は正しく動くか確認してみてください。

SpriteFont.Characters は使えない

どうやら Blazor 版では `SpriteFont.Characters` の代わりに `SpriteFont.Glyphs` を使うようです。現在 MonoGame の正式版では `SpriteFont.Characters` が使われてるので今後 `SpriteFont.Glyphs` に置き換わる可能性はあるかもしれません。

まとめ

前のバージョンでは Blazor+WebGL で高負荷のゲームを動かすのはなかなか難しいという印象を受けましたが、今回のバージョンアップで2Dスプライトの描画性能が飛躍的に上がったので、Web 上でゲームを動かすのもかなり現実味を帯びてきたと思います。パフォーマンス的には Silverlight + XNA に近いレベルになったのではないかと思います。これなら体験版としてゲームを作って Web で公開するという方法も行けそうな気がしました。

初音ミク フィギュア 3rd season autumn ver.

たまたまゲームセンターに行ったら見つけたので取ってきました。

イラストをフィギュアのように3D化すると、形や表情に違和感がでたりするものも結構多く見かけるのですが、この初音ミクはかなり精度高めに再現できていて、そしてかわいいです。

ガイズくんも一緒に並べてみました。

2022-10-13_初音ミク フィギュア 3rd season autumn ver

ちなみにゲットするのに2500円かかりました。

【A Hat in Time】 3章 潜在意識の森 (潜在意識の沼) アイテム全取得プレイ動画

3章「潜在意識の森」の「潜在意識の沼」にある全アイテムの入手場面を動画にしました。
アイテムは主に「糸」「記念品」「リフトトークン」ですが一部バッジなども含まれています。
カットはありません。ステージ開始から全力で取りに行きます。

入手に必要なアイテムは「薬品の帽子」です。

【Hollow Knight】神の家 第三 賢者の神殿 (ゾートあり) クリア【ノーダメージ】

ゾートとかいうノーダメージ最難関。

【ノーダメ突破率 (おおよそ)】  0.0062%
ハイブの騎士 : 30%
長老フー : 90%
収集者 : 85%
神の調教師 : 30%
グリム : 80%
ガリエン : 20%
ゾート : 5%
ウームー : 50%
ホーネット(2回目) : 25%
偉大なる釘の聖者スライ : 90%

【UnityTips】マップチップの種類ごとに当たり判定を実装する

敷き詰められたマップチップの中から指定したマップチップの種類に対して当たり判定を行います。

以下 Unity の各 Tips まとめ

【A Hat in Time】 3章 潜在意識の森 (スナッチャーの家と潜在意識の村) アイテム全取得プレイ動画

3章「潜在意識の森」の「スナッチャーの家」「潜在意識の村」にある全アイテムの入手場面を動画にしました。
アイテムは主に「糸」「記念品」「リフトトークン」ですが一部バッジなども含まれています。
カットはありません。ステージ開始から全力で取りに行きます。

入手に必要なアイテムはありません。

【実況】長編RPGの予感「Eldias一章 太陽と月編」をやってみる #34

ただのイベントキャラだと思ってたら突然覚醒する二十歳の女の子。

【UnityTips】衝突処理を標準機能の物理演算で行う (2D)

例えばプレイヤーキャラが他のキャラクターに当たったときに相手を押していくなどの処理を Unity 標準機能の物理演算に任せます。

以下 Unity の各 Tips まとめ