Allegro.cc - Online Community

Allegro.cc Forums » Allegro Development » Experiments: Allegro + Emscripten.

This thread is locked; no one can reply to it. rss feed Print
 1   2   3 
Experiments: Allegro + Emscripten.
Max Savenkov
Member #4,613
May 2004
avatar

I have read up a bit on JS timers and I think I can do slightly better by using requestAnimationFrame mechanism. While this helps with precision, reliability remains low, because of random 200ms lags. I guess it has to be garbage collector running or something like that. I will try to investigate further later.

My current problem is with running audio update thread. Since there is no threading support in JS, there are only two things to do:

1) Run it with the same mechanism I use for timers
2) Provide a function to update audio from game's main code

After work, I'll try them both, I guess, to see which one will lead to less lags in audio output.

Edit: huh. My whole browser seem to lag randomly even when JS is not running. So it's not my code, but rather my system :) OK then, maybe someone could check out updated timer example? I'm now using more precise mechanism for it, but my computer's lags are throwing it off completely :(

Gassa
Member #5,298
December 2004
avatar

Just writing to note that I would also be interested in seeing Allegro5 compile with Emscripten. Mostly in simple graphics and mouse interaction. I hope to be able to help test things starting from next week. Can't offer more for now, sorry!

J-Gamer
Member #12,491
January 2011
avatar

On my system, the total error and event overhead are always approximately the same number. If I don't do anything but have it running, they are approximately zero, but as soon as I start moving my mouse they both skyrocket and take a long while to get back down.

Append: This is probably due to how firefox handles javascript, but they also both steadily rise while I'm on another tab.

" There are plenty of wonderful ideas in The Bible, but God isn't one of them." - Derezo
"If your body was a business, thought would be like micro-management and emotions would be like macro-management. If you primarily live your life with emotions, then you are prone to error on the details. If you over-think things all the time you tend to lose scope of priorities." - Mark Oates

Max Savenkov
Member #4,613
May 2004
avatar

Gassa, thanks, I'll try to put up more working examples during weekend for testing.

J-Gamer, I can't see a direct correlation between mouse movements and timer lags, although there could it something in it. According to this numbers, event overhead grows too much. I'll have to look into it.

So, for today, I have nothing to show you, because I wasn't able to get OpenAL to work. Example compiles and runs, but no sound is produced. I'll try to get it working tomorrow or the day after (tomorrow is a D&D day, so I'll be away for quite a while :) ).

ks
Member #1,086
March 2001

Are you using emscripten_get_now() for timing?

If I'm not mistaken that makes use of Date.now rather than Performance.now.

Max Savenkov
Member #4,613
May 2004
avatar

I was using al_get_time, which called gettimeofday, which is implemented through Date.now in emscripten.

I wrote a Emscripten-specific implementation of al_get_time(), which now calls emscripten_get_now().

It improves things, but precision is still bad: instead of steady 20ms ticks, I'm getting from 10-40ms, but I guess that's just the way with browsers...

Also, another problem appeared, and it's a bigger one: now I'm getting several timer events per one call to the main function. With unmodified ex_timer, that leads to freeze, because it tries to repaint screen several times per one frame function call, and JS simply can't stand it. I added code to only repaint screen once (but update statistic correctly). The result is here: ex_timer_r.

Edit: OK, we have sound. As with everything else, it seems a bit off, with little glitches here and there, but it works. Check out port of ex_audio_simple. Web Audio API seems yet to be not-quite supported by everybody, but it should work in Firefox and probably Chrome.

Getting sound to work was an exercise in heroically overcoming problems I have created for myself. Several hours were to lost to the simple fact I have not been passing further argument when restarting timer...

Anyway, with graphics, primitives, mouse, keyboard, timers and sound more-or-less working, I thought it would be time to move on to something more complex, namely demo projects.

My first idea was to port Speed demo. But it does not really lend itself to Emscripten, because it has A LOT of function with endless loops inside. Also, its init_sound crashes JS runtime with out-of-memory exception for reasons I can't discover from a quick look.

So, I'll try to get Cosmic Protector or Skater to compile and run tomorrow. It seems that Cosmic Protector at least have less endless loops to take care of, although it's still not just one. I'll have to compile libpng, libjpeg and probably libzip into Emscripten to do it.

If all else fails, I'll try to write a simple game myself, maybe a Tetris variant :) Just to demonstrate to myself and everyone else that everything works (and fix things that do not work).

Edit2: Cosmic Protector proved to be not very portable either, but Skater is a very well-written game and I was able to get it running in browser! Unfortunately, I ran into problems with sound. It uses streaming, and streaming relies on general-purpose threads. I could just replace threaded code with timed function calls, like I done in other cases, but there are too many places to fix. So now I'm thinking about writing threads implementation (via timed functions, of course). An acquaintance of mine who knows somebody in Mozilla dev team told me they are going to add full pthread support in Emscripten, but I'm not even sure how they could do it.

Gassa
Member #5,298
December 2004
avatar

I tried ex_timer_r, here is the stats text at the top - I don't know what to look for in there.

Firefox 28: {"name":"timer_r.firefox28.png","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/7\/7\/77df60eeb568d77acb7baef65da7c177.png","w":785,"h":109,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/7\/7\/77df60eeb568d77acb7baef65da7c177"}timer_r.firefox28.png

Chrome 34: {"name":"timer_r.chrome34.png","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/1\/c\/1cb1d053b923050a0af2574f85e9486a.png","w":548,"h":94,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/1\/c\/1cb1d053b923050a0af2574f85e9486a"}timer_r.chrome34.png (apparently the resolution is lower here)

The lines appear jagged sometimes (bottom one step ahead of top). That may be the monitor (60Hz LCD) syncing in the wrong moment.

By the way, if there is any relevant textual debug information (such as max error), it would be nice to dump it in the text console below, making it easy to copy and paste.

ex_audio_simple seems to correctly play several sounds in parallel when I press "1" a few times.

Max Savenkov
Member #4,613
May 2004
avatar

Thank you. There will be more troubles with timers, I guess, but for now they are good enough.

Anyway. I have an ANNOUNCEMENT! Ready? Aw-right! I have a (nearly) fully-functional Skater demo for you to try. The first Allegro game to run in browser. Controls, sound, music and graphics, everything should work. Just don't try to change graphic parameters in Options :) Oh, and another thing. I haven't yet found a way to let KeyPressed event happen, unless I let the browser process KeyDown event after I'm done with it. And I need KeyPressed, because it's the only event that has unicode value of key in it, and Skater, somewhat strangely, relies on those for menu navigation instead of keycodes. This means that the browser would scroll the window when you press up, down, left or right, which could be a big problem if you have lower resolution monitor and a lot to scroll. This couldn't be helped for now, but know that I'm aware of the problem is working on it.

Go on, try it: Skater demo (14Mb).

Implementation details: I had to write universal thread emulator which implements custom _al_create_thread function to insert a new timer into browser's queue, which calls thread procedure. This requires modification in thread's procedure, as it can no longer run in an endless loop. I have modified _al_kcm_feed_stream to work in this manner and it seems to be more or less OK.

Arthur Kalliokoski
Second in Command
February 2005
avatar

I just tried it in FF 24.1.0 on Linux and nothing happened. Then I told NoScript to allow the entire page, and besides taking up 200Mb memory, even more nothing happened. OTOH, this FF can't even render the wiki properly. :-[

“Throughout history, poverty is the normal condition of man. Advances which permit this norm to be exceeded — here and there, now and then — are the work of an extremely small minority, frequently despised, often condemned, and almost always opposed by all right-thinking people. Whenever this tiny minority is kept from creating, or (as sometimes happens) is driven out of a society, the people then slip back into abject poverty. This is known as "bad luck.”

― Robert A. Heinlein

Max Savenkov
Member #4,613
May 2004
avatar

It is possible that FF 24 is not supported. HTML5 is evolving standard, and version 24 may not have everything this game requires :( I only tested in on the latest version (28.0) and latest Chrome. Also, this things eats up a LOT of memory. My Firefox's footprint grows to as much as 1.5Gb when the game is running.

Elias
Member #358
May 2000

Amazing work! It works fine here in Firefox 25.0 - only strange thing is that it runs in a tiny square area. Still, works really well, including music and sound. I get close to 60 FPS if there's no water and about 30 FPS if there's a lot of water.

--
"Either help out or stop whining" - Evert

Slartibartfast
Member #8,789
June 2007
avatar

Works fine on my FF 28.0, good job!
It feels like it is leaking some resources though since the framerate gets progressively worse the longer you play.

AMCerasoli
Member #11,955
May 2010
avatar

MAN! Yhea! it works pretty well here on Chrome, sound and everything.

As Elias says only on a small rectangle but yhea! Good work!

Matthew Leverton
Supreme Loser
January 1999
avatar

Wasn't expecting to see this much progress. >:(

Max Savenkov
Member #4,613
May 2004
avatar

Elias said:

only strange thing is that it runs in a tiny square area. Still, works really well, including music and sound.

I had a feeling something was wrong with canvas size, but only now I understood it is square instead of rectangle! :) Ain't I'm a sharp-eyed little Indian... From a quick look, I can't see why is that (everywhere, width AND height are passed correctly as far as I can see), so I'll have to look further into it. This will be the first priority.

It feels like it is leaking some resources though since the framerate gets progressively worse the longer you play.

I'll check this out. Haven't noticed this myself, but maybe I just didn't play for any prolonged period of time.

Wasn't expecting to see this much progress. >:(

Yeah, man, I'm on roll! :) (and I have a deadline: this game jam I want to use Allegro in starts the next week)

So the plans for the nearest future:

  • Fix keyboard problem

  • Find out why canvas is rectangular

  • Find out why Fullscreen button does not work (if it should)

  • Check out performance problems and possible resources leaks

  • Compile Freetype and make TTF addon work

  • Compile libjpeg or learn to use native browser's image loaders (maybe a sound loader too)

pkrcel
Member #14,001
February 2012

W00t! I am also amazed at this rate of progress, REALLY good job, here on Win7 Firefox 28.0 work nicely well, with occasional glitches and an hung script (which I stopped, then all ran fine.

Still...

Also, this things eats up a LOT of memory. My Firefox's footprint grows to as much as 1.5Gb when the game is running.

...makes me wonder, is it worth it?

Everybody says that game in browser means instant universal portability [warning: actually an hyperbole], but a 1.5GB memory footprint for skater.....hmmmm....

It is unlikely that Google shares your distaste for capitalism. - Derezo
If one had the eternity of time, one would do things later. - Johan Halmén

Gassa
Member #5,298
December 2004
avatar

Yay, Skater example is working!

Chrome 34: ~300 Mb per tab (my Chrome runs a separate process for each). ~60 FPS with a single tab, but 10-30 FPS when I open the game in two tabs simultaneously.

Firefox 28: 100-200 Mb per tab. ~60 FPS in active tab, 0 FPS in other tabs. Occasional stumbles in generally smooth reaction.

What's the name of that game jam, by the way?

Also, do you already have some instructions beyond these to share with people on this path?

Yodhe23
Member #8,726
June 2007

Superb, seems to run fine in FF28.0 under Xubuntu

www.justanotherturn.com

Max Savenkov
Member #4,613
May 2004
avatar

pkrcel said:

Everybody says that game in browser means instant universal portability [warning: actually an hyperbole], but a 1.5GB memory footprint for skater.....hmmmm....

I might have quoted a figure for debug build with excessive debug information (line numbers). Just the js file is ~14Mb in that case. Or maybe there is a resource leak... Anyway, Gassa here reports a far more reasonable 300Mb per instance of game. There is a param build process which controls how much memory will be allocated for application. I have set it to 128Mb for Skater (which might be excessive).

Gassa said:

What's the name of that game jam, by the way?

GamesJamGAMM (page in Russian). I do not have high hopes for myself in it, because I will not be able to take a break from my day job during the jam, but I thought I still should give it a try, make something small and hopefully interesting.

Quote:

Also, do you already have some instructions beyond these to share with people on this path?

Instructions alone won't help. I had to write some new code for Allegro and also modify some existing code. After I have ironed out the worst bugs, I hope to submit my work to Allegro developers list and see if it can be integrated as one of "official" platforms for Allegro.

I'm not sure if it really can be a part of main Allegro distribution, because it will not be possible to just take any old Allegro-based game and compile it for web, so it kind of break Allegro's abstraction (unless I can find a way to fix this). Even then, I can distribute my modifications separately, if necessary, for those who want them, in the same way Allegro bindings for other languages are distributed.

In any case, I will make my code available for everyone as soon as I'm not ashamed of it :)

Edit: I haven't touched the code much in the last two days due to a visit to a dentist and overall laziness, but I fixed two issues: arrow keys no longer scroll browser window when pressed and canvas is now rectangular instead of square.

The first issue is a problematic one. To prevent browser from reacting to its own set of keys/hotkeys, I must filter them out inside KeyDown handler. But which hotkeys should I filter? For example, F5 usually reloads page. I don't want to filter it, because it might be useful for a developer, or confusing to user. On the other hand, what if you REALLY want to use that key in your game, and so need to prevent browser from reacting to it?!

The only way to handle this properly that I can see is to block some browser keys (namely, arrow keys and maybe backspace, which acts as a hotkey for Back button) by default, but add a platform-specific function which will allow user to expand list of filtered keys as needed by his game. Something like al_emscripten_filter_key( int keycode, bool onoff );

The second issue was, actually, a bug in Skater! Code in globals.c (read_global_config)

   window_width = get_config_int(c, "GFX", "window_width", window_height);
   window_height = get_config_int(c, "GFX", "window_height", screen_height);

should instead read

   window_width = get_config_int(c, "GFX", "window_width", window_width);
   window_height = get_config_int(c, "GFX", "window_height", window_height);

Also, I have reduced reserved memory size from 128Mb to 32Mb for this demo. I could find no evidences of memory leaks, so I think we're safe on this from for now.

Skater demo is updated. That's all for tonight.

Gassa
Member #5,298
December 2004
avatar

Now the Skater demo takes more than my full screen height (1920x1080 here; it may do with the fact I have 148% Windows display scale - Set custom text size in display options). And it gets twitchy. Approximately around when I get to the letters "Allegro", it feels like 10 FPS at times, but still reports 55-60 FPS. Firefox 28.

In Chrome, all is still well.

Anyway, thank you for sharing what you have so far, and for the game jam link.

Edgar Reynaldo
Member #8,592
May 2007
avatar

Can't get the latest skater demo to run in SeaMonkey. May have to do with the fact only OpenGL 2.0 is supported by this laptop.

Really impressed with all you've put together so far. The times they are a changin...

Max Savenkov
Member #4,613
May 2004
avatar

Edgar, could you look at output in Developers Console (If SeaMonkey has one)? What does it say? The usual Allegro log output goes there, as well as browser errors.

Thomas Fjellstrom
Member #476
June 2000
avatar

Sound is choppy here (to be expected), but it seems to play pretty good! Nice work Max!

--
Thomas Fjellstrom - [website] - [email] - [Allegro Wiki] - [Allegro TODO]
"If you can't think of a better solution, don't try to make a better solution." -- weapon_S
"The less evidence we have for what we believe is certain, the more violently we defend beliefs against those who don't agree" -- https://twitter.com/neiltyson/status/592870205409353730

Trent Gamblin
Member #261
April 2000
avatar

Sounds work here. It starts off at 60FPS then if you go deeper into the level it goes down to 30 and in some spots 20. Core i7 2.0GHz with Nvidia 740m. I don't know what's the point, but I guess it's cool?

EDIT: I'm researching this some more, and ya, it is kind of cool. You said games can't be ported as-is, what does that mean? What kind of changes are involved?

Edgar Reynaldo
Member #8,592
May 2007
avatar

Max, here's the console output when I run it on my laptop :

Quote:

change_gfx_mode1: 1024 768
change_gfx_mode2: 1024 768
Initialized canvas 1024 768
Could not create canvas: ?,:(

Edit - you meant the error console. Here :
{"name":"608512","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/5\/2\/52f160d336803dc4dc5a4d6b879f0691.png","w":1280,"h":800,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/5\/2\/52f160d336803dc4dc5a4d6b879f0691"}608512

 1   2   3 


Go to: