Examples

Animating characters

Animation is one of the most important things when creating games or animations. Processing and PPhys2D make it really easy to work with frame-by-frame animation to create characters, spaceship, landscapes, cars etc.

In this example, a character will be animated using the attachImage() function. We will take 15 images and show them once by once to give the impression of animation. Here are the image used for each frame.

Drawings by Delphine Lenaud

The idea is to cycle through images depending of the value of an incremental counter, and use flipped images when the character is going right.

Use LEFT/RIGHT arrows to move the character.

Applet

This browser does not have a Java Plug-in.
Get the latest Java Plug-in here.

Code

//Import all Phys2D libraries
import pphys2d.bodies.*;
import pphys2d.joints.*;
import pphys2d.shapes.*;
import pphys2d.phys2d.raw.collide.*;
import pphys2d.phys2d.raw.strategies.*;
import pphys2d.phys2d.raw.forcesource.*;
import pphys2d.phys2d.util.*;
import pphys2d.phys2d.raw.shapes.*;
import pphys2d.*;

//Create a PPhys2D world
PPWorld world = new PPWorld();

//Create a PPhys2D Box
PPBox myBox;

//Create an Array to hold the images
PImage[] imagesLib = new PImage[30];

//Create an Array to hold keys
boolean[] keyIsPressed = new boolean[512];

//Is going right (0 or 1) 
int goingRight = 0;

//Counter for animation
int count = 0;

void setup () {
  
  //Set size and framerate
  frameRate(30);
  size(500,500);

  //Set a standard world gravity
  world.setGravity(0, 400);
  
  //Add a box to the world
  myBox = new PPBox(115, 244);
  myBox.setPosition(250,350);
  myBox.setStrokeWidth(1);
  myBox.setRotatable(false);
  world.add(myBox);
  
  //Set world edges in dark gray
  world.setEdges(this, new Color (40, 40, 40));
  
  //Load images to array
  for (int i = 0; i <15; i++) {
    PImage img = loadImage(i + ".png");
    imagesLib[i] = img;
  }
  
  //Reverse all images and save them
  for (int i = 15; i <30; i++) {
    PImage img = loadImage(i-15 + ".png");
    
     // Begin loop for width
     for (int i2 = 0; i2  < imagesLib[i-15].width; i2++) {
       // Begin loop for height
       for (int j = 0; j  < imagesLib[i-15].height; j++) {    
         img.pixels[j*imagesLib[i-15].width+i2] = imagesLib[i-15].pixels[(imagesLib[i-15].width - i2 - 1) + j*imagesLib[i-15].width]; // Reversing x to mirror the image
       }
     }
   
    imagesLib[i] = img;    
  }
}


void draw () {
  
  //Clear screen
  background(50); 
  
  //Check if a key has been pressed add add force
  checkKey();
  
  //Increment count or reset it if it is greater than 14
  count ++;
  if(count  > 28)count = 0;
  
  //Attach image depending on left/right and count
  myBox.attachImage( imagesLib [(int)(count/2 + goingRight*15)] );
  
  //Draw world
  world.draw(this);  
  
}

void keyPressed() {
  //Set presed key code
  keyIsPressed[keyCode] = true;
}


void keyReleased() {
  //Set presed key code
  keyIsPressed[keyCode] = false;
}


void checkKey() {     
  if(keyIsPressed[37]) {
    //LEFT
    myBox.addForce(-80000, 0); 
    goingRight = 0;
  }    
  if(keyIsPressed[39]) {
    //RIGHT
    myBox.addForce(80000.0f, 0);
    goingRight = 1;
  } 
}