Awesomium XNA FPS Drop

Question

We are trying to develop a game using XNA. We decided to use Awesomium for GUI, because it is easy to use and its extremely powerful. However we found a weird problem:

After hover over any form elements (like input, buttons, input etc) we noticed a massive FPS drop to like 2 fps. On the other hand when we hover over text elements (p, div, a etc) nothings happen and everything is working as it is suppose to (we have over 400 FPS). We found out that problem is with isDirty function (Awesomium::WebView), because is always true (when mouse is over form element). I don't know if it can be a reason, but onMouseOut function is never called.

Does anybody have similar problem? What can we do about that?

Greeting, Valker

Answer 1

I've used Awesomium in a Unity 3D project and didn't have any problem like that. You should check the onmouseover event handler.

If you've done your homework you should be able to load the assets from the webpage. So load the page directly in chrome and use console.log('on-mouse-over') to have a JS feedback when the event is called. If you are flooded with those console messages than the event handler is invoked way to often and you should first debug your JS in the browser. Only then load it up in your AWE client.

I'll share some more of my experience with Awesomium with you.

My recommendation is to keep the JS code as thin as possible and unload as much code as possible to C#. Here's the reason why.

---

You'll probably want to implement C# routines to check if the mouse is actually on an opaque spot (inside a WebView) or on a (semi-)transparent zone that should not prevent click-throughs to underlying objects. When you use CSS like box-shadow you'll soon notice that the shadow adds pixels around and inside the WebView boundary.

Those bordering pixels should be click-through. You may also have non-rectangular shapes or dynamic slide-down UI elements and similar. So you'll have to work your way around the fixed WebView boundaries by checking manually if you're on a transparent spot or not.

You also want C# code to handle drag&drop across multiple WebView instances because each has its own global context and there is no way to handle cross-WebView drag&drop in JS alone.

So you already have all this C# code implemented.

Just do another step and charge all UI processing off the WebView.

You should use JS just to send/receive messages from the C# code and complex JS scripts should be avoided.

The same functionality in C# is much easier to debug. And what emerges naturally is the MVC pattern, with controllers implemented in C#.

Very thin JS is less error prone.

And last but not least, if you are a paying customer you should take advantage of their customer-only support and forums.

Wish you luck especially with the drag&drop nightmare! :)