Making a LibGDX Game – Part 14 – Firing Bullets #gamedev

To those who still check back for or are tracking the Github repo thank you for returning and checking out the tutorial! Thanks to @UmzGames for prompting me to add more! I would like to explore different bullet types and movement patterns but lets start with something simple.

pewpew

Check out the commit: Git commit for this tutorial

To fire our weapon we will use the spacebar, the control class requires a new boolean variable which we shall call “spacePressed”.

core/src/uk/co/carelesslabs/Control.java

  public boolean spacePressed;

The keydown function case statement will set the new variable to true:
Github code link

public boolean keyDown(int keyCode) {
...
...
    case Keys.SPACE:
        spacePressed = true;
        break;

The Enum class will need a new EntityType, we wont use this right now but it is usefull setting an entity type for checks later on or debuging.

core/src/uk/co/carelesslabs/Enums.java

public enum EntityType {
     HERO,
     TREE,
     BIRD,
     BULLET
 }

GameClass Updates
There are some changes to be made to the class that has the main game loop. When the hero update method is called we will now pass in our box2D instance, this will allow us access to the functions that allow new sensors to be created when a new bullet is added. Previously the call was hero.update(control).

Also a new method that checks and removes bullets is called, this will check which bullets are no longer active and should be removed from the game.

core/src/uk/co/carelesslabs/GameClass.java

  hero.update(control, box2D);

  // Clear travelled bullets
  hero.clearAmmo(box2D);

There was already a gun added to the Hero class, but now we will want to set an amount of ammo that the gun has. The Gun class should be refactored to allow the amount of ammo it has to be passed when its initiated or it could have a default number. Also
this could read “gun.addAmmo(10)”, not sure why I look it up in the ArrayList when its available after the gun variable is initiated. Its always good to read through your code and explain / document especially as a solo dev to find these issues, working in a team you have the luxury of code review with Pull Requests.

core/src/uk/co/carelesslabs/entity/Hero.java

public Hero(Vector3 pos, Box2DWorld box2d){
  ...

    // Weapon
    Gun gun = new Gun(1, -1, 7);
    weapons = new ArrayList();
    weapons.add(gun);

    // Add some ammo to the gun
    weapons.get(0).addAmmo(10);

On drawing the gun we can also call the tick method, we only draw and tick weapons that are active, a later tutorial will look at multiple weapons and weapon switching.

@Override
    public void draw(SpriteBatch batch){
        if(shadow != null) batch.draw(shadow, pos.x, pos.y, width, height);
        if(texture != null) batch.draw(texture, pos.x, pos.y, width, height);
        for(Gun g : weapons){
			if(g.active){
				g.tick(Gdx.graphics.getDeltaTime()); // New line
				g.drawRotated(batch);
			}
		}
    }

The update function of the Hero as mentioned previously now requires an instance of Box2DWorld to be passed, when looping the weapons and checking which are active an additional check will add a new bullet to the guns active bullet list if space was pressed, spacePressed is reset to false.

When space is pressed and the gun is active we generate a new SimpleBullet, the current gun and box2D is passed into this class, the instance of the bullet just created is then added to the guns active or fired ammo list.

* The guns ammo count should have been checked before generating a new SimpleBullet: if (control.spacePressed && g.ammoCount > 0We are generating a new bullet and not actually using it with the current version of the code.

Another new method “clearAmmo” will loop through all guns and call a method for that class “clearTravelledAmmo”; this is used to remove bullets.

view on Github

public void update(Control control, Box2DWorld box2D) {
...
    // Update weapons
        for(Gun g : weapons){
            if(g.active){
                g.updatePos(pos.x, pos.y);
            	g.angle = control.angle - 90;

            	if(control.spacePressed){
                    SimpleBullet bullet = new SimpleBullet(g, box2D);
            	    g.addActiveAmmo(bullet);
            	    control.spacePressed = false;
            	 }
            }
        }

    // New Method to loop all weapons and check its ammo.
    public void clearAmmo(Box2DWorld box2D) {
        for(Gun g : weapons){
            g.clearTravelledAmmo(box2D);
        }
    }

The new ammo class extends Entity and introduces some new variables:

  • range – how far the bullet can travel
  • damage – the damage this bullet inflicts
  • vector – the heading of the bullet, used to move it each frame
  • distMoved – the ditance the bullet has moved thus far

core/src/uk/co/carelesslabs/entity/ammo/Ammo.java

package uk.co.carelesslabs.entity.ammo;

import com.badlogic.gdx.math.Vector2;
import uk.co.carelesslabs.entity.Entity;

public class Ammo extends Entity {
	public float range;
	public float damage;
	public Vector2 vector;
	public float distMoved;

	public Ammo(){
		super();
		vector = new Vector2();
	}

	public void tick(float delta){

	}

}

SimpleBullet
The ammo class will be used to extend other bullet classes, starting with the most basic SimpleBullet. This bullet will travel along a vector for a given distance at a given speed. For this tutorial an existing image will be used to show the bullet place on the screen,
in another tutorial we can look at adding some graphics and rendering the bullet at the correct angle etc.

core/src/uk/co/carelesslabs/entity/ammo/SimpleBullet.java

package uk.co.carelesslabs.entity.ammo;

import uk.co.carelesslabs.Media;
import uk.co.carelesslabs.Enums.EntityType;
import uk.co.carelesslabs.box2d.Box2DHelper;
import uk.co.carelesslabs.box2d.Box2DWorld;
import uk.co.carelesslabs.weapons.Gun;
import com.badlogic.gdx.math.MathUtils;
import com.badlogic.gdx.math.Vector2;
import com.badlogic.gdx.physics.box2d.BodyDef;

public class SimpleBullet extends Ammo {
    Gun gun;

    // A new bullet has some defaults set
    public SimpleBullet(Gun gun, Box2DWorld box2d) {
        super();
        this.gun = gun;
        type = EntityType.BULLET;
        texture = Media.close_menu;
        range = 50;
        damage = 1;
        width = 8;
        height = 8;
        speed = 60;
        active = true;
        setupBullet(box2d);
    }

    public void tick(float delta) {
        // only process if active
        if (active) {
            float dx = (delta * vector.x) * speed; // Calculate the x amount (+-)
            float dy = (delta * vector.y) * speed; // Calculate the y amount (+-)
            float dx2 = pos.x + dx; // Calculate the new X position
            float dy2 = pos.y + dy; // Calulate the new Y position

            // Compare the current postion and the new position
            // get difference in distance and add that onto distMoved
            distMoved += Vector2.dst(pos.x, pos.y, dx2, dy2);

            // Set the new postion of the bullet
            pos.set(dx2, dy2, 0);

            // Update the postion of the sensor
            sensor.setTransform(pos.x + width / 2, pos.y + height / 2, 0);

            // Check if bullet has travelled its range
            // We do not want bullets moving for ever
            if (distMoved > range) {
                // Remove Bullet
                remove = true;
                active = false;
            }
        }
    }

    // The bullet vector is along the line at which the gun is pointing at the moment the space bar was pressed.
    // A quick fix to move the bullet toward the end of the gun is setting the bullet x to match the gun and move it
    // along the heading by 10, we apply the same to the y position and it will move along its heading.
    //
    // We create a sensor which will be used for collision checking with Box2D.
    public void setupBullet(Box2DWorld box2d) {
        // Position
        float angleRadians = MathUtils.degreesToRadians * gun.angle;
        vector.x = MathUtils.cos(angleRadians);
        vector.y = MathUtils.sin(angleRadians);

        // Move bullet toward end of gun
        pos.x = gun.pos.x + (vector.x * 10);
        pos.y = gun.pos.y + (vector.y * 10);

        // Physics
        sensor = Box2DHelper.createSensor(box2d.world, width, height * .85 f, width / 2, height / 3, pos, BodyDef.BodyType.DynamicBody);
        hashcode = sensor.getFixtureList().get(0).hashCode();
    }
}

The only change left is to amend the Gun class; first we add an ammoCount, this will be used to check if the gun has ammo to fire, on firing we will need to decrease this value.
The new ArrayList activeAmmo will be used to track ammo that needs to tick each frame.

core/src/uk/co/carelesslabs/weapons/Gun.java

The ArrayList is initiated in the Public Gun method:

activeAmmo = new ArrayList();

Two new methods tick and addActiveAmmo; tick allows the gun to loop through its activeAmmo and call tick for each ammo item. addActiveAmmo will decrease a guns current ammo count and add a new bullet to the active list, this is the bullets that have been fired, if the variable name doesnt made sense feel free to rename it to firedAmmo for example. As already mentioned the ammoCount check should have occured before this function.

When the gun is empty of ammo at the moment we will just print line, later this can draw some graphic to the screen or play a sound.

public void tick(float delta) {
    for (Ammo a: activeAmmo) {
        a.tick(delta);
    }
}

public void addActiveAmmo(Ammo a) {
    if (ammoCount > 0) {
        activeAmmo.add(a);
        ammoCount--;
    } else {
        System.out.println("Clink");
    }
}

Drawing the bullet, the guns draw method simply loops through active ammo and as it extendings Entity can use its draw method.

public void drawRotated(SpriteBatch batch){
    ...
    for(Ammo a : activeAmmo){
        a.draw(batch);
    }
}

Simple method to add bullets, this can be used later on when we have collectables.

    public void addAmmo(int count) {
        ammoCount += count;
    }

This method "clearTravelledAmmo" is used to remove bullets that have travelled over their range and been marked for removal. The ammo must be removed from the activeAmmo array, any bodies/sensors removed from the Box2D World. We use an iterator as they allow the caller to remove elements from the underlying collection during the iteration, other loops will crash if you remove items while looping through.

public void clearTravelledAmmo(Box2DWorld box2D) {
    Iterator it = activeAmmo.iterator();
    while(it.hasNext()) {
        Ammo a = it.next();
            if(a.remove){
                a.removeBodies(box2D);
                box2D.removeEntityToMap(a);
                it.remove();
        }
    }
}

Lots of small changes and some new classes but we now have the ability to fire bullets, the next tutorial will look at the collision of these bullets with other entities. If you enjoy or find these tutorials useful feel free to let me know at Twitter: @CarelessLabs

There are improvements this code requires and you should carry these out yourselves and please let me know of any bugs!

Advertisements
Image

A Careless 2018 in #Gamedev

I have not been the most active in 2018, I have created some content though, here is a look at some of the highlights:

Black Hole
I have been tinkering with index painting for a while and came up with a technique to paint and convert to pixel art, was a pretty slow progress but helped generate some interesting results. Really happy with how this turned out.

Black Hole Pixel Art

What started out as a small pixel daily turned into a these tiny islands with fishing huts:

Island & huts pixel art

Made a running calculator http://carelesslabs.co.uk/run/

I do quite a lot of running and often like to work out the pace I will need for personal bests and so on so wrote a pace, speed and time calulator. The webpace uses Javascript / JQuery and was quite fun to do.

Wrote a tutorial
After failing to complete the LibGDX series of tutorials to the extend I would have been happy with, revistied this simple island game and added in a weapon with Nuclear Throne style movement / rotation. I do plan on making some smaller tutorials in 2019.

Had a popular Tweet
Not an achievement but a message I have pinned to my Twitter profile as a reminder to stick to one project.

Joined in the Pixel Dailies draw yourself 40k follower celebration

More Pixel Art

HTML5  http://carelesslabs.co.uk/game_a_month/
I started working on a game a month challenge but it closed down! I would like to enter a LudumDare with a simple JavaScript game one day but not enough spare time this year.

So there we have it, 2018 I was a little lazy with regards to game development although I have progressed a new topdown car game which I will be posted about soon!

Cars, skids, dust and smoke

I have been working again on a topdown car prototype, recently adding skid marks, dust and exhaust smoke to the car to improve the look and feel of the game.

dust_skid_smoke

Box2D is being used for the car physics, the car images are rendered using the position of the Body used for the vehicle. When its decided to render any decals (smoke, dust or skids) the Body could be at any angle. If the distance from the centre of the car to an edge is known then its possible to calculate its position (applies to front right/left and back right/left). When a new vehicle is created the radius of the circle that would hold the rectangle is calculated:

Screen Shot 2018-08-03 at 00.23.53

formula

x and y will be known when the car is created or could even be (0,0), x2 will be x + half the width of the car and y2 is y + half the length of the car, this radius value is held in the Car class. Math.pow and Math.sqrt are useful functions to complete the calculation.

Adding decals
When decals are added to be rendered the x and y positions can be calculated using the distance (radius) from the centre of the cars current position given an angle. The cars current angle must be taken into account

angle = car.body.getAngle() + angle;
decalX =  radius * cos(angle);
decalY radius * sin(angle);

Currently I am adding decals at the front two or back two wheels but hard coding the angles, in radians:

  • Front Right is 4.1f
  • Front Left is 5.1f
  • Back Right is 2.1f
  • Back Left is 1f

These values along with the cars current angle make sure the affects are rendered in the correct corners of the rectangle which is the car.

The smoke is rendered always at the back left of the car, dust is added to either the front, back or all tires, when the car is pulling off the dust is added based on the car being front or rear wheel powered. To add some realism to the dust 10% of the cars velocity is applies to the dust entity so while it is active it has some movement.

Next I will Calculate the angle to each of the corners of the rectangle rather than hard coding them, this tutorial will be updated once that is in place, I will also add some more detail on how I achieved the simple smoke and dust affects.

Nuclear Throne style weapon movement #LibGDX #Gamedev

I have published 11 tutorials on making a game from scratch, while the game was intended to be a rougue-like it has evolved away from the genre. I aim to add interesting features which might help others. While this may never be a fun to play or complete game it hopefully will aid others in producing their own games.

If you are interested in checking out the changes to the Chunk management and also the loading and saving methods then check out this pull request (I will create posts about these changes in the future.):

https://github.com/tyler6699/evoscape/pull/7

This tutorial will add a weapon to the Hero that points toward the mouse cursor position. The gun points right or left and swaps hands depending on the mouse position.

gun_anim

Full source code on Github

Entity Class
New variables are added to Entity that will allow rotation and horizontal flipping of
a texture, this means we only need one image for the weapon, also we will add an active flag and an array of guns called weapons. The active flag can be used later to determine if the gun or weapon has been drawn. The array will allow multiple weapons in a future tutorial.

The drawRotated method uses spriteBatch draw that will allow the angle and rotation point of our entity.

// New Variables
public float angle;
public Boolean flipX = false;
public Boolean flipY = false;
public boolean active;
public ArrayList weapons;

// New draw function which we will over ride
public void drawRotated(SpriteBatch batch){
  if(texture != null) batch.draw(texture, pos.x, pos.y, 0, 0, width, height,1, 1, angle, 0, 0, (int)width, (int)height, flipX, flipY);
}

All of the available parameters for the draw method we are calling.

x the x-coordinate in screen space
y the y-coordinate in screen space
originX the x-coordinate of the scaling and rotation origin relative to the screen space coordinates
originY the y-coordinate of the scaling and rotation origin relative to the screen space coordinates
width the width in pixels
height the height in pixels
scaleX the scale of the rectangle around originX/originY in x
scaleY the scale of the rectangle around originX/originY in y
rotation the angle of counter clockwise rotation of the rectangle around originX/originY
srcX the x-coordinate in texel space
srcY the y-coordinate in texel space
srcWidth the source with in texels
srcHeight the source height in texels
flipX whether to flip the sprite horizontally
flipY whether to flip the sprite vertically

Gun Class

At the moment the gun class is a basic entity that only draws to the screen, I will look at shooting in the next tutorial. What we care about is the position of the mouse retaliative to the hero, is it to the left or right side and at what angle.

The Gun class has x and y offsets for the origin and also the x position, these values allow us to move the gun into the hand of the hero. The gun can be set to the Hero’s x position by default and moved left or right accordingly, knowing the size of the gun and hero we can work out how far to move it so it appears in the correct position.

package uk.co.carelesslabs.weapons;

import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import uk.co.carelesslabs.Media;
import uk.co.carelesslabs.entity.Entity;

public class Gun extends Entity {
	float originXOffset; // OriginX Offset
	float originYOffset; // OriginY Offset
	float xPos;          // X offset for gun position
	float xMinPos;       // X Position offset facing left
	float xMaxPos;       // X Position offset facing right

	public Gun(float originXOffset, float xMinRight, float xMaxRight){
		texture = Media.gun;
		width = texture.getWidth();
		height = texture.getHeight();
		active = true;
		originYOffset = height/2;
		this.originXOffset = originXOffset;
		this.xMinPos = xMinRight;
		this.xMaxPos = xMaxRight;
	}

    public void drawRotated(SpriteBatch batch){
    	if(angle > 90 && angle < 270){ // 6 to 12 Clockwise or LEFT
    		xPos = xMinPos;
    		flipY = true;
    	} else { // 12 to 6 clockwise or RIGHT
    		xPos = xMaxPos;
    		flipY = false;
    	}
        // When the gun is to the right of the hero we move
        // the it by xMaxPos (7) and when
        // its to the left we move it byxMinPos (-1)
        if(texture != null) batch.draw(texture, pos.x + xPos, pos.y, originXOffset, originYOffset, width, height, 1, 1, angle, 0, 0, (int)width, (int)height, flipX, flipY);
    }
}

Hero Class

There is a new Vector3 added to the hero class, previously the hero was not aligned to the centre of the screen, this new variable will be updated to the hero position but half of the hero width +/- from the x value so that the hero appears centred.

A new ArrayList of ‘Gun’ called weapons is setup and initiated, we add a Gun to the list, the origin X Offset is set to 1 and the min and max x offsets set the -1 and 7. This sets up the rotation point and the left/right positions relative to the hero.

public Hero(Vector3 pos, Box2DWorld box2d){
  super();
  cameraPos = new Vector3(); // new variable
  type = EntityType.HERO;
  width = 8;
  height = 8;
  texture = Media.hero;
  speed = 30;
  inventory = new Inventory();
  reset(box2d, pos);

  // Weapon
  weapons = new ArrayList();
  weapons.add(new Gun(1, -1, 7));
}

Draw function

The Hero draw function now loops through the weapon array and will call drawRotated for any active gun.

The cameraPos variable is also updated in this draw method, it is set to the same as the hero position and then the x value has half of the Hero width added on.

@Override
public void draw(SpriteBatch batch){
  if(shadow != null) batch.draw(shadow, pos.x, pos.y, width, height);
  if(texture != null) batch.draw(texture, pos.x, pos.y, width, height);
// Loop all weapons and draw the active ones
  for(Gun g : weapons){
      if(g.active){
        g.drawRotated(batch);
      }
   }

...
     // Update Camera Position
     cameraPos.set(pos);
     cameraPos.x += width / 2;
}

Gun position
The gun by default is positioned at Hero.pos.x, it it was not moved using the x offset this is how it would look:
001_gun_hero_pos

Once it is in game and rotating you can see if flips but stay in the right hand of the Hero:gun_no_x_offset

The small yellow cross shows the point at which the entity rotates around, placing it here makes the movement seem more real than if it was centred.

When the gun needs to face right flip is set to false and it is rendered hero x + 7. When the gun is facing left the texture is flipped and moved left by 1. The texture flips from the x point so the flip alone moves the texture left by the width. If you change the origin X value you can see how it affects the rotation (Not all weapons would have the same rotation point)

 

Hero update

When the Hero update is called we should update all active weapons so they move with the Hero, we also update the angle, I found that the mouse angle from the centre of the screen did not match the draw function, taking 90 degrees away made these match.

public void update(Control control) {
  ....
  // Update weapons
  for(Gun g : weapons){
  	if(g.active){
            g.updatePos(pos.x, pos.y);
      	    g.angle = control.angle - 90;
  	}
  }

ENUMS

If you wanted a Hero that faced the mouse (8 directions) we can implement a mouse angle to compass position, while this is not used in the tutorial it may be useful to someone and we can use it in the future. Here are the ENUM values, the order of these is important.

/**
 * Compass directions
 */
public enum Compass {
    S,
    SE,
    E,
    NE,
    N,
    NW,
    W,
    SW
}

Control Class

The new angle and facing variables will be set/updated within the the Control class.  On mouseMoved we have the x and y values for the current mouse position which can be used to calculate the angle between the screen centre and the cursor:
angle = (float) Math.toDegrees(Math.atan2(screenX – (screenWidth/2), screenY – (screenHeight/2)));

if the angle is negative then we add 360:
angle = angle < 0 ? angle += 360: angle;

To turn this angle into a compass direction:
direction = (int) Math.floor((angle / 45) + 0.5) & 7;

This will produce 0 to 7 as a result, we can then pick N ENUM from the list, 0 is S 1 is SE and so on:
facing = Compass.values()[direction];

  // ACTIONS
  public boolean interact;
  public float   angle;
  public int     direction;
  public Compass facing;

  @Override
  public boolean mouseMoved(int screenX, int screenY) {
      float flippedY = screenHeight - screenY;
      mousePos.set(screenX, flippedY);

      // Set angle of mouse
      angle = (float) Math.toDegrees(Math.atan2(screenX - (screenWidth/2), screenY - (screenHeight/2)));
      angle = angle  0){
            Rumble.tick(Gdx.graphics.getDeltaTime());
            camera.translate(Rumble.getPos());
        } else {
            camera.position.lerp(hero.cameraPos, .2f); // use new Vector3 variable<span id="mce_SELREST_start" style="overflow:hidden;line-height:0;"></span>
        }

Hopefully there are a few useful snippets of code in the tutorial, remember there are always other ways to achieve a goal and often more efficient methods.

Next time I will add bullets and firing, thanks for reading!

LibGDX Tutorial series update #gamedev

loading.gif

I have been working recently on a game called EvoScape and producing tutorials as I progress it.

After making what would start out as simple save / load functionality many commits and changes were made that would need explaining for part 12 to be useful. I feel there is too much code to explain and it wont be useful to those who read it.

There are many tutorial ideas I have but feel it would be easier for people to follow if I were to create smaller or new projects rather than adding to EvoScape.

I will look back at the project and blog about changes made to it but not rely on this for all of the tutorials I will continue to write.

I have squashed the latest commits for part 12 into one large commit: EvoScape latest branch

If you are interested in the code changes please take a look, I have changed the chunk system to now deal with a 9 chunks (3×3) each chunk consisting of 32×32 tiles. GSON is used to convert the entities and chunks into JSON which is compressed and stored in a text file. I had some issues loading the JSON directly back into classes so wrote a custom loader. I will blog on some of the ideas in this commit as individual blog posts and in separation from the game soon.

Thanks for following this tutorial series and I hope you call back to check out the next set of new posts.

Making a LibGDX Roguelike Survival Game Part 11 – Custom menu / buttons #gamedev

Welcome to the 11th part in this game from scratch series, in this tutorial we look at changing the projection of our sprite batch to allow us to render a heads up display / menu and also create the classes which will allow us to generate interactive menus. The full source code is available on Github.

menu_tutorial

New Images

  • core/assets/gui/main_background.png
  • core/assets/gui/pink_button.png
  • core/assets/gui/square_menu.png
  • core/assets/gui/icons/build.png
  • core/assets/gui/icons/close_menu.png
  • core/assets/gui/icons/resources.png
  • core/assets/gui/icons/settings.png
  • core/assets/gui/selector.png

New classes

  • core/src/uk/co/carelesslabs/ui/BuildMenu.java
  • core/src/uk/co/carelesslabs/ui/Button.java
  • core/src/uk/co/carelesslabs/ui/Menu.java
  • core/src/uk/co/carelesslabs/ui/OnClickListener.java
  • core/src/uk/co/carelesslabs/ui/SquareMenu.java

Updated

  • core/src/uk/co/carelesslabs/Media.java
  • core/src/uk/co/carelesslabs/gameclass.java
  • core/src/uk/co/carelesslabs/Enums.java
  • core/src/uk/co/carelesslabs/Control.java

Custom menu

In this tutorial we will look at creating a custom menu for our game, this eventually will
allow the player to access/view build, settings and inventory. There are libraries available to handle all sorts of inputs (buttons, text boxes etc) such as Scene2D, but when the menu is basic and for learning LibGDX its interesting and sometimes simpler to create your own.

Rendering the menu

Whereas the main game camera moves around the map and can zoom / shake etc the menu view will need to be fixed.

The projection set for game screen is not fit for displaying the menu. Initially I created a new spriteBatch for the HUD (Heads Up Display) which was created using the screen size, this seemed less efficient than having just one spriteBatch, to use only one we will need to update the Matrix of the spriteBatch before rendering the HUD.

We can achieve this by updating the projection of the spriteBatch prior to rendering.

gameclass.java

// new class variable
Matrix4 screenMatrix;

@Override
public void create() {
    ...
    // Setup Matrix4 for HUD
    screenMatrix = new Matrix4(batch.getProjectionMatrix().setToOrtho2D(0, 0, control.screenWidth, control.screenHeight));

...

@Override
public void render () {
  ...
  // GUI
  batch.setProjectionMatrix(screenMatrix);

The screenMatrix will allow us to change to spriteBatch back to a view the size of the screen, co-ordinates 0,0 will be the bottom left of the screen. With the view being the same size as the screen it will be easy to position menu items as we can access the screen width and height.

Menu

Menu.java

The new menu class has a texture which is the background for the menu, a postiion, width and height used when rendering, a Rectanlge (hitbox)
and an array of buttons.

package uk.co.carelesslabs.ui;

import java.util.ArrayList;
import uk.co.carelesslabs.Enums;
import uk.co.carelesslabs.Enums.MenuState;
import uk.co.carelesslabs.entity.Entity;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.math.Rectangle;
import com.badlogic.gdx.math.Vector2;

public class Menu {
    public String name;
    public Vector2 pos;
    public Texture texture;
    public float width;
    public float height;
    public float scale;
    public MenuState state;
    public float time;
    public float coolDown;
    public Rectangle hitbox;
    public ArrayList<Button> buttons;

    public Menu(float x, float y, float scale, Texture texture){
        pos = new Vector2(x,y);
        this.texture = texture;
        width = texture.getWidth() * scale;
        height = texture.getHeight() * scale;
        buttons = new ArrayList<Button>();
        hitbox = new Rectangle(x,y,width,height);
        setActive();
    }

    // Render the texture and all of the button textures
    public void draw(SpriteBatch batch){
          if(texture != null) batch.draw(texture, pos.x, pos.y, width, height);
          for(Button b : buttons){
              b.draw(batch);
          }
    }

    // If the player has clicked the mouse then processedClick will be true
    // We check if the mouse position is contained within any of the button Rectangles
    public boolean checkClick(Vector2 pos, boolean processedClick){
        boolean processed = false;
        if(!processedClick){
            if(hitbox.contains(pos)){
                System.out.println("Hit: " + name);
            }

            // Check if a button has been clicked
            for(Button b : buttons){
                if(b.hitbox.contains(pos)){
                    if (b.listener != null) b.listener.onClick(b);
                    processed = true;
                    break;
                }
            }
        } else {
            return processedClick;
        }

        return processed;
    }

    // If the mouse is inside of the menu then check if its also inside of a button
    // When the mouse is inside a button then set its state to hovering
    // Else set all buttons to idle
    public void checkHover(Vector2 pos){
        if(hitbox.contains(pos)){
            // Check if a button is being hovered over
            for(Button b : buttons){
                if(b.hitbox.contains(pos)){
                    b.state = Enums.EnityState.HOVERING;
                } else {
                    b.state = Enums.EnityState.IDLE;
                }
            }
        } else {
            for(Button b : buttons){
              b.state = Enums.EnityState.IDLE;
            }
        }
    }

    // A function to add multiply buttons to our menu
    // It is possible to add any size grid of buttons with a certain sized padding
    public void addButtons(float offset, int columns, int rows, Texture texture, Texture select, int scale) {
        for(int i = 0; i < columns; i++){
            for(int j = 0; j < rows; j++){
                float bx = pos.x + (offset + ((i+1)*offset) + (i * texture.getWidth())) * 2;
                float by = pos.y + (offset + ((j+1)*offset) + (j * texture.getHeight())) * 2;
                float width = texture.getWidth() * 2;
                float height = texture.getHeight() * 2;

                Entity selector = new Entity();
                selector.texture = select;
                selector.width = selector.texture.getWidth() * scale;
                selector.height = selector.texture.getHeight() * scale;
                selector.pos.x = bx - ((selector.width - width) / 2);
                selector.pos.y = by - ((selector.height - height) / 2);

                buttons.add(new Button(bx, by, width, height, texture, selector));
            }
        }
    }

    // Check if the menu is active
    public boolean isActive(){
        return state == Enums.MenuState.ACTIVE;
    }

    // Set meny to active
    public void setActive(){
        state = Enums.MenuState.ACTIVE;
    }

    // Set menu to inactive
    public void setInactive(){
        state = Enums.MenuState.DISABLED;
    }

    // Toggle active state
    public void toggleActive() {
        if(isActive()){
            setInactive();
        } else {
            setActive();
        }
    }
}

Button.java

The Button class extends Entity, it adds an OnClickListener, a hitbox, an icon texture and a selector entity. The OnClickListener defines
what to do when the button is clicked, the hitbox allows us to test if the mouse position when a click occurs should interact with
button, the selector is a texture that is drawn when the button is being hovered over and the icon is a texture to help identify what
the button does.

package uk.co.carelesslabs.ui;

import uk.co.carelesslabs.Enums;
import uk.co.carelesslabs.entity.Entity;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.math.Rectangle;

public class Button extends Entity {
    public OnClickListener listener;
    public Rectangle hitbox;
    public Texture icon;
    public Entity selector;

    public Button(float x, float y, float width, float height, Texture texture, Entity selector) {
        super();
        this.texture = texture;
        this.selector = selector;
        this.pos.x = x;
        this.pos.y = y;
        this.width = width;
        this.height = height;
        hitbox = new Rectangle(pos.x, pos.y, width, height);
    }

    public void setOnClickListener(OnClickListener listener){
        this.listener = listener;
    }

    @Override
    public void draw(SpriteBatch batch){
        if(texture != null) batch.draw(texture, pos.x, pos.y, width, height);
        if(icon != null) batch.draw(icon, pos.x, pos.y, width, height);
        if(isHovered() && selector != null){
            selector.draw(batch);
        }
    }

    // Is button currently being hovered over by the mouse
    private boolean isHovered(){
        return state == Enums.EnityState.HOVERING;
    }

    // Updates the position and size of the hitbox (Rectangle)
    public void updateHitbox() {
        hitbox.set(pos.x, pos.y, width, height);
    }
}

OnClickListener.java

We can create an instance of this interface for each button and use it to create an over ride of the onClick function, within this function
we can write custom code that will run when onClick is called.

package uk.co.carelesslabs.ui;

public interface OnClickListener {
    public void onClick(Button b);
}

An example of setting the onClick function for a button

// Setting the onClick function for a button called button
// We can put any code here
btn.setOnClickListener(
        new OnClickListener(){
            @Override
            public void onClick(Button b) {
                // Declare code to run here
                System.out.println("This button was clicked.");
            }
        });

SquareMenu.java

The SquareMenu is the bottom left square shapped main menu, it has 3 icons at the moment, one for inventory/resources, a build menu and also an icon for settings.

This class extends menu, we set the position and background texture using super (calls the constructor for the extended class ‘Meny’), 4 buttons are added in a 2×2 grid.
The icons and onClick for each button is set, currently we set up only 3 of the buttons.

A new type of menu ‘Build’ is also added, this menu will be hidden by default and only shown when the build icon/button is clicked.

package uk.co.carelesslabs.ui;

import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.math.Vector2;
import uk.co.carelesslabs.Media;
import uk.co.carelesslabs.gameclass;

public class SquareMenu extends Menu {
    public BuildMenu build;

    public SquareMenu(final gameclass game){
        super(0, 0, 2, Media.squareMenu);

        int scale = 2;
        addButtons(3, 2, 2, Media.pinkButton, Media.selector, scale);

        Button btn = buttons.get(0);
        btn.setOnClickListener(
                new OnClickListener(){
                    @Override
                    public void onClick(Button b) {

                    }
                });

        btn = buttons.get(1);
        btn.icon = Media.iconSettings;
        btn.setOnClickListener(
                new OnClickListener(){
                    @Override
                    public void onClick(Button b) {
                        System.out.println("Settings.");
                    }
                });

        btn = buttons.get(2);
        btn.icon = Media.iconResources;
        btn.setOnClickListener(
                new OnClickListener(){
                    @Override
                    public void onClick(Button b) {
                        game.control.inventory = true;
                    }
                });

        btn = buttons.get(3);
        btn.icon = Media.iconBuild;
        buttons.get(3).setOnClickListener(
                new OnClickListener(){
                    @Override
                    public void onClick(Button b) {
                        build.toggleActive();
                    }
                });

        // BUILDING
        build = new BuildMenu(pos.x + width, 0, 2, Media.mainBack);
    }

    // Draw the extended menu and also the build menu.
    @Override
    public void draw(SpriteBatch batch){
        super.draw(batch);
        build.draw(batch);
    }

    // Check if the menu / build menu buttons are being hovered over.
    @Override
    public void checkHover(Vector2 pos) {
        super.checkHover(pos);
        build.checkHover(pos);
    }

}

BuildMenu.java

This class is another extended Menu class which is shown when the build menu button has been pressed. It has 14 columns and 2 rows which will be used
to add building options in another tutorial. Clicking these will allow items to be built/placed onto the map.

This class also adds another button which will call toggleActive(), basically this is a close menu button. The main build menu button will also close
menu when it is clicked and the build menu is currently active.

package uk.co.carelesslabs.ui;

import uk.co.carelesslabs.Media;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;

public class BuildMenu extends Menu {

    public BuildMenu(float x, int y, int scale, Texture mainBack){
        super(x, y, 2, Media.mainBack);
        addButtons(3, 14, 2, Media.pinkButton, Media.selector, 2);
        setInactive();

        // Add a close button
        Button close = new Button(0, 0, Media.close_menu.getWidth() * scale, Media.close_menu.getHeight() * scale, Media.close_menu, null);
        close.pos.x = x + width - (Media.close_menu.getWidth() * scale) - (6 * scale);
        close.pos.y = height - (Media.close_menu.getHeight() * scale) - (6 * scale);
        close.updateHitbox();
        close.setOnClickListener(
                new OnClickListener(){
                    @Override
                    public void onClick(Button b) {
                        toggleActive();
                    }
                });
        buttons.add(close);
    }

    // Only draw when the menu is active.
    public void draw(SpriteBatch batch){
        if(isActive()){
            super.draw(batch);
        }
    }
}

Enum.java

New ENUM list for menu/button states.

...
public enum MenuState {
    ACTIVE,
    DISABLED,
    HOVEROVER,
    CLICKED
}

Control.java

New Vector for the mouse position which is updated on mouseMoved.

...
public Vector2  mousePos = new Vector2();

...
@Override
public boolean mouseMoved(int screenX, int screenY) {
    mousePos.set(screenX, screenHeight - screenY);
    return false;
}

The menus are not yet complete but this gives us a decent foundation for completing / progressing our HUD.

Making a LibGDX Roguelike Survival Game Part 10 – Adding a bird with simple AI #gamedev

[ Full source code ]

In this tutorial we will add an animated bird that will fly randomly around the island, sometimes landing, feeding and walking about. The bird extends the Entity class so can be interacted with by default and added to the Inventory, later we can look at more creative ways to interact with the Bird.  I have not used a state machine for the bird AI, but you can read up on an example of one here.

Images

core/assets/entities/bird

There are 4 images needed for the bird entity, flying, walking, feeding and a shadow. We only require the animation in one direction; the images can be flipped horizontally for the opposite, the shadow is used to give the illusion that the bird is airborne.

Media.java

The class that loads all our image assets requires Texture, TextureRegion[] and Animation variables so that the bird animations can be setup, add the class variables:

public static Texture birdWalk, birdFly, birdPeck, birdShadow;

// Texture Regions
public static TextureRegion[] birdWalkFrames, birdFlyFrames, birdPeckFrames;    

// Animations
public static Animation<TextureRegion> birdWalkAnim, birdPeckAnim, birdFlyAnim;

Loading the assets, first the textures are loaded, they are used to create a TextureRegion[]; an array of frames. We split the texture up into an array using the dimensions of the animation frames. It is possible to have more than one row of images but for simplicity we are using textures with just one so set the TextureRegion to row 0. Once we have an array of frames we can use the TextureRegion to create a new Animation, we will set the frame time to .1 seconds.

Screen Shot 2017-09-04 at 23.21.43

  public static void load_assets(){
        ...
        // Textures
        birdPeck = new Texture("entities/bird/bird_peck.png");
        birdWalk = new Texture("entities/bird/bird_walk.png");
        birdFly  = new Texture("entities/bird/bird_fly.png");
        birdShadow = new Texture("entities/bird/bird_shadow.png");

        // Texture Regions
        birdWalkFrames = TextureRegion.split(birdWalk, 10, 9)[0];
        birdPeckFrames = TextureRegion.split(birdPeck, 10, 9)[0];
        birdFlyFrames = TextureRegion.split(birdFly, 10, 9)[0];

        // Animations
        birdWalkAnim = new Animation<TextureRegion>(.1f, birdWalkFrames);
        birdPeckAnim = new Animation<TextureRegion>(.1f, birdPeckFrames);
        birdFlyAnim = new Animation<TextureRegion>(.1f, birdFlyFrames);
    }

Enums.java

Add a new EntityType of BIRD and add new EnityState to hold all of the possible states for the Bird Entity, we will add the state to the Entity class.

public enum EntityType {
  HERO,
  TREE,
  BIRD
}

public enum EnityState {
  NONE,
  IDLE,
  FEEDING,
  WALKING,
  FLYING,
  HOVERING,
  LANDING
}

Entity.java

There are several changes to the base Entity class, these are added to enable the Bird class to function but will be useful for other AI types. The shadow will need to be drawn so we add an extra draw call to the draw method, checking first if the shadow is present. A new tick method is added that accepts a chunk, some Entities will need to check the tiles in the current chunk.

// Class Vars
public Texture shadow;
public EnityState state; // For logic and selecting image to draw
public Boolean ticks; // .tick will only be called if true
public float time; // Store the time up for the Entity
public Vector3 destVec; // Destination vector for movement
public Tile currentTile; // Tile the Entity occupies
public float coolDown; // For logic

public void draw(SpriteBatch batch){
  if(shadow != null) batch.draw(shadow, pos.x, pos.y, width, height);
  if(texture != null) batch.draw(texture, pos.x, pos.y, width, height);
}

public void tick(float delta){
  time += delta;
}		    

public void tick(float delta, Chunk chunk){

}

Chunk.java

Later when we want to set the currentTile of the Bird we will use the Body position which is a Vector2, we will need to add a new method that returns a tile given a coordinate that has a X and a Y value. We can use the currentTile type to help us make logic decisions, for example we wouldn’t let a bird land on water.

public Tile getTile(Vector2 vector2) {
      ArrayList<Tile> chunk_row;
      int row = (int) ((vector2.y*tileSize/2) / numberRows);
      int col = (int) ((vector2.x*tileSize/2) / numberCols);
      if(tiles.size() > row && row >= 0){
          chunk_row = tiles.get(row);

          if(chunk_row != null && chunk_row.size() > col && col >= 0){
              return chunk_row.get(col);
          }
      }
      return null;
  }

Bird.java

I created this diagram after completing the code but this is where I should have started, when ever you design the logic behind an entity you will save yourself time by planning it out first. I used draw.io to produce this, its an online free and easy to use diagram tool.

bird_logic

It is also useful in my opinion to make the main method for your Entity as simple as possible and be readable, the complexity is hidden within methods. This becomes the following code:

Screen Shot 2017-09-05 at 01.40.08
Hovering Phase

Check if the Entity is hovering state there is a chance to change the state to LANDING, randomBoolean return true if a random value between 0 and 1 is less than the specified value. By setting the value to .2f there is a 20% chance the bird state changes, this is called each tick (60 times per second). This results in the hovering time being somewhat random.

private boolean isHovering(){
    return state == Enums.EnityState.HOVERING;
}
private void setLanding() {
    if(MathUtils.randomBoolean(.2f)){
        state = Enums.EnityState.LANDING;
    }
}

Landing Phase

Once set to LANDING the Entity will have the position Z value decreased until it is less than or equal to zero. On hitting zero the hit-boxes are made active and the state is set to NONE.

private boolean isLanding(){
    return state == Enums.EnityState.LANDING;
}

private void land() {
    if (isAirBorn()) pos.z -= 0.5;
    if(pos.z && <= 0){
        // Landed
        pos.z = 0;
        state = Enums.EnityState.NONE;
        toggleHitboxes(true);
    }
}

public boolean isAirBorn(){
 return pos.z > 0;
}

private void toggleHitboxes(boolean b) {
  body.setActive(b);
  sensor.setActive(b);
}

Move or Hover Phase

If the Entity is flying and has no destination then there is a 85% chance one is set, if the current tile occupied is water then a new destination is always set. Setting destination loops through all of the tiles and checks that the tile is grass, a random number 0 to 100 is equal to 100 and that the tile is not current one. When all these checks are true the destination tile is set and a new destination vector set. The destination vector was originally used to move the entity if you check the commits to this tutorial, it is now only used to check if the Entity is moving in a negative or positive direction to set if the texture is flipped or not.

The max height of the Entity is set to a value of 10 to 20 each time a new destination is set, this added some variety to its movement.

private boolean needsDestination() {
    return destVec == null && isFlying();
}

private void newDestinationOrHover(float delta, Chunk chunk) {
    // 85% chance a new destination is set, unless over water then always
    // get a new destination
    if(MathUtils.randomBoolean(.85f) || currentTile.isWater()){
        setDestination(delta, chunk);
        maxHeight = setHeight();
    } else {
        state = Enums.EnityState.HOVERING;
    }
}

private void setDestination(float delta, Chunk chunk){
    for(ArrayList<Tile> row : chunk.tiles){
        if(destTile != null) break;

        for(Tile tile : row){
            if (tile.isGrass() && MathUtils.random(100) > 99 && tile != currentTile){
                destTile = tile;
                getVector(destTile.pos);
                break;
            }
        }
    }
}

private float setHeight() {
    return MathUtils.random(10) + 10;
}

private boolean isFlying() {
 return state == Enums.EnityState.FLYING;
}

// Enitty.java
public void getVector(Vector3 dest){
    float dx = dest.x - pos.x;
    float dy = dest.y - pos.y;
    double h = Math.sqrt(dx * dx + dy * dy);
    float dn = (float)(h / 1.4142135623730951);

    destVec = new Vector3(dx / dn, dy / dn, 0);
}

Moving Phase

When the destination vector is not NULL (Could also check the destination tile) we move the Entity toward it until it has reached that position. We move the Body of the entity, as it is flying we assume it will not collide with anything so can move the body directly rather than applying for to it. After it moves we update the sensor and the vector3 position.

body.setTransform is used to move the entity, this accepts a Vector2 and an angle which will be 0. The new Vector2 is that of the body moving incrementally closer to the destination tile.

Using interpolate Interpolates between this vector and the given target vector by alpha (within range [0,1]) using the given Interpolation method. the result is stored in this vector.”  we can get the new Vector and move the body. There are many options for the movement type available check them out here: https://github.com/libgdx/libgdx/wiki/Interpolation

To check if the Entity is at the destination the current and destination tile positions. When within a distance of the destination the destination vector and tile are set to NULL.

private boolean hasDestination() {
    return destVec != null;
}

private void moveToDestination(float delta) {
    // https://github.com/libgdx/libgdx/wiki/Interpolation
    body.setTransform(body.getPosition().interpolate(new Vector2(destTile.pos.x + width, destTile.pos.y + height), delta * speed / 4, Interpolation.circle), 0);

    updatePositions();
}

private void updatePositions() {
    sensor.setTransform(body.getPosition(),0);
    pos.x = body.getPosition().x - width/2;
    pos.y = body.getPosition().y - height/4;
}

private void clearDestination() {
    if(isAtDestination()){
        destVec = null;
        destTile = null;
    }
}

private boolean isAtDestination() {
    return currentTile.pos.epsilonEquals(destTile.pos, 20);
}

Landed Phase

When the Z position of the Entity is zero we look to set a new state, this can be feeding, walking or flying. There is a 20% chance of flying, a 5% chance of feeding giving the flying was not set and a 3% change of walking given feeding state was not set. Most often after landing a bird will just fly away, some times it will feed and on the rarely it will walk. When walking is set than a one second cool down is set to ensure the walk lasts at least that amount of time.  Walking moves the bird in the direction it is currently set to face.

public boolean isNotAirBorn(){
   return pos.z == 0;
}

private void setNewState(float delta) {
    if(coolDown > 0){
        coolDown -= delta;
        if(isWalking()){
            walk(delta);
        }
    } else {
        if(MathUtils.randomBoolean(.2f)){
            state = Enums.EnityState.FLYING;
        } else if(MathUtils.randomBoolean(.5f)) {
            state = Enums.EnityState.FEEDING;
            coolDown = .5f;
        } else if(MathUtils.randomBoolean(.3f)) {
            state = Enums.EnityState.WALKING;
            coolDown = 1f;
        }
    }
} 

private boolean isWalking(){
    return state == Enums.EnityState.WALKING;
}

private void walk(float delta) {
  if(currentTile.isPassable()){
    if(tRegion.isFlipX()){
            body.setTransform(body.getPosition().x - speed / 4 * delta, body.getPosition().y,0);
        } else {
            body.setTransform(body.getPosition().x + speed / 4 * delta, body.getPosition().y,0);
        }
        updatePositions();
  }
}

gameclass.java

We add an instance to the gameclass on create() before calling the populateEntityMap, this will ensure the hit-boxes collisions are handled. The Update() method is updated to set the current tile of the entity, call the new tick method that accepts the delta time and also the Island current chunk. Add the same creation of the Bird Entity after if(control.reset){ to ensure a new bird is added when the Island is re-generated.

// New Class variable
// TIME
float time; 
...
// Create() Method
// Bird
island.entities.add(new Bird(new Vector3(10,10,0), box2D, Enums.EnityState.FLYING));

// HashMap of Entities for collisions
box2D.populateEntityMap(island.entities); 
...
// Update() Method
// Tick all entities
for(Entity e: island.entities){
    e.tick(Gdx.graphics.getDeltaTime());
    e.currentTile = island.chunk.getTile(e.body.getPosition());
    e.tick(Gdx.graphics.getDeltaTime(), island.chunk);
}

...
// Last line in Update() Method
time += Gdx.graphics.getDeltaTime();

We now have a Bird that will randomly fly around the Island, it is possible to collect the Bird by interacting with it.

bird_walking