Channels
#javascript
Title
s
Stan van der Bend
06/17/2023, 6:22 PMHey, 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()app.render() 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 PMHi, 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
lateinit7 Views