Page 1 of 1

Overgrowth's UI System

Posted: Thu Jan 07, 2010 2:27 pm
by 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 ^^

Re: Overgrowth's UI System

Posted: Fri Jan 08, 2010 8:01 pm
by 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.

Re: Overgrowth's UI System

Posted: Sat Jan 09, 2010 5:01 am
by Christoph680
Very nice :D 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

Re: Overgrowth's UI System

Posted: Sat Jan 09, 2010 6:49 am
by 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.