Author Topic: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)  (Read 4023 times)  Share 

Inspired by this thread from last year, I have been working on a proof-of-concept demo for an AGS game running in a browser, a similar idea to clarvalon's XAGE running on .NET Silverlight, except that the primary language is the browser's own JavaScript, using HTML5 or Flash to handle the audio and graphics output.

The demo is of Ben Chandler's awesome miniature-epic "!", for which he graciously released the source code last year.


Any relatively recent version of Firefox, Opera, Chrome or Safari should be able to play this without requiring Flash. IE8 (and hopefully IE7 and maybe IE6, though I haven't been able to test) should be able to play it, but will require Flash 10+ plugin. You can also see it in Flash mode in other browsers if you like:


The "engine" is very incomplete, in fact it just barely covers the functionality needed to play this one specific game, and I even cut some corners towards the end because I was getting impatient :P But not too much, and I am pretty confident it could be fleshed out into something that could run most any AGS game. The question is, of course, whether this is something people really want, particularly as it is much, much harder to "protect" your game's resources. Someone determined who knows what they're doing can easily download all the files, read the script code, etc.

Feedback and discussion welcome!

Iceboty V7000a

  • Local Moderator
  • * KILL* * KILL * * KILL *
    • Lifetime Achievement Award Winner
    •  
Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
« Reply #1 on: 13 Jan 2011, 04:18 »
Wow amazing. I like how it manages to run on nearly everything.

cianty

    • I can help with play testing
    •  
    • I can help with web design
    •  
Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
« Reply #2 on: 13 Jan 2011, 07:08 »
That's really awesome. I do hope you continue work on this.
ca. 40% completed

ThreeOhFour

  • Order of the Maggot
  • AGS Baker
  • Wild colonial boy.
    • Lifetime Achievement Award Winner
    •  
  • ThreeOhFour worked on a game that was nominated for an AGS Award!ThreeOhFour worked on a game that won an AGS Award!
Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
« Reply #3 on: 13 Jan 2011, 08:14 »
Very impressive - aside from music issues I played through the game without noticing any gameplay or presentation glitches at all.

It's hard to deny that the open-ness of the code could be a sticking point, but for the most part I think it'd be preferable to not being able to put the games in a browser at all. The ability to run games in a browser overshadows, for now at least, protection of one's assets - particularly in smaller freeware games.

I'm interested in a couple of things - ability to scale beyond manually doing it with browser zooming features, support of things such as alpha channels, the actual conversion process, eventual support for saving/loading, support for accessing other external files aside from save files (such as, but not limited to, translation files and running other .exes from ), support for plugins (such as, but no limited to, ogg theora player) and support for things such as 8 bit colour modes and the like.

Also, ! probably is not the best simple conversion candidate due to the unconventional nature of it. Have you tried working with multiple mouse modes and inventory items?

Once again most impressive work. If you'd like more source code to experiment with let me know and I'll happily send you some.
« Last Edit: 13 Jan 2011, 10:06 by Ben304 »

kaputtnik

  • AGS Baker
  • good moon rising?
    • I can help with AGS tutoring
    •  
    • I can help with story design
    •  
    • I can help with translating
    •  
    • I can help with voice acting
    •  
Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
« Reply #4 on: 13 Jan 2011, 09:50 »
This is fantastic, really. Being able to run AGS games in a browser window without so much as an extra plugin (I suppose people who play games in their browser have Java or Flash installed anyway) is such a huge step towards a much, much broader audience. Adventure games are just perfect for more "casual" players, who in some cases have never even downloaded or installed a game (many of my friends are like that - they grew up playing games on consoles, while on the PC, browser-based Flash games are their way to go).

I mean, technically you could even think of facebook as a means of spreading AGS games, there are so many people on office lunch breaks or just browsing randomly, with so much free time on their hands, and adventure games have a very low entry barrier - you just click and things happen, no further gaming knowledge required.

And it's also a great way for AGS games to reach Mac and Linux users!

I would love to see this continued, this is just awesome.
I, object.

Calin Leafshade

  • AGS Project Tracker Admins
  • Long live King Cat!
    • I can help with AGS tutoring
    •  
    • I can help with voice acting
    •  
  • Calin Leafshade worked on a game that was nominated for an AGS Award!Calin Leafshade worked on a game that won an AGS Award!
Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
« Reply #5 on: 13 Jan 2011, 09:59 »
Agreed, little AGS games are usually rather casual affairs and the browser is where casual games are king.

Wyz

  • AGS Project Tracker Admins
  • anno 1986
    • I can help with AGS tutoring
    •  
    • I can help with story design
    •  
    • I can help with translating
    •  
    • I can help with voice acting
    •  
    • I can help with web design
    •  
Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
« Reply #6 on: 13 Jan 2011, 12:36 »
Ah! I've been waiting for this, good show! Though not all adventure games lent themselves for a in browser experience, many actually do. I'd say the more casual ones that require less immersion, they would really work well boxed. For that reason I see browser based games as the future (or more accurate one of the futures*) of adventure games, and this proof-of-concept as an important step in the right direction.

HTML5 will only increase the flexibility of browsers and interactive content so I believe we could do without extra plugins like flash in the future and without having to drop certain features. Well I'm looking forward where this goes. You certainly proved it can be done!

*) I want to be clear on this: the need for dedicated game engines will never leave, some games need to be fullscreen or require additional resources and a special place on ones desktop. But other games might thrive in a easy accessible environment, stumbled upon. The genre is broadening.
Life is like an adventure without the pixel hunts.

Wonkyth

  • Liscence to Misspell.
    • I can help with AGS tutoring
    •  
    • I can help with AGS tutoring
    •  
    • I can help with play testing
    •  
    • I can help with proof reading
    •  
    • I can help with scripting
    •  
Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
« Reply #7 on: 13 Jan 2011, 12:42 »
AGS games in HTML5?
* wonkyth likes this
"But with a ninja on your face, you live longer!"

Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
« Reply #8 on: 13 Jan 2011, 13:11 »
    Very impressive - aside from music issues I played through the game without noticing any gameplay or presentation glitches at all.
    Thank you! These are the music issues I know about, let me know if you are talking of ones that are not covered:
    • Flash mode does not have crossfading or seeking due to technical reasons. Flash does not have native Ogg Vorbis output, and I decided that I did not want to transcode MP3 alternatives for this demo - so this is actually running an Ogg Vorbis decoder written in Flash code itself (actually in haXe, but compiled to Flash). This is also I believe why there may be a noticeable pause whenever the track changes in Flash mode - it's doing a lot of work.
    • Opera seems to keep the previous track playing for too long when crossfading tracks. I am unsure whether this is something I am doing that happens to not affect other browsers or if it is an actual bug in Opera.
    • Safari supports the HTML5 <audio> tag, but does not support Ogg Vorbis to be played through it, only MP3. Most other browsers are the opposite way around. Helpful...
    • The music doesn't go quieter for a bit after the rap battle. I just plain forgot to support this.  :-X

    Quote
    It's hard to deny that the open-ness of the code could be a sticking point, but for the most part I think it'd be preferable to not being able to put the games in a browser at all. The ability to run games in a browser overshadows, for now at least, protection of one's assets - particularly in smaller freeware games.

    That is what I am hoping. It is always going to be up to the individual to decide, before anyone starts getting worried that this could ever potentially be forced on their games - even though I have called this the "web runtime" demo (because of that other thread), it really isn't a runtime like the existing Linux or Mac runtime projects - you would not be able to use it to run compiled games, you need the original source code to convert a game to be able to run on this. So unless you have released the source to your game, in which case anyone can see the scripts/resources anyway, you are the only one who could make that decision.

    But maybe it will be possible to make something that runs server-side: node.js is a project for running JavaScript on the server, on Google's highly advanced V8 JIT JavaScript engine; Socket.IO allows two-way communication between client and server; and I know there are projects out there to allow node.js to use jQuery and Canvas, which could conceivably all be put together to run this same code on the server and transfer image data to the client. Whether it could be fast enough, and how many users it could actually sustain at once, are the big questions. I have no plans to try doing this myself, but maybe someone else could do their own proof-of-concept...

    Quote
    I'm interested in a couple of things -
    Okay...
    • ability to scale beyond manually doing it with browser zooming features
    The HTML5 specification quite specifically does not allow you to control how a bitmap image is scaled, which means that if you scale something up to 2x using <canvas> features rather than browser zoom, the result is most likely going to be exactly the same. And it really is too slow to do it manually pixel by pixel, in real-time at least.

    Mozilla has a proprietary CSS extension which allows you to specify that an image (or HTML5 canvas) should be rendered with sharply-edged pixels rather than that kinda blurry filtering. This is actually used in the demo, which is why it should always have nice sharp pixels when zoomed in with Firefox, but no other browser.

    Flash has the advantage here. With Flash you can both specify that you want something rendered without smoothing, and Flash 10 also has Pixel Blender which allows you to run pixel shaders that I believe could be used to do some advanced pixel art scaling algorithms in real-time.
    • support of things such as alpha channels
    Alpha support is as far as I know is very good, for both Flash and Canvas.

    Tinting looks much much easier to do in Flash than Canvas, though.
    • the actual conversion process
    While the process in this case was mostly manual, I have not done anything an editor plugin could not do automatically (I think...). The scripts are transformed using a C# AGS-Script parser I wrote myself, the images and fonts are all exported as PNGs (and packed into a single image using the (C#, MIT-Licensed, open-source) Sprite Sheet Packer). I even decided not to have MP3 alternative versions of the Ogg Vorbis music, even though that would make it far easier to play on Flash (and Safari's <audio>), because transcoding music from one lossy format to another is a process that I feel the user would need to control and consent to.
    • eventual support for saving/loading
    All I can say at the moment is, I don't think it would be that difficult to get the game saving and loading to a JavaScript string, and from there whatever weird and wonderful methods people want to use to store and retrieve those strings can be written around it. I'll know more when I actually try to do it :P
    • support for accessing other external files aside from save files (such as, but not limited to, translation files and running other .exes from )
    I actually don't know much about translation files yet.

    Other .exes, no. Other games similarly converted, yes, most likely.
    • support for plugins (such as, but no limited to, ogg theora player)
    Well, my idea is that you should be able to customise the export process so that you can supply alternatives yourself for resources like music, video and so on, and this could of course support formats that are not supported by the original AGS engine.

    Also, I have ideas that you should be able to do things like this in your AGS code:
    Code: Adventure Game Studio
    1. #ifdef WEB_RUNTIME
    2.   WebRuntime.CallJavascriptFunction("alert", "Hello World!");
    3. #endif
    4.  
    ...so customisation of the web version of the game could be endless.
    • support for things such as 8 bit colour modes
    I am actually far more confident that Flash could be used to simulate 8 bit colour games, with realtime palette effects and everything, than HTML5. Surprisingly enough.
    Quote
    Also, ! probably is not the best simple conversion candidate due to the unconventional nature of it. Have you tried working with multiple mouse modes and inventory items?
    This is true, and no, I have not. Even more significantly, it doesn't even have walk zones. Walk zones! How do you live without them?
    Quote
    Once again most impressive work. If you'd like more source code to experiment with let me know and I'll happily send you some.
    Thank you, that would be great. I definitely would like to try a medium sized game with walk zones, mouse modes, inventory items, many rooms, etc.
    « Last Edit: 13 Jan 2011, 13:36 by Denzil Quixode »

    Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
    « Reply #9 on: 13 Jan 2011, 14:03 »
    I'd say this is very interesting. Although AGS dodges one bullet by not forcing people to install the game, it still needs to be downloaded and for some that is too much. Especially to try a game of such niche market.

    It would be great to see this kind of thing truly coming to life.

    kaputtnik

    • AGS Baker
    • good moon rising?
      • I can help with AGS tutoring
      •  
      • I can help with story design
      •  
      • I can help with translating
      •  
      • I can help with voice acting
      •  
    Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
    « Reply #10 on: 13 Jan 2011, 14:45 »
    Feedback time!

    I've briefly tested the Java version on all browsers I have installed (2,2Ghz Dualcore Thinkpad, Linux Mint) and had very different results concerning audio and game performance. The best choice seemed to be Chromium, though.

    Chromium: Game runs smoothly, audio performance is pretty good, no stutters - but audio files are always cut off something like a second before they have finished playing.

    Firefox: The zoom looks good and crisp (as you mentioned), audio stops after spending some seconds in a room and only starts playing again when you change the room (although sometimes it doesn't) - there is also a pretty heavy lag when leaving a room.

    Opera: Really heavy graphics lag when leaving a room, funny colour confusion (if a conversation spans over two lines, they appear in two different colours, the @OVERHOTSPOT@! text will sometimes be displayed in blue or green tint, hovering over dialogue options tints them green. Opera had the best audio performance, it never so much as stuttered and the files played nicely to the end (even though they didn't loop seamlessly, but you already mentioned that issue)

    Midori: Audio stops from time to time, heavy lag when leaving a room, but none when entering. Game runs pretty slow. I realize that maybe 8 people in the world use Midori as a browser on a daily basis, but I had it installed, so I wanted to mention it...

    Maybe you can use some of this feedback - I guess audio handling and performance is still the weakest spot of your proof-of-concept, but this is probably because of the script necessary to play .ogg files. If you want, you have my official permission, as creator of the soundtrack, to convert from .ogg to .mp3 for test purposes.







    I, object.

    Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
    « Reply #11 on: 13 Jan 2011, 15:31 »
    Feedback time!

    I've briefly tested the Java version on all browsers I have installed (2,2Ghz Dualcore Thinkpad, Linux Mint) and had very different results concerning audio and game performance. The best choice seemed to be Chromium, though.
    Thanks very much for your report!
    Quote
    Chromium: Game runs smoothly, audio performance is pretty good, no stutters - but audio files are always cut off something like a second before they have finished playing.
    Hmm, interesting. The <audio> output should be using the 'loop' parameter to loop audio (except Firefox, which doesn't support it for some reason - I set up a dirty hack to detect this and use a JavaScript timer to check whether the sound has finished playing every quarter of a second...) so it sounds like it may be a Chromium bug.
    Quote
    Firefox: The zoom looks good and crisp (as you mentioned), audio stops after spending some seconds in a room and only starts playing again when you change the room (although sometimes it doesn't)
    Ah, maybe my dirty hack didn't work so well then. And I have no idea why a new audio track just wouldn't start up at all. :P
    Quote
    there is also a pretty heavy lag when leaving a room.
    That might be the walk-behind buffers being redrawn, not sure...
    Quote
    Opera: Really heavy graphics lag when leaving a room, funny colour confusion (if a conversation spans over two lines, they appear in two different colours, the @OVERHOTSPOT@! text will sometimes be displayed in blue or green tint, hovering over dialogue options tints them green.
    This is very interesting - I don't think I ever noticed any such graphical glitches when I tried it in Opera (11.00 build 1156, Windows). I'm relying on the 'globalCompositeOperation' property of <canvas> to colour the text, I'm not sure there is much I can do if a browser doesn't seem to support it too well.
    Quote
    Opera had the best audio performance, it never so much as stuttered and the files played nicely to the end (even though they didn't loop seamlessly, but you already mentioned that issue)

    Midori: Audio stops from time to time, heavy lag when leaving a room, but none when entering. Game runs pretty slow. I realize that maybe 8 people in the world use Midori as a browser on a daily basis, but I had it installed, so I wanted to mention it...
    I had never heard of Midori before, I'll have to look into it. The more the merrier!

    Quote
    Maybe you can use some of this feedback - I guess audio handling and performance is still the weakest spot of your proof-of-concept, but this is probably because of the script necessary to play .ogg files. If you want, you have my official permission, as creator of the soundtrack, to convert from .ogg to .mp3 for test purposes.
    Thanks :) I might do that soon as a separate page to see what the comparison is like.


    Edit: Ha, I just tried it on Midori 0.2.6 for Windows and the graphics seem to work fine - except that it ignored the width and height I gave the canvas, so it remains a cropped 300x150 pixels...
    « Last Edit: 13 Jan 2011, 15:45 by Denzil Quixode »

    Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
    « Reply #12 on: 13 Jan 2011, 23:44 »
    Okay, I've quickly made an MP3 version of the demo:
    Web Runtime Demo: MP3 edition
    Chrome/Chromium and Safari should play MP3s in HTML5 <audio>, but everything else will probably require Flash to play audio in this version. I made the Flash MP3 player very quickly today and it might have some bugs still, but it does support crossfading and track mixing.
    « Last Edit: 13 Jan 2011, 23:45 by Denzil Quixode »

    Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
    « Reply #13 on: 14 Jan 2011, 00:27 »
      Frankly it would be something of a travesty if this didn't win the innovation award for 2010.  I'm really impressed that you not only managed to reimplement such a large part of the ags engine without access to the source, but
    also managed it in javascript (I'm warming to JQuery but in general find development and debugging a slow and arduous affair, even with FireBug).

    • ability to scale beyond manually doing it with browser zooming features
    The HTML5 specification quite specifically does not allow you to control how a bitmap image is scaled, which means that if you scale something up to 2x using <canvas> features rather than browser zoom, the result is most likely going to be exactly the same. And it really is too slow to do it manually pixel by pixel, in real-time at least.

    I had the exact same problem with Silverlight version of the engine, where point scaling isn't possible unless its done manually (which hurts performance quite a bit, which is why the Awakener Facebook app has several quality settings).  I've also had problems recreating AGS's SeekMP3PosMillis function due to limitations with the XNA framework's audio manipulation.  But that you got everything else to work so flawlessly, Ben's fiddly backward animations and all, is super impressive.  

    Excellent work!  You're a machine, Mr. Quixode.  I wonder how many different formats we'll eventually be able to enjoy robotic rap battles on.
    XAGE - Port AGS games to Xbox360, Silverlight, Linux, iOS & Android (alpha)

    straydogstrut

    • Barking up the wrong tree
      • I can help with play testing
      •  
      • I can help with proof reading
      •  
    Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
    « Reply #14 on: 14 Jan 2011, 01:42 »
    Brilliant work Denzil! Tried it out on my iDevice just for kicks and it works pretty good, albeit sans sound and it's hard to touch accurately when it's scaled up, but seeing it running is a real pleasure. I hadn't tried this one of Ben's yet but it didn't disappoint. The writing is brilliant. I'll have to finish it back on my desktop though as it would be a challenge to persevere this way. Good work though, this would be a welcome addition in my opinion.

    Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
    « Reply #15 on: 14 Jan 2011, 01:48 »
    Thanks sds :) Would you mind trying the MP3 version on your iDevice to see if the audio works then?

    straydogstrut

    • Barking up the wrong tree
      • I can help with play testing
      •  
      • I can help with proof reading
      •  
    Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
    « Reply #16 on: 14 Jan 2011, 07:14 »
    Tried it last night, but just tried it again now: no joy I'm afraid, unless I've done something silly. It's a 4th gen iTouch running Safari if that makes any difference. I wouldn't worry too much about it though.

    Shane 'ProgZmax' Stevens

    • Mittens Serf
    • AGS Project Tracker Admins
    • GARBAAAAAGE DAAAAAAY!
      • I can help with animation
      •  
      • I can help with characters
      •  
      • Lifetime Achievement Award Winner
      •  
      • I can help with AGS tutoring
      •  
      • I can help with proof reading
      •  
      • I can help with scripting
      •  
      • I can help with story design
      •  
    • Shane 'ProgZmax' Stevens worked on a game that was nominated for an AGS Award!Shane 'ProgZmax' Stevens worked on a game that won an AGS Award!
    Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
    « Reply #17 on: 14 Jan 2011, 12:55 »
    Pretty interesting.  Since my site uses highslide for all popups it would definitely be interesting to be able to allow people to play games in popup, resizable windows directly from the site.

    You show much potential, young jedi.

    tzachs

    • Mittens Serf
    • AGS Baker
    • Parking Goat- games that goats like!
      • I can help with translating
      •  
    • tzachs worked on a game that was nominated for an AGS Award!
    Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
    « Reply #18 on: 14 Jan 2011, 13:43 »
    That's pretty exciting!
    Specifically the flash port would be most useful in order to get AGS game distributed to portals.

    Re: Proof-of-Concept "Web Runtime" Demo (HTML5 / Flash 10)
    « Reply #19 on: 14 Jan 2011, 16:00 »
    Tried it last night, but just tried it again now: no joy I'm afraid, unless I've done something silly. It's a 4th gen iTouch running Safari if that makes any difference. I wouldn't worry too much about it though.
    Ah, thanks anyway. As I understand it Safari does support <audio> but only for MP3s, not Ogg Vorbis, and that seems to be the case in my (desktop, Windows) version of Safari. I don't know how different the mobile version of Safari is, or whether it lags behind in the feature set, or what.

    Specifically the flash port would be most useful in order to get AGS game distributed to portals.

    It might not be as easy as that - even in Flash mode, it really is still JavaScript running the show. The Flash part is a tiny 10kb "renderer" SWF that knows nothing about any of the game logic and simply displays what it is told to by the JS. I assume that what the portals want is a single, self-contained Flash file.