MonoCef is an example application that combines MonoGame and CefSharp to allow a MonoGame application to use HTML/CSS as its front-end UI. This is an alternative to using one of the many MonoGame UI Frameworks in existence. This isn't a library that you can pull directly into your project - instead, it's just an example that you can copy from.
This particular example uses the Angular front-end web framework, but that is an implementation detail I chose to go with, and is not at all required in order to make use of this technique.
- Install Visual Studio 2019.
- Install node.js version 12.13.0 or later.
- In the
MonoCefUIdirectory, from a console window, PowerShell, or Cygwin bash shell: - Run
npm install - Run
npm run build - Compile and run the
Source/MonoCef.slnsolution in Visual Studio.
This approach uses CefSharp.Offscreen to create an offscreen Chromium Embedded instance.
The offscreen browser loads an index.html file from disk; every time the offscreen browser's bitmap changes,
the pixels are copied onto a MonoGame Texture2D, which is drawn during each render loop.
- You can debug the hosted browser using the Chrome Remote Debugger. Open a browser window to http://localhost:8088/.
- If you're making frequent changes to the UI, run
npm run watchinstead ofnpm run build. This will watch your filesystem and recompile as needed. - ...or, run
npm startand point a web browser to http://localhost:4200/ if you want to view the UI directly in your browser instead of hosted in the MonoGame app.
- Performance
- Figure out how to copy directly to video RAM from the offscreen browser (I'm not sure if this is even possible right now)
- Input
- The KeyboardHandler code needs to be beefed up; in particular, it doesn't handle all keys (e.g. numpad) correctly, and it doesn't do modifier keys either.
- Data Marshalling
- I couldn't get RegisterAsyncJsObject to work, so
I'm using ExecuteScriptAsync
and EvaluateScriptAsync
instead. This is probably less performant and a bit messier, but it works. If someone wants to try to make
RegisterAsyncJsObjectwork and has success with that, I'd love to hear about it.
- I couldn't get RegisterAsyncJsObject to work, so
I'm using ExecuteScriptAsync
and EvaluateScriptAsync
instead. This is probably less performant and a bit messier, but it works. If someone wants to try to make
Chris Frolik, cfrolik@gmail.com. Feel free to send questions or suggestions.
MIT