Emscripten - Introduction to cross platform game development

Welcome!

In this post I’m showing some tests with Emscripten for cross platform game development!

If possible, I’ll start to code a game engine soon, focusing on the cross platforms and something easy to use! Until them, take a look in some Emscripten samples!

I - About Emscripten

Emscripten is an Open Source LLVM to JavaScript compiler. Using Emscripten you can:

  • Compile C and C++ code into JavaScript
  • Compile any other code that can be translated into LLVM bytecode into JavaScript.
  • Compile the C/C++ runtimes of other languages into JavaScript, and then run code in those other languages in an indirect way (this has been done for Python and Lua)!

Emscripten makes native code immediately available on the Web: a platform that is standards-based, has numerous independent compatible implementations, and runs everywhere from PCs to iPads.

II - How it works

Emcc uses Clang to convert C/C++ files to LLVM bytecode, and Fastcomp (Emscripten’s Compiler Core — an LLVM backend) to compile the bytecode to JavaScript. The output JavaScript can be executed by node.js, or from within HTML in a browser.

III - Let’s test Emscripten

First, just check this link on how to install Emscripten. Now, let’s create just a hello world to test if it’s working.  Code a classical hello world with C/C++, like this one. Save the file as hello.c:

  
#include <stdio.h>

int main() {
	printf("hello, world!\n");
	return 0;
}

When using gcc, or g++, you just need to call

gcc hello.c -o hello

or

g++ hello.c -o hello

With Emscripten, we do the same, but now we use emcc or em++ To build run:

emcc hello.c -o hello.js

or

emcc hello.c -o hello.html

You can run your hello.js with node, spidermonkey or any others js tool. Or just open the hello.html in your browser.

IV - OpenGL hello world

Emscripten supports the WebGL-friendly subset of OpenGL by default. This is the set of commands that map directly to WebGL, so that each GL command becomes a direct call to WebGL. It includes almost all of OpenGL ES 2.0, with the notable exception of client-side arrays. I just created  a c++ file called sdl.cpp, with the code:

#include <stdio.h>
#include <GL/glew.h>
#include <GL/glut.h>

static int make_resources(void){
	return 1;
}
static void update_fade_factor(void){
}
static void render(void){
	glClearColor(0.0f, 1.0f, 0.0f, 1.0f);
	glClear(GL_COLOR_BUFFER_BIT);
	glutSwapBuffers();
}

int main(int argc, char** argv){
	glutInit(&argc, argv);
	glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE);
	glutInitWindowSize(400, 300);
	glutCreateWindow("Hello World");
	glutDisplayFunc(&render);
	glutIdleFunc(&update_fade_factor);

	glewInit();
	if (!GLEW_VERSION_2_0) {
		fprintf(stderr, "OpenGL 2.0 not available\n");
		return 1;
	}

	if (!make_resources()) {
		fprintf(stderr, "Failed to load resources\n");
		return 1;
	}

	glutMainLoop();
	return 0;
}

On linux, I can build and run it with:

g++ -lGL -lglut -lGLEW sdl.cpp -o sdl && ./sdl

Output:

SDL Example on Linux

But now, to run this same code on the web, I just need to compile it with Emscripten, like this:

em++ -o2 main.cpp -o sdl.html && firefox sdl.html &

And here is the output:

SDL example on Firefox

Very very nice!

V - My goals

Ok, now I’m doing some extra tests and if possible, I’ll start to work in a very interesting project. I’d like to create a cross platform game engine with Emscripten! I’m defining how it will works, but it’ll be probably running with C++ code and then you can build it for mobile devices and if you want to, built to the web with Emscripten. I’m doing some tests with SpiderMonkey too, so maybe this game engine can be packaged with SiderMonkey. So you code your game in some programming language - need more tests to define one - and them you just build it across devices!

Thanks for reading,

Aron Bordin

Aron Bordin

Aron Bordin
Computer Science Student and AI researcher. Always coding something fun :)

[Tutorial] Developing Android Background Services

### Welcome!In this post, I'll show you how to develop background services on Android Studio. We'll see two type of services: `Service` a...… Continue reading