0

Hello I am using libgdx to develop an Android game. I have created my main menu buttons using the default uiskin atlas and json files. The trouble is I don't fully understand how to change the button images from the default grey colour which they currently are. For instance I created an exit image for my exit button but how do I add that image to the exit button in my main menu? I have created a textureregion of the exit image from my main spritesheet but can't find anything that allows me to attach it to the button. Thanks

So far this is the code I have

Skin skin = new Skin(Gdx.files.internal("data/ui/uiskin.json"));

exit = new TextButton("Exit",skin);
            exit.setPosition(0,0);
            exit.setSize(60, 60);

              stage.addActor(exit);
              exit.addListener(new ClickListener() {
                  @Override
                  public void clicked(InputEvent event, float x, float y) {
                      System.exit(0);
                  }
              });
user2002077
  • 595
  • 1
  • 6
  • 17

2 Answers2

1

I suggest to dig a bit in Skins, Textures and Scene2d. Please refer to this other question and this one in StackOverflow they provide some description on what a skin is and how to use it.

A skin contains a definition of all the drawables you can use plus fonts and other things. If you want to modify the skin whithout using a Texture Packer, you can just modify the image file and then change the JSON that is specifying the area. Using a Texture Packer is giving you the avantage of:

  1. Have the single image for each area in a separate file
  2. Automatically create the JSON file with the proper position and size information
  3. Efficiently storing the images the PNG image by doing rotation of images and various algorithms to reduce unused space

More intro can be found: here , Libgdx wiki or this quick tutorial

In the case of the default skin it is called: uiskin.json and "points" to a TexturePack image uiskin.png. When you open the png file you will find all the areas that are defined in the json file.

Community
  • 1
  • 1
dawez
  • 2,714
  • 2
  • 29
  • 50
  • Thanks very much. I had a look into again last night and realised I would have to pretty much create my own skin. It looked complicated at first but the atlas file pretty much gets the image positions from the png and the json file is like css styling. – user2002077 Oct 13 '14 at 11:17
  • 1
    you can also start with and empty file and just add the parts as you go. Also this link contains some info about the JSON format of the skin: http://www.gamefromscratch.com/post/2013/12/18/LibGDX-Tutorial-9-Scene2D-Part-3-UI-Skins.aspx – dawez Oct 13 '14 at 12:38
0

SimpleButton.kt

class SimpleButton(texture: Texture?, text: String?, x: Float, y: Float, width: Float, height: Float) {

    var texture : Texture? = null

    private var font : BitmapFont? = null
    private var shadowFont : BitmapFont? = null

    private var x : Float = 0f
    var y : Float = 0f
    private var width : Float = 0f
    private var height : Float = 0f
    var text : String? = null
    private var fontSize : Int = 120
    var fontColor : Color = Color.WHITE

    private var fontName : String = "pricedown.otf"

    private val shadowLabelGlyph = GlyphLayout()
    private val labelGlyph = GlyphLayout()

    fun checkIfClicked(ix: Float, iy: Float) {

        if ((ix > (x - (width / 2f))) && (ix < (x + (width / 2f)))) {

            if ((iy > (y - (height / 2f))) && (iy < (y + (height / 2f)))) {

                // the button was clicked, perform an action

                println("Button clicked !")

                this.listener?.invoke()

            }

        }

    }

    init {

        println("-------------------")
        println("SimpleButton")
        println("-------------------")

        println("texture: ${texture}")

        this.texture = texture // your image
        setPosition(x, y)
        setSize(width, height)

        if (text != null) {

            this.text = text

            // font generator

            val generator = FreeTypeFontGenerator(Gdx.files.internal(fontName))

            // parameter

            val parameter: FreeTypeFontGenerator.FreeTypeFontParameter =
                FreeTypeFontGenerator.FreeTypeFontParameter()
            parameter.size = fontSize // font size

            font = generator.generateFont(parameter)

            shadowFont = generator.generateFont(parameter)

        }

    }

    fun draw(batch: SpriteBatch){

        if (this.texture != null) {

            batch.draw(
                this.texture,
                this.x - (this.width / 2f),
                this.y - (this.height / 2f),
                this.width,
                this.height
            )

        }

        if (this.font != null) {

            // fontColor

            font?.color = fontColor

            shadowFont?.color = Color.BLACK

            // shadowLabelGlyph

            shadowLabelGlyph.setText(shadowFont, text)

            // labelGlyphWidth

            val shadowLabelGlyphWidth: Float = shadowLabelGlyph.width
            val shadowLabelGlyphHeight: Float = shadowLabelGlyph.height

            // draw shadowFont

            shadowFont!!.draw(
                batch,
                shadowLabelGlyph,
                this.x - (shadowLabelGlyphWidth / 2f) + 2f,
                this.y + (shadowLabelGlyphHeight / 2f) - 2f
            )

            // labelGlyph

            labelGlyph.setText(font, text)

            // labelGlyphWidth

            val labelGlyphWidth: Float = labelGlyph.width
            val labelGlyphHeight: Float = labelGlyph.height

            // draw font

            font!!.draw(
                batch,
                labelGlyph,
                this.x - (labelGlyphWidth / 2f),
                this.y + (labelGlyphHeight / 2f)
            )

        }
    }

    private var listener: (() -> Unit)? = null

    fun setListener(listener: () -> Unit) {
        this.listener = listener
    }

    fun setPosition(x: Float, y: Float) {

        this.x = x
        this.y = y

    }

    fun setSize(width: Float, height: Float) {

        this.width = width
        this.height = height

    }

    fun setFontName(fontName: String) {

        this.fontName = fontName

        // font generator

        val generator = FreeTypeFontGenerator(Gdx.files.internal(fontName))

        // parameter

        val parameter: FreeTypeFontGenerator.FreeTypeFontParameter =
            FreeTypeFontGenerator.FreeTypeFontParameter()
        parameter.size = fontSize // font size

        font = generator.generateFont(parameter)

        shadowFont = generator.generateFont(parameter)

    }

    fun setFontSize(fontSize: Int) {

        this.fontSize = fontSize

        // font generator

        val generator = FreeTypeFontGenerator(Gdx.files.internal(fontName))

        // parameter

        val parameter: FreeTypeFontGenerator.FreeTypeFontParameter =
            FreeTypeFontGenerator.FreeTypeFontParameter()
        parameter.size = fontSize // font size

        font = generator.generateFont(parameter)

        shadowFont = generator.generateFont(parameter)

    }

}

Game.kt

class Game() : ApplicationAdapter() {

    // MARK: - Properties -

    var camera : OrthographicCamera? = null
    var viewport : ExtendViewport? = null

    private lateinit var batch : SpriteBatch
    var touchPoint : Vector3 = Vector3(0f, 0f, 0f)
    var replayButton : SimpleButton? = null

    // MARK: - Lifecycle -

    override fun create() {

        // camera

        camera = OrthographicCamera()
        viewport = ExtendViewport(1080f, 1920f, camera)

        // game variables

        batch = SpriteBatch()

        // replayButton

        replayButton = SimpleButton(Texture("button_green.png"), "Replay", 0f, 0f, 400f, 200f)
        replayButton?.setFontSize(80)
        replayButton?.fontColor = Color.BLUE
        replayButton?.setFontName("ka1.ttf")

        replayButton?.setListener {

            println("Button Pressed")

        }

    }

    // MARK: - Render Loop -

    override fun render() {

        // camera

        camera?.update(); //update our camera every frame

        // draw

        batch.begin()

        // replayButton

        replayButton!!.setPosition((camera!!.viewportWidth / 2f), (camera!!.viewportHeight / 2f))

        replayButton!!.draw(batch)

        // touches

        if (Gdx.input.justTouched()) {

            camera!!.unproject(touchPoint!!.set(Gdx.input.x.toFloat(), Gdx.input.y.toFloat(), 0f))

            replayButton!!.checkIfClicked(touchPoint!!.x, touchPoint!!.y)

        }

        // end draw

        batch.end()

    }


    // MARK: - Camera -

    override fun resize(width: Int, height: Int) {

        // aspect fill

        viewport!!.update(width, height, true)

        batch.projectionMatrix = camera!!.combined

    }

}
Michael N
  • 436
  • 5
  • 6