Zooming and Panning

PhantomCards · May 2014

I am new to processing and currently trying to create a game where the map moves according to the player. Any ideas? I am having troubles using the panning function. Please Help!

clankill3r · May 2014

You mean like in Mario? (omg i just realize some day people will ask what is Mario :) )

I would start by making a tile map. I think you can find most tutorials on this about flash, like this one: http://gamedevelopment.tutsplus.com/tutorials/an-introduction-to-creating-a-tile-map-engine--gamedev-10900

It should not be that different from processing.

For the rest, what are your current problems with the panning. You don't give a lot of info.

Chrisir · May 2014

it might depend if you use 2D, isometric or 3D

let's assume 2D.

since you write about a map, you probably have that.

pls show your code then we can help better

anyway: you could work with a viewport - it defines which part of the large map you show (you virtually move your monitor over the map)

I suggest the player is always in the center of the screen

when he moves right, the viewport wanders right as well

e.g. when your map is a 2D grid much bigger then the screen, you then read it out from position viewportX = 350. 350 being the column where you start reading from the map.

you place column 350 at pos 0 of the screen. col 351 is at pos 20 of the screen (when the tiles of your map are 20x20 pixels).

Greetings, Chrisir ;-)

PhantomCards · May 2014

Here is the program:

int x = 75;
int y = 675;
char keypress;
float zoom;

void setup()
{
  size(750, 750);
  zoom = 3;
  smooth ();
}

void draw()
{
  background(255);
  fill(128);
  noStroke();

  pushMatrix();
  scale(zoom);

  map();
  fill (60, 60, 180);
  ellipse (x, y, 30, 30);

  popMatrix();
}

void keyPressed()
{
  switch (key)
  {
  case 'w':
    {
      y = y - 5;
      break;
    }
  case 's':
    {
      y = y + 5;
      break;
    }
  case 'd':
    {
      x = x + 5;
      break;
    }
  case 'a':
    {
      x = x - 5;
      break;
    }
  }
}

The game is 2D, and I want to move it like Zelda. When the camera moves according to where zelda is moving.

Chrisir · May 2014

this is another idea .

it doesn't come with a 2D grid but is just a very big image (2000x2000)

int x = 370; 
int y = 370; 
char keypress;

float zoom;

PGraphics pg;

int offsetX=-1000, offsetY=-1000;


void setup() { 
  size(750, 750);

  pg = createGraphics(2000, 2000);

  pg.beginDraw();
  pg.background(0, 244, 2);
  pg.stroke(255);
  pg.line(pg.width*0.5, pg.height*0.5, mouseX, mouseY);

  pg.fill(9, 9, 255);

  pg.rect(pg.width/2+100, pg.height/2+200, 100, 100);

  for (int i = 0 ; i < 2000; i+=60)
    for (int j = 0 ; j < 2000; j+=60) {
      pg.fill(9, i, 255);
      pg.ellipse (i, j, 30, 30);
    }
  pg.endDraw();

  zoom = 1;

  smooth ();
}

void draw() {

  background(255);

  fill(128);

  noStroke();

  pushMatrix(); 
  scale(zoom);

  image(pg, offsetX, offsetY); 

  // map(); 
  fill (60, 60, 180); 
  ellipse (x, y, 30, 30);

  popMatrix();
}

void keyPressed() { 
  switch (key) { 
  case 'w': 
    { 
      // y = y - 5;
      offsetY+=5; 
      break;
    } 
  case 's': 
    { 
      //y = y + 5;
      offsetY-=5; 
      break;
    } 
  case 'd': 
    { 
      //x = x + 5; 
      //   if (x>width-100) 
      offsetX-=5;
      break;
    } 
  case 'a': 
    { 
      //x = x - 5; 
      // if (x<100) 
      offsetX+=5;
      break;
    }
  } // switch
}

Chrisir · May 2014

don't PM, better post here in the thread

Chrisir · May 2014

you could have a 2D array instead of the image (see tutorial 2D arrays pls)

the array is much bigger than the screen

when you move, don't move the player but change the start pos x and y where you begin

Howdy, Stranger!

Categories

In this Discussion

Zooming and Panning

Best Answers

Answers