MonoGame inside your web browser

Man bridge.net does not look good in terms of how they present themselves :frowning: entering bridge.net leads to this empty github org:

Which doesn’t even look related? And the tool itself which I assume this one:

https://marketplace.visualstudio.com/items?itemName=BridgeNET.BridgeNET

Have this broken repo URL as its project home link:

https://github.com/bridgedotnet/Bridge

Am I looking at the right place or maybe I missed something? O.o

Not sure if this is the correct one, but take a look at this:

Thanks for the link. Its the same person from bridge.net and in the readme he mentions the VS extension so that’s probably legit too.

Many of the links there are broken too, looks like he tried to reorganize his stuff and just dropped it in the middle so now its all messy :man_shrugging:

Looks like a really cool project, running C# + MG from web can really help distributing small projects and showcase stuff. Also libgdx already got web so its time for MG to have it too :smiley:

2 Likes

I gave up, bridge.net is beyond dead. If you run into problems, there is no one to help, and most of the support material has been removed from their webpage :frowning:

God Damn. What a shame.

1 Like

I’ve setup a demo project on github as a testbed for porting monogame to Blazor/Wasm. That project will eventually become the visual studio template for blazor project. Currently it can draw some primitive types.

7 Likes

I downloaded and got this to work in VS 2022.

FYI @nkast - had to add the 2 shapes to Components and also draw them before I saw anything other than the @ icon in the browser window.

In Game1.cs constructor and Draw() method.

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.