MonoGame inside your web browser

Hello!
I’m currently working on my School Project - remaking River Raid. I want to move it to web browser game, but always when I do that I got many errors. Can someone more experienced check code and say what I do wrong?
I’m checking game on XAMPP apache server.

Here is web source:

Here is game source:

Thanks!

I have been using Blazor for a while, with MAUI/WPF embedding you can get run C# code to run anywhere. Seems to accomplish what Bridge.NET was trying to do much better. Nuget packages wouldn’t be an issue with that either, as it actually runs the .NET runtime in the browser via webassembly, it doesn’t transpile to Javascript. You then just sit back and let Chromium handle all porting.

It will be a great direction to take Monogame for sure. Users might even consider using some UI frameworks like MudBlazor like on top of it.

2 Likes

■en
[Environment]
Visual Studio : 2022 Professional
nkast.Xna.Framework.Blazor : 3.8.9100

I was looking for a way to make games created with MonoGame work on the web.
I was able to find the library “nkast.Xna.Framework.Blazor” in this community.
I think his Blazor version is still an experimental library, so I implemented it for verification purposes and tried it.

As a result, with some code modifications, he was able to get it working on the web!
Since the game has not been released to the public, the link below is a video of the game in action.

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

Most of the functions are working correctly, but I confirmed that “Volume” of “SoundEffect” is not working properly.
Sound seemed to play at 100% volume even when I set Volume. The same is true if you specify Volume in the Play method instead of the Volume property.
However, setting the Volume property during playback seems to be reflected correctly.

I think it’s a library under development, so I’m not asking you to fix it now
For the time being, it will be in the form of a report.

Good luck with your development.

■ja
[環境]
Visual Studio : 2022 Professional
nkast.Xna.Framework.Blazor : 3.8.9100

MonoGame で制作したゲームを Web 上で動かせるようにできないか探していたところ、
このコミュニティでライブラリ「nkast.Xna.Framework.Blazor」を見つけることができました。
この Blazor 版はまだ実験的なライブラリだと思うので、こちらも検証目的で実装し動かしてみました。

結果としてはいくつかコードの修正はありましたが Web 上で動かすことができました!
ゲームの公開はしてないので下記のリンク先は実際に動かしたゲームの動画となっています。

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

ほとんどの機能は正しく動いているのですが、その中で「SoundEffect」の「Volume」が正しく動いていないのを確認しました。
Volume を設定しても 100% の音量でサウンドが再生されるようでした。Volume プロパティではなく Play メソッドで Volume を指定しても同様です。
ただし、再生中に Volume プロパティをセットすると正しく反映されるようです。

開発途中のライブラリだと思いますので今すぐ直していただきたいという分けではありませんが
とりあえずご報告という形になります。

これからも開発頑張ってください。

4 Likes

Your game is quite reach in visuals!

Currently content is partially supported. You have to copy the xnb files into the '\wwwroot\Content\ folder and add a mime type for .xnb files as ‘application/octet-stream’ on the server.

Effects are supported as well but only SM 2_0. Perhaps you build them for DX or a higher shader model. Hopefully, if they are not that complicated, you could change them to SM_2_0.

SpriteFont.Characters has been removed. SpriteFont.Glyphs returns a new type ‘GlyphCollection’ which is a IDictionary<char,Glyph>.

The new version, 3.8.9101, now supports DXT3 compression.
Also the bug with SoundEffect Volume has been fixed.
You should also expect a big boost in SpriteBatch performance.

Your feedback was valuable.

@nkast , can you confirm how the Blazor approach is implemented. Is it just the .NET assemblies which are AOT and your application itself remains .dll (ie game code easily decompilable), or are both your game code and .NET AOT compiled (like the CoreRT approach)?

see my own topic:

The code is compiled as a Blazor application. AOT is optional.
I don’t know much about the implementation details.

I found this. read on the ‘Mixed-Mode AOT’ topic.
tl;dr: it’s complicated.

1 Like

@nkast

■en
Thank you for your answer.
I never thought that you would even read my blog.

Also, thank you for updating the library.
We confirmed the bug fixes and performance improvements.
In particular, I was surprised that the performance was higher than I expected.
I think that running games on the web has become quite feasible.

I tried to run the game in the same way using the updated library.
The game has not been published, but I uploaded a video of the game in action.
You should be able to see that the game runs a lot smoother than last time.

Below is a gameplay video built with the new version.

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

The following is the same video as before the previous version upgrade. I keep it for comparison.

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

Thank you for your response!

■jp
回答ありがとうございます。
まさかブログの方まで読んでいただいたとは思いもよりませんでした。

また、ライブラリのアップデートありがとうございます。
不具合の対応とパフォーマンスの改善、確認させていただきました。
特にパフォーマンスについては想像以上に上がっていて驚きました。
これなら Web 上でゲームを動かすのもかなり実現的になったと思います。

試しにアップデートしたライブラリを使って同じようにゲームを動かしてみました。
ゲームは公開していませんが、ゲームを動かしているところを動画にしてアップしてみました。
前回よりかなりスムーズにゲームが動いていることを確認できると思います。

以下は今回新しいバージョンでビルドしたゲームプレイ動画になります。

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

以下は前回のバージョンアップ前の動画と同じものです。比較用に置いておきます。

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

対応ありがとうございました!

2 Likes

Hello,

There’s now a BlazorGL template for VS2022.
The template supports automatic content build.

See my other post here.

Is there any chance this work on Blazor be merged into monogame anytime soon?

A lot of the subsystems in Kni -audio, graphics, content- have been rewritten.
It follows a seperate design path with many differences in the codebase.

What’s new in Kni 3.9

1 Like