Overgrowth's UI System

[Christoph680]

Hey there!
Thanks to Jeff's great posts on we finally managed to implement a basic UI system based on Awesomium. Now here's where the tricky part comes.. I know Jeff said, he'd do an additional post on the CSS involved to accomplish this, but unfortunately I was unable to find it.. meaning he probably didn't do it ^^
So what I'd like to ask is how the system works exactly. I've already tried simple stuff like rescaling Awesomium's RenderTarget, but that just looks ugly.
I'd really love to hear from you guys how you pulled it off

Greets,
Philipp //Illuminated Games

btw. have you also had such huge problems with getting Awesomium to recognize the return key? Seems like this is the only key that's a bit problematic ^^

[Jeff]

Are you talking about the resolution independence? If so, try changing the css zoom property of the body, or whatever element you want to modify, to say 1.5 or 2. WebKit should handle the rest!

If you are talking about other stuff, feel free to look through the HTML source in the OG alpha for tips.

[Christoph680]

Very nice Thanks a lot for the quick answer ^^
What I was rather talking about (though I didn't know about the zoom property as well ^^) was how you manage to swap low-res and high-res UI images while zooming to a smaller/larger version.

Greets,
Philipp //Illuminated Games

[Jeff]

You can either use vector assets, draw them with webkit css properties, or you can down-sample HD assets. What I did in my tests is add a class to the body element called "HD" and then use HD assets in that case.