MonoGame inside your web browser

Yup, you need VS 2017.

Thanks for the help. Yep I had to install vs2017.
So I got it working. But when I came to integrating my existing code base I came across a major problem. The Bridge C# library uses its own version of mscorlib.dll I believe and as such it creates circular references with my existing code (which uses the standard libs such as system.dll, system.web.dll, entity framework, mvc etc. I could not for the life of me get them to work together due to conflicting references. The guys over at the Bridge C# project suggested I need to create a Bridge project and add all my code to that. Tried it, still couldn’t sort the problems. So… is there anyway you MonoGame guys will use another library or are you stead fast on Bridge? I’m having to look elsewhere for a C# to WebGL solution - probably Unity (which is sickenly complicated for what I want to achieve).

          

Hmmm, I wonder if I can get ModLab running in web browser, this might be interesting project.

We can potentially add Microsoft Edge to the supported list here soon…

1 Like

You might need to yell at me to implement a method or two. Oh that reminds me I need to update the nuget package, I’ve managed to fully fixup content loading.

Yes, lol.

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.