I am struggling somewhat with skinning my ui eleme...

# korge

[Rishav Sharan]

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;

[Rishav Sharan]

And this is how the actual button in the atlas looks like;

[RezMike]

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

[RezMike]

Maybe there's something wrong with sizes/positions in your code? Or you can extend TextButton class and specify your own NinePatch object for rect property

[RezMike]

btw you can use centerBetween(0, 0, views.actualVirtualWidth, views.actualVirtualHeight) or centerOn(rootView) to center your buttons, instead of position(views.actualVirtualWidth/2 - 128, views.actualVirtualHeight/2 - 64)

[Rishav Sharan]

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

[RezMike]

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.

[RezMike]

The default ninepatch in TextButton uses 15,6% of both sides as non-resizable zones and the rest 68,8% as resizable. In the code above it should use all 100% as resizable

[Rishav Sharan]

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

[RezMike]

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.