2D games

LibGDX Game Tutorial

LibGDX  is a powerful video game framework . I’ve been using it for some time now with my projects. Mostly cause its free and offers good portability and libraries.

I made this game as a learning exercise using libGDX and some of its libraries .
The code is by no means perfect, but I hope it helps you get on the right track if you are looking to develop a game Using libGDX. Also, even though libGDX is a cross-platform framework, I only targeted Android and desktop for testing . 

Note: I assume you have prior experience in using java and you know how to setup the ADT with eclipse .I also won’t be explaining much on libGDX or anyother libraries used (tween for animation and transitions) I’m only taking you through my own implementation . So if you get lost I recommend you read the libGDX wiki. You should also know that I’m doing this tutorial in a top to bottom manner . So I am going to implement this project starting from the beginning of the app i.e when app is launched ,its a strange way to do things since most people   work on gameplay first. 

By the end of this tutorial you should be able to make a game that looks like this.


Game Concept.

The game concept is simple . You have to help red (a bird) to collect as many of her eggs as possible before it gets killed by moving square blocks . I know its cheesy but it will do . The player controls red by swiping across the screen.

With our awesome design done, let’s build the game!

Creating the project.


Let’s  setup our project  with the gdx-setup . There are  two setup’s that we can use . The newer gradle setup or an older setup .You can double click on the jar to make it run but it doesn’t work on my computer so I will be using the cmd.

If you dont know how to use the cmd to run a jar file .

  • Open cmd by typing “cmd” in your search box
  • Type” cd/ “to go to the begining  of your hard drive and navigate to where your jar files are . use “dir” in order to see what is in the current directory.
  • Once you find your jars type”java  -jar name of your jar”

Then wait until your jar starts .It should look something like this.

We are not going to be using any extensions and I’m only targeting android  and desktop  but don’t worry if you want to add more platforms  you can but you will need an emulator  in order to test and run your program in Html and Ios.

Importing Project into Eclipse .



Once you import your project into eclipse  it will have several errors ,so lets fix them.

  • You can delete the code  in your core project but leave the class declaration.
  • In the android package  you need to delete the line 

 Cfg.20 =false;

  • Then right click on your android project and go to properties .On the list select Android and check the Project Build Target and click apply .

  • Finally in the desktop project do the first step you did on the android  project . 

Time to Code.

After cleaning your code the game class should look like this after extending the Game class.This class allows us to create multiple screens.

Package com.me.mygdxgame;

Import com.badlogic.gdx.Game

Public class MygdxGame extends Game{   

     @override

Public void create(){}

@override

Public void dispose(){}

 
Now create a new package called screens and add three new classes Gamescreen ,Splashscreen,Menuscreen.They should all look like this

package com.screens;

import com.badlogic.gdx.Screen;

public class GameScreen implements Screen {

    @Override

    public void render(float delta) {

    }

    @Override

    public void resize(int width, int height) {

    }

    @Override

    public void show() {

    }

    @Override

    public void hide() {

    }

    @Override

    public void pause() {

    }
    @Override

    public void resume() {

    }

    @Override

    public void dispose() {

    }

 Now we need to tell our game class to set the Splashscreen when our game starts.

Package com.me.mygdxgame;

Import com.badlogic.gdx.Game

Public class MygdxGame extends Game{   

     @override

Public void create(){

setScreen (new Splashscreen (this));

}

@override 

Now we setup the splashscreen so that we can display our splash as our game is loading assets .  We will need the tween engine so that we can add a smooth fade in and fade out effect.  In order to add tween to your project you need to again open your project setup and click update then add the tween package just like you did with libgdx.

The splashscreen class done.

Package com.screens 

Public class splashscreen{

Private TweenManager manager;

Private Spritebatch batcher;

Private Sprite  sprite; 

Private  MyGdxGame game;

Public splashscreen(MyGdxGame game){this.game=game;}

@override 

Public void show(){

sprite = new Sprite(Assetloader.logo);

sprite.setColor(1,1,1,0);

float width = Gdx.graphics. getWidth();

float height = Gdx.graphics. getHeight();

float desiredWidth = width *.7f

float  scale = desiredWidth / spirte.getWidth(); 

sprite.setSize(sprite.getWidth() * scale ,sprite.getHeight*scale);

sprite.setPosition((width/2)-(sprite.getWidth()/2),(height /2)-(sprite.getHeight()/2));

setupTween();

}

private void setupTween(){

Tween.register Accessor(Sprite.class,new SpriteAccessor());

manager = new  TweenManager();

TweenCallback back = new TweenCallback(){

@override

Public void onEvent(int type,BaseTween<?>source){

game.setScreen(new MenuScreen(game));

}

};

Tween.to(spriteAccessor.ALPHA, .8f).target (1).ease(TweenEquations.easeInQuad).repeatYoyo(1,.4f).setCallback(back).setCallbackTriggers(TweenCallback.COMPLETE).start(manager);

@override

Public void render(float delta){

manager.update(delta);

Gdx.gl.glClearColor(1,1,1,1);

Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

batch.begin();

sprite.draw(batch);

batch.end() ;

}


Our splash screen.

Adding this code to your splashscreen will cause a ton of errors .To fix them we need to create another package tween and a dd  three new classes spriteAccessor,Value,ValueAccessor.

The spriteAccessor class .

Package tween;

Public class spriteAccessor implements TweenAccessor<Sprite>{

public static final int ALPHA = 1;

@override

Public int getValues(Sprite target, int tweenType, float[] returnValues){

switch(tweenType){

case ALPHA:

returnValues[0] = target.getColor().a;

return 1;

default:

return 0;}

@override

Public void setValues(Sprite target, int tweenType,float[]returnValues){

switch(tweenType){

Case ALPHA:

target.setColor(1,1,1,newValues);

break;

}}

The value class.

package com.tween;

public class Value{

private float val = 1;

public float getValue(){

return val;

}

public void setValue(float newVal){

val = newVal;}}

The valueAccessor class.

package com.tween;

public class  ValueAccessor implements TweenAccessor<Value>{

@override

Public int getValues(Values target,int tweenType,float[] returnValues){

returnValues[0] =target.getValue();

return 1;

}

@override

public void setValues(Value target , int tweenType,float[] newValues){

target.setValue(newValues[0])

And that does it for the tween package.but we still have some errors . So lets create a new package called utils  we are  going to create our asset loader class in here it will load all our assets at start up .

Package utils;

public class AssetLoader{

Public static Texture logo;

public static void load(){

logo =new Texture(Gdx.files.internal (“logo.png”));

}

public static void destroy(){

logo.dispose

As you can see we have imported our logo to be used by the splashscreen . You need to remember to dispose of the assets you import.Now we need to update our game class so that our assets can be loaded at start up.

Note : You need to put all your assets in the android assets folder for them to get added to your project.

Package com.me.mygdxgame;

Import com.badlogic.gdx.Game

Public class MygdxGame extends Game{   

 @override

Public void create(){

Assetloader.load();

setScreen (new Splashscreen (this));

}

Setting Up the World.

Now we need a world for our red bird . Create a new package called world  and create  a world class.This class is responsible for our game object getting updated . We also need a render class in order to draw all our objects to the screen.

Now lets put these two new classes to use . Open the Gamescreen class and update the code with the one below .The finished gamescreen class. 

public class GameScreen implements Screen{

   

 private World world;

 private Renderer renderer;

 private float runTime;

 

    public GameScreen(){

 

  float screenWidth=Gdx.graphics.getWidth();

  float screenHeight=Gdx.graphics.getHeight();

  float gameHeight=408;

  float gameWidth=screenWidth/(screenHeight/gameHeight);

 

  int screenY=(int)(gameHeight/2);

 

  world=new World(screenY);

  renderer=new Renderer(world,(int)gameWidth,screenY);

  world.setRenderer(renderer);

 }

 

 @Override

 public void show() {

 

 

 }

 @Override

 public void render(float delta) {

  runTime+=delta;

  world.update(delta);

  renderer.render(delta,runTime);

 

 }

Thats it for now  next time we will add code to our world class and renderer as well as adding our bird to the world.

If you have any questions or comments, feel free to let me know in the comments section.

Cheers!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s