KorGE Compose

dependencies:
- https://github.com/korlibs/korge-compose/tree/0.0.4/korge-compose##caeae9a35f2ad1e29f6ddfc76b5491bc7929cb8a

Use Compose Multiplatform along KorGE.

In order to use this module you need to do some manual additions for now:

In your root build.gradle.kts

plugins {
    // ...
	id("org.jetbrains.compose") version "1.4.0" 
}

// ...

compose {
	kotlinCompilerPluginArgs.add("suppressKotlinVersionCompatibilityCheck=1.8.21")
	kotlinCompilerPlugin.set(dependencies.compiler.forKotlin("1.8.20"))
}

And it also requires at least kproject 0.2.7.

Example. Using the Vampires asset:

import androidx.compose.runtime.*
import com.finalbossblues.timefantasy.*
import korlibs.event.*
import korlibs.image.bitmap.*
import korlibs.image.color.*
import korlibs.image.format.*
import korlibs.io.file.std.*
import korlibs.io.stream.*
import korlibs.korge.*
import korlibs.korge.compose.*
import korlibs.korge.scene.*
import korlibs.korge.view.*
import korlibs.math.geom.*
import korlibs.math.geom.Anchor
import korlibs.korge.compose.Image
import korlibs.korge.ui.*
import korlibs.korge.view.animation.*

suspend fun main() = Korge(
    title = "Korge Compose",
    windowSize = Size(512, 512),
    backgroundColor = Colors["#2b2b2b"],
    displayMode = KorgeDisplayMode(ScaleMode.SHOW_ALL, Anchor.TOP_LEFT, clipBorders = false),
    forceRenderEveryFrame = false
) {
    val sceneContainer = sceneContainer()

    sceneContainer.changeTo({ MyScene() })
}

class MyScene : Scene() {
    override suspend fun SContainer.sceneMain() {
        setComposeContent(this) {
            var width by remember { mutableStateOf(width.toInt()) }
            var height by remember { mutableStateOf(height.toInt()) }
            LaunchedEffect(true) {
                fun onResized() {
                    val w = views.actualVirtualWidth
                    val h = views.actualVirtualHeight
                    width = w
                    height = h
                    this@sceneMain.size(w.toDouble(), h.toDouble())
                }

                onEvent(ReshapeEvent) {
                    onResized()
                }
                onResized()
                //onStageResized { w, h ->
                //    //println("RESIZED: $w, $h")
                //    this@sceneMain.size(w.toDouble(), h.toDouble())
                //}
            }
            MainApp(width, height)
        }
    }
}

@Composable
fun ImageDataView(
    data: ImageData? = null,
    animation: String? = null,
) {
    ComposeKorgeView({
        UIContainer(Size(32, 32)).apply {
            imageDataView(data, animation)
                .xy(16, 16)
                .also { it.play() }
        }
    }, {
        set(data) { (this.firstChild as korlibs.korge.view.animation.ImageDataView).data = data }
        set(animation) { (this.firstChild as korlibs.korge.view.animation.ImageDataView).animation = animation }
    })
}

@Composable
private fun MainApp(width: Int, height: Int) {
    var color by remember { mutableStateOf(Colors.WHITE) }
    var count by remember { mutableStateOf(0) }
    var bitmap: BmpSlice by remember { mutableStateOf(Bitmaps.transparent) }
    var vampire: ImageData? by remember { mutableStateOf(null) }

    fun insert(digit: Int) {
        count *= 10
        count += digit
    }

    LaunchedEffect(true) {
        val vampires = EvilTransformingVampires.readImages()
        vampire = vampires?.vampire
        bitmap = vampires?.vampire?.defaultAnimation?.firstFrame?.bitmap?.slice() ?: Bitmaps.white
        println("1")
        //bitmap = resourcesVfs["korge-30.jpg"].readBitmap().slice()
    }

    VStack(width.toFloat(), adjustSize = true) {
        Image(bitmap)
        ImageDataView(vampire, "down")
        Text("$count", color)
        HStack {
            Button("-") { count-- }
            Button("+") { count++ }
        }
    }
}