TeaVM / HTML support?

[tsmaster]

Hi there, I'm new - new to Kotlin, new to LibGDX, new to LibKTX, new to Fleks.

I'm working on a project that I would like to target several platforms; Linux, Android, web, and Windows. With LibKTX, I've got some sprites moving around based on mouse clicks.

I set up TeaVM support, and got that building with surprising ease, but that version used the Ashley ECS implementation (closely following the Dark Matter YouTube tutorial playlist), and I ran into a runtime error when running in TeaVM, complaining about my TransformComponent not having a no-args constructor.

I proceeded to rewrite the ECS using Fleks, and got as far as seeing some sprites drawing when running my desktop build, but I got a different runtime error in TeaVM that looks like it's complaining about my (new) TransformComponent, not able to build the companion object.

---

data class FLTransformComponent(
    val xy: Vector2
) : Component<FLTransformComponent> {
    override fun type() = FLTransformComponent

    var position = Vector3(xy.x, xy.y, 0f)
    var previousPosition = Vector3(xy.x, xy.y, 0f)
    var interpolatedPosition = Vector3(xy.x, xy.y, 0f)
    var size = Vector2(1.0f, 1.0f)
    var rotationDeg = 0.0f

    fun setInitialPosition(x: Float, y: Float, z: Float) {
        position.set(x, y, z)
        previousPosition.set(x, y, z)
        interpolatedPosition.set(x, y, z)
    }

    companion object : ComponentType<FLTransformComponent>() {
        val log = logger<CWG2dGameScreenFleks>()
    }
}

---

Uncaught ReferenceError: jl_NoClassDefFoundError__init_ is not defined
    at k_SafePublicationLazyImpl__clinit_ (app.js:14869:5)
    at k_SafePublicationLazyImpl_$callClinit (app.js:14851:5)
    at k_SafePublicationLazyImpl__init_0 (app.js:14859:5)
    at k_SafePublicationLazyImpl__init_ (app.js:14855:5)
    at k_LazyKt__LazyJVMKt_lazy0 (app.js:22108:25)
    at cgqf_ComponentType__clinit_ (app.js:17555:53)
    at cgqf_ComponentType_$callClinit (app.js:17534:5)
    at cgqf_ComponentType__init_ (app.js:17538:5)
    at gfc_FLTransformComponent$Companion__init_0 (app.js:18841:5)
    at gfc_FLTransformComponent$Companion__init_2 (app.js:18844:5)

My questions are:

• Is TeaVM (or any GWT-like workflow supporting HTML) supported for Fleks or other ECSs out there? (I know TeaVM is listed as experimental.)
• Are there any tutorials that would help me target HTML?
• Is there something fundamental, shared between Ashley and Fleks that breaks when going to Javascript? (I thought maybe it was reflection, but the vibe I'm getting from the Fleks 2.0 discussion was that it relies on KMP and avoids reflection.)

Basically just curious if I'm trying to do something that should work and is broken, or should work, but isn't yet, or will never work, and I should try a different approach, or will never work, and I should change my expectations.

Thanks,
Dave

[tsmaster]

I'm using
gdxTeaVM version 1.0.0-b6
Fleks version 2.8

[Quillraven]

Hi,

it is definitely working since I have Mystic Woods and Mystic Garden running (you can check out the repositories. They have the link to the games or use Fleks wiki which also mentions those games and their links).

In general TeaVM needs additional setup when using reflection classes. That is most likely why Ashley did not work for you. You have to register the classes that use reflection separately in the TeaVM builder.

Fleks does not need that because it does not use reflection.

Not sure why you get your error. I can check it tomorrow.

Maybe my example projects mentioned above will help you.

edit: you did use gdx-liftoff for your initial project setup, right?

[tsmaster]

Yep, I did use GDX-liftoff, v1.12.1.11

[metaphore]

Half a year ago I had a very positive experience working with KTX + Fleks + gdx-teavm on my jam project. So I can tell that it stacks up nicely together except for some very rare edge cases mostly related to missing bits and pieces in gdx-teavm regards non-critical Java/libGDX API emulation for the web (like number formatting, regex, etc; but those holes could be patched since).

Looking at your code, the problematic line is in the companion object initialization block

companion object : ComponentType<FLTransformComponent>() {
    val log = logger<CWG2dGameScreenFleks>()
}

Going deeper into the logger() function, you can clearly see that it uses reflection:

inline fun <reified T : Any> logger(): Logger = Logger(T::class.java.name)

And since gdx-teamvm denotes that it has very limited reflection support, that should be your issue.
Luckily, in most cases, you can easily avoid reflection, unless you're doing some important black magic that cannot be done by any other way. So in this case, a fix would be as simple as:

val log = Logger("CWG2dGameScreenFleks")

Or try the Kotlin "reflection" option which tends to be more friendly with TeaVM

val log = Logger(SimplePhysicsTest::class.simpleName) // <== A good candidate for your own logger() shortcut function!

And by the way, gdx-teavm recently went stable! Worth updating to a new version I guess.

[tsmaster]

I'll upgrade gdx-teavm, weird that I'd be behind, as I only got it set up a few days ago. I guess this can happen.

I suspect that the logger isn't the only issue, as I was having the same problem without the logger present for the TransformComponent.

[tsmaster]

I noticed that my logger was badly copy and pasted, referring to a different class. That would have been embarrassing, if it turned out that that's what it was.

I stripped out a bunch of stuff I wasn't using, including the logger:

data class FLTransformComponent(
    val xy: Vector2
) : Component<FLTransformComponent> {
    override fun type() = FLTransformComponent

    var position = Vector3(xy.x, xy.y, 0f)
    var size = Vector2(1.0f, 1.0f)
    var rotationDeg = 0.0f

    companion object : ComponentType<FLTransformComponent>()
}

and I still get the same error call stack as I showed at the beginning. So - the logger isn't the answer.

I think this is the same call stack as before:

Uncaught ReferenceError: jl_NoClassDefFoundError__init_ is not defined
    at k_SafePublicationLazyImpl__clinit_ (app.js:18028:5)
    at k_SafePublicationLazyImpl_$callClinit (app.js:18010:5)
    at k_SafePublicationLazyImpl__init_0 (app.js:18018:5)
    at k_SafePublicationLazyImpl__init_ (app.js:18014:5)
    at k_LazyKt__LazyJVMKt_lazy0 (app.js:27998:25)
    at cgqf_ComponentType__clinit_ (app.js:21644:53)
    at cgqf_ComponentType_$callClinit (app.js:21623:5)
    at cgqf_ComponentType__init_ (app.js:21627:5)
    at gfc_FLTransformComponent$Companion__init_0 (app.js:23478:5)
    at gfc_FLTransformComponent$Companion__init_2 (app.js:23481:5)

I may have missed a step somewhere along the way in my setup - I'll try looking at the examples to get ideas.

[tsmaster]

Ok, followup - it wasn't (just) the logger. I upgraded TeaVM to 1.0.2, and upgraded my TeaVMBuilder code, which I probably cut and pasted from LibKTX example code, which was where I must have picked up the TeaVM 1.0.0b6 dependency.

And it works!

Thanks for the pointers, thanks for the reassuring words. I'll bounce to another question I have, and mark this one answered.

[Quillraven]

Wow thanks @metaphore for your quick response and help!

Fyi registering the logger class as reflection class might help. I did that in a newer project for some other reflection classes. Here is the link to the important file:

https://github.com/Quillraven/Masamune/blob/master/teavm/src/main/kotlin/io/github/masamune/teavm/TeaVMBuilder.kt

Might be worth a shot. Otherwise move your logger to the system instead of the component. I personally would not add a logger to a component. It should be a stupid data holder with ideally no logic.

Logging should be part of a system.

[tsmaster]

Yeah, giving it half a thought, components shouldn't be doing anything, including logging. I'll take the logger out of the component and look at the examples you mentioned earlier on in the thread.

Thanks for the help.