Make a "world" bigger than the screen and a following camera

Processing Beginners
1

Hi everyone i tried to make an ecosystem and for now its working great, mostly because i receive a lot of help from here. ( see topic : A pathfinding solution).

But now my world gonna be too small for my ecosystem, so i need to make a world bigger than my game window and a camera following the player.

For now i cant find a way to make it or a decent tutorial. Can someone guide or help me ?

Thanks for your time.

2

Try to use the function camera() :

https://forum.processing.org/one/topic/using-camera-to-follow-a-moving-object.html

http://processing.org/reference/camera_.html

Or if you have a 2D world :

https://forum.processing.org/one/topic/2d-moving-objects-chasing-by-camera.html

3

yes thats a very basic 2d top down game.
Thanks for your advice, how do i make my world bigger than my game window ?

what i mean by that is, my game screen size is 1200,900 for now and its the limit of my world. So how do i make a bigger world(sorry i cant find a better word for that) than my game screen

4

For example you have your “world” bigger than your canvas (1000*1000) and you translate to px,py (the coordinates of the up left corner) to draw your world (here it’s a rect).
Then you can move your world by using the arrows keys :

int w = 1000, h = w;
int px,py;

void setup() {
  size(500, 500);
  px = width/2 - w/2;
  py = height/2 - h/2;
}

void draw() {
  background(0);
  pushMatrix();
  translate(px,py);
  fill(255);
  rect(px,py,w,h);
  popMatrix();
}

void keyPressed(){
  if (keyCode == LEFT){
    px -= 5;
  }else if (keyCode == UP){
    py -= 5;
  }else if (keyCode == RIGHT){
    px += 5;
  }else if (keyCode == DOWN){
    py += 5;
  }
}
5

Many thanks i gonna try it

1 Like
6

hi i have a problem (one more), i use eclipse with java and i use processing as library.

I dont know how to “translate” your code.

so here is my code

my main class:

public class Game extends PApplet{
	
	public static void main(String[] args){
		PApplet.main("Game");
	}
	
	public void settings(){
		size(1200,900);
	}
	
	World world;
	
	public void setup(){
		world = new World(this);
	}
	
	public void draw(){
		background(255);
		world.run();
	}
}

my world class : (i dont put any of my code its not relevant i think)


public class World {
	PApplet parent;
        public World(PApplet p){
	       parent = p;
        }

        public void run(){

        }
}

i think maybe i need a player class but i wait for your advices before create it.

7

Hey,

I’m don’t know too much about “Java classes syntax” but I think that you can add px and py propreties to your class World so when you draw your world in your canvas, translate to px and py.

Then you can update them (when you press a key for example) :

world.px += 5;
world.py -= 5;

Tell me if I’m wrong

8

Hi sorry for the delay.

well what you propose help me, now my world is bigger than my screen. Thanks

Now i need a way to center the “camera” (center of my screen) on my player but i have a lot of bugs and i dont know why. ex here : my player appear on the top left of my white area and dont move but the “camera” move properly.

here is my code for now:

(game class dont change except i remove the background)

world class:

public class World {
        int worldW = 2000;
	int worldH = 2000;
	Player player;

        public World(PApplet p){
		parent = p;
		
		prairie = new Prairie(parent);

                float px = parent.width/2 - worldW/2;
		float py = parent.height/2 - worldH/2;
		PVector l = new PVector(px,py); 
		player = new Player(parent,l);
       }

       public void run(){
		
		parent.background(0); ///fond noir = le néant
		
		parent.pushMatrix();
		parent.translate(player.position.x, player.position.y);
		
		parent.fill(255); ///le monde en lui meme
		parent.rect(0, 0, worldW, worldH);
		prairie.run(parent);
		
		parent.popMatrix();
		
		player.run(parent);
		player.update(parent);
		player.keyPressed(parent);

       }
}

my player class:

public class Player {
	PApplet parent;
	
	public PVector position;
	
	@SuppressWarnings("deprecation")
	public Player(PApplet p, PVector l){
		parent = p;
		position = l.get();
		
	}
	
	public void run(PApplet p){
		//parent.rectMode(PConstants.CENTER);
		parent.fill(204,0,204);
		parent.rect(position.x, position.y, 10, 10);
	}
	
	public void update(PApplet p){
		
	}
	
	public void keyPressed(PApplet p){
		if(p.key == PConstants.CODED){
			if(p.keyCode == PConstants.UP){
				position.y += 5;
			}
			if(p.keyCode == PConstants.DOWN){
				position.y -= 5;
			}
			if(p.keyCode == PConstants.LEFT){
				position.x += 5;
			}
			if(p.keyCode == PConstants.RIGHT){
				position.x -= 5;
			}
		}
	}
}

and my green area :

public class Prairie {
	PApplet parent;
	
	public Prairie(PApplet p){
		parent = p;
	}
	
	public void run(PApplet p){
		parent.noStroke();
		parent.fill(0,153,0,25);
		parent.rect(250, 250, 1500, 1500,7);
	}
}

Thanks again for yours help and i hope you have a nice weekend.

9

I think that the error is there :

public void run(PApplet p){
		//parent.rectMode(PConstants.CENTER);
		parent.fill(204,0,204);
		parent.rect(position.x, position.y, 10, 10);
}

Look at this diagram :

image
image.png1157Ă—653 5.58 KB

You need to draw your player at the coordinates (width/2,height/2) so it always stays in the center of the screen.

1 Like
10

Sir many thanks and all my respect for the diagram, its work !!!

1 Like
11

You are welcome ! :slight_smile:
Bonne journée (je suis français aussi :fr: )

2 Likes