How to interact with my Javascript game from my website

[Rubén Reboredo]

Hello everyone.

First of all, congratulations for the magnificent work done with teaVM.

I would like to point out that I am a novice in HTML and Javascript programming. But I have developed a game in libGdx and published it for Android and iOS systems and it is having good opinions among users.

After discovering teaVM and after some modification to the game, I managed to get it working in the browser in a fantastic way. But the UI is designed for mobile devices, so I would like to create a web page with a UI from where I can interact with my game.

After using teaVM I get an app.js file that I understand contains my entire game. The main class in Java is called TeaVMLauncher and contains the main() method that is started when loading the index.html file.

But I don't know how to access the methods I have in my app.js file from my index.html. For example, I would like pressing a button on my web page to disable the sound, for which I have a method called disableSound() in my java game. How can I call the java methods of my game from the html file?  I've been looking at the teaVM documentation and I can't do what I'm looking for.

Thank you so much.

[Alexey Andreev]

Hi. You can also try to get some help in libGDX discord, since TeaVM backend for libGDX was created by other people, who I'm not sure read this forum.

As for you particular question, I can only answer how it can look like outside libGDX. First of all, you don't need necessarily to write your UI code in JS. Instead, you can write all UI code right in Java, it would be the easiest option. TeaVM comes with JS interop layer called JSO, you can find documentation here. Also, TeaVM provides some (but far from complete) set of bindings to JS APIs. Just take a look at examples.

If you want to expose methods other than 'main', one option is to switch to latest preview build, which provides this functionality. However, AFAIK, latest version of libGDX works with 0.9.2, so if something goes wrong with 0.10.0-dev-12, you should ask backend authors. Other option is to write a small JS method like this:

@JSBody(params = "obj", script = "window.teavmExport = obj;")

private static void exportDeclarations(JSObject obj);

So you should only create obj and fill it with functions you need (please, read documentation and see examples in order to understand how to do that).

воскресенье, 21 апреля 2024 г. в 20:38:43 UTC+2, rube...@gmail.com:

[Rubén Reboredo]

Hi. Thanks for your quick response.

No, I am not using the teaVM extension for libgdx (gdx-teavm) so I can use the latest preview build.

And the problem was there, I had been testing with the @JSExport annotation and it did not recognize it, because I was using 0.10.0-dev-5. Now with the latest preview build (0.10.0-dev-12) I have already managed to access my java methods from the html.

I will also try the second option (using JSBody) to see which is the best option.

Thank you very much again and best regards.

Rubén