We are now going to create the scene of the menu screen. The scene will feature a background image that fills the whole screen. There will be logos in the top-left and bottom-left corner of the screen and two clickable buttons anchored in the bottom-right corner that will trigger either a play or an options action. A gold coin and a huge image of the bunny head are also added to the scene.

The following is a screenshot of how the finished menu screen will look:

However, before we start to create this scene, we have to do some preparations in advance. First of all, we need to add new images to our project and also make a small change to the automatic texture packing process so that we have a texture atlas for our UI.

Add a new subfolder in CanyonBunny-desktop/assets-raw/ called images-ui and copy all the new images into this directory. After this, make the following change to Main.java:

if (rebuildAtlas) {
   Settings settings = new Settings();
   settings.maxWidth = 1024;
   settings.maxHeight = 1024;
   settings.debug = drawDebugOutline;
   TexturePacker.process(settings, "assets-raw/images",
          "../CanyonBunny-android/assets/images", "canyonbunny.pack");
   TexturePacker.process(settings, "assets-raw/images-ui",
          "../CanyonBunny-android/assets/images", "canyonbunny-ui.pack");
}

Gradle users must remember that your project folder is named android inside the project root C:/libgdx. Hence, here you should put the destination path ../android/assets/images in both the TexturePacker.process() functions.

The texture atlas for our UI will then be created in CanyonBunny-android/assets/images/ called canyonbunny-ui.

The resulting texture atlas for our UI should look like the following screenshot:

Next, we will create a suitable JSON file to define the skin of our menu widgets.

Create a new file in CanyonBunny-android/assets/images/ called canyonbunny-ui.json and add the following lines:

{
com.badlogic.gdx.scenes.scene2d.ui.Button$ButtonStyle: {
  play: { down: play-dn, up: play-up },
  options: { down: options-dn, up: options-up }
},
com.badlogic.gdx.scenes.scene2d.ui.Image: {
  background: { drawable: background },
  logo: { drawable: logo },
  info: { drawable: info },
  coins: { drawable: coins },
  bunny: { drawable: bunny },
},
}

<module>
...
<extend-configuration-property name="gdx.reflect.include"
            value="com.badlogic.gdx.scenes.scene2d.ui" />
<extend-configuration-property name="gdx.reflect.include"
             value="com.badlogic.gdx.utils" />
</module>

This definition file describes the type of widget to be used by specifying its completely qualified name. Inside the block of a widget definition, you can freely choose a name. Here we use play, options, background, and so on for our names. These names are then followed by a colon, which is in turn followed by a comma-separated list of attributes enclosed in curly brackets that correspond exactly to the field names of the widget's class. For example, the Image widget has a field called drawable. Some widgets have an inner class, which is denoted in the JSON file by appending a dollar sign followed by the name of the style class. These style classes contain widget-specific fields. We are using such a definition type for the Play and Options buttons. Both these buttons have a down and up image assigned in their Button widget.

Lastly, add the following lines of code to Constants to finish our preparations:

  public static final String TEXTURE_ATLAS_UI =
      "images/canyonbunny-ui.pack";
  public static final String TEXTURE_ATLAS_LIBGDX_UI =
      "images/uiskin.atlas";
  // Location of description file for skins
  public static final String SKIN_LIBGDX_UI =
      "images/uiskin.json";
  public static final String SKIN_CANYONBUNNY_UI =
      "images/canyonbunny-ui.json";

The uiskin.atlas and uiskin.json will be downloaded later in this chapter.