Jump to content

  • Log In with Google      Sign In   
  • Create Account


Member Since 29 Aug 2004
Offline Last Active Sep 27 2015 10:37 AM

Posts I've Made

In Topic: HTML5 for game UI?

15 July 2014 - 10:16 AM

Integrating CEF is a good alternative, especially for small projects. We've investigated it in a details and wrote an analysis on What should developers consider when using Chromium Embedded Framework (CEF) in their games? I would love to hear your feedback on it. Please find it here


Yeah I came to the same conclusions as you after looking into CEF for a few days. The lag, and the cost of pixel transfer make it fairly limited for all but the simplest UI. The system you have is exactly what I would like, but unfortunately way out of my price range for a hobby project. I also looked briefly at Awesomium, including downloading and running their demos, and they barely offer anything beyond what CEF offers as far as I can tell. They still use multiple processes, and can't handle rendering more than one fullscreen target at a time.


My solution is probably going to be rolling my own layout and rendering system, with Javascript V8 integrated. Start with something simple and then developing it in parallel with the rest of my project. Obviously it won't cover all HTML5 and CSS3 features, but then they aren't all required for a game UI. I do think that Adobe have it right with Flash and Edge Animate, with respect to their "everything is animatable, and all actions are animations" approach. Once I started thinking of UI as a state graph with animations along the edges it starts to seem like a very powerful and coherent approach (although maybe it is an oversimplification for some scenarios). 

In Topic: HTML5 for game UI?

28 June 2014 - 08:07 PM

What I did today, that may be of some interest for anybody else attempting this:

Investigated the Chromium Embedded Framework, a simple way to integrate Chromium in to any application.

CEF3 is provided as prebuilt binaries, but unfortunately not for VS2012.  So I had to build my own.


Like usual its an open source project using an obscure build system, and a custom project generator. Luckily they have a simple option which will, with a bit of tweaking, do the whole get->generate->build->deploy step. See https://code.google.com/p/chromiumembedded/wiki/BranchesAndBuilding and look for Automated Method section.

NB: There is an error in the automate.py script, in that it references svn.bat, which doesn't exist. You can modify it to point at svn instead and then it works fine.

Make sure to get from one of the stable release branches (I used 1750).

It takes about an hour to get and build. Also you have to specify various options to get what you want out of automate.py. My build command looked like this:


svn checkout http://chromiumembedded.googlecode.com/svn/branches/1750/cef3/tools/automate cef3\tools\automate
python cef3\tools\automate\automate.py --download-dir=cef3 --url=http://chromiumembedded.googlecode.com/svn/branches/1750/cef3 --ninja-build --verbose --x64-build --force-build

Obviously you need Python and SVN already installed and in the PATH to bootstrap this.


This gets you prebuilt libs, required dlls, and a couple of sample client applications. It also includes a project that can be used to build a wrapper library with custom build settings (for instance if your own project uses /MT you need the libs built with the same flag).


The framework exposes all you need to communicate from C++ to Javascript and vice versa by way of extensions (for the former) and executing Javascript commands (for the latter).

Edit: actually extensions can only be used in the render process, CEF provides an asynchronous callback system for calls from Javascript to C++ (https://code.google.com/p/chromiumembedded/wiki/GeneralUsage#Asynchronous_Bindings).


Interaction is handled simply by passing mouse and keyboard events to browser objects.


Obviously CEF3 allows offscreen rendering otherwise it would be useless for this task, and it also supports transparent backgrounds for offscreen rendering so you can composite UI into your framebuffer.

A very useful find was this thread relating someones experience of doing the same thing I am doing: http://www.ogre3d.org/forums/viewtopic.php?f=11&t=79079.


Next is Edge Animate. I found out there is a fair amount of support for this on the web, including a nice video on how to dynamically generate content (). Edge also has the concept of Symbols (reusable components) which is going to make menus and such like much easier. Unfortunately the concept seems to be an Adobe one, I suspect other editors probably don't have the same facility (maybe something similar though). The UI is familiar to anyone who has used Adobe Flash CS, animation is powerful, adding script is easy, and minimum data for a page isn't excessive (200kb for my test page).


So far so good I think, but if I run in to any show stoppers I will update this thread.

In Topic: HTML5 for game UI?

27 June 2014 - 05:46 PM

So what do you think of the editors in the first link I posted? They seem to offer the same features as Flash but generate HTML5, CSS and Javascript. 

They aren't really comparable to in browser editors designed for making simple web pages I don't think.

I tried out Google Web Developer, and it isn't great, but I did manage to make some nice tweened animations in it in less than 5 minutes. And it actually uses HTML and CSS as its data representation, rather than just generating it as a build/publish step.

In Topic: HTML5 for game UI?

27 June 2014 - 12:34 PM



as mysterious and complex and unfitting as HTML for game UI.

WYSIWIG editing, lots of tooling, choice of a few mature layout engines, lots of documentation, powerful features (dependent on the layout engine).

I'm not interested in coding HTML, but in using a WYSWIG editor + Javascript to quickly iterate on UI, it doesn't matter if HTML is mysterious or complex, because I am never going to see it.



Haven't used the Flash toolkit but from what I've read about it, artists can draw and animate stuff easily there so it makes at least some sense to use it.

Yeah, but the latest HTML5 tools are allowing the same thing. Even Adobe is moving away from Flash to HTML5. Adobe Edge Animate is the HTML5 equivalent of Adobe Flash Pro. In fact the link I posted previously shows this and some others.





They are rewriting Rust and using HTML 5 for the UI.



Looking into this a bit further today, it looks like Chromium forked Webkit to Blink, I am going to see how far I get with that, I'm not sure I would want to try to integrate the whole of Chromium!


In Topic: Modernizing my GL based renderer.

30 July 2013 - 09:43 AM

Okay, I will rephrase: where can I find out the intended usage patterns for the various new features? The spec explains what the features are and their syntax, not their rationale (usually), or the specific problems they were intended to solve...