Twitter  YouTube  E-Mail  RSS
The One Man MMO Project
The story of a lone developer's quest to build an online world :: MMO programming, design, and industry commentary
A Chrome UI
By Robert Basler on 2011-04-07 10:28:46
Homepage: email:one at onemanmmo dot com

Something I struggled with for quite a while was trying to figure out how to build a good-looking and functional user interface. I could certainly have built my own, but that would have been a major undertaking, as a lot goes into a user interface. You need a layout engine to manage where everything lands on the screen when you resize the window, you need widgets such as buttons, text areas, password boxes, scroll bars, radio buttons, progress bars, and more, and you need a way to author all that that is easy enough to use that if you change your mind, you can afford to do that.

That's a pretty tall order. And ideally I wanted it to be free.

A lot of games use Scaleform which lets you author your user interface in Flash. Flash certainly allows lots of flashy effects, but its authoring environment is expensive (yes I know there are free tools, but they're not for me) and you also have to pay the Scaleform guys. Scaleform fails the not free test.

You might also consider Qt which gives you all the things I was talking about above on several OS platforms. The weak point there is authoring, since the UI layout is done in code.

One of my key features is an in-game store, and the best way to make a store is with web tools. I was going to have to somehow get a web browser integrated with my game. I looked at three open source browsers to evaluate the possibility for embedding them in a game.

While I was doing that I had a headsmack moment. A browser is a really fancy layout engine with lots of UI widgets! I can use a web browser to run my entire front end! HTML includes the ability to navigate between screens, it has nice tools for authoring, AJAX for live page updating, web servers are free, I could even serve my entire game UI from the web if I chose (not gonna do that.)

Gecko (the engine behind Firefox) has very little documentation on embedding, and those who have attempted it say it is a month long project and not for the faint of heart. Too hard.

Webkit (the engine behind Safari) has some available documentation on embedding from the guys at Second Life, but talking to someone who had embedded Webkit in a game engine, it also sounded like a month long project. Better, but too hard.

That left Google's Chrome. And here's the money. I found Berkelium. I was able to have Berkelium completely integrated and displaying interactive web pages in just 6 days.

Berkelium is not all ponies and light however. To this point I haven't been able to build it. The source code for Berkelium and Chrome come seperately, so finding the proper source code build in Google's code repository took several hours of fiddling. What's even more worrying, is that the guys at Berkelium haven't been able to make a debug build. My fingers are crossed that the project will continue and produce a source build in Debug mode, but for now, I have to pray it doesn't crash in the browser. One other point to consider is the 40MB of binaries you need to include with your application.

Integration of Berkelium is straightforward, just follow their documentation. The package comes with a couple of examples, I was able to follow glut_demo to build my own WindowDelegate to do the rendering. I have to say, their code that implements the OnPaint method is INSANE. (Here's a hint, jj = rowNumber.) The only time I had trouble was when I needed to resize the browser window, and that came down to bugs in my own code, so I can't criticize them for that.

At this point, I'm also planning to use the browser for the UI during gameplay so it is running full-screen with transparency. (Most of the games I have worked on unload the full UI during gameplay.) Performance of the browser seems alright, I haven't noticed any visible rendering hitches when it is running and it hasn't tripped my long-frame warning, so it is processing reasonably quickly. This is not entirely unexpected since the Berkelium guys are also making a game with it. It will be interesting to see if using the browser for the gameplay gui makes it to the finished game. In any case, building an in-game front end manually is a lot less work than an entire user interface, so the browser is definitely a win.

By Robert Basler on 2011-05-13 10:18:08
Homepage: email:one at onemanmmo dot com
Part 2 of this article.
By Robert Basler on 2011-10-25 02:01:09
Homepage: email:one at onemanmmo dot com
By Robert Basler on 2015-04-21 01:33:26
Homepage: email:one at onemanmmo dot com
Berkelium isn't maintained anymore, might want to consider Chromium Embedded Framework instead. I'll probably switch at some point since drag and drop is broken in Berkelium.
By Robin on 2016-06-23 22:14:36
Homepage: email:rwn007 at hotmail dot com
I have been trying to implement Berkelium for a couple of days now...

I am still having trouble with:

1. Context menus (by right clicking). They tries to open it seems, because the onShowContextMenu function gets called, but they never become visible... So right clicking does not work at all for me.

2. Crashes (onCrashed gets called, and it is then stuck) when going to a youtube video or youtube itself.
People say you must disable javascript, but that requires a custom build, which I have tried to do but failed for around 20 hours

3. Scrolling in pages makes the render look wierd for some reason.

How did you solve these issues?
By Robert Basler on 2016-06-24 01:13:19
Homepage: email:one at onemanmmo dot com
If I were you I would implement CEF rather than Berkelium at this point. That said, I didn't implement context menus, although they probably work like Widgets where you need to create a new window with the same bitmap handling as the main berkelium window. I've never had to deal with crashes. As for scrolling, the example code IS correct if pretty weird. I'd double-check you implemented it correctly.
By Robin Norrman on 2016-06-25 09:12:15
Homepage: email:rwn007 at hotmail dot com
Ok thank you! I'll check the scrolling code from the example code. :)

New Comment

Cookie Warning

We were unable to retrieve our cookie from your web browser. If pressing F5 once to reload this page does not get rid of this message, please read this to learn more.

You will not be able to post until you resolve this problem.

Comment (You can use HTML, but please double-check web link URLs and HTML tags!)
Your Name
Homepage (optional, don't include http://)
Email (optional, but automatically spam protected so please do)
Multiply: 2 and 6 = (What's this?)

  Admin Log In

[Home] [Blog] [Video] [Shop] [Press Kit] [About]
Terms Of Use & Privacy Policy