6B – MORE EXAMPLES OF ANIMATION (ADVANCED)

EXAMPLE 1 - ASTEROIDS

In this example, we animate a circle to move diagonally upwards and to the right. However, if the circle reaches the top it instantly appears at the bottom. If it reaches the right, it instantly appear on the left. This creates the affect used by Asteroids in the famous game called Asteroids!

The implementation used is interesting. Both the x and y coordinate of the circle follow this logic:

• Continuously increment until a maximum is reached and then reset to zero.

This is what a CircularCounter class does. So, we implemented this using a CircularCounter object for each coordinate.

public class CircularCounter

{

private int count;

private int max;

public CircularCounter(int max)

{

count=0;

this.max = max;

}

public int getCount()

{

return count;

}

public void increment()

{

count++;

if (count > max)

{

count = 0;

}

}

}

public class PongGame extends ApplicationAdapter

{

private ShapeRenderer renderer;

private CircularCounter xCounter;

private CircularCounter yCounter;

private int radius = 50;

@Override

public void create ()

{

renderer = new ShapeRenderer();

int maxWidth = Gdx.graphics.getWidth() - radius;

int maxHeight = Gdx.graphics.getHeight() - radius;

xCounter = new CircularCounter(maxWidth);

yCounter = new CircularCounter(maxHeight);

}

@Override

public void render ()

{

//Update circle's location (move right)

xCounter.increment();

xCounter.increment();

xCounter.increment();

yCounter.increment();

yCounter.increment();

yCounter.increment();

//Clear the screen

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

Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

//Render circle in new location.

renderer.begin(ShapeType.Filled);

renderer.setColor(Color.GREEN);

renderer.circle(xCounter.getCount(), yCounter.getCount(), radius);

renderer.end();

}

}

In the animation above, the circle is moving upwards and towards the right. It will instantly appear at the bottom once it reaches the top and then instantly appear at the left once it reaches the right. Try out the code to see.

EXAMPLE 2 – BOUNCING BALL

In this example, we will make a circle bounce around the screen. Moving either horizontally or vertically involves the same logic:

· Move in the current direction until we are at the end, then move into the opposite direction until we reach the end and then move in the initial direction …

We can implement this effect using a BounceCounter class. A BounceCounter is simply a counter that holds a value. Instead of incrementing and decrementing the counter, we simply tell it to go to the next value. It knows if that means to increase or to decrease.

public class BounceCounter

{

private int count;

private int min;

private int max;

private boolean increasing;

public BounceCounter(int min, int max)

{

count = min;

this.min = min;

this.max = max;

increasing = true;

}

public int getCount()

{

return count;

}

public void next()

{

if (increasing==true)

{

count++;

if (count > max)

{

count = max - 1;

increasing = false;

}

}

else //if (increasing==false)

{

count--;

if (count < min)

{

count = min+1;

increasing = true;

}

}

}

}

public class PongGame extends ApplicationAdapter

{

private ShapeRenderer renderer;

private BounceCounter xCounter;

private BounceCounter yCounter;

private int radius = 50;

@Override

public void create ()

{

renderer = new ShapeRenderer();

int minX = radius;

int minY = radius;

int maxX = Gdx.graphics.getWidth() - radius;

int maxY = Gdx.graphics.getHeight() - radius;

xCounter = new BounceCounter(minX,maxX);

yCounter = new BounceCounter(minY,maxY);

}

@Override

public void render ()

{

//Update circle's location

xCounter.next();

xCounter.next();

yCounter.next();

//Clear the screen

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

Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

//Render circle in new location.

renderer.begin(ShapeType.Filled);

renderer.setColor(Color.BLUE);

renderer.circle(xCounter.getCount(), yCounter.getCount(), radius);

renderer.end();

}

}

In the animation above, the circle bounces around inside the screen. While the arrows don’t show it, it would also bounce once it hits the top (or bottom).