Das ist für alle interessant, die planen ein Spiel mit einem Level zu bauen in dem es Gänge, Ecken, Fallen, etc. gibt.
Fragen können hier gestellt werden!

Download: Collision Map Example

int x; // our player's x-position
int y; // our player's y-position
int s; // our player's visual size
int half_size; // // half our player's visual size
int speed; // the speed at which we are moving

// our displayed level
PImage level;

// our collision map, basically a two-dimensional array (an array of arrays)
// the information of where we are able to go is encoded in the following way
// where '1' is 'true' and '0' is 'false'

/*
*  0 1 0 0 0 0 0
*  0 1 0 0 0 0 0
*  0 1 1 1 1 1 1  ---> a way! :)
*  0 1 0 0 0 0 0
*  0 1 0 0 0 0 0
*/

// this matrix will have the same dimension as our level image
boolean[][] collisionMap;

void setup() {

  size(200, 200);
  background(0);
  // draw our player from the center
  rectMode(CENTER);

  // start in the center of the canvas
  x = width/2;
  y = height/2;
  // size of 10, half_size will be 5
  s = 10;
  half_size = s / 2;
  // moving 2 pixels each time we press a key
  speed = 2;

  // load our lovely level image
  level = loadImage("level.gif");
  // load our black & white pixel collision map image
  PImage colMapImage = loadImage("collisionMap.gif");
  // generate our collision map as an two-dimensional boolean array
  collisionMap = new boolean[colMapImage.width][colMapImage.height];

  // our collision map is encoded only in black & white pixels
  // so we get them for comparison
  color black = color(0);
  color white = color(255);

  // go through each row in our collision map image
  for (int i = 0; i < colMapImage.width; i++) {
    // go through each column in our collision map image
    for (int j = 0; j < colMapImage.height; j++) {

      // get the color value of the pixel at our current position
      color c = colMapImage.get(i, j);
      // if the pixel is black
      if (c == black) {
        // we can't go there
        collisionMap[i][j] = false;
      }
      // if it is white
      else if (c == white) {
        // it's good to go
        collisionMap[i][j] = true;
      }
      else {
        // should happen ;)
        println("Whoops! We shouldn't have colors other than black and white in our collision map!");
      }

    }
  }
}

void draw() {
  background(0);
  // show our level
  image(level, 0, 0);

  // draw our player at it's current position
  fill(255, 0, 0);
  noStroke();
  rect(x, y, 10, 10);
}

/*
*  this is where we actually move
*  the strategy is as follows:
*  - pretend we would move in the planned direction
*    (left, right, up or down)
*  - then check if at this new position, all 4 corners
*    of our rectangle would be within our allowed area
*  - if that's the case: move
*/
void keyPressed() {

  // would each corner of the next step be within our boundaries?
  // default: no!
  boolean up_left = false;
  boolean up_right = false;
  boolean down_right = false;
  boolean down_left = false;

  if (keyCode == LEFT) {
    // check first if we are still within our canvas
    if (x >= half_size + speed)
    {
      // check all four corners to see if they would be with the allowed area
      up_left = collisionMap[x - speed - half_size][y - half_size];
      up_right = collisionMap[x - speed + half_size][y - half_size];
      down_right = collisionMap[x - speed + half_size][y + half_size];
      down_left = collisionMap[x - speed - half_size][y + half_size];

      // if that's the case for each corner
      if (up_left && up_right && down_right && down_left) {
        // move
        x -= speed;
      }
    }
  }

  // this basically is repeated for all possible ways to go…
  if (keyCode == RIGHT) {
    if (x < = width - half_size - speed)
    {
      up_left = collisionMap[x + speed - half_size][y - half_size];
      up_right = collisionMap[x + speed + half_size][y - half_size];
      down_right = collisionMap[x + speed + half_size][y + half_size];
      down_left = collisionMap[x + speed - half_size][y + half_size];

      if (up_left && up_right && down_right && down_left) {
        x += speed;
      }
    }
  }

  if (keyCode == UP) {
    if (y >= half_size + speed)
    {
      up_left = collisionMap[x - half_size][y - speed - half_size];
      up_right = collisionMap[x + half_size][y - speed - half_size];
      down_right = collisionMap[x + half_size][y - speed + half_size];
      down_left = collisionMap[x - half_size][y - speed + half_size];

      if (up_left && up_right && down_right && down_left) {
        y -= speed;
      }
    }
  }

  if (keyCode == DOWN) {
    if (y < = height - half_size - speed)
    {
      up_left = collisionMap[x - half_size][y + speed - half_size];
      up_right = collisionMap[x + half_size][y + speed - half_size];
      down_right = collisionMap[x + half_size][y + speed + half_size];
      down_left = collisionMap[x - half_size][y + speed + half_size];

      if (up_left && up_right && down_right && down_left) {
        y += speed;
      }
    }
  }
}