Browser version of Tilengine

[System64]

Hi,
I've heard you are working on a browser version of Tilengine that can run on web some time ago.
Is it still in progress? I think a web version can give interesting results and allow people to make games for the web platform.

[megamarc]

Hi!

That's true, I haven't released it to the public yet because there are still some minor issues, but the bulk of the work is done.

Here you can preview some of the samples running inside a web browser:

https://www.tilengine.org/emcc/platformer.html
https://www.tilengine.org/emcc/shadow.html
https://www.tilengine.org/emcc/shooter.html
https://www.tilengine.org/emcc/forest.html
https://www.tilengine.org/emcc/spinner.html
https://www.tilengine.org/emcc/colorcycle.html

Happy new year!

[System64]

Hi!

That's true, I haven't released it to the public yet because there are still some minor issues, but the bulk of the work is done.

Here you can preview some of the samples running inside a web browser:

https://www.tilengine.org/emcc/platformer.html
https://www.tilengine.org/emcc/shadow.html
https://www.tilengine.org/emcc/shooter.html
https://www.tilengine.org/emcc/forest.html
https://www.tilengine.org/emcc/spinner.html
https://www.tilengine.org/emcc/colorcycle.html

Happy new year!

Hi!
Happy new year to you too!
I checked the samples and it works very well for web technologies!
I still have a question : Will it be possible to write Javascript directly when using the library or the program has to be written in a language like C and be compiled with Emscripten?

[megamarc]

Hi!

Sorry for the delay, I've been out offline on Christmas holidays.

I don't quite know emscripten to answer this question right now. The setup I have first compiles a static library libTilengine.a composed of webassembly (wasm) objects, and then builds a final wasm bundling the library, the compiled sample and packaged assets.

I know that emscripten can compile to plain asm.js instead of wasm. So in theory this intermediate library in asm.js should be usable inside a native javascript application. But as I mentioned, I don't know enough the toolchain and its possible output paths. I just learned how to build the original samples written in C. But it'ssomething that should be explored.

This documentation page talks about calling C code in a library (i.e Tilengine) from javascript code:
https://emscripten.org/docs/porting/conn...call-cwrap

[System64]

Hi!

Sorry for the delay, I've been out offline on Christmas holidays.

I don't quite know emscripten to answer this question right now. The setup I have first compiles a static library libTilengine.a composed of webassembly (wasm) objects, and then builds a final wasm bundling the library, the compiled sample and packaged assets.

I know that emscripten can compile to plain asm.js instead of wasm. So in theory this intermediate library in asm.js should be usable inside a native javascript application. But as I mentioned, I don't know enough the toolchain and its possible output paths. I just learned how to build the original samples written in C. But it'ssomething that should be explored.

This documentation page talks about calling C code in a library (i.e Tilengine) from javascript code:
https://emscripten.org/docs/porting/conn...call-cwrap

Hi!
I hope your Christmas holidays were good.
being able to call C code from JS sounds interesting. Modern web technologies are powerful today, so I think there are many options.
I can eventually try to compile and test on my side too, but I should figure out how to compile to WASM first (I often struggle to compile C / C++, I often have many errors. Hello to the "Undefined Reference to SDL2_..." errors)

[megamarc]

Hi!

In case you're interested, I've pushed online the html5 development branch. This is were I do all tests and changes, it's not for public release yet, but it's working. Once it's completed, my idea is to merge it into main branch and not have a separate "html5" branch anymore.

First you have to setup emscripten compiler:
https://emscripten.org/docs/getting_star...loads.html

Following instructions are for Windows. If you're using Linux, you'll have to adapt it.

1. Open a emscripted-enabled terminal by running emcmdprompt.bat batch file located inside emcscripten install directory
   
2. Navigate to Tilengine (html5 branch) root folder
   
3. Build the library by making src/Makefile_emcc:
   

Code:

cd src
mingw32-make -f Makefile_emcc

Build the samples by executing samples/build_emcc batch file:

Code:

cd ../samples
build_emcc

Executables are located in wasm directory inside samples:

Code:

cd wasm

To run samples, execute emrun followed by the name of the sample.html.

For example to run platformer sample:

Code:

emrun platformer.html

A web browser will open with the sample running inside

Let me know if you manage to build an run without errors

[System64]

Hi!

In case you're interested, I've pushed online the html5 development branch. This is were I do all tests and changes, it's not for public release yet, but it's working. Once it's completed, my idea is to merge it into main branch and not have a separate "html5" branch anymore.

First you have to setup emscripten compiler:
https://emscripten.org/docs/getting_star...loads.html

Following instructions are for Windows. If you're using Linux, you'll have to adapt it.

1. Open a emscripted-enabled terminal by running emcmdprompt.bat batch file located inside emcscripten install directory
   
2. Navigate to Tilengine (html5 branch) root folder
   
3. Build the library by making src/Makefile_emcc:
   

Code:

cd src
mingw32-make -f Makefile_emcc

Build the samples by executing samples/build_emcc batch file:

Code:

cd ../samples
build_emcc

Executables are located in wasm directory inside samples:

Code:

cd wasm

To run samples, execute emrun followed by the name of the sample.html.

For example to run platformer sample:

Code:

emrun platformer.html

A web browser will open with the sample running inside

Let me know if you manage to build an run without errors

Hi, I managed to compile it without any errors, seems to work very well! Even the Mouse sample (the sample where you can click on the Marios) works!

[megamarc]

Hi!

Glad to know you have it working :-)

As you can see, the single main difference is that the main loop doesn't exist isnide main() function anymore, but is a delegate function set up by the new API call TLN_SetMainTask(). That's because how the browser calls javascript code. Being single-threaded, it means you can't call a function that doesn't return control to the javascript engine, a delegate callback must be used. This new mechanism is also implemented inside the Tilengine window, so the updated samples will also run when compiled to native C applications. The rest of the API is the same.

[System64]

Hi!

Glad to know you have it working :-)

As you can see, the single main difference is that the main loop doesn't exist isnide main() function anymore, but is a delegate function set up by the new API call TLN_SetMainTask(). That's because how the browser calls javascript code. Being single-threaded, it means you can't call a function that doesn't return control to the javascript engine, a delegate callback must be used. This new mechanism is also implemented inside the Tilengine window, so the updated samples will also run when compiled to native C applications. The rest of the API is the same.

This is good to know! I also have an idea : You maybe can implement the samples on the website, so the user can interact with them while visiting the website

[megamarc]

Hi!

This is the idea :-) I'd like to put some samples online so the user can interact with them. I have to create different html templates, one for each sample, to explain the purpose of the sample and the key bindings. I'd also like to have a single youtube video, a "trailer" interleaving captured footage of samples and in development games using it, with text highlighting the key features. But I don't have experience creating trailers, I'm software engineer not a video producer