In this tutorial we will be extending the simple game “Drop”, made in the previous tutorial. We will be adding a menu screen and a couple of features to make this game a little more fully featured.

Let’s get started with an introduction to a few more advanced classes in libGDX.

The Screen interface

Screens are fundamental to any game with multiple components. Screens contain many of the methods you are used to from ApplicationListener objects, and include a couple of new methods: show and hide, which are called when the Screen gains or loses focus, respectively. Screens are responsible for handling (i.e., processing and rendering) one aspect of your game: a menu screen, a settings screen, a game screen, etc.

The Game Class

The Game class is responsible for handling multiple screens and provides some helper methods for this purpose, alongside an implementation of ApplicationListener for you to use. Together, Screen and Game objects are used to create a simple and powerful structure for games.

We will start with creating a Game object, whose create() method will be the entry point to our game. Let’s take a look at some code:

  1. package com.badlogic.drop;
  3. import com.badlogic.gdx.Game;
  4. import com.badlogic.gdx.graphics.g2d.BitmapFont;
  5. import com.badlogic.gdx.graphics.g2d.SpriteBatch;
  8. public class Drop extends Game {
  10.     public SpriteBatch batch;
  11.     public BitmapFont font;
  13.     public void create() {
  14.         batch = new SpriteBatch();
  15.         font = new BitmapFont(); // use libGDX's default Arial font
  16.         this.setScreen(new MainMenuScreen(this));
  17.     }
  19.     public void render() {
  20.         super.render(); // important!
  21.     }
  23.     public void dispose() {
  24.         batch.dispose();
  25.         font.dispose();
  26.     }
  28. }

We start the application with instantiating a SpriteBatch and a BitmapFont. It is a bad practice to create multiple objects that can be shared instead (see DRY). The SpriteBatch object is used to render objects onto the screen, such as textures; and the BitmapFont object is used, along with a SpriteBatch, to render text onto the screen. We will touch more on this in the Screen classes.

Next, we set the Screen of the Game to a MainMenuScreen object, with a Drop instance as its first and only parameter.

A common mistake is to forget to call super.render() with a Game implementation. Without this call, the Screen that you set in the create() method will not be rendered if you override the render method in your Game class!

Finally, another reminder to dispose of your (heavy) objects! Some further reading on this can be found here.

The Main Menu

Now, let’s get into the nitty-gritty of the MainMenuScreen class.

  1. package com.badlogic.drop;
  3. import com.badlogic.gdx.Gdx;
  4. import com.badlogic.gdx.Screen;
  5. import com.badlogic.gdx.graphics.OrthographicCamera;
  7. public class MainMenuScreen implements Screen {
  9.     final Drop game;
  11.     OrthographicCamera camera;
  13.     public MainMenuScreen(final Drop game) {
  14.         this.game = game;
  16.         camera = new OrthographicCamera();
  17.         camera.setToOrtho(false, 800, 480);
  18.     }
  21.         //...Rest of class omitted for succinctness.
  23. }

In this code snippet, we make the constructor for the MainMenuScreen class, which implements the Screen interface. The Screen interface does not provide any sort of create() method, so we instead use a constructor. The only parameter for the constructor necessary for this game is an instance of Drop, so that we can call upon its methods and fields if necessary.

Next, the final “meaty” method in the MainMenuScreen class: render(float)

  1. public class MainMenuScreen implements Screen {
  3.         //public MainMenuScreen(final Drop game)....        
  5.     @Override
  6.     public void render(float delta) {
  7.         ScreenUtils.clear(0, 0, 0.2f, 1);
  9.         camera.update();
  10.         game.batch.setProjectionMatrix(camera.combined);
  12.         game.batch.begin();
  13.         game.font.draw(game.batch, "Welcome to Drop!!! ", 100, 150);
  14.         game.font.draw(game.batch, "Tap anywhere to begin!", 100, 100);
  15.         game.batch.end();
  17.         if (Gdx.input.isTouched()) {
  18.             game.setScreen(new GameScreen(game));
  19.             dispose();
  20.         }
  21.     }
  23.         // Rest of class still omitted...
  25. }

The code here is fairly straightforward, except for the fact that we need to call game’s SpriteBatch and BitmapFont instances instead of creating our own. game.font.draw(SpriteBatch, String, float, float), is how text is rendered to the screen. libGDX comes with a pre-made font, Arial, so that you can use the default constructor and still get a font.

We then check to see if the screen has been touched, if it has, then we check to set the games screen to a GameScreen instance, and then dispose of the current instance of MainMenuScreen. The rest of the methods that are needed to implement in the MainMenuScreen are left empty, so I’ll continue to omit them (there is nothing to dispose of in this class).

The Game Screen

Now that we have our main menu finished, it’s time to finally get to making our game. We will be lifting most of the code from the original game as to avoid redundancy, and avoid having to think of a different game idea to implement as simply as Drop is.

  1. package com.badlogic.drop;
  3. import java.util.Iterator;
  5. import com.badlogic.gdx.Gdx;
  6. import com.badlogic.gdx.Input.Keys;
  7. import com.badlogic.gdx.Screen;
  8. import com.badlogic.gdx.audio.Music;
  9. import com.badlogic.gdx.audio.Sound;
  10. import com.badlogic.gdx.graphics.OrthographicCamera;
  11. import com.badlogic.gdx.graphics.Texture;
  12. import com.badlogic.gdx.math.MathUtils;
  13. import com.badlogic.gdx.math.Rectangle;
  14. import com.badlogic.gdx.math.Vector3;
  15. import com.badlogic.gdx.utils.Array;
  16. import com.badlogic.gdx.utils.ScreenUtils;
  17. import com.badlogic.gdx.utils.TimeUtils;
  19. public class GameScreen implements Screen {
  20.     final Drop game;
  22.     Texture dropImage;
  23.     Texture bucketImage;
  24.     Sound dropSound;
  25.     Music rainMusic;
  26.     OrthographicCamera camera;
  27.     Rectangle bucket;
  28.     Array<Rectangle> raindrops;
  29.     long lastDropTime;
  30.     int dropsGathered;
  32.     public GameScreen(final Drop game) {
  33.         this.game = game;
  35.         // load the images for the droplet and the bucket, 64x64 pixels each
  36.         dropImage = new Texture(Gdx.files.internal("droplet.png"));
  37.         bucketImage = new Texture(Gdx.files.internal("bucket.png"));
  39.         // load the drop sound effect and the rain background "music"
  40.         dropSound = Gdx.audio.newSound(Gdx.files.internal("drop.wav"));
  41.         rainMusic = Gdx.audio.newMusic(Gdx.files.internal("rain.mp3"));
  42.         rainMusic.setLooping(true);
  44.         // create the camera and the SpriteBatch
  45.         camera = new OrthographicCamera();
  46.         camera.setToOrtho(false, 800, 480);
  48.         // create a Rectangle to logically represent the bucket
  49.         bucket = new Rectangle();
  50.         bucket.x = 800 / 2 - 64 / 2; // center the bucket horizontally
  51.         bucket.y = 20; // bottom left corner of the bucket is 20 pixels above
  52.                         // the bottom screen edge
  53.         bucket.width = 64;
  54.         bucket.height = 64;
  56.         // create the raindrops array and spawn the first raindrop
  57.         raindrops = new Array<Rectangle>();
  58.         spawnRaindrop();
  60.     }
  62.     private void spawnRaindrop() {
  63.         Rectangle raindrop = new Rectangle();
  64.         raindrop.x = MathUtils.random(0, 800 - 64);
  65.         raindrop.y = 480;
  66.         raindrop.width = 64;
  67.         raindrop.height = 64;
  68.         raindrops.add(raindrop);
  69.         lastDropTime = TimeUtils.nanoTime();
  70.     }
  72.     @Override
  73.     public void render(float delta) {
  74.         // clear the screen with a dark blue color. The
  75.         // arguments to clear are the red, green
  76.         // blue and alpha component in the range [0,1]
  77.         // of the color to be used to clear the screen.
  78.         ScreenUtils.clear(0, 0, 0.2f, 1);
  80.         // tell the camera to update its matrices.
  81.         camera.update();
  83.         // tell the SpriteBatch to render in the
  84.         // coordinate system specified by the camera.
  85.         game.batch.setProjectionMatrix(camera.combined);
  87.         // begin a new batch and draw the bucket and
  88.         // all drops
  89.         game.batch.begin();
  90.         game.font.draw(game.batch, "Drops Collected: " + dropsGathered, 0, 480);
  91.         game.batch.draw(bucketImage, bucket.x, bucket.y, bucket.width, bucket.height);
  92.         for (Rectangle raindrop : raindrops) {
  93.             game.batch.draw(dropImage, raindrop.x, raindrop.y);
  94.         }
  95.         game.batch.end();
  97.         // process user input
  98.         if (Gdx.input.isTouched()) {
  99.             Vector3 touchPos = new Vector3();
  100.             touchPos.set(Gdx.input.getX(), Gdx.input.getY(), 0);
  101.             camera.unproject(touchPos);
  102.             bucket.x = touchPos.x - 64 / 2;
  103.         }
  104.         if (Gdx.input.isKeyPressed(Keys.LEFT))
  105.             bucket.x -= 200 * Gdx.graphics.getDeltaTime();
  106.         if (Gdx.input.isKeyPressed(Keys.RIGHT))
  107.             bucket.x += 200 * Gdx.graphics.getDeltaTime();
  109.         // make sure the bucket stays within the screen bounds
  110.         if (bucket.x < 0)
  111.             bucket.x = 0;
  112.         if (bucket.x > 800 - 64)
  113.             bucket.x = 800 - 64;
  115.         // check if we need to create a new raindrop
  116.         if (TimeUtils.nanoTime() - lastDropTime > 1000000000)
  117.             spawnRaindrop();
  119.         // move the raindrops, remove any that are beneath the bottom edge of
  120.         // the screen or that hit the bucket. In the later case we increase the
  121.         // value our drops counter and add a sound effect.
  122.         Iterator<Rectangle> iter = raindrops.iterator();
  123.         while (iter.hasNext()) {
  124.             Rectangle raindrop = iter.next();
  125.             raindrop.y -= 200 * Gdx.graphics.getDeltaTime();
  126.             if (raindrop.y + 64 < 0)
  127.                 iter.remove();
  128.             if (raindrop.overlaps(bucket)) {
  129.                 dropsGathered++;
  130.                 dropSound.play();
  131.                 iter.remove();
  132.             }
  133.         }
  134.     }
  136.     @Override
  137.     public void resize(int width, int height) {
  138.     }
  140.     @Override
  141.     public void show() {
  142.         // start the playback of the background music
  143.         // when the screen is shown
  144.         rainMusic.play();
  145.     }
  147.     @Override
  148.     public void hide() {
  149.     }
  151.     @Override
  152.     public void pause() {
  153.     }
  155.     @Override
  156.     public void resume() {
  157.     }
  159.     @Override
  160.     public void dispose() {
  161.         dropImage.dispose();
  162.         bucketImage.dispose();
  163.         dropSound.dispose();
  164.         rainMusic.dispose();
  165.     }
  167. }

This code is almost 95% the same as the original implementation, except now we use a constructor instead of the create() method of the ApplicationListener, and pass in a Drop object, like in the MainMenuScreen class. We also start playing the music as soon as the Screen is set to GameScreen. Moreover, we added a string to the top left corner of the game, which tracks the number of raindrops collected.

Note that the dispose() method of the GameScreen class is not called automatically, see the Screen API. It is your responsibility to take care of that. You can call this method from the dispose() method of the Game class, if the GameScreen class passes a reference to itself to the Game class. It is important to do this, else GameScreen assets might persist and occupy memory even after exiting the application.

And that’s it, you have the complete game finished. That is all there is to know about the Screen interface and abstract Game Class, and all there is to creating multifaceted games with multiple states. The full Java code can be found here. If you are developing in Kotlin, take a look here for the full code.

The Future

After this tutorial you should have a basic understanding how libGDX works and what to expect going forward. Some things can still be improved, like using the Memory Management classes to recycle all the Rectangles we have the garbage collector clean up each time we delete a raindrop. OpenGL is also not too fond if we hand it too many different images in a batch (in our case it’s OK as we only had two images). Usually one would put all those images into a single Texture, also known as a TextureAtlas. In addition, taking a look at Viewports will most certainly prove useful. Viewports help dealing with different screen sizes/resolutions and decide, whether the screen’s content needs to be stretched/should keep its aspect ratio, etc.

To continue learning about libGDX we highly recommend reading our wiki and checking out the demos and tests in our main GitHub repository. If you have any questions, join our official Discord server, we are always glad to help!

The best practice is to get out there and do it, so farewell and happy coding!