I have recently discovered Awesomium, a “windowless web-browser framework”. But guess what? That’s not all it can do. It can also be used for HTML UIs. Two games that I can name use it right now: EVE Online and Overgrowth (lots of fun btw, but I won’t get into that). In the back of my mind, I’ve always wanted to go back, fix up my UI system, add new features, and correct all the wrongs (of which there are a lot of). UIs are a pain, a massive pain. When you get it right, it’s fun, but I’m so anal that I need to (try to) get every detail right, and make it work as similarly to the Windows controls as possible (at least for the features I implement). Don’t believe me? See this diagram for selection logic in a table that I made several years ago. Mouse scroll wheels and key repeats are some other areas that people get wrong far too often. I should get back to the point before this rant goes on too long.
So yeah, I’m sick of writing UI code and I think it’s time I let go of the reins. Awesomium might be the replacement I’ve been (idly) looking for. In about 30-60 minutes, I downloaded and installed the SDK, looked at some samples, and successfully displayed Google’s homepage inside my XNA window. Pretty straight forward if you ask me. The only tricky part was converting Awesomium’s RenderBuffer to XNA’s Texture2D. I did it like this:
if (webView.IsDirty || webUITexture == null)
{
webUITexture = new Texture2D(GraphicsDevice, GraphicsDevice.Viewport.Width, GraphicsDevice.Viewport.Height, false, SurfaceFormat.Color);
webView.FlushAlpha = false;
webView.IsTransparent = true;
RenderBuffer renderBuffer = webView.Render();
byte[] imageBytes = new byte[renderBuffer.Rowspan * renderBuffer.Height];
Marshal.Copy(renderBuffer.Buffer, imageBytes, 0, imageBytes.Length);
webUITexture.SetData(imageBytes);
}
spriteBatch.Draw(webUITexture, new Vector2(0, 0), Color.White);
Probably not the most efficient way to do it, but it does the trick for now. We’ll see if I have any performance issues when I add this to Asteroid Outpost. Once I got Awesomium drawing, I basically had a working web-browser inside XNA. To my surprise, even YouTube worked, with sound! Pretty sweet. Did I mention that you have to add some bypasses for the mouse? The bypasses for the mouse are easy though. The keyboard? Not so much. In my evening of programming, I didn’t spent enough time on the keyboard to get it working. Here’s what I did get though:
Everything except the title bar, and the cornflour blue is being drawn by Awesomium, and if you click the “Link!”, it loads my blog inside the same XNA window (How’d you think I found out it plays Flash?). It’s obviously very powerful. I haven’t played with any interaction between Awesomium and XNA yet, but that’s next on the list, right after I fix the colours. The Blue and Red channels are swapped. I need to play with the SurfaceFormat in my call to Texture2D because Awesomium uses BGRA, while “Color” must use RGBA. I have uploaded the source code for this to Bitbucket if anyone wants to check it out.
Oh, and I added a very quick automatic refresh when the source HTML file has been modified. Finding my CSS errors was a lot easier when I could just look over and see what was going on with every change. Well… it’s basically a web browser, why am I surprised at how easy it is?
