Static screen

spamynator_1

I am making a 2d rpg and i am wondering if it is possible to make it so that when one leaves a certain area of the screen that it begins to push the screen causeing it to follow the character to a certain degree? any help will be thankyoud.

calsign

This is a typical problem encountered in making 2D games such as yours. Generally, this effect is achieved either by using the translate() function before drawing takes place (easier at first, leads to problems later on) or by adding an offset determined by the player's location to each of the objects in the game (a better approach, in my opinion).

At some point in time, you will realize that translate() doesn't effect mouse coordinates; this is where many people choose to go with the other option.

spamynator_1

I like the offset idea, could you be a little more detailed please?

calsign

To start... the player has a physical location in the game world. Everything else in the world also has a physical location. These locations are not confined to within the area of the display window.

In order to render the parts of the world that aren't in the display window (probably most of the world), the player must wander beyond the window's boundaries. The screen follows the player. The objects in the world's displayed locations must thus change based on the players location. There are two ways to do this:

You can use translate(), which can be seen as the easy way out: You call translate() with the negative coordinates of the player's location before you draw anything. You will still have to modify the mouse coordinates before you can use them to compare against objects in the translated world.

OR...

You can directly modify the coordinates of the displayed objects based on the offset values described above; this is the math-oriented approach. This may seem harder, but it shouldn't be that difficulty if you are correctly implementing the principles of Object Oriented Programming. You have to modify the mouse coordinates as well. This method is also slightly faster in scenarios requiring a high framerate (such as games).

spamynator_1

so i have the character image displayed with its topleft corner at locx and locy centered in the middle of the screen. When you press w the locy --;, s the locy ++ and so on so forth. The map image is translate(-locx, -locy); Shouldnt the character image stay in the center of the screen while the map moves?

calsign

Yes. You will also have to offset the offset by a value of half the size of the screen. My answer was perhaps two generic. If you need to, just change things around until it works... this is a tried and true method.

spamynator_1

I cannot think of how i would offset the offset seeing you cant;

translate(width/2, height/2); translate(locx, locy);

i had spent the last 10hrs on and off trial and erroring it, do you have any ideas on how one would do that?

i just tried:

int wid = width/2; int hig = height/2;

translate(-locx/wid, -locy/hig); but that just makes the screen stop dead in any combination.

calsign

Okay, enough ambiguity. Here's a simple proof-of-concept sketch (the part you really want is line #20):

//2D Game movement with translate()
//forum.processing.org/two/discussion/1138/static-screen

//Offset values - this is the player's location
float offx = 0;
float offy = 0;

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

  //For asthetics
  rectMode(CENTER);
  noStroke();
}

void draw() {
  background(255);

  //Translate everything
  translate(-offx + width / 2, -offy + height / 2);

  //Draw some stationary stuff
  fill(0);

  rect(10, 10, 80, 100);
  rect(-200, -200, 40, 40);
  rect(120, 20, 10, 10);
  rect(40, 300, 60, 60);

  ellipse(300, 0, 20, 30);

  text("You found me!", 1200, 700); //See if you can find this (using the output is cheating!)

  //Draw the player
  fill(255, 0, 0);
  rect(offx, offy, 10, 10);

  //Display the offset values
  frame.setTitle("Offset: " + offx + ", " + offy);
  println(offx + ", " + offy);

//  println(offx, offy); //Uncomment this for FANCY NEW 2.1 println()!
}

void keyPressed() {
  //Check for arrow keys and modify the offset
  if(key == CODED) {
    if(keyCode == UP)
      offy -= 10;
    if(keyCode == DOWN)
      offy += 10;
    if(keyCode == RIGHT)
      offx += 10;
    if(keyCode == LEFT)
      offx -= 10;
  }
}

spamynator_1

You are the best, thank you very much for dealing with me. :)