Bien qu’ayant utilis\u00e9 Windows et Visual studio pour porter le code de mon moteur de jeu, la plupart des instructions list\u00e9es ici sont valables sous d’autres platformes.<\/p>\n
Si vous n’avez jamais install\u00e9 Emscripten avant, allez sur le site officiel et suivez les instructions disponibles ici : <\/p>\n
Site de Emscripten (Anglais)<\/a><\/p>\n La chose la plus importantes avant de tenter un port de votre moteur est de s’assurer qu’il est bien multiplateforme. Emscripten utilise clang pour compiler le code C, clang peut \u00eatre consid\u00e9r\u00e9 comme un rempla\u00e7ant de GCC. Si votre base de code est uniquement fonctionnelle sous Windows, vous devez la modifier afin de la rendre multiplateforme.<\/p>\n Ce qui ne fonctionne PAS sous Emscripten:<\/p>\n Il s’agit des principales limitations que j’ai pu rencontrer en portant mon moteur. Il existe d’autres limitations list\u00e9es sur le site de Emscripten :<\/p>\n Porting guidelines (Anglais)<\/a><\/p>\n Voici la liste des librairies que j’utilise pour la version PC\/mobile de mon moteur. Quasiment toutes ces librairies fonctionnent directement sous Emscripten, moyennant quelques adaptations de configuration et des changements de code mineur. <\/p>\n Toutes les librairies sont compil\u00e9s sous forme de bitcode statique LLVM. Ce sont ces fichiers que l’on pr\u00e9cise comme librairies en entr\u00e9e quand on compile le code de notre jeu.<\/p>\n \tGLFW<\/u> \tChipmunk<\/u> Celui ci se trouve dans le fichier cpHashSetEach.c. Emscripten ne convertit pas bien le pointer de fonction cpHashSetIteratorFunc ce qui produit un crash du jeu. Pour corriger cela, il suffit de cr\u00e9er une fonction sp\u00e9cifique avec un pointer de fonction cpHashSetIteratorFunc sp\u00e9cifique rempla\u00e7ant le type void* avec le bon nom de structure. Il devient alors n\u00e9cessaire de cr\u00e9er un fichier d’en-t\u00eate sp\u00e9cifique avec la d\u00e9finition de structure afin que les fichiers cpHashSetEach.c et cpBBTree.c puisse y acc\u00e9der.<\/p>\n \tfichiers patch (au format winmerge)<\/p>\n cpBBTree.patch<\/a><\/p>\n cpHashSet.patch<\/a><\/p>\n \t emscripten.h<\/a><\/p>\n \tIl est aussi recommand\u00e9 d’utiliser -s FORCE_ALIGNED_MEMORY=1 dans les options de liens EMCC. <\/p>\n \tFreetype<\/u> \tlua<\/u> \tlibogg<\/u> \tlibvorbis<\/u> \tlibsndfile<\/u> Il est \u00e9galement n\u00e9cessaire d’utiliser un fichier de config sp\u00e9cifique, certains type sous Emscripten ont une taille diff\u00e9rente de ce que libsndfile utilise g\u00e9n\u00e9ralement sur PC, particuli\u00e8rement le type off_t, voici les fichiers modifi\u00e9s:<\/p>\n config.h<\/a><\/p>\n \tsndfile.h<\/a><\/p>\n Enfin, ouvrez le fichier sndfile.c et commentez la ligne suivant dans la fonction sf_open (approximativement ligne 312) :<\/p>\n Dans notre cas, sf_count_t a une taille de 4 et non de 8, principalement \u00e0 cause du type off_t qui a une taille diff\u00e9rente sous emscripten.<\/p>\n \tprotobuf-c<\/u> \tsqlite<\/u> \tlibzip<\/u> \tzlib<\/u> \tportaudio<\/u> Fonction de rappel de portaudio<\/p>\n Fonction de rappel de SDL_audio La variable frameCount avec SDL_audio peut \u00eatre calcul\u00e9 de la mani\u00e8re suivante : (dans ce cas, je r\u00e9cup\u00e8re les donn\u00e9es audio sous forme d’entier court (SInt16). utiliser le type de donn\u00e9es correspondant \u00e0 votre code)<\/p>\n La variable ouput devient _stream avec SDL_audio.<\/p>\n Pour les autres variables tels que input \/ paTimeInfo et statusFlags, vous pouvez utiliser le pointer userData pour les passer \u00e0 votre fonction.<\/p>\n Derni\u00e8re chose \u00e0 prendre en compte, la gestion multi-thread. Sur mon code original, j’utilise des variables modifi\u00e9 de mani\u00e8re atomique pour g\u00e9rer l’acc\u00e8s aux fonctions sonores. Avec la version Emscripten, j’ai remplac\u00e9 l’ensemble de ce code avec l’appel \u00e0 SDL_LockAudio() \/ SDL_UnlockAudio(). La taille du tampon des donn\u00e9es sonore doit \u00e9galement \u00eatre modifi\u00e9e. Dans mon cas, je suis pass\u00e9 d’une taille de 4096 octets \u00e0 1024 octets (soit 512 octets par canal audio), ce qui reste un compromis acceptable entre qualit\u00e9 et latence audio. Je n’ai de glitch sonores que sous Chrome, mais rien de probl\u00e9matique.<\/p>\n Tant que votre moteur compile sous GCC, et n’utilise pas de muti-threading, le port devrait se faire sans trop de probl\u00e8me. La partie la plus importante est probablement le code de rendu si il n’est pas d\u00e9j\u00e0 compatible OpenGL ES 2.0 (WebGL utilise les m\u00eame fonctions que OpenGL ES) . Le plus gros du travail se situe sur la suppression de toutes les fonctions fixes OpenGL (glcolor4f \/ glPushMatrix \/ etc.) et leurs remplacement par des fonctions compatibles avec OpenGL core 3.0 afin de faciliter la compatibilit\u00e9 OpenGL ES \/ WebGL. Il est par exemple impossible d’utiliser les tableaux de vertices directement, vous devez utiliser les VBO \u00e0 la place. Pour plus d’info sur OpenGL 3.0, voir les tutos sur le site d\u00e9veloppez.com : tutos OpenGL<\/a> <\/p>\n Si jamais vous n’utilisez pas d\u00e9j\u00e0 de shaders, il vous faudra les cr\u00e9er pour \u00eatre compatible WebGL, la section suivante aborde la question du port de shaders.<\/p>\n WebGL ne supporte que les shaders #version 100, ce qui peut donc n\u00e9cessiter de les r\u00e9\u00e9crire.<\/p>\n Par exemple ce code:<\/p>\n en version 150 devient ce code<\/p>\n en version 100.<\/p>\n Il est possible d’utiliser le pr\u00e9processeur pour garder votre code dans un seul fichier de shaders (avec #ifdef GL_ES pour le code sp\u00e9cifique GLES\/WebGL) Plut\u00f4t que d’utiliser une boucle while(), avec Emscripten vous devez utiliser la ligne ci-dessous pour d\u00e9finir votre boucle de jeu principale :<\/p>\nChoses \u00e0 v\u00e9rifier avant de tenter un port<\/h3>\n
\n
Librairies utilis\u00e9es<\/h3>\n
\n
Port des librairies<\/h3>\n
\n\tEmscripten inclus d\u00e9j\u00e0 glfw 2 et 3, il n’est donc pas n\u00e9cessaire de compiler une librairie annexe. utiliser l’option \u00ab\u00a0-s USE_GLFW=3\u00a0\u00bb (ou 2 pour GLFW 2) dans les options de liens de votre jeu.<\/p>\n
\n Chipmunk fonctionne presque tout seul, moyennant la correction d’un bug :<\/p>\n
\n Fonctionne, mais certaines police de caract\u00e8res font planter le moteur (mes tests avec une police de 20px font planter la librairie, alors qu’une police de 8px fonctionne parfaitement.)<\/p>\n
\n Fonctionne si LUA_COMPAT_ALL est pr\u00e9cis\u00e9 dans les d\u00e9finitions de pr\u00e9processeur quand on compile lua. l’options de lien EMCC \u00ab\u00a0-s FORCE_ALIGNED_MEMORY=1\u00a0\u00bb est ici requise.<\/p>\n
\n\tFonctionne sans modifications<\/p>\n
\n\tFonctionne sans modifications<\/p>\n
\n Le code de la librairie doit \u00eatre modifi\u00e9 pour enlever toutes r\u00e9f\u00e9rences \u00e0 FLAC (je n’ai inclus que le support oggvorbis) Il suffit d’exclure flac.c de votre projet et de commenter toutes les r\u00e9f\u00e9rences \u00e0 FLAC.<\/p>\nassert (sizeof (sf_count_t) == 8) ;<\/code><\/p>\n
\n\tFonctionne sans modifications<\/p>\n
\n\tFonctionne sans modifications<\/p>\n
\n\tCompile sans modifications (non test\u00e9 dans mon cas, j’utilise le syst\u00e8me de fichiers virtuel de Emscripten plut\u00f4t qu’une archive zip)<\/p>\n
\n\tFonctionne sans modifications<\/p>\n
\n La seule librairie que j’ai remplac\u00e9 pour \u00eatre compatible Emscripten. \u00e0 la place, j’utilise la librairies SDL_audio disponible avec Emscripten. Celle-ci utilise webaudio qui est le meilleur moyen d’avoir du son sur un jeu HTML5 \u00e0 l’heure actuelle. Si vous utilisez d\u00e9j\u00e0 l’interface asynchrone de portaudio, le portage est relativement ais\u00e9. Je me suis content\u00e9 de reprendre mon code existant et de l’adapter \u00e0 deux \/ trois endroits pour \u00eatre compatible avec l’interface de SDL_audio.<\/p>\nstatic int Callback(const void *input,\r\n void *output,\r\n unsigned long frameCount,\r\n const PaStreamCallbackTimeInfo* paTimeInfo,\r\n PaStreamCallbackFlags statusFlags,\r\n void *userData)<\/pre>\n
\n\tstatic void sdl_audio_callback(void* userData,Uint8* _stream,int _length)<\/code><\/p>\n
\n\t(sf_count_t)((_length \/ sizeof(Sint16)) \/ num_channels);<\/code><\/p>\nPort du moteur<\/h3>\n
A propos des shaders et de WebGL<\/h3>\n
#version 150\r\n\r\nin vec2 inPos;\r\nin vec2 inTex;\r\n\r\nout vec4 color;\r\nout vec2 texcoord;<\/pre>\n
#version 100\r\n\r\nattribute vec2 inPos;\r\nattribute vec2 inTex;\r\nvarying mediump vec4 color;\r\nvarying mediump vec2 texcoord;<\/pre>\n
\nDans mon cas, j’ai pr\u00e9f\u00e9rer utiliser des fichiers s\u00e9par\u00e9s pour bien faire la diff\u00e9rence entre un shader WebGL et un shader PC.<\/p>\nBoucle de jeu sp\u00e9cifique \u00e0 Emscripten<\/h3>\n