no-reply@allegro.cc (jmasterx) — Sat, 22 Aug 2015 19:37:55 +0000

I heard the other day that asm.js can be used to compile Allegro5 projects to HTML5 with the sdl2 backend.

I'm interested in trying this.

Are there any instructions, tutorials, or posts on porting one of the examples or similar to html5?

Many thanks!
Edit, sorry for putting this in a.cc comments, meant to put it in installation.

no-reply@allegro.cc (Elias) — Mon, 24 Aug 2015 06:04:45 +0000

Basically use the SDL2 backend, then compile with emcc instead of gcc. But it's not always straightforward and I added some stuff to my local A5 copy, mostly to support timers - emscripten has pthreads support, compiling with that gives you normal timers... but only the latest firefox supports javascript threading so it's not too useful for now. With my changed SDL driver timers work by comparing the time when al_get_next_event() is called and it works in Chrome as well. I can try and write down what I did so far tomorrow...

If you search the forums, someone else did a port of Allegro to emscripten a while ago as well which may work even better than that since there is no intermediate SDL2 layer.

[edit:]

Ok, if you want to try it, this is the things I remember:

Install the emscripten SDK. This is a huge task in itself, I followed ^[1] to do it.
Apply this small patch to Allegro ^[2] or just do:

git clone -b emscripten https://github.com/allefant/allegro5.git

Install some emscripten packages through their package management system, I think I have SDL2, libpng and zlib. I also compiled freetype2 somehow but only needed if you need truetype fonts.
Compile Allegro, using SDL2 and emscripten. Options I used (leave out the freetype ones if you don't have it):

ALLEGRO_EMSCRIPTEN=ON
ALLEGRO_SDL=ON
SHARED=OFF
WANT_MONOLITH=ON
CMAKE_C_COMPILER=emcc
CMAKE_CXX_COMPILER=em++
CMAKE_C_FLAGS=-s USE_ZLIB=1 -s USE_LIBPNG=1
CMAKE_INSTALL_PREFIX=/home/elias/prog/allegro/emscripten_install
FREETYPE_INCLUDE_DIR_freetype2=/home/elias/stuff/emsdk_portable/freetype-2.6/include
FREETYPE_INCLUDE_DIR_ft2build=/home/elias/stuff/emsdk_portable/freetype-2.6/include
FREETYPE_LIBRARY=libfreetype.a

Compile your game. I used:

emcc -O3 examples/ex_draw_bitmap.bc lib/liballegro_monolith-static.a lib/libfreetype.a -s USE_SDL=2 -s FULL_ES2=1 -o ex_draw_bitmap.html --preload-file data -s USE_ZLIB=1 -s USE_LIBPNG=1 -s TOTAL_MEMORY=1000000000

Run in either Firefox or Chrome: ^[3]

Some issues I still have with my actual game:

Freetype2 compiled from upstream freetype sources seems to sometimes cut off parts of letters, but Google suggests there's an easy fix.
I have no sound yet, but emscripten supports the SDL1 sound commands, it probably is very easy adapting Allegro's SDL2 sound driver to support that.
Unless you use emscripten's pthreads support, everything using threads needs to be rewritten with polling from the main thread. Not a big issue in my case.

Porting a game to HTML5

References