How to create a full screen scrollable

[Xyndra]

I want to make a game which can extend indefinitely and you need to scroll, but it seems to be very undocumented and hard to create even though it is a somewhat common idea. I have tried many things now including setting the scale mode, display mode, and trying to overwrite the window, however nothing seems to be working. The problem is visible in the debugger, being that no scaling mode actually scales the stage. There should be some option to make the stage both scrollable and extend with a onResize.

[soywiz]

The simplest way is to use a normal scale mode with anchor on top left; then you can create a UIScrollable view and ser the xy to 0,0 and wodth height to views.actualVirtualWidth/Height and update it when the screen resizes. Alternatively there is a kproject in the store providing a docking component you can attach to a view to automatically react to the window size

https://github.com/korlibs/korge/blob/main/korge/src/common/korlibs/korge/ui/UIScrollable.kt

Please, let me know if it works for you or need further details

[Xyndra]

And stuff also doesn't render outside the Stage, which is most likely due to some optimizations.
Edit: turning clipping of solved the rendering problem, but not the input one

[soywiz]

Can you provide a full example not working?

[Xyndra]

import korlibs.image.bitmap.*
import korlibs.image.color.*
import korlibs.image.format.*
import korlibs.io.file.std.*
import korlibs.korge.*
import korlibs.korge.annotations.*
import korlibs.korge.ui.*
import korlibs.korge.view.*
import korlibs.math.geom.*
import kotlin.collections.set

// Create a window that always has the same size as the stage
@OptIn(KorgeExperimental::class)
suspend fun main() = Korge(backgroundColor = Colors["#2b2b2b"], title = "Aufgabe 4",
    scaleMode = ScaleMode.NO_SCALE, clipBorders = false
) {
    val bitmaps: HashMap<String, Bitmap> = hashMapOf()

    bitmaps["flashlight"] = resourcesVfs["flashlight.png"].readBitmap()


    val scroll = uiScrollable{
        position(0, 0)
        val flashlight = image(bitmaps["flashlight"]!!) {
            position(0, 0)
            smoothing = false
        }
    }

    DockingComponent(this, Anchor.TOP_LEFT) {
        scroll.position(0, 0)
        scroll.size(views.actualVirtualWidth, views.actualVirtualHeight)
    }
}

PS: I didn't download the docking lib and only copied the class, so there is no import

[soywiz]

Try this:

import korlibs.image.color.*
import korlibs.korge.*
import korlibs.korge.ui.*
import korlibs.korge.view.*
import korlibs.math.geom.*

// Create a window that always has the same size as the stage
suspend fun main() = Korge(backgroundColor = Colors["#2b2b2b"], title = "Aufgabe 4",
    displayMode = KorgeDisplayMode.TOP_LEFT_NO_CLIP.copy(scaleMode = ScaleMode.NO_SCALE),
) {
    uiScrollable {
        position(0, 0)
        uiGridFill(Size(2000, 2000), cols = 2, rows = 2, spacing = Spacing(4)) {
            for (color in listOf(Colors.RED, Colors.GREEN, Colors.BLUE, Colors.BLACK)) {
                solidRect(Size(500, 500), color)
            }
        }
    }.also { scrollable ->
        onStageResized { width, height ->
            scrollable.width = views.actualVirtualWidth.toDouble()
            scrollable.height = views.actualVirtualHeight.toDouble()
        }
    }
}

[Xyndra]

Thanks, this seems to work.