https://kotlinlang.org logo
#korge
Title
# korge
r

Rishav Sharan

06/10/2020, 3:16 PM
I am struggling somewhat with skinning my ui elements. Here is how I added a skin;
Copy code
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;
And this is how the actual button in the atlas looks like;
r

RezMike

06/10/2020, 4:33 PM
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
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
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)
r

Rishav Sharan

06/10/2020, 4:55 PM
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
r

RezMike

06/10/2020, 5:02 PM
You can try to use custom ninepatch for your buttons. Just extend the TextButton and override it. Something like that:
Copy code
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.
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
r

Rishav Sharan

06/10/2020, 5:32 PM
Thanks. Also what is the difference between the various button types like textButton and uiButton?
r

RezMike

06/10/2020, 5:59 PM
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.
👍 1
19 Views