ようやく外の世界に出るようです。
どうやら兵士たちは外の世界を知らないらしい？
カテゴリー: 創作 (ゲーム)
MonoGame で制作したゲーム「リトルセイバー」を Web (Blazor + WebGL) で動かしてみた話 その２
前回の投稿
今回の記事は前の投稿の後日談になるので前回の記事を読んでいない場合は読むことをお勧めします。
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/` に配置するかの２択であることは前回説明した通りです。
`/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 で公開するという方法も行けそうな気がしました。
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 でゲームを公開してみたいという方もいるかもしれないので、この調査結果が大なり小なりでも参考になればいいかなと思いました。
ゲーム「リトルセイバー」Steam 版のセーブデータクラウド同期に対応しました
Steam 版のリトルセイバーでセーブデータのクラウド同期に対応しました。これにより複数のPCでセーブデータを共有できるようになります。(セーブデータ同期にはインターネットの接続は必須。同期しなくてもゲームはできます)
例えばデスクトップでリトルセイバーを遊んでいたが、出先でノートPCなどで続きを遊ぶということができるようになります。また、PC が壊れた場合にもセーブデータがクラウドにあるのでセーブデータが失われにくくなります。
この機能は Steam 側の設定で完結できているのでリトルセイバーのバージョンアップは特にありません。そのままいつも通り遊べるようになってます。ゲーム起動時は一瞬 Steam の同期ダイアログが出ることはあります。
ちなみにセーブデータ同期前に複数のPCで違うセーブデータがあった場合はどうなるのか、という疑問については、リトルセイバーでは同じ番号のセーブデータでも別々のセーブデータとして認識できるようになっています。読み込む際にいらない方を削除するかそのまま残すかも選択できます。この機能は Microsoft Store 版のリトルセイバーで実装済みなので Steam 版でもそのまま適用されています。
ちなみに現在 Steam リトルセイバーによくわからない実績があると思うのですが、現在仮の実装なので気にしないでください。
Windows で遊べるゲーム「リトルセイバー」が DMM GAMES にて公開されました。「遊び放題」プランでも遊べます。
リトルセイバーは現在、Steam や MSストア、DLsite で公開していますが、今回新たに DMM GAMES にて配信開始されました。内容は他で公開しているものと変わりませんが、DMM GAMES を中心に遊んでいる方は手軽に遊べるようになりました。
価格は他で購入する場合と変わらないように 980 円で統一しています。現在ポイント還元中 (たぶん 20%) なので、他のサイトよりはお得になっていると思います。
また、DMM GAMES には特有のプラン「遊び放題プラン」があり、こちらでもリトルセイバーを遊べるようになっています。たしか月額 980 円だったので、１か月限定で考えればかなりお得なんじゃないかと思います。すでに遊び放題プランに加入しているからであれば気兼ねなく遊ぶことができると思います。
ストアページは以下のリンク先となっています。
Windows向けに公開中の2Dアクションゲーム「リトルセイバー」をAndroid版としてGoogle Playにて配信開始しました
Windows, Windows 10 Mobile 向けに配信していたゲーム「リトルセイバー」を Android 向けに公開いたしました。２か月ほど前にテスター向けに限定公開していましたが、ようやく正式版として公開することができました。
「リトルセイバー」は多数のユニット同士が戦い合うリアルタイムバトルアクションゲームでPC向けに制作しておりましたが、スマートフォンでも遊べるように Android で動くようにしました。とはいっても実はすでにスマートフォン OS である Windows 10 Mobile でも遊べるようになっていましたので、すでに遊ばれた方もいるかもしれません。ただ、Windows 10 Mobile ユーザーは全体的に少ないと思いますので、今回 Android に対応したことによって多くの人が遊べるようになったかと思います。
要求スペック
要求スペックは以下のようになっています。細かいことについては下の方に書いてあります。- CPU : Snapdragon 617 相当
- メモリ : 2GB
- OS : Android 8.0 以降 (7.0 は未検証、6.0 以前は非対応)
配布場所と価格
Android 版のリトルセイバーも有料版と無料版があります。有料版はアカウント単位で買い切りです。価格は Windows 版と同じで 980 円となります。配布・ダウンロード先は Google Play となっており、apk 単体では配布しておりません。- 有料版：https://play.google.com/store/apps/details?id=sorceryforce.littlesavior
- 体験版：https://play.google.com/store/apps/details?id=sorceryforce.littlesaviortrial&hl=ja
PC 版と違う点 その１
PC 版と違う点はスマートフォンは PC に比べるとかなりスペックが低いので、同時に動くユニットの数はそれなりに減っています。とはいってもスマートフォン同士でもスペックの差はかなり広いのでオプションでユニットの配置数はある程度調整することは可能です。低スペックのスマートフォンだと配置数を最低にしてもカクカク動作になりますし、私がテストした Google Pixel 3a の場合、最大数で配置してもほぼスムーズに動作しました。より高スペックなスマートフォン、タブレットならもしかしたら PC モードでも遊べるかもしれません。PC モードはユニットの配置数ははるかに多いですが、そもそも広い画面が必要なので少なくともタブレットぐらいのサイズは必要です。
一応要求スペックとしてはCPUは「Snapdragon 617 相当」、メモリは「2GB」にしてあります。ただスマートフォンの種類がかなり多いので正直ここが妥当なのかはわかりません。体験版も公開してありますので事前に動作確認してください。
PC 版と違う点 その２
PC 版と違う点のもう一つはひとつのステージの広さがPC版に比べて狭くなっています。前述のスペックを考慮しているのもひとつなのですが、スマートフォンの場合、出先などで少しだけ遊ぶ、というスタイルもあるかと思いましたので、なるべく１つのステージを小さくしてステージクリアごとにセーブできるようにしました。その代わり PC 版に対してステージ数(深さ)を増やしました。普通に遊べば攻略にかかる総時間は PC 版と変わらないかと思います。公式サイト
いまだに完成していないのですが、以下の URL が公式サイトとなっております。Windows 版もこちらから体験版をダウンロードできたり、有料版の購入ページにアクセスすることができます。参考プレイ動画
ニコニコ動画、Youtube でリトルセイバーのプレイ動画を公開しています。どちらも投稿している内容は同じです。 ]]>ゲーム「リトルセイバー」Ver 1.08 を公開しました
２か月ぶりですがバージョンアップしました。主に海外環境での改善になるので、現在プレイしている方で動作に問題ない方はすぐにバージョンアップする必要はないかと思います。
機能改善
- 日本語、英語以外の言語を選択したときにテキストが枠をはみ出ないように改善。
仕様変更
- 【バランス調整】特殊技の消費SFを若干減らした。
不具合修正
- ユニットが強化されると特殊技の消費SFが減る問題(本来増える)
- フランス語環境など日本語や英語と数値の書式が異なる環境で実行したときに戦闘開始時に異常終了する問題
それと Android のβ版を２か月ほど前に公開しましたが、Google Pixel 3a で動作に問題ないことを確認しましたので近いうちに公開したいと思います。
スマフォなので値段を下げるかどうか考えましたが、高スペックスマフォだと Android でも全然動作に問題ないことがわかりましたので他と同じ 980円付近にしようかと思います。もしかしたら高スペックなら PC モードでも動作するかもしれません。
]]>ゲーム「リトルセイバー」を Steam にて公開しました
ゲーム「リトルセイバー」Ver 1.07 を公開しました
今回はゲームバランスの調整といくつか改善を行いました。
追加機能
- オプションに「非アクティブのとき入力を受けない」を追加しました。ON にするとゲームウィンドウがアクティブでなくなった時に入力を受け付けなくなります。
- プレイヤー入力設定に「キャラ向き固定ボタン、ターゲット固定ボタンをトグル形式」にできる設定を追加しました。
機能改善
- プレイヤーが１人の場合、戦闘中での接続されているすべてのゲームパッドで操作できるようにしました。
仕様変更
- 【バランス調整】ステージ１～４の難易度を若干下げました。
- 【バランス調整】武器「クロス」の能力を全体的に下げました。
- 【バランス調整】武器「カノン」の能力を若干上げました。
- 【バランス調整】武器「ボム」の能力を若干上げました。
- 【バランス調整】武器「マルチプル」の能力を若干上げました。
いくつかの公開サイトにはアップデートをかけていますが、反映されるまで時間がかかる場合がありますのでお待ちください。
なお、Android 版については現在もβ版のみの公開となっております。こちらは Ver 1.06 の内容のままです。
]]>ゲーム「リトルセイバー」Ver 1.06 を公開しました
今回そんなに更新内容はないのですが、割と致命的な不具合が１つ修正されているので可能であればアップデートをお願いします。
更新内容は以下の通りです。
追加機能
- Android 版に対応しました。体験版のβ版をリリース後、体験版と正式版をリリースします。(現在 Google Play でのみリリースです)
- 操作説明画面をタイトル画面と一時停止画面に追加しました。
機能改善
- プレイヤー入力の設定に関係なく、メニュー画面では接続されているすべてのゲームパッドで操作できるようにしました。
不具合修正
- ステージの途中でマップに戻るとアイテムが消失する不具合
一応アップデートの大きな目玉は Android 対応ですが、現時点では Google Play において体験版をβ版としてリリースしているところです。詳しくは前の投稿に記載しているのでそちらをご覧ください。
]]>