Sunday, March 4, 2018

Developing a Mobile Platformer Game with LibGdx

Introduction

This post is about developing a mobile platformer game using LibGdx framework. It is meant to be a tutorial to put pieces together to construct a mobile platformer game. It also consists of some solutions I have come up with while designing a platformer game Eddie the Fox. You can check it out below.



The main topics covered in this tutorial will be:
  • Creating a game play screen
  • Constructing a game loop to manage the game play
  • Detecting collisions between objects
  • Things to do with detected collisions including character attacks and collecting items
  • Implementing melee attacks and projectile attacks for a character
  • Adding simple AI to NPCs
  • And finally defining a set of rules for our game such as character health, collectible items, success and failure conditions
Game Loop

When you create a libGDX project, then compile and run it, you see just a static sprite being drawn on the screen but what happens behind the scenes is a draw call at each frame (60 frames per second). So you have a game loop running indefinitely, until you close the application. Basically a game loop is where you manage the "world" and the objects inside it. To explain that with an example; in a 2D platformer game you control the player to collect items, defend yourself against enemies (usually by attacking them), etc. Here the player which you control, the items you collect and the enemies are all objects inside the world. And the world is the level which has boundaries. Everything happens in a time line. Simply inside the game loop all objects' states are managed along the time line.

Here are the classes constructing the game loop :

Game Loop class design

To explain this further we have a MyGame class extending from the Game class in LibGDX framework. AssetsManager is the class we will use to get our game assets (graphics, sound files, etc.), so we call a static method prepare() here once to load our assets. To kick start our game loop we call the setScreen() method inside MyGame class with a GamePlayScreen instance. Behind the scenes Libgdx framework calls the render() method of GamePlayScreen so the game loop is actually formed. To make use of this loop we have two classes GameWorld which manages the world objects and GameRenderer which is responsible for drawing on the screen. This is done via update() and render() methods respectively.

Implementation

Here is the game loop implementation. The result will be a red box representing the player controlled by left, right and up arrows. For now the player can jump and walk between the borders of the background picture. First see the class hierarchy below.














And here is the background image asset used. Copy this file into {ProjectFolder}\tutorial\android\assets folder and compile and run the project and you have a controllable character in a bounded environment.


That's it for the first part of the tutorial. Stay tuned for the next part in which we will go into character collisions and creating our first enemy.

No comments:

Post a Comment