Ago 082013
 
Artículo Javascript

El compilador emscripten permite generar código javascript a partir de bytecodes LLVM.

Por otra parte, existen utilidades como llvm-gcc o clang, que convierten código C o C++ en bytecodes LLVM.

Esto permite realizar una conversión de código fuente C/C++ a código javascript.

En este artículo se explica el proceso a seguir para realizar esta conversión, mediante un ejemplo.

LLVM, Clang y Emscripten

LLVM (Low Level Virtual Machine) Es un conjunto de tecnologías para el desarrollo de compiladores para distintas plataformas de destino.

Los compiladores construidos con LLVM transforman el código fuente en un código intermedio (LLVM bytecodes) que es posteriormente traducido al conjunto de instrucciones máqina de la plataforma de destino.

Clang es un compilador “nativo” de LLVM, que transforma lenguaje C/C++/Objective C en LLVM bytecodes.

Emscripten es un “compilador inverso”, que transforma los LLVM bytecodes en código fuente javascript.

Con estas piezas, Emscripten realiza la transformación de código C en código javascript se realiza de la siguiente forma:

Código C -> Código LLVM -> Código Javascript

Instalación de LLVM y Clang en Linux

Comenzamos por instalar LLVM (Low level Virtual Machine) y CLang, siguiendo las instrucciones de instalación a partir del código fuente de la página “Clang – Getting Started“, modificadas para descargar el código fuente de la versión 3.2, que es la versión soportada por emscripten:

Nota: La instalación de LLVM + Clang requiere una máquina con al menos 3 GBytes de RAM, y 15 GBytes de espacio en disco, y dura varias horas, dependiendo de la velocidad de la CPU.

Instalación de Node.js

A continuación instalamos Node.js siguiendo las instrucciones en “Installing Node.js via package manager“:

Instalación de emscripten

Descargamos el compilador emscripten desde el repositorio:

Esto crea un directorio “/emscripten” bajo el cual están todos los ejecutables y librerías necesarios.

Obtención del código fuente del juego “sokoban”

Para probar la funcionalidad de Emscripten, vamos a realizar la migración del conocido juego Sokoban.

Buscando en Goole, encontramos el código fuente en grayskygames.com. Descargamos el fichero syasokoban-2.0.1.tar.gz (264.830 bytes), extraemos su contenido, lo compilamos y comprobamos que se ejecuta sin problemas como aplicación nativa en nuestro sistema Debian:

sokoban-690

 

Edición del fichero “Makefile”

El fichero Makefile original contiene las directrices para la generación de un fichero ejecutable nativo, utilizando el compilador gcc.

Debemos modificar este fichero para que la compilación sea realizada por Emscripten.

1. En primer lugar editamos la línea en la que se indica el compilador a utilizar. Sustituimos:

por:

2. También modificamos los flags de compilación, ya que emscripten no necesita que se le indique la ubicación de los ficheros “include” de las librerías standard y SDL.

Sustituimos:

por:

3. De la misma forma, modificamos la línea en la que se especifican las librerías con las que se debe enlazar el ejecutable.

Sustituimos:

por:

4. Por último, modificamos la sentencia de compilación para indicar a emscripten que el resultado debe ser un fichero “sokoban.html”, y para indicar la ubicación de los ficheros de datos que utiliza el programa (imágenes, etc.):

Sustituimos:

por:

Modificación del bucle principal en el código fuente

Antes de proceder a la compilación, debemos realizar todavía algunas modificaciones al código fuente.

En un programa gráfico desarrollado con la librería SDL, la aplicación contiene típicamente un bucle infinito en cada uno de cuyos pasos ejecuta los eventos que se han producido, y queda a la espera de nuevos eventos mediante una llamada a la función SDL_Delay.

En un navegador, el bucle debe ser implementado de una manera diferente. Para ello, se puede utilizar la función “emscripten_set_main_loop” como sigue:

En nuestro ejemplo, localizamos la llamada a SDL_Delay en el fichero Main.cpp, y realizamos allí la modificación.

Otras modificaciones del código fuente

Tambien debemos modificar las líneas “include” de algunos de los ficheros que contienen el código fuente, para incluir los ficheros “.h” proporcionados por emscripten. En nuestro ejemplo:

1. En el fichero Main.cpp, añadimos la línea:

2. En el fichero “Sokoban.cpp”, añadimos la línea:

Compilación y ejecución en el navegador

Con estas modificaciones ya podemos proceder a compilar el programa con el comando “make”. Por último, apuntamos el navegador al fichero “sokoban.html” que se ha generado, y podemos ver el juego ejecutándose en el mismo:

sokoban-javascript

 

El resultado final se puede ver en nuestra web de juegos: http://juegos.openalfa.com/sokoban/sokoban.php

Referencias:

—-

 Publicado por en 12:04 pm

 Deja un comentario

(requerido)

(requerido)