Allegro.cc - Online Community

Allegro.cc Forums » Game Design & Concepts » Using HTML+CSS for GUIs part 3

This thread is locked; no one can reply to it. rss feed Print
Using HTML+CSS for GUIs part 3
relpatseht
Member #5,034
September 2004
avatar

Well, I have found myself on the strikingly short end of time. My prior thread seems to have gone a month stale and I hadn't thought more than a week had passed.

Anyway, to keep all interested updated, I have been doing more work on this project and must say, by now it positively blows Awesomium out of the water as far as utility goes. Over the past month I've totally overhauled and refactored my V8 binding library as well as made minor bug fixes where I've found them. At present, Awesomium lets you call JavaScript as if through an address bar, I let you use JavaScript as an in-game scripting language (but since V8 is compiled down to machine code, it runs much faster than things like lua), creating object types and binding in-game functions, classes, etc.

I've been working on this simultaneously for my game project this year and using it for all GUIs and scripting needs. Thus far, I must say HTML5 + CSS3 is a very viable option for in-game GUIs.

As far as general release goes, I can hand out source whenever, if someone wants to check it out, but I won't be doing anything official until late December at the earliest. There are still a number of warnings in the compilation process which need fixing, a problem with Chrome's macros being double defined I need to fix (lest a few Chrome header files are changed prior to building), scroll bars seem to go transparent under certain run conditions, and HTML5 drag and drop does not work (but everything else HTML5 does, including video). So I'll be ironing those out when I have time.

I also only have a windows build at the moment. I've been too busy with my classes and projects to make sure the Linux build is up to par and I haven't a Mac to build on even if I wanted to touch such a vile thing.

Thus is development status. I'll be continuing to work on this up until at least the end of next semester, although, with a library so useful, I will probably keep it updated for quite some time.

furinkan
Member #10,271
October 2008
avatar

relpatseht said:

Furinkan, all that time you invested in learning XHTML, CSS, and JavaScript is now applicable to game programming. With the wave of my hand in late December, I shall converge these two seemingly divided arts!

Yea. Ive been shadowing these threads. Sounds... awesome? Can't wait to try it and that space game out! ;D

Billybob
Member #3,136
January 2003

Applause

Screenshots!? ;D

by now it positively blows Awesomium out of the water as far as utility goes.

Not hard :P Awesomium is unimaginably limited considering it's a commercial product.

Quote:

I can hand out source whenever, if someone wants to check it out, but I won't be doing anything official until late December at the earliest.

I don't think it would hurt to post it, especially if it'll fit as an attachment on your post. Often when I work on something, I plan to make some kind of code release, but always hold off until I do code clean-up. Months later, the project is stale in my mind, making code clean-up difficult, and so I generally never get around to releasing the source code :-/

Keep up the great work! 8-)

Ceagon Xylas
Member #5,495
February 2005
avatar

I would strongly recommend taking a language like jQuery into mind when working with JavaScript for your games and their GUIs. I began working on something similar once upon a time, but since I don't have much free time, the project fell off the wagon.

bamccaig
Member #7,536
July 2006
avatar

I'm still very interested in this. You might as well post the code. If you actually intend to open source it then you could always create a GitHub or BitBucket repository.

relpatseht
Member #5,034
September 2004
avatar

Alright, well, here is the dll file with the V8 binding library and here is the DLL source/VS project. I haven't been able to go through and make sure it still runs and compiles on GCC and is built off Chrome 7.0.517.41 at the moment (updating chrome is an all day process, so I don't get around to it often).

The code is currently quite a mess. I tried to keep the actual interface commented but most of such work has gone by the wayside in favor of productivity.

As far as the JavaScript binding library goes, registering global functions and variables is currently broken. I haven't had time yet to do it. The test case for the DLL is also currently broken (I moved testing over to in game).

Actually, I just ripped all the header files out of my current game project and altered them slightly where needed. Something might still be referenced which doesn't exist, but, eh, I don't have time for an actual alpha release right now, so...

Using is pretty straightforward.

#SelectExpand
1// Registering classes, in a global scope (automatic registration at run time) 2JS_CLASS_START(JSObj, CPPObj) 3 JS_VARIABLE(pos, &CPPObj::GetPos, &CPPObj::SetPos) // Add a variable to JSObj called pos which uses GetPos and SetPos 4 JS_VARIABLE(scale, &CPPObj::GetScale) // Add a read-only variable to JSObj called Scale which uses GetScale 5 JS_VARIABLE(rot, &CPPObj::rot) // Add a variable to JSObj called rot which uses the rot variable 6 JS_VARIABLE(foo, &CPPObj::GetFoo, &CPPObj::foo) // Add foo which reads using GetFoo and writes directly to the variable 7 JS_VARIABLE(bar, &CPPObj::bar, &CPPObj::SetBar) // Add bar which reads directly from bar and writes using SetBar 8 JS_METHOD(DoSomething, &CPPObj::Magic) // Add a method to the JSObj called DoSomething which calls Magic 9JS_CLASS_END(CPPObj) 10 11// Initialization code 12HTMLEngine::Initialize(); // Initialize the HTMLEngine 13JavaScript::Get().RegisterWithHTMLEngine(); // Register all objects with V8 and Chrome 14 15// Getting a view 16HTMLView *view = HTMLEngine::CreateView(width, height, transparent); 17 18// Getting the pixel data 19view->LockCanvas(); // Draw the screen if it is dirty and lock it for reading 20Draw(view->GetPixels()); // Retrieved BGRA data. Note the alpha is undefined if transparency is turned off 21view->UnlockCanvas(); // Kill the canvas

Don't comment on the code quality, again. I haven't had the time to improve it.

ScreenShot:
{"name":"602628","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/e\/4\/e4d2d1c7f1ca5d49d3771dc4ed04bb32.png","w":807,"h":625,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/e\/4\/e4d2d1c7f1ca5d49d3771dc4ed04bb32"}602628

The JSConsole at the top scrolls and fades in and out on mouse over and and other html thing in the corner I didn't make (thus the ugly) but is a more internal thing. Note the broken scrollbar transparency. I have a few other things, but those are most recognizable as HTML at the moment.

Anyway, back to work for me!

Billybob
Member #3,136
January 2003

Very cool 8-) I downloaded the archives, to keep around for a rainy day.

Something might still be referenced which doesn't exist, but, eh, I don't have time for an actual alpha release right now, so...

Perfectly alright. Something is usually better than nothing. If anyone else stumbles down this same road, at least they'll have a better starting point, rather than having to start from scratch.

And yeah, the Chrome sources are massive :o

Go to: