T3D Awesomium Integration Pack - Released
by Stefan Lundmark · 12/17/2012 (4:01 pm) · 58 comments
I've just released a pack which lets you embed HTML5/Flash in your applications and games. You can use JavaScript to interact with elements in the game which is very useful for ingame terminals like you see in the video below. The bridge is two-way, so you can call JavaScript from Torque 3D, and call TorqueScript from JavaScript.
Let me know what you think and if you've got any questions!
Get the pack for $59 at:
www.gameinprogress.com
Here's how it looks:
Some key features of the pack:
- Powerful bridge between JavaScript and TorqueScript. This way you can communicate between HTML5/Flash and your game! Useful for interactive GUI screens ingame.
- Shapes are load-balanced by distance and focus.
- Layer complex GUIs by using multiple transparent objects that can take focus from other such objects, or remain in place. All customizable.
- You create a texture target per unique instance of a webpage you want, and then reference this texture target in the materials you want to use the target in. A very powerful combination!
Let me know what you think and if you've got any questions!
Get the pack for $59 at:
www.gameinprogress.com
About the author
#2
12/17/2012 (4:38 pm)
This is pretty neat, nice work.
#3
Lukas: That's fine, I appreciate the comments!
You don't have to pay a dime for Awesomium unless you're making more than $100.000 a year. I really think they're cool with their licensing.
I evaluated most of these solutions before settling on Awesomium. WebKit renders to a window, Awesomium doesn't. Berkelium comes close, but it isn't as stable, especially not with Flash. If you're using pure WebKit, you're very reliant on a HWND (on Windows) and you'll have to implement platform-specific capturing from the Window to your game.
You can embed global stylesheets in Awesomium (to style webpages programmatically and dynamically), use custom cookies, JavaScript callbacks etc which isn't possible out of the box with WebKit. You can recompile it from source and add all these things yourself, sure - but that's a huge task (been there, done that) and you'll have to release your changes to comply with LGPL.
If you're referring to the QtWebKit resource: Qt is huge in itself (even without their WebKit implementation) and it suffers from the same issues as above, and last I looked that particular resource didn't compile with T3D 1.2 MIT.
Jquery is used in the video above. I really like how it turned out. :)
Apart from those differences, there's the difference of the T3D integration code sitting ontop. There's quite a bit going on to make everything smooth and performant.
12/17/2012 (10:47 pm)
Adam: Thanks! Nice to see you're still around.Lukas: That's fine, I appreciate the comments!
Quote:Noteworthy, awesomium is only free as long as you qualify for the indie license, after that it's a 2900$.. Doesn't mean anything for most people here but still notworthy.
You don't have to pay a dime for Awesomium unless you're making more than $100.000 a year. I really think they're cool with their licensing.
Quote:
WebKit is open source and have already been integrated into Torque3D several times.
I evaluated most of these solutions before settling on Awesomium. WebKit renders to a window, Awesomium doesn't. Berkelium comes close, but it isn't as stable, especially not with Flash. If you're using pure WebKit, you're very reliant on a HWND (on Windows) and you'll have to implement platform-specific capturing from the Window to your game.
You can embed global stylesheets in Awesomium (to style webpages programmatically and dynamically), use custom cookies, JavaScript callbacks etc which isn't possible out of the box with WebKit. You can recompile it from source and add all these things yourself, sure - but that's a huge task (been there, done that) and you'll have to release your changes to comply with LGPL.
Quote:
And there is an implementation in the resources page.
If you're referring to the QtWebKit resource: Qt is huge in itself (even without their WebKit implementation) and it suffers from the same issues as above, and last I looked that particular resource didn't compile with T3D 1.2 MIT.
Quote:
I believe Jquery would work aswell so dynamic UI is really easy to create with this pack!
Jquery is used in the video above. I really like how it turned out. :)
Apart from those differences, there's the difference of the T3D integration code sitting ontop. There's quite a bit going on to make everything smooth and performant.
#4
12/17/2012 (11:56 pm)
So I'm confused...is this free for Indies?
#5
12/18/2012 (12:49 am)
Awesomium is "free" for indies, see my post above. This integration pack is currently priced at $59.
#6
I recently updated the Qt WebKit demo to work with T3D 1.2 and the latest webkit release. I works but it's still a mostly untested demo though.
It's great to have the option of Awesomium integration too and lots of people have asked for a proper in game browser integration pack.
12/18/2012 (1:41 am)
Nice work Stefan, the javascript-torquescript bridge is a nice feature. I recently updated the Qt WebKit demo to work with T3D 1.2 and the latest webkit release. I works but it's still a mostly untested demo though.
It's great to have the option of Awesomium integration too and lots of people have asked for a proper in game browser integration pack.
#7
What swayed me over using Awesomium than WebKit is support/bug fixes, and compatibility on T3D 1.2.
So good call on creating a niche bridging product that will make integration easier.
12/18/2012 (1:47 am)
Agree. Nice work Stefan, I've been looking at using Awesomium for a while, and this integration kit will save me some time, which is great. I'll pick it up at some point.What swayed me over using Awesomium than WebKit is support/bug fixes, and compatibility on T3D 1.2.
So good call on creating a niche bridging product that will make integration easier.
#8
12/18/2012 (2:33 am)
Thanks guys, I really appreciate it!
#9
Just one more thing.. Put more emphasis on the transparent web elements! Seriously they are the awesome part!
Ah one extra thing.. If I were to create a web overlay that covered the whole screen, and it had maybe a border of 10 pixels and full transparency in the middle. Would clicking in the middel trigger the web overlay or whatever is underneath?
12/18/2012 (2:51 am)
Great to hear why your solution is better in the other points, for a game release I would sure go with the most stable solution, and 59$ is pretty cheap.Just one more thing.. Put more emphasis on the transparent web elements! Seriously they are the awesome part!
Ah one extra thing.. If I were to create a web overlay that covered the whole screen, and it had maybe a border of 10 pixels and full transparency in the middle. Would clicking in the middel trigger the web overlay or whatever is underneath?
#10
In the example to the right on here, all input is ignored if the opacity of the pixel hit is below 196. This is useful for round controls that pass trough input where there is no color (traditionally these are treated as rectangular objects where input is concerned), or as you observed, controls where there are varying amounts of color in different parts of the control internally.
In your example with the web overlay that covered the whole screen, clicking in the middle would trigger whatever is behind the clicked control. That is, as long as AlphaCutoff is anything else than 0.
12/18/2012 (3:31 am)
That behaviour is customizable per object.
In the example to the right on here, all input is ignored if the opacity of the pixel hit is below 196. This is useful for round controls that pass trough input where there is no color (traditionally these are treated as rectangular objects where input is concerned), or as you observed, controls where there are varying amounts of color in different parts of the control internally.In your example with the web overlay that covered the whole screen, clicking in the middle would trigger whatever is behind the clicked control. That is, as long as AlphaCutoff is anything else than 0.
#11
Practically you could then create a webUI that covers the whole screen and use html and CSS to control the UI elements!
And the best part of using this GUI is there is TONS of tutorials on JQuery and what not.. Also this will make implementation with webservers a breeze!
(Sorry for me rambling on about this just seeing endless possibilities :3)
12/18/2012 (3:35 am)
Wow awesome, this is like the UI system I have always imagined me.Practically you could then create a webUI that covers the whole screen and use html and CSS to control the UI elements!
And the best part of using this GUI is there is TONS of tutorials on JQuery and what not.. Also this will make implementation with webservers a breeze!
(Sorry for me rambling on about this just seeing endless possibilities :3)
#12
My original plan for the demo was to make two fullscreen GUIs for the MainMenuGui and PlayGui to showcase layering and transparency pass-trough, but I'm no artist as you probably can tell from my programmer art.
12/18/2012 (3:39 am)
Yeah, you could do that. My original plan for the demo was to make two fullscreen GUIs for the MainMenuGui and PlayGui to showcase layering and transparency pass-trough, but I'm no artist as you probably can tell from my programmer art.
#13
(Although the demo you ended up with is not looking bad at all)
12/18/2012 (3:42 am)
I know that feeling -.- Creating something awesome and then being unable to show it properly..(Although the demo you ended up with is not looking bad at all)
#14
12/18/2012 (3:51 am)
That happens a lot. :) Thanks Lukas!
#15
I haven't checked out your pack yet, but having had to port the existing resource from the current state of it with Doug's changes that got it working with 1.2 to the minimum functionality I needed with Awesomium (I didn't do most of the input as I didn't need it), I'd say $59 is worth saving the couple of days I had to spend on that.
Edit:
Hell, I may just pick it up so I don't have to redo that integration all over again for a personal project!
12/19/2012 (10:06 am)
Great pack Stefan! I agree that Awesomium is the way to go much more than Qt. Qt is too painful to work with even ignoring the ridiculous multimedia bugs in 4.8 (they might have fixed that in the latest version but I don't have the time to see if they did). It's been driving me nuts that I couldn't rewrite the existing resource for Awesomium but that's all work for a service contract and can't be shared. :(I haven't checked out your pack yet, but having had to port the existing resource from the current state of it with Doug's changes that got it working with 1.2 to the minimum functionality I needed with Awesomium (I didn't do most of the input as I didn't need it), I'd say $59 is worth saving the couple of days I had to spend on that.
Edit:
Hell, I may just pick it up so I don't have to redo that integration all over again for a personal project!
#16
12/19/2012 (10:55 am)
Went ahead and picked it up. I like your approach to the integration, very clean. Are you planning to add the rest of the key codes for the input later? That was the bit in our integration that after a half day of updating key codes I said to hell with it and commented them all out as I didn't need them for the project.
#17
Thank you! Yeah, I agree. As much as I love Qt, I really think QtWebKit was a little bit too difficult to work with, but I honestly haven't taken a look at their latest release either.
Let me know if you have any questions!
12/19/2012 (10:58 am)
Hi Scott,Thank you! Yeah, I agree. As much as I love Qt, I really think QtWebKit was a little bit too difficult to work with, but I honestly haven't taken a look at their latest release either.
Let me know if you have any questions!
#18
12/19/2012 (11:12 am)
That's a good idea! I'll update the pack to handle all key codes shared by T3D and Awesomium. I'll post again when it's complete.
#19
12/19/2012 (12:59 pm)
The pack has been updated.
#20
12/19/2012 (1:14 pm)
That was really fast... 
Torque Owner Lukas Joergensen
WinterLeaf Entertainment
WebKit is open source and have already been integrated into Torque3D several times.
Although the transparency is a new thing.
There were a "feature suggestion" about this on the issues page on github
And there is an implementation in the resources page.
Why should we choose your solution over that?
Edit: Rereading this, it sounds a bit harsh. Forgive me it wasn't meant as a rant rather if you could point out which areas your product differs from the ones already out there.
Believe me I think the transparent elements is awesome and totally worth the money.
(CSS UI anyone?) That would definetly be an improvement to T3D's UI system (because I don't like the existing one), I believe Jquery would work aswell so dynamic UI is really easy to create with this pack!
So don't misunderstand me I think it looks like an awesome product guess it's just too late in the night for me to do quick comments ^^