HTML5 BOX2D quickstart with FABLE

This is a quick start to develop content in HTML5 with BOX2D using FABLE.

Prerequisites

You will need a http server. You can either use XAMP if you are already familiar or any other.

In my case I use npx, which is a server from the npmjs. You can see how to install it here.

https://www.npmjs.com/package/http-server

Also you may need a project to test, or use the sample one from this post.

Project to use.

Lets asume that we created already a project that we want to start exporting to html5. In this example, will use the Excavator and Dump truck demo.

We will just proceed to publish the project, by going to File->Publish

Once the process completes, it will create an output folder in the same directory where the .ble file resides. 

In this folder we will see several files and folders, the important ones for HTML5 are the following ones.

If we simply start the http server in the output folder. (for npx would be this command) “ npx http-server . we then could see it in localhost:8080.

you can try the live version here.

https://estebon.mx/html5examples/excavatorDumpTruck/

Notes

Please feel free to modify any of the generated files, is a good way to lean what is going on.

I added a small mouse handler so you can interact right away with the scene using the mouse, but is mostly for demo.

SourceFile

Here is the source file

https://estebon.mx/fable/wp-content/uploads/2021/02/excavatorDumpTruck.zip

Leave a Reply

Your email address will not be published. Required fields are marked *