PROCESSING
GAME ELEMENTS IN ARRAYLISTS

LESSON NOTE/GUIDE

WHY USE ARRAYLISTS?

You may not have considered it before, but a video have many different game elements. For example, the game Space Invaders requires about 30 badguys at the start of a level. And keeping track of all elements can be a challenge. Similarly, updating or drawing or even removing these elements is also challenging.

The best way to handle this task is to group your elements into an ArrayList (or some other kind of data structure). Note that an ArrayList is more useful here than a normal array because its size can vary which means we can remove elements when we are done with them.

WHY ARE ARRAYLISTS USEFUL?

Sticking with the theme of bad guys, the ArrayLists allow us to have only one name for all badguys. So it makes the naming very simple.

But more importantly, whenever we want to something to the entire group of bad guys (such as move, check for collisions, give them a chance to shoot, and getting drawn on the screen), we can do this very easily by looping over the ArrayList.

GETTING STARTED WITH AN ARRAYLIST

First, since the ArrayList will need to be accessible in many methods, we declare it as a data field. For example, we do something like this:

public ArrayList<BadGuy> bgs;

Then, in the setup() method, we create the ArrayList. Something like this:

bgs = new ArrayList<BadGuy>();

We are now ready to use the ArrayList. Of course, we have to add things to it for it to be useful.

ADDING ITEMS TO THE ARRAYLIST

There are two ways of doing this.

In the case of a classic Space Invaders game, you can use loops to create a bunch of Badguy objects at specific locations. Or, you can also do this manually adding each BadGuy at a specific location.

In the following code example, we create 10 Badguys at location (bx, 400). Each Badguy is added to the ArrayList named bgs.

for (int bx = 20; bx <= 520; bx = bx + 50)

{

Badguy tmpBg = new BadGuy(bx, 400);

bgs.add(tmpBg);

}

But some scenarios do not allow for this to be done. We need to create items at different points in the game. For example, when shooting, you need to add a bullet item to an ArrayList that holds bullet objects.

We simply use something like this:

Bullet b = new Bullet(….); //creates a Bullet object named b

bullets.add(b); //add b to the ArrayList named bullets

PARTIAL EXAMPLES OF PROCESING ALL BADGUYS IN THE ARRAYLIST bgs

EXAMPLE 1 – DRAWING A RECTANGLE FOR EACH BADGUY

The following code would likely be placed in the draw() method.

for (int i=0; i<bgs.size(); i++)

{
Badguy c = bgs.get(i); //c is the current badguy we are working with

rect(c.x, c.y, c.size, c.size) //a rectangle

}

EXAMPLE 2 – DRAWING AN IMAGE FOR EACH BADGUY

The following code would likely be placed in the draw() method. But you also need to load the image in the setup() method before using it.

for (int i=0; i<bgs.size(); i++)

{
Badguy c = bgs.get(i); //c is the current badguy we are working with

image(img, c.x, c.y) //img is the loaded image

}

EXAMPLE 3 – DRAWING EACH BADGUY WHEN THE BADGUY CLASS CONTAIN A DRAW() METHOD

The following code would likely be placed in the draw() method.

for (int i=0; i<bgs.size(); i++)

{
Badguy c = bgs.get(i); //c is the current badguy we are working with

c.draw(); //calls the draw method for Badguy c

}

EXAMPLE 4 – MOVING ALL BADGUYS

The following code would likely be placed in the draw() method, probably above any drawing code.

for (int i=0; i<bgs.size(); i++)

{
Badguy c = bgs.get(i); //c is the current badguy we are working with

c.move(); //calls the move method for Badguy c

}

A MORE COMPLEX PARTIAL EXAMPLE

EXAMPLE OF COMPARING ALL BADGUYS TO ALL BULLETS IN A GAME

This is a class problem. We have 30 badguys on the screen. And we have a bunch of bullets that our spaceship is shooting. How do we compare the two?

EXAMPLE

We assume you already have an ArrayList of BadGuy objects named bgs and another ArrayList of Bullet objects name bullets.

The pseudocode is:

For each badguy b:

For each bullet c:

If b and c are colliding:

Remove b and c. Maybe update the score.

Else:

Do nothing

Here is a solution in Java:

for (int i=0; i<bgs.size(); i++)

{

for (int j=0; j<bullets.size(); j++)

{

Badguy bg = bgs.get(i); //bg is the current badguy we are checking

Bullet bu = bullets.get(j); //bg is the current bullet we are checking

if (bg.collidingWith(bu))

{

bgs.remove(bg);

i--;

bullets.remove(bu);

j=0; //reset

}

}

FULL PROGRAM 1 – ADDING A BADGUY OBJECT BASED ON CLICKS

· This program contains two classes. It simply create a square that represents a BadGuy object whenever you click on the screen.

Notice in the main sketch code, the four steps to start working with an ArrayList are commented to help you understand.

BADGUY CLASS

public class Badguy

{

public int x;

public int y;

public int size;

public Badguy(int x, int y, int size)

{

this.x = x;

this.y = y;

this.size = size;

}

}

THE MAIN SKETCH CODE

//1.Declare array list of Badguy objects

public ArrayList<Badguy> bgs;

public void setup()

{

size(1000,900);

surface.setTitle("Screen refresh");

frameRate(20);

//2.Create the empty array list

bgs = new ArrayList<Badguy>();

}

public void draw()

{

background(0);

//4. Every frame, we loop over the ArrayList

// and draw each Badguy (a rectangle for now)

for(int i = 0; i<bgs.size(); i++)

{

Badguy cb = bgs.get(i);

rect(cb.x, cb.y, cb.size, cb.size);

}

}

public void mouseClicked()

{

//3. When mouse is clicked, create a local

//reference to a Badguy object. To save it

//we place it in the ArrayList bgs.

Badguy b = new Badguy(mouseX, mouseY, 10);

bgs.add(b);

}

FULL PROGRAM 2 – ADDING A MOVING BADGUY OBJECT BASED ON CLICKS

· Like the previous program, a badguy object is added when you click. However, the badguy now has a random movement to do as well.

BADGUY CLASS

public class Badguy

{

public int x;

public int y;

public int size;

public int dir;

public int speed;

public Badguy(int x, int y, int size)

{

this.x = x;

this.y = y;

this.size = size;

this.dir = (int)(Math.random() * 2); //0 or 1

this.speed = (int)(Math.random() * 2) + 1; //1 or 2

}

public void move()

{

if (dir == 0) //left

x = x - speed;

else //right

x = x + speed;

}

}

THE MAIN SKETCH CODE

//1.Declare array list of Badguy objects

public ArrayList<Badguy> bgs;

public void setup()

{

size(1000,900);

surface.setTitle("Screen refresh");

frameRate(20);

//2. Create the empty array list

bgs = new ArrayList<Badguy>();

}

public void draw()

{

background(0);

//4. Move badguys

for(int i = 0; i<bgs.size(); i++)

{

Badguy cb = bgs.get(i);

cb.move();

}

//5. Draw badguys

for(int i = 0; i<bgs.size(); i++)

{

Badguy cb = bgs.get(i);

rect(cb.x, cb.y, cb.size, cb.size);

}

}

public void mouseClicked()

{

//3. When mouse is clicked, create a Badguy object.

//We then add it to the ArrayList.

Badguy b = new Badguy(mouseX, mouseY, 10);

bgs.add(b);

}

FUTURE EXAMPLE?

Can you think of an example that would be helpful to you? Let you teacher know.