Reimplementing the game GUI with HTML

[Loki1950]

Doesn't wxWidgets have Html support is so why use an other lib

Enjoy the Choice

[zoot]

Doesn't wxWidgets have Html support is so why use an other lib

Probably because "HTML support" is subject to interpretation Just having to render a few HTML help pages doesn't require the same amount of API power as a full-blown gaming UI.

[Loki1950]

Yeah I just looked at the wxWidgets docs it is limited but you can embed a full browser.

EMBEDDED WEB BROWSERS
Although wxHtmlWindow is a fantastic lightweight HTML viewer, sometimes you
need full web facilities in your application. Eventually wxWidgets will provide
a single class to embed an appropriate browser on each platform, but for now
there are different classes to achieve this.
On Mac OS X, wxWidgets comes with wxWebKitCtrl, which you need to
enable by passing --enable-webkit to configure when building wxWidgets.
On Linux, you can download wxMozilla (see Appendix E). Be warned that
your application distribution will swell by many megabytes if embedding
Mozilla.
On Windows, you can download wxIE (see Appendix E) to embed Internet
Explorer in your application. You can also consider using wxMozilla on
Windows.

but it may increase our download size significantly but I imagine any option will do the same.

Enjoy the Choice

[zoot]

Yeah I just looked at the wxWidgets docs it is limited but you can embed a full browser.

EMBEDDED WEB BROWSERS
Although wxHtmlWindow is a fantastic lightweight HTML viewer, sometimes you
need full web facilities in your application. Eventually wxWidgets will provide
a single class to embed an appropriate browser on each platform, but for now
there are different classes to achieve this.
On Mac OS X, wxWidgets comes with wxWebKitCtrl, which you need to
enable by passing --enable-webkit to configure when building wxWidgets.
On Linux, you can download wxMozilla (see Appendix E). Be warned that
your application distribution will swell by many megabytes if embedding
Mozilla.
On Windows, you can download wxIE (see Appendix E) to embed Internet
Explorer in your application. You can also consider using wxMozilla on
Windows.

but it may increase our download size significantly but I imagine any option will do the same.

Enjoy the Choice

To be honest, what we need is not a browser, but rather an UI engine which understands HTML/CSS. Browsers come with a lot of cr*p that is of no use to us, like HTTP support, security models etc. Also, I doubt wxWidgets can even be used inside SDL.

[MishFTW]

My main thing here is that it should support DOM. That way we can manipulate the HTML instead of just present it like a normal browser.

[zoot]

My main thing here is that it should support DOM. That way we can manipulate the HTML instead of just present it like a normal browser.

The Python interface of libRocket is modelled on DOM. Supposedly, "Rocket provides support for developing your own bindings to other scripting languages", so it should be possible to make it work with SpiderMonkey too.

[Josh]

If the GUI was built on HTML and CSS I can defiantly work a lot more in that area and I know a couple people who could help too...

I think our best bet for an in-game rendering HTML/CSS layout engine would be Webkit. Its (compiled) size is only about 40Mb and It is (generally) the most standards compliant and up to date layout engine.

Edited August 14, 2012 by Josh

[MishFTW]

In order to sway some minds, I've started work on a demo. I can't guarantee anything but I'm starting with the match setup screen.

[zoot]

If the GUI was built on HTML and CSS I can defiantly work a lot more in that area and I know a couple people who could help too...

I think our best bet for an in-game rendering HTML/CSS layout engine would be Webkit. Its (compiled) size is only about 40Mb and It is (generally) the most standards compliant and up to date layout engine.

Standards compliance isn't really an issue, since we're not building a web browser

Edited August 14, 2012 by zoot

[historic_bruno]

Instead of using a full fledged browser, I feel it might be better to use something like http://librocket.com/ which supports HTML and CSS, and is already integrated in many games...

Great suggestion! That's pretty exciting Looks like it only has one dependency, FreeType, unlike WebKit. It supports the platforms we want and then some (iOS / Android anyone?) The build process looks painless. We could continue using SDL and our custom render engine. The thing to note though is it's not a web browser, but just an interface between input and display components which happens to support HTML/CSS. I have no idea how JavaScript would interact with it (likely through a custom interface we have to write ourselves which isn't terrible, that's what we do currently).

[zoot]

Let's do it! lol. I've always hated how the current UI seems to lag more than the actual 3D rendering on my PC...

[MishFTW]

Standards compliance isn't really an issue, since we're not building a web browser

Yes, but its nice to have some of the latest features.

Great suggestion! That's pretty exciting Looks like it only has one dependency, FreeType, unlike WebKit. It supports the platforms we want and then some (iOS / Android anyone?) The build process looks painless. We could continue using SDL and our custom render engine. The thing to note though is it's not a web browser, but just an interface between input and display components which happens to support HTML/CSS. I have no idea how JavaScript would interact with it (likely through a custom interface we have to write ourselves which isn't terrible, that's what we do currently).

Well this is a step forward. Going through the RCSS property index, I think its quite doable. If it has media queries and a HTML interface, I think it might work. But if we're going to integrate it into the current SDL engine, why not just get Webkit?

[historic_bruno]

You know what I just realized, that would make it incredibly easy to try new fonts. Not only that, if it has any decent level of Unicode support at all, we could support translations to languages like Chinese, Arabic, Hebrew, without much trouble. I think? This isn't possible currently with our GUI engine, as far as I know.

[k776]

You know what I just realized, that would make it incredibly easy to try new fonts. Not only that, if it has any decent level of Unicode support at all, we could support translations to languages like Chinese, Arabic, Hebrew, without much trouble. I think?

It looks like it :-) http://librocket.com/wiki/documentation/Localisation

But do we know anyone brave enough to implement this?

[zoot]

Yes, but its nice to have some of the latest features.

Well this is a step forward. Going through the RCSS property index, I think its quite doable. If it has media queries and a HTML interface, I think it might work. But if we're going to integrate it into the current SDL engine, why not just get Webkit?

Look at some of the features WebKit has: "Web Storage"? "Geolocation API"? Of what use is that to us? Or how can they be removed?

[MishFTW]

Well the big ones I would go for would be SVG, canvas, and CSS media queries. Not all of them

But then again you could use Web storage for the tournaments. Sever sent events could be used for GUI updates or even a server based UI with a local fallback.

[zoot]

This.

[historic_bruno]

Example of libRocket in action (the flickering is apparently due to the recording process):

Note the nice feature of being able to drag UI elements around.

[zoot]

EA (vade retro satana ) has apparently released the source code for the WebKit derived layout engine they used for parts of the UI in the console game Skate 3.

Presumably, they have cut out a lot of the crap that comes with vanilla WebKit.

Edit: This slide deck describe how they did it. Apparently, the main disadvantages they found were worse visual quality and memory consumption.

Edit2: If anyone wants to push for using HTML/CSS in the game, I suggest they make a helluva proof-of-concept first (to view in ordinary web browsers) to show that it actually can do what we need.

Edit3: Updated link.

Edited August 16, 2012 by zoot

[MishFTW]

Zoot, the URL for the slide deck is a local one. Can't access.

Edit: I found the original link.

[abral]

There's also XULRunner (https://developer.mozilla.org/en-US/docs/XULRunner) that could be used.

[fabio]

FIFE, the engine used by Unknown Horizons, is experimenting with Fifechan and CEGUI.

[MishFTW]

FIFE, the engine used by Unknown Horizons, is experimenting with Fifechan and CEGUI.

Nice find; better than the current solution I think

[Lion.Kanzen]

Its a interesting topic, this system, based in C++, can provide of shape and dynamic pop ups menu, and scroll menu, and screen menu?

For example Warcraft Menu scroll menu , Starcraft GUI session. thing like that?

[FeXoR]

I love the GUI of Zero-K (http://zero-k.info/) that uses the spring engine (originally from total annihilation). It's clean and occupies little space.

@FIFE: Have you played Unknown Horizons? I like the game concept and follow it's development. But the GUI is quite buggy (especially the configurable resource menu: The settings are not stored and it's not clear what you will hit with a click: The button or the game world).

Edited March 28, 2013 by FeXoR