MonoGame inside your web browser

News
41

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!

42

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
43

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.

44

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.

45

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
46

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

47

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.

48

@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
49

Ok cool…

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

50

Hello Craftwork!

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

Thank you!
Morten

51

Hey @morten

Craftwork here. I’m using a different account because something strange happened to my old account.

The old website is open source on github and the content is just a handful of markdown files so you can find the post you’re looking for here:
https://github.com/craftworkgames/MonoGameExtended.Net/blob/master/MonoGameExtended.Net/wwwroot/posts/monogame-on-webgl/monogame-on-webgl.md

Have a great day! :slight_smile:

1 Like
52

Hey @T_F_G Could you share your changes to spine, in the process of doing the same.

Thanks.

53

@harry-cpp Any progress report on wasm? Any chance of beta access? :slight_smile:

54

So my initial issue w/ Spine on web was wrong. It’s got nothing to do with DrawIndexedUserPrimitive. Works fine. The issue I had was with BasicEffect. For whatever reason, the BasicEffect I was using in my normal Monogame engine was just not drawing in the content of the web.

I replaced it with the SpriteEffect used to draw batched sprites and it works fine. That was my key change that worked. I never got to figuring out why “BasicEffect” wasn’t working for me on the web.

Other than that, I also had a few issues with some of the Spine comparers in their runtime for collection classes working in the context of Bridge.NET. I had to take them out and add my own Equals(), GetHashCode() etc to various types used.

Replace BasicEffect w/ a SpriteEffect and the normal spine runtime should basically work. You have to add bridge.net to it and all that jazz.

55

Yep, I ran into the same issue with GetHashCode(). Will give SpriteEffect a try.

Thanks

EDIT: That was it. Thanks again.

56

Anyone have a link to a working demo project of this? (Monogame with Bridge.NET).
The link above doesn’t work anymore and I had a poke around in the github project but didn’t find anything.

Also, the bridge.net setup docs are out of date. The sample project doesn’t appear to exist and the tutorial text doesn’t match up with the project created.

Any help appreciated - would like to see how feasible it is.

57

I found the demo here: https://github.com/MonoGame/MonoGame.WebDemo

1 Like
58

Thanks, I was looking for that and couldn’t find it.

1 Like
59

I played around with trying to get my game to work with it but I didn’t get very far.

I could not get it to compile with the following setup:
Visual Studio 2019
Monogame.Framework.DesktopGL 3.8 (.net core 3.1)
Monogame.Framework.Bridge (3.7.0.2)
Bridge (17.2.0)
Bridge.Core (17.2.0)
Bridge.Html5 (17.2.0)
Retyped.dom (2.8.6733)
(Note I reverted to the earlier bridge version as suggested above).

There appears to be a conflict between the target framework. (.Net Core 3.1) and the Bridge components which are .Net 4.x.
This causes lots of compile errors related to Microsoft.Xna.Framework;

I guess I could build off the working example but that’s the pre .Net Core version of monogame.

60

Use harry-cpp branch of monogame https://github.com/harry-cpp/MonoGame/tree/2f7ac1be6b46147f3ccfa196565bd2799ecefe13
which is mg3.7.
[edit] Of course I meant this, comes with demo (and same mg as above), https://github.com/MonoGame/MonoGame.WebDemo

Bridge.net Web support isnt merged to mg3.8.
And use net framework 4.7.

Easiest way is to use Platform2D solution/project and modify it.

1 Like