Squins IT Solutions

knowledge base

Running a libGDX-kotlin app in the browser

Written by Coen Rijsdijk

We have developed several apps in Kotlin with libGDX.

I am doing a research traineeship to make it run in the browser, and will share findings here. In my research I come across many different possibilities, some of which are useful,
but others have limitations that are not handy. I elaborate this further below.

Possibilities

  • GWT

    Since Teachkidslanguages is built with Kotlin and LibGDX. GWT was not an option, as GWT is based on transpiling Java source code to JavaScript.

  • Bytecoder

    Bytecoder is a Rich Domain Model for Java Bytecode and Framework to interpret and transpile it to other languages such as JavaScript, OpenCL or WebAssembly.

  • TeaVM

    TeaVM was designed as a modular compiler, so core knows nothing about interaction with JavaScript. TeaVM provides a bundled-in extension called JSO, which can communicate with JavaScript. But the problem is that JSO is not meant to work with WebAssembly. Since my research is more focused on WebAssembly, TeaVM is not an option.

  • KotlinNative

    With kotlin native you can’t use Java code. Also WebGL can’t be used in combination with compiled Kotlin Native for WebAssembly.

  • JWebAssembly

    JWebAssembly didn’t look quite right yet, lack of activity, no community platform.

Solution

But finally after a lot of research and trials, I have reached a possible solution; Bytecoder. Bytecoder looks vibrant, fits well within our existing code base. Also Bytecoder supports WASM, which TeaVM can’t properly yet.

After I verified the most important parts and functions in the app I started trying out different Web API’s. The first focus was on audio, then WebGL as this is a very important part within the app. With the documentation about WebGL from Mozilla I started to get basic understanding.

So I started setting up a project simply by making a small example which can print a line in the console of the DOM. That went quite easily, so I started setting up tasks together with Kees to make a Bytecoder backend for LibGDX. All the issues we created during the whole process can be found here.

First, we started to focus on Web Graphics Library (WebGL), because this is an important JavaScript api for us. We looked a lot at GWT during the implementation, this helped us to move forward.

The first error we encountered occurred quite quickly, a spritebatch instantiation crashed. A method inside Bytecoder was missing, we reported the issue at Bytecoder. Because we wanted to proceed quickly, we cloned Bytecoder locally and added the missing method by ourselves. Then we submitted this again as a pull request and asked if the maintainer would accept it.

Posted in:  Apps  Web 

Kees van Dieren, CEO

We've years of experience helping startups and scale-ups to work more efficient by creating apps that are fit their needs.

Let’s talk. We look forward to exploring the opportunity to help your company too.

Go ahead and send us a message. We look forward to exploring the opportunity to help you too.