I posted the following on the Card Kingdom development blog.
In a previous post of mine, I sung the praises of using straight Flash as a UI system. In theory and practice, it works in the form of Scaleform. Flash offers many nice graphical features that would be difficult to rendering normally. The implementation I used basically wrapped the Shockwave COM object and exposed many of it’s methods in an easy way. Rendering was more complex as I had to get access to a DirectX 11 Texture’s GDI context in order to render to it. This process worked, but not really.
The interface exposed ways of calling back and forth between Flash and the application, but it used the old, deprecated method of fcommand(). Setting variables from the application into Flash also required that the variables be set in global scope to be filled in by the application later. Debugging this was a nightmare as there was no way to use the built in Flash debugger as the application was not setting these variables to begin with. This method of variable setting and calling fcommand() are deprecated in ActionScript 3 and don’t even run properly.
If that wasn’t bad enough, when we were about to demo the game, I noticed that the Flash wrapper had major issues with the mouse. Moving the mouse with the cursor on the screen would severely degrade the Flash playback speed. It was so bad that in some cases Flash would stop rendering entirely. This was a huge issue that we couldn’t solve in the time remaining and just had to deal with for the demo by moving the mouse off the screen before anything started running and not moving the mouse at all.
Moving to a more simple, but just as powerful framework was needed. After looking around I stumbled upon Awesomium, which as it’s name suggests, is awesome. Awesomium is in essence a full implementation of WebKit (the HTML rendering engine for Chrome and Safari), but instead of rendering to the web browser’s window, it renders to a buffer, which can be copied to a texture and shown on the screen. Keyboard and Mouse inputs can be injected from the application into Awesomium. JavaScript and other plugins, such as Flash, are also supported. There is also a much more initiative and clean method for communicating between the application and HTML via JavaScript. Methods in JavaScript can be called directly from the application and JavaScript can use “callbacks” to send, basically, events back to the application.
Having HTML and JavaScript as your UI means that commonly used web tools such as jQuery and jQuery UI can be used. This makes creating a HUD incredibly easy and completely separate from any engine specific code. I am very excited to see where I can go with this. From the beginning of this phase of development, I wanted an “editor mode” for the engine, and with this UI solution, I believe it can be done. Oh, and HTML5 Canvas works as well.
Another great thing is that all development and debugging can be done in a web browser, completely separate from the actual game. Here is what I have so far. Nothing is hooked up yet, but it shows the possibilities and power of this simple, elegant solution:
