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

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.

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

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

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;
}
}
``````

Many thanks i gonna try it

1 Like

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.

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

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.

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 :

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

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

1 Like

You are welcome !
Bonne journĂ©e (je suis franĂ§ais aussi )

2 Likes