Emscripten - Quick HowTo

[crow_riot]

So ... Steven Craft asked how I've setup Emscripten on my machine ... Here are some quick notes:

I'm using Emscripten in Visual Studio 2010 on Windows 7 64 Bit, so everything applies to this... and well all I've done is following the tutorial, with one exception, the toolchains to download are very important.

Follow the tutorial link above for installing Python and Node.js, but don't use the toolchains provided if (and i think you will) you plan to use visual studio. The 64 bit versions don't interact nicely with visual studio because of some weird folder issues. They also need to be compatible with each other. I had to try some different versions until I found matching ones. Grab them here: GCC Toolchain Clang Toolchain

Then just follow the tutorial again, clone emscripten, install vs-tool and such. It's pretty much straight forward again. Having done this, you'll get a new Solution Platform for you C/C++ project. Just add a new Solution Platform within the Configuration Manager. Don't copy settings over from any other platform, start with fresh (thats <Empty> in the list) settings. I dont think the settings will get copied over anyway, but it's better to start with empty ones', becase they're not compatible anyway.

It's important to use the suggested environment variables for the toolchain paths. I've tried to setup my toolchain directories directly in visual studio but that didn't work.

_____

OpenGL and Emscripten links:

https://github.com/kripken/emscripten/wiki/EGL-Support-in-Emscripten

https://github.com/kripken/emscripten/wiki/OpenGL-support

My GLES2 renderer just works out of the box with when i create the context as described above.

_____

For the game loop, you need to change your

while (true) { Update(); }
to

emscripten_set_main_loop(&Update,30,1);

the current emscripten_set_main_loop does not allow you to pass some pointer, which would be handy to pass on some this pointer to your application instance, but a global variable helps - not nice but works.
emscripten_set_main_loop is defined in emscripten.h. This file can be found in <emscripten-base-dir>\system\include\emscripten\

take a look there, there are some other nice functions inside like getting/setting the size of the canvas.

__

hope that helps, if there are some more questions i'm happy to help (if i know the answers )

 

[Rockthesmurf]

Thanks for this post, certainly something I am interested in experimenting with. Saw a talk at the most recent GDC America about integrating Emscripten and it looked cool there. Not completely sure on the monetization models for games using this yet though.

 

[Rockthesmurf]

Also, if you are using C++, I wonder if std::func / std::bind / std::bind1st / std::bind2nd could help with the lack of user data pointer?

 

[crow_riot]

I've not thought about monetization yet, it's just some fun project to work on. But I think it could just be that you create a member area to play your game and charge for your member area access. In the end it's like a download you pay once and without DRM. Of course you could just save the webpage, but well, thats the same issue when you distribute a DRM free installer/executable.

hm not thought about std::bind, going to try it

i've searched for a c++ solution, but it isn't really simple: http://ideone.com/6UGfrH (origin: http://stackoverflow.com/questions/13238050/convert-stdbind-to-function-pointer )

 

[crow_riot]

I'm throwing in another interesting link. Didn't know until i wanted to use threads, they don't exist in javascript. :huh:

There's some workaround to the "problem", but I don't consider it really useful (at least for what i wanted to use it)

http://flohofwoe.blogspot.co.at/2013/01/multithreading-in-emscripten-with-html5.html