Rishav Sharan
06/10/2020, 3:16 PMval 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;RezMike
06/10/2020, 4:33 PMTextButton
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#L29TextButton
class and specify your own NinePatch
object for rect
propertycenterBetween(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
06/10/2020, 4:55 PMRezMike
06/10/2020, 5:02 PMclass 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.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 resizableRishav Sharan
06/10/2020, 5:32 PMRezMike
06/10/2020, 5:59 PM