Hey, I am trying to use PixiJS in KotlinJS and I f...

# javascript

[Stan van der Bend]

Hey, I am trying to use PixiJS in KotlinJS and I found this library: https://github.com/Ayfri/PIXI-Kotlin
However, I am having an issue where the example in the readme does not render anything to the canvas, which I suspect is because the render loop is not starting, which I suspect is because of a plugin (TickerPlugin) not being loaded. But I am very new to javascript, and I find it all a tad confusing; if someone could help me out a bit, that'd be much appreciated, I'd love to contribute to this project.

[Stan van der Bend]

This is the code I am currently using:

import js.core.globalThis
import js.import.import
import kotlinx.browser.document
import kotlinx.browser.window
import pixi.externals.Color
import pixi.externals.extensions.add
import pixi.externals.extensions.load
import pixi.typings.app.Application
import pixi.typings.core.VERSION
import pixi.typings.loaders.Loader
import pixi.typings.loaders.loader
import pixi.typings.sprite.Sprite
import pixi.typings.ticker.Ticker
import pixi.typings.ticker.autoStart
import pixi.typings.utils.EventEmitter
import pixi.utils.application
import kotlin.random.Random

private lateinit var eventEmitter: EventEmitter
private lateinit var app: Application

fun main() {

    eventEmitter = EventEmitter()

    import<Any>("pixi.js")

    console.log("Pixi.js version: $VERSION")
    app = application {
        backgroundColor = Color("#eee")
        resizeTo = window
        autoStart = true
    }
    globalThis.__PIXI_APP__ = app;

    document.body!!.appendChild(app.view)
    
    app.loader.add("bunny", "bunny.png").load(::start)
}

fun start(loader: Loader) {
    val texture = (loader.resources["bunny"] ?: return).texture ?: return

    val size = 250.0
    val sprite = Sprite(texture).apply {
        width = size
        height = size
        anchor.set(0.5)
    }

    Ticker.shared.add {
        sprite.apply {
            x = (Random.nextDouble() * window.innerWidth).coerceIn(size / 2, window.innerWidth - size / 2)
            y = (Random.nextDouble() * window.innerHeight).coerceIn(size / 2, window.innerHeight - size / 2)
        }
    }

    app.stage.addChild(sprite)
    eventEmitter.emit("ready")
}

[Stan van der Bend]

Using the debug tools, I can see the components are there

[Stan van der Bend]

A manual call to app.render() works directly after creating the application, this will draw the background color, however, calling app.render() again after adding the sprite, will raise the following error:

BatchSystem.ts:45 Uncaught TypeError: Cannot read properties of undefined (reading 'start')
    at BatchSystem.setObjectRenderer (BatchSystem.ts:45:30)
    at Sprite._render (Sprite.ts:369:24)
    at Container.render (Container.ts:643:18)
    at Container.render (Container.ts:647:34)
    at Renderer.render (Renderer.ts:511:23)
    at Application.render (Application.ts:133:23)
    at start (App.kt:69:9)
    at l (App.kt:47:47)
    at Signal.dispatch (Signal.ts:138:22)
    at Loader._onComplete (Loader.ts:548:25)

[Ayfri]

Hi, thank you for using my library, it's very surprising to me to have someone speaking about it 🙂
I don't remember exactly how in details how loading assets works, but I made one pretty complex project with the library where I have an object extending `EventEmitter` for loading my textures and then I wait on the `loaded` event of this object to actually load my textures, using lateinit is a very good thing

Sorry but it's been a while since I didn't used PixiJS, and currently I stoped working on this library because managing multi-modules the same way they do in TypeScript is impossible
(Because of optional dependencies, which is not a concept possible in Gradle, I tried many many things, so for now it's blocked in this state, and for games I switched to Godot).