https://kotlinlang.org logo
s

Stan van der Bend

06/17/2023, 6:22 PM
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.
This is the code I am currently using:
Copy code
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")
}
Using the debug tools, I can see the components are there
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:
Copy code
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)
a

Ayfri

06/17/2023, 7:52 PM
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).
7 Views