I am struggling somewhat with skinning my ui elements. Here is how I added a skin;

val uiAssets = resourcesVfs["buttons.png"].readNativeImage()
        val newSkin =  DefaultUISkin.copy(
                normal = uiAssets.sliceWithSize(0, 0, 1024, 64),
                over = uiAssets.sliceWithSize(0, 128, 1024, 64),
                down = uiAssets.sliceWithSize(0, 192, 1024, 64),
                backColor = DefaultUISkin.backColor.transform(ColorTransform(0.7, 0.9, 1.0))
        )
        var playButton = textButton(256.0, 32.0) {
            text = "Play"
            skin = newSkin
            position(views.actualVirtualWidth/2 - 128, views.actualVirtualHeight/2 - 64)
            onClick {
                  sceneContainer.changeToAsync<PlayScene>()
            }
        }

Unfortunately the button skin is not scaling correctly. the button atlas has slices of 1024x64 size which I suppose is pretty large. the skinned buttons are getting rendered weirdly. This is how the button looks in game;

TextButton

uses

ninePatch

rectangle under the hood in order to scale skin. https://github.com/korlibs/korge/blob/master/korge/src/commonMain/kotlin/com/soywiz/korge/ui/UIButton.kt#L29

So, the skins should always be nine patch (my images surely aren't nine patch)? Or can I still make buttons with arbitrary sized images (maybe by using onCLick and onOver callbacks on an Image type). PS. thanks for the tip about the centering

You can try to use custom ninepatch for your buttons. Just extend the TextButton and override it. Something like that:

class CustomButton(...) : TextButton(...) {

    override val rect = ninePatch(skin.normal, width, height, 0.0, 0.0, 0.0, 0.0)

}

I haven't tried that, but maybe it'll help you here.

Thanks. Also what is the difference between the various button types like textButton and uiButton?

UIButton is the simplest element. It contains only background skin and reacts to mouse events. UIButton is used in other ui elements. TextButton is based on UIButton and contains text. IconButton is also based on UIButton, but it contains icon image instead of text.