Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
8. September 2014

 

The following is a guest tutorial by Avetis showing how to use LibGDX and Overlap2D to create an Angry Birds like game.  Overlap2D is a level and UI editor handy for separating game coding from content creation.  Keep in mind, Overlap2D is fairly young, currently at 0.0.4 version. Now, on with the tutorial!

 



Making Flappy Bird with Overlap2D – Overlappy Tutorial

 

 

Agenda


In this tutorial we are going to create a FlappyBird clone game (for learning purposes only) using Java, LibGDX framework and accelerate it all by moving our UI, Level, and Asset management into Overlap2D Editor. One thing I figured while coding is that you can’t make a quick tutorial about a flappy bird clone, ever. It’s going to be long if we want details. It is easier though to use the explain approach instead of step by step guide.  So I am going to share all the sources and resources, and then go with you through setting this all up, show how things work, and hopefully this all will make sense.

 

Prerequisites


Java knowledge, basic LibGDX experience, computer, time. Make sure you use latest Overlap2D editor and runtimes (v 0.0.4 or higher)

Get latest LibGDX project setup here: http://bitly.com/1i3C7i3 ( Details here )
Get latest Overlap2D editor here: http://overlap2d.com

 

First - Get Game Assets (Resources)


First let’s download the assets. I made a small pack of images I found on the internet with Flappy Bird images, animations and font. You can get it here: http://overlap2d.com/?p=236

 

 

Setting up Your Overlap2D Project

 

Unzip your Overlap2D zip file, and run the Overlap2D.jar.


First things first, you are currently viewing demo project, so go to File and Create New Project. Call it OverlappyBird and then create the scene size, let it be 480 width, 800 in height. It’s a standard small mobile device resolution, and since Flappy Bird is a portrait game, it should be just right. Click Create Project.
You have now created an empty project and it’s ready for setup, now you need to import the assets. Here we have 3 types of assets, first is just image textures, and second is a sprite animation for bird itself, and lastly the TTF font for score label. I have separated them in folders so you can import easily. Click on File, import to library.


First click on “…” button near the import images text field to select your images; locate them, select all. When done click on import and they all will get imported to your assets area on the right middle panel. Then open same the dialog again, and this time find Import Sprite Animations (note: not spine, but sprite) Click on “…” button there and locate bird.atlas file. Click Import, and it will get added to your assets list as well.


Lastly open import dialog again, and import font, by locating ttf file.


Your project setup is ready.

 

Making The Main Scene

 

First let’s see how main scene looks in Overlap2D when it is finished:

 

image


 
I decided to make several layers to have things organized, bg layer for background image that is not moving, default layer for pipes and bird itself, ground layer for moving the ground that is covering pipes, ui layer for “get ready” popups and score labels, and finally dlg layer for end game dialog. The reason I am not putting dialog inside ui layer is that I can position it in its layer correctly, and later hide that layer so it will not intervene with my work.  So, go ahead and create this layers in the order I described from bottom to top. (bg layer goes below them all, and you can rearrange them by drag-and-dropping)


I also recommend you to open my example project (provided with resources). Open it with Overlap2D and see how things are positioned and grouped. (To open a project, click file, open, and then locate .pit file inside project.)


Compose your own project like I did,. Put background on bg layer, and add bird on default layer. Make sure it looks like the picture above.


The ground is going to be a moving part, so we need to have 2 of this near each other for seamless movement. Put two grounds near each other and then group them into composites, like on this picture, do not forget to give identifier to it for later use.


image

 

For the pipes we are going to do the following trick. First of all we are going to put pipes on top of each other with a gap, and convert them into composite, and then add to library to have kind of a prefab for a pipe column. Later in code we are going to pre-load 3 of this because there is never more than 3 columns of pipes visible on screen, so we can re-use the ones that are left of the screen for next pipe iteration.


image


Now some of the pipes are going to vary in position on Y axis. So there are a minimum and maximum values that it should not be below or above. To avoid having this values in code, I just put 2 of pipe columns on screen: one at the lowest point and the other at the highest, and give them identifiers in order to read those values from code later.

 

image

 

Next click on bird in properties box and add 2 custom variables, by clicking on custom variables button. First is jump_speed=400, and second is gravity=1000 (so you can later tweak game from editor not from code)


image

 

Next up, put a “hint” and “get ready” assets convert them into composite as they always go together and give them id to hide show from game. They should go to ui layer.

 

Making Menu Scene

 

This one is easier: click on File, Scenes, Create New Scene, and choose MenuScene as name.


Make sure to put up all things just like on this picture. And note that you should make a composite for ground agai n (as we do not yet share prefabs between the scenes).


Put a Play button as image and give it an id to add listeners later in your code.


Here is how it should look:

 

image

 

Overlap2D Part DONE!


Looks pretty good! Both scenes are set up and ready for some coding. Most importantly your scene and UI are very flexible and code-independent.

 

 

 

Setting up LibGDX Project and Getting Ready to Code:

 

Download the LibGDX setup application and setup an empty project (make sure to have checked box2d and freetype fonts), import it to your eclipse or other IDE, run the desktop app to make sure it works, then strip it from LibGDX picture  and make it just a black screen.


Make sure your desktop launcher has code to specify screen size of 480x800 (config variables in launcher).


We are going to render everything using a simple LibGDX Stage, so the code structure will be the following: GameStage extending Stage that will load all the Overlap2D data and display it; Main class that will be rendering GameStage in its render method.


For all the rest we are going to use iScript functionality of Overlap2D. Let me go a bit in depth for that. Overlap2D runtime provides an interface that you can implement to create a “brain” of any composite item. Basically it is your way of attaching logic to an object. In this example we are going to create 3 iScripts, one is going to get attached to entire mainScreen and be a GameScreenScript with all game logic, other will be MenuScreenScript for menu, and the last one will be BirdScript that we will attach to the bird. It is important to mention that you cannot attach script to an image, or sprite animation, so I have converted bird animation to composite item in order to do it (right click, convert into composite).

 

You can find the full project on my github:  https://github.com/azakhary/OverlappyBird

Here are the well commented sources:

 

OverlappyBird.java

package com.underwater.demo.overflappy;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;

/*
 * This is our ApplicationListener the main thing that things start in libGDX
 */
public class OverflappyBird extends ApplicationAdapter {
   
   /*
    * GameStage will be holding both menu and main game
    */
   private GameStage stage;
   
   @Override
   public void create () {
      stage = new GameStage();
   }

   @Override
   public void render () {
      // Clearing the screen before each render
      Gdx.gl.glClearColor(0, 0, 0, 1);
      Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
      
      // calling stage act method and passing delta time passed since last call
      stage.act(Gdx.graphics.getDeltaTime());
      // drawing all actors
      stage.draw();
      
   }
}

GameStage.java

package com.underwater.demo.overflappy;

import java.io.File;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.uwsoft.editor.renderer.DefaultAssetManager;
import com.uwsoft.editor.renderer.SceneLoader;

/*
 * GameStage 
 */
public class GameStage extends Stage {
   
   // Speed of pixels per second of how fast things move left (required both for 
                                                               menu and the game,
                                                               thus put here)
   public float gameSpeed = 200;

   // Overlap2D  provides this easy asset manager that loads things as they are 
   provided by default when exporting from overlap
   private DefaultAssetManager assetManager;
   
   public GameStage() {
      super();
      
      // Set this is input processor so all actors would be able to listen to 
      touch events
      Gdx.input.setInputProcessor(this);
      
      // Initializing asset manager
      assetManager = new DefaultAssetManager();
      
      // providing the list of sprite animations which is one in this case, to 
      avoid directory listing coding
      assetManager.spriteAnimationNames = new String[1]; assetManager.
                                          spriteAnimationNames[0] = "bird";
      
      // loading assets into memory
      assetManager.loadData();
      
      // Menu goes first
      initMenu();
   }
   
   public void initMenu() {
      clear();
      
      // Creating Scene loader which can load an Overlap2D scene
      SceneLoader menuLoader = new SceneLoader(assetManager);
      
      // loading MenuScene.dt from assets folder
      menuLoader.loadScene(Gdx.files.internal("scenes" + File.separator + 
                           "MenuScene.dt"));
      
      // Initializing iScript MenuSceneScript that will be holding all menu 
      logic, and passing this stage for later use
      MenuScreenScript menuScript = new MenuScreenScript(this);
      
      // adding this script to the root scene of menu which is hold in 
      menuLoader.sceneActor
      menuLoader.sceneActor.addScript(menuScript);
      
      // Adding root actor to stage
      addActor(menuLoader.sceneActor);
      
      
   }
   
   public void initGame() {
      clear();
      
      // Creating Scene loader which can load an Overlap2D scene
      SceneLoader mainLoader = new SceneLoader(assetManager);
      
      // loading MainScene.dt from assets folder
      mainLoader.loadScene(Gdx.files.internal("scenes" + File.separator + 
                           "MainScene.dt"));
      
      // Initializing iScript GameSceneScript that will be holding all game, and 
      passing this stage for later use
      GameScreenScript gameScript = new GameScreenScript(this, mainLoader);
      
      // adding this script to the root scene of game which is hold in 
      mainLoader.sceneActor
      mainLoader.sceneActor.addScript(gameScript);
      
      // Adding root actor to stage
      addActor(mainLoader.sceneActor);
   }

}

GameScreenScript.java

package com.underwater.demo.overflappy;

import java.util.ArrayList;

import com.badlogic.gdx.math.MathUtils;
import com.badlogic.gdx.math.Vector2;
import com.badlogic.gdx.scenes.scene2d.InputEvent;
import com.badlogic.gdx.scenes.scene2d.Touchable;
import com.badlogic.gdx.scenes.scene2d.actions.Actions;
import com.badlogic.gdx.scenes.scene2d.actions.AddAction;
import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;
import com.uwsoft.editor.renderer.SceneLoader;
import com.uwsoft.editor.renderer.actor.CompositeItem;
import com.uwsoft.editor.renderer.actor.LabelItem;
import com.uwsoft.editor.renderer.script.IScript;

/*
 * iScript for entire game logic
 */
public class GameScreenScript implements IScript {
   
   /*
    * reference to GameStage
    */
   private GameStage stage;
   
   /*
    * Main actor that holds root of game screen
    */
   private CompositeItem game;
   
   // Screen loader reference to be later used to retrieve prefabs from library
   private SceneLoader loader;
   
   // Game over Dialog actor
   private CompositeItem gameOverDlg;
   
   /*
    * this will be holding 2-ground system composite item 
    */
   private CompositeItem groundRotator;
   
   /*
    * Instead of holding bird actor we are going to hold birdscript that will 
    provide all bird logic and methods.
    * Also it will have bird actor inside
    */
   private BirdScript bird;
   
   // Hint Box actor the one that shown in begining of game
   private CompositeItem hintBox;
   
   // some helping booleans
   private boolean gameStarted = false;
   private boolean groundStop = false;
   
   // going to hold what is the possible low and high position for a pipe column
   private float minPipe;
   private float maxPipe;
   
   private int gameScore = 0;
   private LabelItem scoreLbl;
   
   // Going to hold 3 pipes here to reuse as pipe pool
   private ArrayList<CompositeItem> pipes = new ArrayList<CompositeItem>();
   
   public GameScreenScript(GameStage stage, SceneLoader loader) {
      this.stage = stage;
      this.loader = loader;
   }
   
   @Override
   public void init(CompositeItem gameItem) {
      game = gameItem;
      
      gameScore = 0;
      
      // Creating and holding BirdScript that will hold entire bird logic.
      bird = new BirdScript(stage);
      game.getCompositeById("bird").addScript(bird);
      
      groundRotator = game.getCompositeById("groundRotator");
      hintBox = game.getCompositeById("hintBox");
      scoreLbl = game.getLabelById("scoreLbl");
      
      // Adding listeners to listen for taps to make bird jump
      game.addListener(new ClickListener() {
         public boolean touchDown (InputEvent event, float x, float y, int 
                                   pointer, int button) {
            return true;
         }
         public void touchUp (InputEvent event, float x, float y, int pointer, 
                              int button) {
            // screen tap was done
            screenTap();
         }
      });
      
      // Loading min/max positions from level editor
      minPipe = game.getCompositeById("minPipe").getY();
      maxPipe = game.getCompositeById("maxPipe").getY();

      // Retrieving 3 pipe columns from library putting them into array,
      // and adding on screen in minus coordinates so the will becom "availible"
      for(int i = 0;  i < 3; i++) {
         CompositeItem pipe = loader.getLibraryAsActor("pipeGroup");             
         pipe.setX(-pipe.getWidth());        
         game.addItem(pipe);
         
         pipes.add(pipe);
      }
      
      
      // Making sure first pipe will be added not sooner then 3 seconds from now
      game.addAction(Actions.sequence(Actions.delay(3.0f), Actions.run(new 
                     Runnable() {
         
         @Override
         public void run() {
            putPipe();
         }
      })));
      
      // hiding game over dialog
      gameOverDlg = game.getCompositeById("gameOverDlg");
      // it should not listen for taps
      gameOverDlg.setTouchable(Touchable.disabled);
      gameOverDlg.setVisible(false);
   }

   @Override
   public void act(float delta) {
      
      // if game is not yet started or started (but most importantly not ended, 
                                                ground is moving) 
      if(!groundStop) {
         groundRotator.setX(groundRotator.getX() - delta * stage.gameSpeed);     
         if(groundRotator.getX() < -groundRotator.getWidth()/2) groundRotator.
            setX(0);
      }
      
      // if game is started, so first tap fone, then we dhould check for 
      collisions and move pipes
      if(gameStarted) {
         for(int i = 0; i < pipes.size(); i++) {
            // get pipe
            CompositeItem pipe = pipes.get(i);
            
            // move it if it has positive coordinate
            if(pipe.getX() > -pipe.getWidth()) {
               // if pipe was right of thebird, and will now become left of the 
               bird, add to score
               if(pipe.getX() >= bird.getBirdCenter().x && pipe.getX() - delta * 
                  stage.gameSpeed < bird.getBirdCenter().x) {
                  gameScore++;
               }
               pipe.setX(pipe.getX() - delta * stage.gameSpeed);
            }
            
            //check for collision with bird
            collisionCheck();
         }
      }
      
      // update scorel label
      scoreLbl.setText(gameScore+"");
   }
   
   /*
    * Check for bird versus pipe row collision
    */
   private void collisionCheck() {
      // iterate through all 3 pipes
      for(int i = 0; i < pipes.size(); i++) {
         CompositeItem pipe = pipes.get(i);
         
         // to make it easy going to think about bird as circle with 5 radius 
         Vector2 birdPoint = bird.getBirdCenter();
         
         // Is there collision? if yes stop the game and allow bird to fall
         if(birdPoint.x+5 > pipe.getX() && birdPoint.x - 5 < pipe.getX() + pipe.
            getWidth() && (pipe.getY() + 532 > birdPoint.y - 5 || pipe.getY()+
            701 < birdPoint.y + 5)) {
            stopGame(); 
         }
         
         // Did bird hit the ground? not only stop the game but also 
         // disable gravity to keep from further falling, and consider bird dead 
         ( animations stop )
         if(birdPoint.y-5 < groundRotator.getY()+groundRotator.getHeight()) {
            if(!groundStop) {
               stopGame();
            }
            bird.disableGravity();
            bird.getBird().setY(groundRotator.getY()+groundRotator.getHeight()+5)
                         ;
            // killitwithfire
            bird.die();
         }
      }
   }
   
   /*
    * Stops the game
    */
   private void stopGame() {
      gameStarted = false;
      groundStop = true;
      game.clearActions();
      
      // show end game dialog
      showEndDialog();
   }
   
   /*
    * showing end game dialog
    */
   public void showEndDialog() {
      // enabling touch back, showing
      gameOverDlg.setTouchable(Touchable.enabled);
      gameOverDlg.setVisible(true);
      // setting transparency to full
      gameOverDlg.getColor().a = 0;
      // and fading it in
      gameOverDlg.addAction(Actions.fadeIn(0.4f));
      
      // setting play button listener to replay the game
      gameOverDlg.getImageById("playBtn").addListener(new ClickListener() {
         public boolean touchDown (InputEvent event, float x, float y, int 
                                   pointer, int button) {
            return true;
         }
         public void touchUp (InputEvent event, float x, float y, int pointer, 
                              int button) {
            stage.initGame();
         }
      });
   }
   
   /*
    * Called when screen is tapped
    */
   private void screenTap() {
      // if ground is not moving then bird is dead no actin required on tapp
      if(groundStop) return;
      
      // if game started just jump the bird
      if(gameStarted) {
         bird.jump();
      } else {
         // if game is not yet started, start the game and jump the bird
         gameStarted = true;
         hintBox.addAction(Actions.fadeOut(0.3f));
         // and also enable gravity from now on
         bird.enableGravity();
         bird.jump();
      }
   }
   
   /*
    * get's availible pipe
    * availible pipe is any pipe that is left of screen and not visible
    */
   public CompositeItem getAvailablePipe() {
      for(int i = 0; i < pipes.size(); i++) {
         if(pipes.get(i).getX() <= -pipes.get(i).getWidth()) {
            return pipes.get(i);
         }
      }
      
      return null;
   }
   
   /*
    * this is called every X time to put a new pipe on the right
    */
   public void putPipe() { 
      // getting availible pipe
      CompositeItem pipe = getAvailablePipe();
      
      // when you die at bad moment, it can be null sometimes
      if(pipe == null) return;
      
      // put pipe column on the random hight from min to max range
      pipe.setX(stage.getWidth());
      pipe.setY(MathUtils.random(minPipe, maxPipe));
      
      // schedule next pipe to be put in 1.3 seconds
      game.addAction(Actions.sequence(Actions.delay(1.3f), Actions.run(new 
                     Runnable() {
         
         @Override
         public void run() {
            // call itself
            putPipe();
         }
      })));
   }

}

 

MenuScreenScript.java

 

package com.underwater.demo.overflappy;

import com.badlogic.gdx.math.MathUtils;
import com.badlogic.gdx.scenes.scene2d.InputEvent;
import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;
import com.uwsoft.editor.renderer.actor.CompositeItem;
import com.uwsoft.editor.renderer.actor.ImageItem;
import com.uwsoft.editor.renderer.actor.SpriteAnimation;
import com.uwsoft.editor.renderer.script.IScript;

/*
 * iScript for menu logic
 */
public class MenuScreenScript implements IScript {
   
   /*
    * reference to GameStage
    */
   private GameStage stage;
   
   /*
    * this is the main root menu actor to work with
    */
   private CompositeItem menu;
   
   /*
    * this will be holding 2-ground system composite item 
    */
   private CompositeItem groundRotator;
   
   /*
    * this will be the bird sprite animation displayed in center of screen
    */
   private SpriteAnimation bird;
   
   // this variables are used to wiggle bird up and down with sin function
   private float iterator = 0;
   private float birdInitialPos;
   
   public MenuScreenScript(GameStage stage) {
      this.stage = stage;
   }

   public void init(CompositeItem menuItem) {
      menu = menuItem;
      
      // Finding playButton by id and storing in variable
      ImageItem playBtn = menuItem.getImageById("playBtn");
      
      // Finding ground composite and storing in variable 
      groundRotator = menuItem.getCompositeById("groundRotator");
      
      // Finding bird and storing in variable
      bird = menuItem.getSpriteAnimationById("bird");
      
      // let's remember where bird was initially
      birdInitialPos = bird.getY();
      
      // Adding a Click listener to playButton so we can start game when clicked
      playBtn.addListener(new ClickListener() {
         // Need to keep touch down in order for touch up to work normal (libGDX 
                                                                          awkward
                                                                          ness)
         public boolean touchDown (InputEvent event, float x, float y, int 
                                   pointer, int button) {
            return true;
         }
         public void touchUp (InputEvent event, float x, float y, int pointer, 
                              int button) {
            // when finger is up, ask stage to load the game
            stage.initGame();
         }
      });
   }
   
   /*
    * This is called every frame
    */
   public void act(float delta) {
      // moving ground left with game speed multiplied by delta as delta shows 
      what part of second was passed since last call
      groundRotator.setX(groundRotator.getX() - delta * stage.gameSpeed);     
      
      // if ground rotator got half way left, we can just put it back to 0, and 
      to eye it will look like it endlessly moves
      if(groundRotator.getX() < -groundRotator.getWidth()/2) groundRotator.setX(
         0);
      
      // Now this part is to wiggle bird up and down, we are going change 
      iterator based on time passed
      iterator += delta*400;
      
      // Then figure out the bird offset from it's original position based on 
      iterator which is based on time passed, and do it with sinus function
      float birdOffset = MathUtils.sinDeg(iterator)*5;
      
      // put bird on it's original pos + offset
      bird.setY(birdInitialPos + birdOffset); 
   }
   
}

 

BirdScript.java

 

package com.underwater.demo.overflappy;

import com.badlogic.gdx.math.MathUtils;
import com.badlogic.gdx.math.Vector2;
import com.uwsoft.editor.renderer.actor.CompositeItem;
import com.uwsoft.editor.renderer.actor.SpriteAnimation;
import com.uwsoft.editor.renderer.script.IScript;

/**
 * Bird Script
 * @author azakhary
 * This is brain of the bird, it's physics and everything
 */
public class BirdScript implements IScript {

   /*
    * reference to GameStage
    */
   private GameStage stage;
   
   // Bird composite item actor
   private CompositeItem bird;
   
   // Inside bird composite actor there is the bird sprite animation actor
   private SpriteAnimation birdAnimation;
   
   // used to wiggle the bird in the air using Sine function
   private float iterator = 0;
   
   // current vertical velocity of the bird
   private float currVerticalVelocity = 0;
   
   // boolean to know if gravity is enabled or not
   private boolean isGravityEnabled = false;
   
   // to avoid jumping to rotation bird will try to always rotate a bit towards 
   desired rotation
   private float desiredRotation;
   
   // is it alive?
   private boolean isAlive = true;
   
   
   public BirdScript(GameStage stage) {
      this.stage = stage;
   }
   
   @Override
   public void init(CompositeItem item) {
      bird = item;
      
      // find animation from the composite
      birdAnimation = bird.getSpriteAnimationById("birdAnimation");
      
      // set origin of the bird in it's center, so it will rotate normally
      bird.setOrigin(bird.getWidth()/2, bird.getHeight()/2);
      
      // set desired rotation to current rotation which is 0
      desiredRotation = bird.getRotation();
   }

   @Override
   public void act(float delta) {
      
      if(!isGravityEnabled && isAlive) {
         // Wiggling when no gravity only
         iterator += delta*400;
         float birdOffset = MathUtils.sinDeg(iterator)*5;
         birdAnimation.setY(birdOffset);
      }
      
      // aplying gravity every frame
      gravity(delta);
      
      // moving to new position based on current vertical velocity
      bird.setY(bird.getY() + delta*currVerticalVelocity);
      
      // manage bird rotation based on it's vertical speed
      manageRotation(delta);
      
   }
   
   /*
    * manage bird rotation based on it's vertical speed
    * this is a part of code that is not interesting boring and whatever..
    */
   private void manageRotation(float delta) {
      if(isGravityEnabled) {
         if(currVerticalVelocity > -200) {
            float rotation = currVerticalVelocity+200;
            desiredRotation = rotation/15f;
         }
         if(currVerticalVelocity <= -200) {
            float rotation = currVerticalVelocity+200;
            if(rotation < -400) rotation = -400;
            desiredRotation = rotation/4.4f;
         }
         
         if(desiredRotation != bird.getRotation()) {
            if(desiredRotation > bird.getRotation()) {
               bird.setRotation(bird.getRotation() + 900*delta);
               if(desiredRotation < bird.getRotation()) bird.setRotation(
                  desiredRotation);
            }
            if(desiredRotation < bird.getRotation()) {
               bird.setRotation(bird.getRotation() - 900*delta);
               if(desiredRotation > bird.getRotation()) bird.setRotation(
                  desiredRotation);
            }
         }
      }
   }
   
   public void enableGravity() {
      isGravityEnabled = true;
   }
   
   public void disableGravity() {
      isGravityEnabled = false;
   }
   
   public void jump() {
      // if bird is dead do not jump (I think I checked it somewhere already)
      if(!isAlive) return;
      
      // if bird is higher then screen then do not jump
      if(bird.getY() > stage.getHeight()) return;
      
      // if jumped get the custom variable jump_speed from bird actor and set it 
      as current vertical velocity
      currVerticalVelocity = bird.getCustomVariables().getFloatVariable(
                             "jump_speed");
   }
   
   /*
    * Apply gravity each frame (get's delta time since last frame)
    */
   private void gravity(float delta) {
      if(isGravityEnabled) {
         // change curernt velocity based on gravity (gravity changes velocity 
                                                      every second by gravity 
                                                      amount)
         currVerticalVelocity -= delta*bird.getCustomVariables().
                                 getFloatVariable("gravity");
      }
   }
   
   public CompositeItem getBird() {
      return bird;
   }
   
   // get's the bird center coordinates as vector 2 needed for collision 
   detection in GameScreenScript
   public Vector2 getBirdCenter() {
      Vector2 vec = new Vector2(bird.getX() + bird.getWidth()/2, bird.getY() + 
                    bird.getHeight()/2);
      return vec;
   }
   
   // Kills the bird, for reals
   public void die() {
      currVerticalVelocity = 0;  
      isAlive = false;
      desiredRotation = 0; 
      bird.setRotation(0);
      birdAnimation.pause();
   }

}

Programming Design


27. August 2014

 

Today we are going to look at implementing physics in LibGDX.  This technically isn’t part of LibGDX itself, but instead is implemented as an extension.  The physics engine used in LibGDX is the popular Box2D physics system a library that has been ported to basically every single platform and language ever invented, or so it seems. We are going to cover how to implement Box2D physics in your 2D LibGDX game.  This is a complex subject so will require multiple parts.

 

If you’ve never used a Physics Engine before, we should start with a basic overview of what they do and how they work.  Essentially a physics engine takes scene information that you provide, then calculates “realistic” movement using physics calculations.  It goes something like this:

  • you describe all of the physics entities in your world to the physics engine, including bounding volumes, mass, velocity, etc
  • you tell the engine to update, either per frame or on some other interval
  • the physics engine calculates how the world has changed, what’s collided with what, how much gravity effects each item, current speed and position, etc
  • you take the results of the physics simulation and update your world accordingly.

 

Don’t worry, we will look at exactly how in a moment.

 

First we need to talk for a moment about creating your project.  Since Box2D is now implemented as an extension ( an optional LibGDX component ), you need to add it either manually or when you create your initial project.  Adding a library to an existing project is IDE dependent, so I am instead going to look at adding it during project creation… and totally not just because it’s really easy that way.

 

When you create your LibGDX project using the Project Generator, you simply specify which extensions you wish to include and Gradle does the rest.  In this case you simply check the box next to Box2d when generating your project like normal:

 

image

 

… and you are done.  You may be asking, hey what about Box2dlights?  Nope, you don’t currently need that one.  Box2dlights is a project for simulating lighting and shadows based off the Box2d physics engine.  You may notice in that list another entity named Bullet.  Bullet is another physic engine, although more commonly geared towards 3D games, possibly more on that at a later date.  Just be aware if you are working in 3D, Box2d isn’t of much use to you, but there are alternatives.

 

Ok, now that we have a properly configured project, let’s take a look at a very basic physics simulation.  We are simply going to take the default LibGDX graphic and apply gravity to it, about the simplest simulation you can make that actually does something.  Code time!

 

package com.gamefromscratch;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.math.Vector2;
import com.badlogic.gdx.physics.box2d.*;

public class Physics1 extends ApplicationAdapter {
    SpriteBatch batch;
    Sprite sprite;
    Texture img;
    World world;
    Body body;

    @Override
    public void create() {

        batch = new SpriteBatch();
        // We will use the default LibGdx logo for this example, but we need a 
        sprite since it's going to move
        img = new Texture("badlogic.jpg");
        sprite = new Sprite(img);

        // Center the sprite in the top/middle of the screen
        sprite.setPosition(Gdx.graphics.getWidth() / 2 - sprite.getWidth() / 2,
                Gdx.graphics.getHeight() / 2);

        // Create a physics world, the heart of the simulation.  The Vector 
        passed in is gravity
        world = new World(new Vector2(0, -98f), true);

        // Now create a BodyDefinition.  This defines the physics objects type 
        and position in the simulation
        BodyDef bodyDef = new BodyDef();
        bodyDef.type = BodyDef.BodyType.DynamicBody;
        // We are going to use 1 to 1 dimensions.  Meaning 1 in physics engine 
        is 1 pixel
        // Set our body to the same position as our sprite
        bodyDef.position.set(sprite.getX(), sprite.getY());

        // Create a body in the world using our definition
        body = world.createBody(bodyDef);

        // Now define the dimensions of the physics shape
        PolygonShape shape = new PolygonShape();
        // We are a box, so this makes sense, no?
        // Basically set the physics polygon to a box with the same dimensions 
        as our sprite
        shape.setAsBox(sprite.getWidth()/2, sprite.getHeight()/2);

        // FixtureDef is a confusing expression for physical properties
        // Basically this is where you, in addition to defining the shape of the 
        body
        // you also define it's properties like density, restitution and others 
        we will see shortly
        // If you are wondering, density and area are used to calculate over all 
        mass
        FixtureDef fixtureDef = new FixtureDef();
        fixtureDef.shape = shape;
        fixtureDef.density = 1f;

        Fixture fixture = body.createFixture(fixtureDef);

        // Shape is the only disposable of the lot, so get rid of it
        shape.dispose();
    }

    @Override
    public void render() {

        // Advance the world, by the amount of time that has elapsed since the 
        last frame
        // Generally in a real game, dont do this in the render loop, as you are 
        tying the physics
        // update rate to the frame rate, and vice versa
        world.step(Gdx.graphics.getDeltaTime(), 6, 2);

        // Now update the spritee position accordingly to it's now updated 
        Physics body
        sprite.setPosition(body.getPosition().x, body.getPosition().y);

        // You know the rest...
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        batch.begin();
        batch.draw(sprite, sprite.getX(), sprite.getY());
        batch.end();
    }

    @Override
    public void dispose() {
        // Hey, I actually did some clean up in a code sample!
        img.dispose();
        world.dispose();
    }
}

 

The program running:

 

test

 

What's  going on here is mostly defined in the comments, but I will give a simpler overview in English.  Basically when using a Physics Engine, you create a physical representation for each corresponding object in your game.  In this case we created a physics object ( Body ) that went along with our sprite.  It’s important to realize, there is no actual relationship between these two objects.  There are a couple of components that go into a physics body, BodyDef which defines what type of body it is ( more on this later, for now realize DynamicBody means a body that is updated and capable of movement ) and FixtureDef, which defines the shape and physical properties of the Body.  Of course, there is also the World, which is the actual physics simulation.

 

So, basically we created a Body which is the physical representation of our Sprite in the physics simulation.  Then in render() we call the incredibly important step() method.  Step is what advances the physics simulation… basically think of it as the play button.  The physics engine then calculations all the various mathematics that have changes since the last call to step.  The first value we pass in is the amount of time that has elapsed since the last update.  The next two values control the amount of accuracy in contact/joint calculations for velocity and position. Basically the higher the values the more accurate your physics simulation will be, but the more CPU intensive as well.  Why 6 and 2?  ‘cause that’s what the LibGDX site recommend and that works for me.  At the end of the day these are values you can tweak to your individual game.  The one other critical take away here is we update the sprites position to match the newly updated body’s position.  Once again, in this example, there is no actual link between a physics body and a sprite, so you have to do it yourself.

 

There you go, the worlds simplest physics simulation.  There are a few quick topics to discuss before we move on.  First, units.

 

This is an important and sometimes tricky concept to get your head around with physics systems.  What does 1 mean?  One what?  The answer is, whatever the hell you want it to be, just be consistent about it!  In this particular case I used pixels.  Therefore 1 unit in the physics engine represents 1 pixel on the screen.  So when I said gravity is (0,-98) that means gravity is applied at a rate of –98 pixels along the y axis per second.  Just as commonly, 1 in the physics engine could be meters, feet, kilometer, etc… then you use a custom ratio for translating to and from screen coordinates.  Most physics systems, Box2d included, really don’t like you mixing your scales however.  For example, if you have a universe simulation where 1 == 100 miles, then you want to calculate the movement of an Ant at 0.0000001 x 100miles per hour, you will break the simulation, hard.  Find a scale that works well with the majority of your game and stick with it.  Extremely large and extremely small values within that simulation will cause problems.

 

Finally, a bit of a warning about how I implemented this demo and hopefully something I will cover properly at a later date.  In this case I updated the physics system in the render loop.  This is a possibility but generally wasteful.  It’s fairly common to run your physics simulation at a fixed rate ( 30hz and 60hz being two of the most common, but lower is also a possibility if processing restrained ) and your render loop as fast as possible.

 

In the next part we will give our object something to collide with, stay tuned.

Programming


9. August 2014

 

LibGDX, the cross platform, Java based, open source gaming library for iOS, Android, HTML5 and Desktop has just reached version 1.3.  The details of the new release:

image

 

  • API Addition: Added Input.isKeyJustPressed
  • API Addition: multiple recipients are now supported by MessageDispatcher, see https://github.com/libgdx/libgdx/wiki/Message-Handling#multiple-recipients
  • API Change: State#onMessage now takes the message receiver as argument.
  • API Addition: added StackStateMachine to the gdx-ai extension.
  • API change: ShapeRenderer: rect methods accept scale, more methods can work under both line and fill types, auto shape type changing.
  • API change: Built-in ShapeRenderer debugging for Stage, see https://github.com/libgdx/libgdx/pull/2011
  • Files#getLocalStoragePath now returns the actual path instead of the empty string synonym on desktop (LWJGL and JGLFW).
  • Fixed and improved xorshift128+ PRNG implementation.
  • Added support for Tiled’s animated tiles, and varying frame duration tile animations.
  • Fixed an issue with time granularity in MessageDispatcher.
  • Updated to Android API level 19 and build tools 19.1.0 which will require the latest Eclipse ADT 23.02, see http://stackoverflow.com/questions/24437564/update-eclipse-with-android-development-tools-23 for how things are broken this time…
  • Updated to RoboVM 0.0.14 and RoboVM Gradle plugin version 0.0.10
  • API Addition: added FreeTypeFontLoader so you can transparently load BitmapFonts generated through gdx-freetype via AssetManager, see FreeTypeFontLoaderTest.java
  • Preferences put methods now return “this” for chaining
  • Fixed issue 2048 where MessageDispatcher was dispatching delayed messages immediately.
  • API Addition: 3d particle system and accompanying editor, contributed by lordjone, see pull request 2005
  • API Addition: extended shape classes like Circle, Ellipse etc. with hashcode/equals and other helper methods, see pull request #2018
  • minor API change: fixed a bug in handling of atlasPrefixes, see pull request 2023
  • Bullet: btManifoldPoint member getters/setters changed from btVector3 to Vector3, also it is no longer pooled, instead static instances are used for callback methods
  • Added Intersector#intersectRayRay to detect if two 2D rays intersect, see pull request 2132
  • Bullet: ClosestRayResultCallback, AllHitsRayResultCallback, LocalConvexResult, ClosestConvexResultCallback and subclasses now use getter/setters taking a Vector3 instead of btVector3, see pull request #2175
  • 2d particle system supports pre-multiplied alpha.
  • Bullet: btIDebugDrawer/DebugDrawer now use pooled Vector3 instances instead of btVector3, see pull request #2174

 

 

You can download the LibGDX setup app here.  Of course, GameFromScratch.com has a complete set of LibGDX tutorials to get you started.

Programming News


6. August 2014

 

jrenner/obfuscate( on reddit ) released his in development 3D engine, GDX-Proto earlier today.  In his own words:

 

GDX-Proto is a lightweight 3d engine built with two main objectives:

  • Provide an open source codebase showing how to do many basic and essential things for 3d games with libgdx, a cross-platform Java game framework.
  • Provide a simple, extensible 3d engine that takes care of lower-level things such as physics and networking.

 

While the current version is implemented as a First Person Shooter (FPS) demo, the code is highly adaptable for other uses, without too much work.

Overview of Features

Graphics
  • Basic 3d rendering using a slightly modified version of the default libgdx 3d shader. It takes advantage of the new libgdx 3D API.
  • 3D Particle system based on the new libgdx 3d particle system (version 1.2.1+, not included in 1.2.0)
Physics
  • The Bullet physics library is used for collision detection, but not for collision resolution. This allows for fast and efficient collision detection without the performance penalties of a fully simulated bullet world. A default collision resolution system is included in the Physics class, but it can be modifided to suit your needs.
  • Raycasting for projectile hit detection
Networking
  • Supports local or online play
  • KryoNet based
  • Mix of TCP and UDP where appropriate
  • Entity interpolation
  • Client prediction (for movement only, not yet implemented for projectiles)
  • Simple chat system
  • Supports libgdx headless backend for creating a headless server, such as on a VPS
  • Server transmits level geometry to client upon connection
  • "The server is the man": Most logic is run server-side to prevent cheats or hacking.
Other
  • Basic Entity system with DynamicEntities, represented by either Decals (Billboard sprites) or 3D models
  • Movement component class handles acceleration, velocity, position, rotation, max speeds
  • Subclasses of Movement: GroundMovement and FlyingMovement
  • Optional logging to file, see Log class

 

Right now it’s pretty early on.  It’s not actually a library as of yet, but instead a single project with a sample FPS.  In the future I believe it will be refactored into a more traditional library.  Right now though, it does provide a solid foundation for building a 3D game on top of LibGDX.  Right now, LibGDX provides only a relatively low level 3D layer and this project builds on top of it.

 

Getting started is extremely simple.  First clone the git:

git clone https://github.com/jrenner/gdx-proto.git

Then run the project:

gradlew desktop:run

 

image

 

You can navigate around using standard WASD keys.  For the Gradle averse that want to type the demo out, you can download a playable jar here.  The entire project is available on Github here.

Programming


16. July 2014

 

Or…

How to take a Blender model you downloaded from the web and make it actually usable in your game in 28 easy steps!

 

… granted, the second title doesn’t have the same flow to it, does it?

 

I just had to run through this process and I figured I would share it as it is something that occurs fairly often.  When working with Blender, there are dozens of behavioral textures available that can make for some very nice results quickly.  The only problem is, when you get your asset out of Blender and into your game engine, things suddenly go horribly wrong.  The problem is, those textures only make sense inside of Blender.  Fortunately through the magic of baking, you can easily convert them into a texture map usable in any game engine.

 

Let’s take a look how.

 

First we need a model.  I am using a beautiful new model that was recently added to Blend-Swap.  It’s a free download but you need to register.  Don’t worry, you can use a real email address, they don’t spam, or at least haven't so far.  The model in question looks like this:

 

image

 

Unfortunately when we load it in Blender we quickly learn this model is in no way game ready.  Let’s take a look:

image

 

Ick.  So instead of a single Mesh, we have a dozen individual meshes.  Problem is, we need to unwrap them as a single object, so let’s join them all together.  First let’s get the camera out of the default layer.

 

If you look at the way this particular Blend is setup, there are currently two layers, the second contains the armature, the first contains everything else.

image

 

Lets get the camera out of there.  Select the camera object then hit the M key.  Then select the layer you want to move the camera to, like so:

image

 

Now click the first layer ( bottom left box ) and it should now only contain geometry.

 

We want to join everything together.  Press ‘A’ to select everything in the layer, then hit “Ctrl + J” to join everything into a single set of geometry.  Now it should look something like this:

image

 

Perfect, now we can unwrap our model.  Switch in to EDIT mode

image

 

Press ‘A’ again, until all faces are selected, like so:

image

 

Now we unwrap our model.  Select Mesh->UV Unwrap-> Unwrap ( or Smart UV Project ).

 

Switch your view to UV/Image Editor

image

 

It should look something like this:

image

 

Now create a New Image:

image

 

This image is where we are going to render our texture to.  Here are the settings I used.  Remember, games like Power of 2 textures.

image

 

Ok, now let’s look at the actual render to texture part.  Take a quick look at how the model is currently shaded:

image

 

Frankly none of those are really game engine friendly.  So let’s render all of those materials out to a single texture.  Go to the render tab

image

 

Scroll down and locate Bake.

In the UV Editor window, make sure everything is selected ( using ‘A’.  They should be highlighted in yellow ).  At this point, with your generated image and all the UV’s selected, it should look like:

image

 

 

Now under bake, set the following settings:

image

The key values being Bake Mode = Full Render and Selected to Active checked.  Now click the Bake button.

 

Up in your top part of Blender, you should see a progress bar like so:

image

 

 

Now if you go back to the UV/Image viewer, and select your image RenderedTexture, you should see:

image

 

Cool!

 

Let’s save the result to an external ( game engine friendly ) texture.  Select Image->Save as Image.  Save the image somewhere.  Remember where.

image

 

 

Now lets modify the textures on our model to use only our newly generated texture map.  First in 3D View, switch back to Object Mode from Edit mode.

Then, open the materials tab:

image

 

Select each material and hit the – ( or killswitch engage! ) button.  So it should ultimately look like this:

image

 

Now hit the + button and create a new Material.  Then click the New button.

image

 

The default values for the material should be OK, but depending on your game engine, you may have to enable Face Textures:

image

 

Now click over to the Texture tab.  Click New.

image

 

Drop down the Type box and select Image or Movie.

image

 

Scroll down to the Image section and select Open.  Pick the image you saved earlier.

image

 

Now scroll down to Mapping, drop down Coordinates and select UV.

image

 

Under Map select UVMap.

image

 

Now if you go to the 3D View and set the view mode to Texture:

image

 

TADA!  A game ready model.

 

One word of caution though, if you render this scene in Blender you will get the following result:

image

 

Don’t worry.  That’s just a biproduct of going from Blender materials to texture mapping.  If you want the texture to be seen, you need to add some lights to the scene.  Or change the material so it has an Emit value > 0, so it will provide it’s own light source.

 

With Emit set to .92, here is the result if you render it:

 

image

 

Now, what about it game?

 

Let’s create a simple LibGDX project that loads and displays our exported model:

 

package com.gamefromscratch;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Files.FileType;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.PerspectiveCamera;
import com.badlogic.gdx.graphics.g3d.Environment;
import com.badlogic.gdx.graphics.g3d.Model;
import com.badlogic.gdx.graphics.g3d.ModelBatch;
import com.badlogic.gdx.graphics.g3d.ModelInstance;
import com.badlogic.gdx.graphics.g3d.attributes.ColorAttribute;
import com.badlogic.gdx.graphics.g3d.loader.G3dModelLoader;
import com.badlogic.gdx.utils.UBJsonReader;


public class ModelTest implements ApplicationListener {
    private PerspectiveCamera camera;
    private ModelBatch modelBatch;
    private Model model;
    private ModelInstance modelInstance;
    private Environment environment;

    @Override
    public void create() {
        camera = new PerspectiveCamera(
                75,
                Gdx.graphics.getWidth(),
                Gdx.graphics.getHeight());

        camera.position.set(3f,0f,6f);
        camera.lookAt(0f,1f,0f);

        // Near and Far (plane) represent the minimum and maximum ranges of the camera in, um, units
        camera.near = 0.1f;
        camera.far = 300.0f;

        modelBatch = new ModelBatch();

        UBJsonReader jsonReader = new UBJsonReader();
        G3dModelLoader modelLoader = new G3dModelLoader(jsonReader);
        model = modelLoader.loadModel(Gdx.files.getFileHandle("robot.g3db", FileType.Internal));
        modelInstance = new ModelInstance(model);

        environment = new Environment();
        environment.set(new ColorAttribute(ColorAttribute.AmbientLight, 0.8f, 0.8f, 0.8f, 1.0f));
    }

    @Override
    public void dispose() {
        modelBatch.dispose();
        model.dispose();
    }

    @Override
    public void render() {
        Gdx.gl.glViewport(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT);

        camera.update();

        modelBatch.begin(camera);
        modelBatch.render(modelInstance, environment);
        modelBatch.end();
    }

    @Override
    public void resize(int width, int height) {
    }

    @Override
    public void pause() {
    }

    @Override
    public void resume() {
    }
}

 

And we run it and:

image

 

Wow, a model downloaded randomly from the Internet actually working in the game engine!  How often does that actually happen? ;)

Programming Art


AppGameKit Studio

See More Tutorials on DevGa.me!

Month List