Digital Games - Animation

Animation

Timers Recap
Character State
Frame Management
Other Techniques
Example Game (with timers)

Reading

Timers

Remember that processing runs at 60 fps. This means that an integer, incrementing every frame will hit a multiple of 60 every 1 second.

60 (1s), 120 (2s), 180 (3s), ...

You may also use the global reserved variable frameCount which is an integer representing the amount of frames since your sketch has started.

Resetting Timers

Let's assume you want to loop 3 images, each for 1 second and then back to the first.

Using FrameCount

Using another variable as a timer also works, provided you keep track of the current frame you want to show.

Character State

You're going to have to maintain the state of your character, and at some point it will change.

For example, your character will be either: idle, moving, firing / action, ...

To keep this as simple as possible use a single integer to keep track and leave a comment for yourself.

Character state

Frame Management

There are 2 options for managing a list of frames for your character, an Array or an ArrayList. Since your character will most likely not add or remove any animation frames during your game, an ArrayList is not necessary.

For every animation of your character you will need to store a list of frames for that animation. We'll use arrays.

Arrays of Frames

Changing Frames

Discussion

Notice how we are looping our frame at a rate of 60 / 5 which means 12 frames per second, which is pretty good for animation.

Also notice how we must check the state our character is in, is the character walking? shooting? or just standing there.

Review switch statements in the processing documentation! Default will execute if no cases were matched.

Storing Frames

Make sure not to be loading the same frames for multiple instances of the same object. This will most likely incur a performance penalty.

Storing all arrays of frames inside an Animation class would be the preferred technique. Then to access those frames it's simply a matter of calling
animation.sequence[framePosition]

Store animation frame sequences in a single class and load them all in the constructor.

Plan out your character states and frame arrays carefully.

When updating frames, make sure you're updating the right list and checking the limit of your frame Array and not exceeding it.

Watch out for an index out of bounds error, this means your currentFrame variable is trying to access a frame in one of your arrays that is not there. This usually means the currentFrame variable is too large or you are updating the wrong list.

Other Techniques

Not all animation requires frames, for example the arms of a clock rotate based on the time.

Regardless of the style of animation you decide to use, timers will be important in managing that animation.

Timers can be based on a custom integer, or reserver global variables like frameCount and millis()

Rotation Example

Character player;
float speed = 2;
PVector upForce = new PVector(0, -speed);
PVector downForce = new PVector(0, speed);
PVector leftForce = new PVector(-speed, 0);
PVector rightForce = new PVector(speed, 0);
boolean up, down, left, right, fire;

int addEnemy = 90;

int state = 0;

ArrayList<Background> backgrounds = new ArrayList<Background>();
ArrayList<Enemy> enemies = new ArrayList<Enemy>();

//store missile frames for the whole sketch
int totalFrames = 60;
PImage[] frames = new PImage[totalFrames];

void keyPressed() {
  if (key == CODED) {
    if (keyCode == LEFT) left = true;
    else if (keyCode == RIGHT) right = true;
    else if (keyCode == UP) fire = true;
  } else {
    if (key == ' ') fire = true;
  }
}
void keyReleased() {
  if (key == CODED) {
    if (keyCode == LEFT) left = false;
    else if (keyCode == RIGHT) right = false;
    else if (keyCode == UP) fire = false;
  } else {
    if (key == ' ') fire = false;
  }
}

void setup() {
  size(fullWidth, fullHeight);
  stroke(200);
  strokeWeight(2);
  fill(63);

player = new Character(new PVector(width/2, height - 50));

backgrounds.add(new Background("img/levels/bg.jpg", 2, 2, 0.25));
  backgrounds.add(new Background("img/levels/stars.png", 2, 2, 1));

//load animation frames
    int fileNum = 10;
    for (int i = 0; i < totalFrames; i++) {
        frames[i] = loadImage("img/game/160x120/explosion1_00" + (fileNum) + ".png");
        fileNum++;
    }
}

void draw() {
    switch (state) {
        case 0: level1(); break;
        case 1: gameOver(); break;
    }
}

void level1() {
    background(255);
    if (left) player.move(leftForce);
    if (right) player.move(rightForce);
    if (up) player.move(upForce);
    if (down) player.move(downForce);
    if (fire) player.fireMissile();

if (frameCount % addEnemy == 0) {
        enemies.add( new Enemy(new PVector(random(64, width - 128), -64)) );
        if (addEnemy > 20) {
             addEnemy--;
        }
    }
    //draw bgs
    for (int i = 0; i < backgrounds.size(); i++) {
        backgrounds.get(i).draw(new PVector(-player.pos.x / 4, frameCount * 2));
    }
    //draw enemies
    for (int i = 0; i < enemies.size(); i++) {
        Enemy e = enemies.get(i);
        e.update();
        e.draw();
        if (e.collision(player)) {
            player.hit();
        }
    }
    //update + draw player
    player.update();
    //draw other stuff
    drawHealthBar();
    drawScore();
}

void gameOver() {
    background(255);
    text("Game Over", width/2 - 40, height/2);
}

void drawScore() {
    text("SCORE: " + player.score, width - 100, 40);
}

void drawHealthBar() {
    int healthBarWidth = 200;
    pushMatrix();
    fill(0, 64);
    translate(20, 20);
    rect(0, 0, healthBarWidth, 20); //container for health
    fill(255, 0, 0, 255);
    rect(0, 0, healthBarWidth * player.healthPercentage, 20); //health bar
    popMatrix();
}

//a class to describe a Tile
class Missile {
    PVector pos, vel;
    int life;
    ArrayList list;
    ArrayList<Explosion> explosions;
    //animation frames
    int frameTimer;
    Missile(pos, vel, life, list) {
        this.pos = pos;
        this.vel = vel;
        this.life = life;
        this.list = list;
        explosions = new ArrayList<Explosion>();
        frameTimer = totalFrames;
    }
    boolean collision(MovingObject other) {
        if (dist(pos.x, pos.y, other.pos.x, other.pos.y) < other.radius) {
            return true;
        }
        return false;
    }
    void update() {
        //off screen
        if (pos.y < 0) {
            life = -1;
            frameTimer = -1;
            list.remove(this);
        }
        //hit enemy
        if (life == 0) {
            vel.mult(0.4); //slow down speed, this looks cool
            for (int i = 0; i < 32; i++) {
                explosions.add( new Explosion(new PVector(pos.x, pos.y), explosions ));
            }
        }
        //explosion finished
        if (life < 0 && frameTimer == 0) {
            list.remove(this);
        }
        //update explosions
        for (int i = 0; i < explosions.size(); i++) {
            Explosion e = explosions.get(i);
            e.update();
            e.draw();
        }
        //update
        pos.add(vel);
        life--;
    }
    void draw() {
        stroke(200);
        strokeWeight(2);
        fill(63);
        if (life > 0) {
            pushMatrix();
            translate(pos.x, pos.y);
            ellipse(0, 0, 8, 8);
            popMatrix();
        } else {
            if (frameTimer > 0) {
                pushMatrix();
                translate(pos.x, pos.y);
                image(frames[totalFrames - frameTimer], -80, -60);
                popMatrix();
                frameTimer--;
            }
        }
    }
}

//a class to describe a generic Character
class MovingObject {
  //fields
  PVector pos, vel, acc;
  float radius;
  float damp = 0.8; //constant damping factor

MovingObject(PVector pos) {
    this.pos = pos;
    vel = new PVector(); //must create instance
    acc = new PVector(); //these are complex data types (i.e. objects)
  }
  //move method, PVector force as parameter, add to acceleration
  void move(PVector force) {
    acc.add(force);
  }
  boolean collision(MovingObject other) {
      if (dist(pos.x, pos.y, other.pos.x, other.pos.y) < radius + other.radius) {
          return true;
      }
      return false;
   }
  //update the character
  void update() {
    vel.add(acc); //add acceleration to velocity
    vel.mult(damp); //multiply velocity by dampening factor (0.9-0.99);
    pos.add(vel); //add velocity to position (moves character)
    acc.set(0, 0, 0); //clear the acceleration for the next loop
  }
  
  void draw() {
    stroke(200);
    strokeWeight(2);
    pushMatrix();
    translate(pos.x, pos.y);
    ellipse(0, 0, 32, 32);
    popMatrix();
  }
}

//a class to describe a generic Character
class Character extends MovingObject {
  ArrayList<Missile> missiles;
  //control firing
  int fireTimer = 0;
  int invincibleTimer = 60;
  int health;
  int maxHealth;
  float healthPercentage;
  int score = 0;
  //a constructor to initialize the fields above with initial values
  Character(PVector pos) {
    super(pos);
    missiles = new ArrayList<Missile>();
    radius = 24;
    maxHealth = 10;
    health = maxHealth;
    healthPercentage = 1;
  }

void fireMissile() {
    if (fireTimer === 0) {
        missiles.add( new Missile(new PVector(pos.x, pos.y), new PVector(0, -8), 200, missiles) );
        fireTimer = 6;
    }
    fireTimer--;
  }

void hit() {
    if (invincibleTimer == 0) {
        health--;
        if (health == 0) {
            state = 1;
        }
        invincibleTimer = 60;
        healthPercentage = (float) health / (float) maxHealth;
    }
  }
  
  //update the character
  void update() {
    for (int i = 0; i < missiles.size(); i++) {
        Missile m = missiles.get(i);
        m.update();
        m.draw();
        for (int j = 0; j < enemies.size(); j++) {
            Enemy e = enemies.get(j);
            if (m.collision(e) && m.life > 0) {
                m.life = 0;
                enemies.remove(e);
                score += 100;
            }
        }
    }
    super.update();
    if (invincibleTimer > 0) {
        if (invincibleTimer % 2 == 0) {
            draw();
        }
        invincibleTimer--;
    } else {
        draw();
    }
  }
  
  void draw() {
    stroke(200);
    strokeWeight(2);
    fill(63);
    
    pushMatrix();
    translate(pos.x, pos.y);
    if (vel.x < -0.5) {
        rotate(-PI/8);
    } else if (vel.x > 0.5) {
        rotate(PI/8);
    }
    ellipse(0, 0, radius * 2, radius);
    arc(0, -4, radius * 2 - 12, radius, -PI, 0);
    popMatrix();
  }
}

//a class to describe a generic Character
class Enemy extends MovingObject {
  int health;
  int dartTimer;
  PVector down;
  PVector dart;
  int redTimer, redDir;
  Enemy(PVector pos) {
    super(pos);
    health = 5;
    dartTimer = (int) random(height/10, height/4);
    radius = 32;
    down = new PVector(0, height * 0.001); //initialize here to use width / height
    dart = new PVector(0, height * 0.008); //initialize here to use width / height
    redTimer = 0;
    redDir = 1;
  }
  
  //update the character
  void update() {
    dartTimer--;
    if (dartTimer < 0) {
        move(dart);
    } else {
        move(down);
    }
    //represents a color value from 0 to just over 100
    redTimer += 16 * redDir;
    if (redTimer > 100 || redTimer < 0) {
    	redDir *= -1;
    }
    super.update();
  }
  
  void draw() {
    stroke(200);
    strokeWeight(2);
    //add the redTimer to the fill, making enemies color pulse
    fill(128 + redTimer, 0, 0);
    pushMatrix();
    translate(pos.x, pos.y);
    ellipse(0, 0, radius * 2, radius * 2);
    popMatrix();
  }
}