Search code examples
javajsonlibgdx

How to create Scene2d Label?


I am confused on how I am going to create a scene2d label becuase it takes a skin, what do I need a skin for? I only use them on buttons like this:

TextureAtlas btnAtlas = new TextureAtlas(Gdx.files.internal("myAtlas"));
Skin skin = new Skin(btnAtlas);
buttonStyle.up = skin.getDrawable("btnUP");

I'm confused because when I think of a label, I think of font and text not an atlas or skin. I saw some code online and they were using a .json file and not an .atlas file which confuses me more, how do I create a .json file that holds the font that I want to use? what is .json file? Also I'm using Libgdx framework and when I create an atlas file I just use LIbgdx texture packer to put together a group of texturs.


Solution

  • So let's start from the beginning:

    • Json files

      The JSON is a text format - an alternative for the XML. It looks like JavaScript's objects notation. JSONes are being used for transmitting data but also for serializing objects - LibGDX has a nice JSON support already.

      JSON is using {} and : signs and everything is being kept as text. Example:

      {
          "name" : "Mike",
          "city" : "London"
          "address" : {
              "road" : "Green",
              "number" : "5"
          }
      }
      

      It could be parsed to some Person class object or being accessed by using some keys (something like number = person[address][number] in pseudocode)

    • Font

      To define a font you will need .fnt file (generated with for example Hiero). Libgdx is using BitmapFonts - rendered fonts with codes (you can think about it as about textureatlases). There are some method to use directly font files like .ttf but generally it is not good idea if you do not have to

    • Skin

      Skin is an object that defines your Scene2D instances. You can describe by using Skin how your buttons will look or what background graphic will textButton have. You can create it directly (like you already do - by creating new Skin() instance and adding drawables, styles... to it) or by using JSON file that has all these information inside.

      The JSON file is being parsed to Skin and now you can use it. I can recommend this tutorial to get know how Skins work but in a nutshell the steps are:

      1. to create TextureAtlas (using TexturePacker of course) with all graphics that you Scene2D UI things will use

      2. to create proper JSON file with definitions (take a look at the tutorial)

      3. to name .atlas, .png and .skin files the same - so you will have something like: skin.atlas, skin.json, skin.png

      Notice that Skin JSON is not traditional JSON - it does not have " signs so you will have

      down: round-down, up: round,
      

      instead of

      "down": "round-down", "up": "round",
      

      Also round-down or round are names of your drawables in your atlas


    When you will have skin JSON you just creating it's instance and then creating Buttons, Label etc by providin skin instance and style name like

        Button b = new Button(skin, "registerButton");