MonoGame inside your web browser

Guys

I pulled together all of the bits on this topic I could find and wrote up a tutorial on how to get MonoGame running on a website with @harry-cpp’s fantastic WebGL package.

http://www.monogameextended.net/posts/monogame-on-webgl

Hopefully it helps anyone who lands here like I did last week.

7 Likes

Is it possible to split the .js file into individual files, one per class or namespace
and then use ES6 modules to load them on demand?

e.g. “import {Vector2, Vector3} from ‘/modules/xna.monogame.Framework-module.js’;”
e.g. “import {Viewport} from ‘/modules/xna.monogame.Framework.graphics-module.js’;”

@harry-cpp

Expanding on the above…
Is it possible to seperate the mononogame.dll to it’s own .js file?
Then you could host it in the official MonoGame servers and everyone could reference it. Just like how Google is serving jQuery.
e.g. http://community.monogame.net/mgweb/monogame.latest.min.js
e.g. http://community.monogame.net/mgweb/monogame.3.7.1.min.js

With this you will improve loading times, (assuming the monogame.js is found in the browser cache),
webapps can use the latest version,
and collect statistics about usage.

It already works like that:

GitHub repo: https://github.com/MonoGame/MonoGame.WebDemo/tree/gh-pages
Link to index.html which links the js lib: https://github.com/MonoGame/MonoGame.WebDemo/blob/gh-pages/index.html
Link to the actual min lib version, don’t use it tho as this is still in dev: https://monogame.github.io/MonoGame.WebDemo/MonoGame.Framework.min.js

2 Likes

Oh, that’s awesome :smiley:

Some of the information here is outdated.

Blazor now uses mono-wasm AOT to compile to webasm using llvm. It also still supports an interpreted mode for rapid prototyping.

https://www.mono-project.com/news/2018/01/16/mono-static-webassembly-compilation/

Note that Blazor is really the app framework, you can use mono-wasm without Blazor, and probably want to in this case.

.net core 5 will support compile to webasm natively without the need to use mono

Hey, this is awesome and managed to display a few things on my web browser. But as I wanted to port a small game I made, I ran into a Specified method is not supported error. My game is quite simple and I think I won’t have any problem finding a workaround for this method… if only I knew which one !

Is it possible to know where my problem is? Thanks.

Here’s the full stacktrace :

System.Exception: Uncaught System.NotSupportedException: Specified method is not supported.
Error: Specified method is not supported.
    at ctor (https://v6p9d9t4.ssl.hwcdn.net/html/1591541/net472/bridge.min.js:7:91540)
    at ctor.$ctor1 (https://v6p9d9t4.ssl.hwcdn.net/html/1591541/net472/bridge.min.js:7:92638)
    at new ctor (https://v6p9d9t4.ssl.hwcdn.net/html/1591541/net472/bridge.min.js:7:672784)
    at Function.GetGLFormat (https://v6p9d9t4.ssl.hwcdn.net/html/1591541/net472/MonoGame.Framework.min.js:1:797900)
    at $ctor1.PlatformConstruct (https://v6p9d9t4.ssl.hwcdn.net/html/1591541/net472/MonoGame.Framework.min.js:1:1465479)
    at $ctor1.$ctor3 (https://v6p9d9t4.ssl.hwcdn.net/html/1591541/net472/MonoGame.Framework.min.js:1:1459903)
    at new $ctor1 (https://v6p9d9t4.ssl.hwcdn.net/html/1591541/net472/MonoGame.Framework.min.js:1:1458253)
    at ctor.Read$1 (https://v6p9d9t4.ssl.hwcdn.net/html/1591541/net472/MonoGame.Framework.min.js:1:1504857)
    at ctor.Read (https://v6p9d9t4.ssl.hwcdn.net/html/1591541/net472/MonoGame.Framework.min.js:1:987998)
    at ctor.InnerReadObject (https://v6p9d9t4.ssl.hwcdn.net/html/1591541/net472/MonoGame.Framework.min.js:1:178591)

Okay, by commenting/uncommenting lots of lines, I just found out that loading spritefonts and/or sounds is the problem.

    Font = content.Load<SpriteFont>("Font");
    Click = content.Load<SoundEffect>("Click");
    Song = content.Load<Song>("Music");

These line are my problem, how should I proceed to add sounds and spritefonts into the web version?

at Function.GetGLFormat (https://v6p9d9t4.ssl.hwcdn.net/html/1591541/net472/MonoGame.Framework.min.js:1:797900)

Font = content.Load(“Font”);

Maybe it’s related to the texture compression / texture format. For start, change the Compression of SpriteFont to ‘Color’ to see if it’s working.

Yes, jsut set texture compression to color and it will work.

2 Likes

Hello,

Is there source/build instructions for this demo? I have a MonoGame project and would like to try to port it to web!

Thanks!

I’ve been meaning to check this out for a while and finally got around to it. Alpha or not. This rocks!! Good job @harry-cpp . I just ported one of our monogame based games. I expected a lot of issues during the port, but I was surprised by how much was already working.
Take a look at https://www.bingonomics.com. choose play as a guest and take a look at the “High Noon Saloon” game. Speed was not much of an issue since the game is designed to run on low cost android tablets.

There are a few issues I have found with sound effects especially when exiting and restarting the game. And it needs the ability to resize on the fly.

I am pretty familiar with the monogame source code since I use a customized version to integrate into our platforms. I think I will grab the source see if I can figure out what is going on.

Also thanks to @craftworkgames on the excellent info for getting things setup.

Again awesome job guys.

3 Likes

This is cool!

Heads up on this. You’ll be tempted to pull in the latest Bridge.NET Nuget, but the current one has an incompatibility. It’ll work until you try to load textures. Use Bridge.NET 17.2 or earlier.

Anyone got an example of successfully using DrawUserIndexedPrimitives() in this solution?

After getting it all working with monogame extended, I’m struggling to add Spine support.

Just rewrote the spine runtime to use sprite batch for now. I think there may be a couple things unsupported there still on web.

1 Like

Is there a guide on setting up and building a web project through the dotnet CLI?

There used to be a starter project out there but I can’t find it now.

General things for me.

start a project and add the bridge.net NuGet package as well as the MonoGame for bridge package.

The bridge.net package you use must be only up to 17.2ish unless you want to manually “fix” Monogame for the latest bridge version by downloading the source.

Any library you utilize must also add bridge.net.

Look at his sample code for some good async loading examples.

I was unable to really load graphics up and display them until I created an iis local web server. Always got a script error trying to run them by pulling up index.html in a browser.

Make sure to add MIME type .xnb for your web server.

@T_F_G Saw your post a bit late, spritebatch will more than likely get you better performance than DrawUserIndexedPrimitives with Bridge.NET (some marshaling issue), but a proper wasm version isn’t too far off now and it should be available in a couple of months.

@Kimimaru There are dotnet cli template: https://www.nuget.org/packages/MonoGame.Template.Bridge.CSharp/

3 Likes

Ok cool…

Wow. That’s great news. Let me know if I can contribute in some way.

Hello Craftwork!

Could you make your tutorial about “Monogame for the web” accesible again?

Thank you!
Morten