MonoGame inside your web browser

you didnt had to do that. draw is called on components by the framework.

Ah - ok - I took another look.

Building and executing the code as downloaded only shows a revolving “@ icon” image.

This is becase line 19 of Game1.cs is commented out.

    public Game1()
    {
        graphics = new GraphicsDeviceManager(this);
        Content.RootDirectory = "Content";

        _tri = new TriangleComponent(this);
        _triTx = new QuadTxComponent(this);
        //Components.Add(_tri);                   <---- commented out
        Components.Add(_triTx);

        //tests
        var wnd = this.Window;
        var wndbounds = wnd.ClientBounds;

        return;
    }

This is my first post on mono games. I use to program XNA though Silverlight … I gave up on it when MS killed IE and Silverlight. and have been waiting for HTML to mature to allow XNA since at the time this was the theory that HTML would be able to do everything that silverlight did. I started looking at things about 4 months ago and saw that one MS was updating its operating system and a new VS would be coming out shortly there after. one the new features was of the VS was going to be some sort of merger of monogame and something else and that a lot of the old silverlight function/programing language would be coming back as being available for web. I sure i have save those post somewhere in my bookmarks but I bookmark a lot of stuff. Anyway I have now come here to get an update on this merger as I would think mono would know whats going on. this seem like the post that had the most to do with online gaming so I was expecting the update info to be at the end of this post. this says bridge is shutting down which would make sense if a new update was about to take over. so I thought I would say something since ppl seem to be giving up on bridge. Maybe someone with more info could comment on whats up coming. I am just a passive programer at this time but would take more interest if XNA can be brought back to the web in a stable way that would last more than one or two years.

2 Likes

That’s super cool! I’ve been poking at doing some web3 games, and getting MonoGame stood up in the browser is the last big piece. Thanks again!

@nkast I played around with the Test project in the last few days again, and took a look at the github repository.

I was interested in seeing if I could draw and move a 2D image on the screen.
I altered the quad class supplied in the example to draw in 3D with a flat Z plane and that worked fine.

I then tried to use SpriteBatch.Draw but it looks like that is not implemented (Google Chrome stacktrace showed that it threw a notImplemented Exception).

I then updated the nugets to the latest version in the hope that it’s been implemented since, but that broke everything and now it doesn’t work at all.

So basically what I was wondering is - is tainicom.xna.Framework.Blazor the official monogame WebGL version that we have all been waiting for? i.e. this:

Apologies if this is an obvious question but I couldn’t find any indication in github or nuget.

I’ve added a SpriteBatch test case a couple of weeks ago.
It support the most basic Draw operations. Can you first try if that works for you?

Make sure you sync the latest code from github and do a cache clean up on the browser to ensure you get the latest js changes.
If the SpriteComponent works , then in your case maybe you are using a sample state or some other feature that’s not implemented yet. Try to identify what’s different in your code from the sample SpriteComponent and also look on the full stacktrace to see exactly which execution path throws the notImplemented.

The library is an independent effort to bring the framework on the web, there’s no connection to the official MonoGame repository and releases.

5 Likes

I replaced the sprite with 10 of my own and set them in motion - very nice - thank you!!

4 Likes

I am actually using the Bridge.Net version in a commercial project for a web casino and it works, but has its issues.

How will the speed of something like this compare? Much faster?

@nkast Thank you!!!

I’ve problems with Texture2D.FromStream(), when I try to load a image I get “This image format is not supported”
I submitted the detailed issue: https://github.com/nkast/WebGLxnaProj/issues/1

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