I’ve been working on a top down 2d artsytle game, but every time I try to code the top down view I seem to always make it too complicated to reuse or it just flat out doesn’t work.
I was hoping someone knew how to code this, if so could you please show me some pointers?
I was looking to achieve a system like Pokémon Red’s.
excuse me, are you working in processing 2D or P3D?
can you show some code?
because in 2D it’s easy to draw top down, no?
float x = 140;
void setup() {
size(640, 480);
}
void draw() {
background(0);
fill(255);
rect(100, 100, 200, 10);
rect(100, 100, 10, 200);
fill(255, 0, 0);
ellipse(x, 140, 20, 20);
x+=0.73;
}
void mousePressed() {
x = 140;
}
Sorry, yes I am using 2D, I know how to draw top down but unsure how to track a character moving around.
The type I am going for is the one contained in Pokemon.
Click to any time in this video in which the character is moving around:
That is what I am trying to achieve. My current code is quite useless and doesn’t even work the majority of the time.
I did manage to find this (not sure if it means anything). Mode 1 is what I am trying to go for but on a much larger scale.
/**
* Two Player Camera 2D
* 2019-06 - Jeremy Douglass - Processing 3.4
* Keep two balls (players) in view by midpoint/distance.
* Press any key to switch modes.
*
* Switch between modes: FLAT, TRACK, TRACK_ZOOM.
* 0 FLAT is a normal 2D view.
* 1 TRACK centers view on midpoint between two balls.
* 2 TRACK_ZOOM tracks + zooms distance between balls.
*/
Ball p1;
Ball p2;
float[] bounds;
PVector view;
int mode; // 0=FLAT, 1=TRACK, 2=TRACK_ZOOM
void setup() {
size(600, 600);
fill(0);
// create a bounding box with two bouncing balls
bounds = new float[]{1, height*.2, width-1, height*.6};
p1 = new Ball(random(width), height/2, 2, 10, bounds);
p2 = new Ball(random(width), height/2, 2, 10, bounds);
}
void draw() {
background(128);
pushMatrix();
noFill();
// update ball locations
p1.move();
p2.move();
// view x,y is a world-space location halfway between two balls
view = PVector.lerp(p1.pos, p2.pos, 0.5);
// view.z is the recommended zoom based on inter-ball distance
view.z = (width-20)/(20+p1.pos.dist(p2.pos));
switch(mode){
case 0: // FLAT
break;
case 1: // TRACK
translate(width/2, height/2); // center screen on 0,0
translate(-view.x, -view.y); // recenter screen on view
break;
case 2: // TRACK_ZOOM
translate(width/2, height/2); // center screen on 0,0
scale(view.z); // scale screen to ball distance
translate(-view.x, -view.y); // recenter screen on view
break;
}
// draw
rect(bounds[0], bounds[1], bounds[2], bounds[3]);
p1.render();
p2.render();
ellipse(view.x, view.y, 3, 3);
popMatrix();
// status
String msg = "mode:" + mode + " xy:" + (int)view.x + "," + (int)view.y + " zoom:" + nf(view.z, 0, 1) + "\nPress any key";
text(msg, 5, 15);
}
// simple bouncing ball with a bounding box
class Ball {
float[] box;
PVector pos;
PVector speed;
float rad;
Ball(float x, float y, float speed, float rad, float[] box) {
this.pos = new PVector(x, y);
this.rad = rad;
this.box = box;
this.speed = PVector.random2D().setMag(speed);
}
void move() {
if (pos.x > box[0]+box[2] || pos.x < box[0]) speed.x *= -1;
if (pos.y > box[1]+box[3] || pos.y < box[1]) speed.y *= -1;
pos.add(speed);
}
void render() {
ellipse(pos.x, pos.y, 10, 10);
}
}
// press any key to switch between modes 0, 1, 2
void keyReleased() {
mode = (mode+1)%3;
}
It would still be useful to see what you have tried in your own code so we can guide you to a solution that works for you at your level.
One thing I’ll add is it’s always a good idea to try and break the problem down to the smallest possible steps.
You could first try and make a square room and move the character with the arrow keys. Don’t worry about the assets at this stage. Make everything out of simple blocks and focus on the mechanics (this is called gray boxing and it is a common prototyping approach in game design).
Ask yourself questions like:
Once you solve this, you can start thinking about adding more complex elements like interactive objects, non-player characters, doors, etc.
to keep it short:
you can use String to define a MAZE of sort (it’s a grid of cells). You can denote the walls, the ways, the treasure…
then you need a function to read the data and show each cell (each letter) as a wall piece or path piece.
But for the next level you can use the same technique, just another String. Nice.
Now comes the trick. The maze can be much bigger than the screen.
You don’t output the other maze, that the area around the player. This area is called Viewport.
You scroll the map. This is done that you don’t start showing at position 0,0 but at x,y.
When we decrease x, we scroll the map left.
Not running, just an example:
void fillMaze ( String theContent ) {
// to define the maze read a String (this in ONE line only)
println (theContent);
// println ("length of line "+theContent.length());
for (int i = 0; i < theContent.length(); i++) {
cells[i][classLevel_J] = theContent.charAt(i) - 48; // fill grid
} // for
classLevel_J++;
// println ("counting "+classLevel_J);
} // func
private void defineMazeLevel0 () {
// Init walls inside // HERE YOU ENTER THE MAZE !
// it's rotated 90° afaik !
//
// The content of the cell can be:
// final int emptyCell =0;
// final int wallCell =1;
// final int startCell =2;
// final int goalCell =3;
fillMaze( "111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111");
fillMaze( "100001111111100000000001000301100000000000000000000001000001100000000000000000000001000001");
fillMaze( "100000000000100000000001000001100000000000100000000001000001100000000000100000000001000001");
fillMaze( "100001111110100000000001000001100001111110100000000001000001100001111110100000000001000001");
fillMaze( "100001000000111111000001000001100001000000111111000001000001100001000000111111000001000001");
fillMaze( "100001011111100000000001000001100001011111100000000001000001100001011111100000000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "100001111100100000000001000001100001111100100000000001000001100001111100100000000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "100001011111111111000001000001100001011111111111000001000001100001011111111111000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "100001000000100000000000000001100001000000100000000000000001100001000000100000000000000001");
fillMaze( "111111111100100000000001000001111111111100100000000001000001111111111100100000000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "101001000000100000000000000001101001000000100000000000000001101001000000100000000000000001");
fillMaze( "101001000000111111000001000001101001000000111111000001000001101001000000111111000001000001");
fillMaze( "101101000000100000000001000001101101000000100000000001000001101101000000100000000001000001");
fillMaze( "101001000000100000000001000001101001000000100000000001000001101001000000100000000001000001");
fillMaze( "101001111100100000000000000001101001111100100000000000000001101001111100100000000000000001");
fillMaze( "101001000000100000000001000001101001000000100000000001000001101001000000100000000001000001");
fillMaze( "101001000000100000000001000001101001000000100000000001000001101001000000100000000001000001");
fillMaze( "101001000000111111000000000001101001000000111111000000000001101001000000111111000000000001");
fillMaze( "101001000000000000000001000001101001000000000000000001000001101001000000000000000001000001");
fillMaze( "101001000000000000000001000001101001000000000000000001000001101001000000000000000001000001");
fillMaze( "101001111100100000000001000001101001111100100000000001000001101001111100100000000001000001");
fillMaze( "121001000000000000000000000001121001000000000000000000000001121001000000000000000000000001");
fillMaze( "100000000000000000000001000001100000000000000000000001000001100000000000000000000001000001");
fillMaze( "100000000000000000000001000001100000000000000000000001000001100000000000000000000001000001");
fillMaze( "100001111111100000000001000301100000000000000000000001000001100000000000000000000001000001");
fillMaze( "100000000000100000000001000001100000000000100000000001000001100000000000100000000001000001");
fillMaze( "100001111110100000000001000001100001111110100000000001000001100001111110100000000001000001");
fillMaze( "100001000000111111000001000001100001000000111111000001000001100001000000111111000001000001");
fillMaze( "100001011111100000000001000001100001011111100000000001000001100001011111100000000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "100001111100100000000001000001100001111100100000000001000001100001111100100000000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "100001011111111111000001000001100001011111111111000001000001100001011111111111000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "100001000000100000000000000001100001000000100000000000000001100001000000100000000000000001");
fillMaze( "111111111100100000000001000001111111111100100000000001000001111111111100100000000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "101001000000100000000000000001101001000000100000000000000001101001000000100000000000000001");
fillMaze( "101001000000111111000001000001101001000000111111000001000001101001000000111111000001000001");
fillMaze( "101101000000100000000001000001101101000000100000000001000001101101000000100000000001000001");
fillMaze( "101001000000100000000001000001101001000000100000000001000001101001000000100000000001000001");
fillMaze( "101001111100100000000000000001101001111100100000000000000001101001111100100000000000000001");
fillMaze( "101001000000100000000001000001101001000000100000000001000001101001000000100000000001000001");
fillMaze( "101001000000100000000001000001101001000000100000000001000001101001000000100000000001000001");
fillMaze( "101001000000111111000000000001101001000000111111000000000001101001000000111111000000000001");
fillMaze( "101001000000000000000001000001101001000000000000000001000001101001000000000000000001000001");
fillMaze( "101001000000000000000001000001101001000000000000000001000001101001000000000000000001000001");
fillMaze( "101001111100100000000001000001101001111100100000000001000001101001111100100000000001000001");
fillMaze( "121001000000000000000000000001121001000000000000000000000001121001000000000000000000000001");
fillMaze( "100000000000000000000001000001100000000000000000000001000001100000000000000000000001000001");
fillMaze( "100000000000000000000001000001100000000000000000000001000001100000000000000000000001000001");
fillMaze( "100001111111100000000001000301100000000000000000000001000001100000000000000000000001000001");
fillMaze( "100000000000100000000001000001100000000000100000000001000001100000000000100000000001000001");
fillMaze( "100001111110100000000001000001100001111110100000000001000001100001111110100000000001000001");
fillMaze( "100001000000111111000001000001100001000000111111000001000001100001000000111111000001000001");
fillMaze( "100001011111100000000001000001100001011111100000000001000001100001011111100000000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "100001111100100000000001000001100001111100100000000001000001100001111100100000000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "100001011111111111000001000001100001011111111111000001000001100001011111111111000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "100001000000100000000000000001100001000000100000000000000001100001000000100000000000000001");
fillMaze( "111111111100100000000001000001111111111100100000000001000001111111111100100000000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "101001000000100000000000000001101001000000100000000000000001101001000000100000000000000001");
fillMaze( "101001000000111111000001000001101001000000111111000001000001101001000000111111000001000001");
fillMaze( "101101000000100000000001000001101101000000100000000001000001101101000000100000000001000001");
fillMaze( "101001000000100000000001000001101001000000100000000001000001101001000000100000000001000001");
fillMaze( "101001111100100000000000000001101001111100100000000000000001101001111100100000000000000001");
fillMaze( "101001000000100000000001000001101001000000100000000001000001101001000000100000000001000001");
fillMaze( "101001000000100000000001000001101001000000100000000001000001101001000000100000000001000001");
fillMaze( "101001000000111111000000000001101001000000111111000000000001101001000000111111000000000001");
fillMaze( "101001000000000000000001000001101001000000000000000001000001101001000000000000000001000001");
fillMaze( "101001000000000000000001000001101001000000000000000001000001101001000000000000000001000001");
fillMaze( "101001111100100000000001000001101001111100100000000001000001101001111100100000000001000001");
fillMaze( "121001000000000000000000000001121001000000000000000000000001121001000000000000000000000001");
fillMaze( "100000000000000000000001000001100000000000000000000001000001100000000000000000000001000001");
fillMaze( "100000000000000000000001000001100000000000000000000001000001100000000000000000000001000001");
fillMaze( "100001111111100000000001000301100000000000000000000001000001100000000000000000000001000001");
fillMaze( "100000000000100000000001000001100000000000100000000001000001100000000000100000000001000001");
fillMaze( "100001111110100000000001000001100001111110100000000001000001100001111110100000000001000001");
fillMaze( "100001000000111111000001000001100001000000111111000001000001100001000000111111000001000001");
fillMaze( "100001011111100000000001000001100001011111100000000001000001100001011111100000000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "100001111100100000000001000001100001111100100000000001000001100001111100100000000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "100001011111111111000001000001100001011111111111000001000001100001011111111111000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "100001000000100000000000000001100001000000100000000000000001100001000000100000000000000001");
fillMaze( "111111111100100000000001000001111111111100100000000001000001111111111100100000000001000001");
fillMaze( "100001000000100000000001000001100001000000100000000001000001100001000000100000000001000001");
fillMaze( "101001000000100000000000000001101001000000100000000000000001101001000000100000000000000001");
fillMaze( "101001000000111111000001000001101001000000111111000001000001101001000000111111000001000001");
fillMaze( "101101000000100000000001000001101101000000100000000001000001101101000000100000000001000001");
fillMaze( "101001000000100000000001000001101001000000100000000001000001101001000000100000000001000001");
fillMaze( "101001111100100000000000000001101001111100100000000000000001101001111100100000000000000001");
fillMaze( "101001000000100000000001000001101001000000100000000001000001101001000000100000000001000001");
fillMaze( "101001000000100000000001000001101001000000100000000001000001101001000000100000000001000001");
fillMaze( "101001000000111111000000000001101001000000111111000000000001101001000000111111000000000001");
fillMaze( "101001000000000000000001000001101001000000000000000001000001101001000000000000000001000001");
fillMaze( "101001000000000000000001000001101001000000000000000001000001101001000000000000000001000001");
fillMaze( "101001111100100000000001000001101001111100100000000001000001101001111100100000000001000001");
fillMaze( "121001000000000000000000000001121001000000000000000000000001121001000000000000000000000001");
fillMaze( "111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111");
println ("------------------------- done ------------------------------");
}
//
Thank you! I’ll try to apply this to my game.