Hi I’m trying to code my own Mario game as a beginner but I’m having a lot of difficulty without a mentor. I needed help moving the background screen so when Mario moves too much to the right or left i want the screen to move as well. I don’t have a preference to how this’ll be done only that i want something simple enough for me to understand. I don’t know how to use camera or pop/push matrix. I’d also like to be able to have goombas or something to jump over and have them disappear. I have many things that i need to learn and would appreciate any help. Thanks in advance.
1 Like
At any given moment, your game will be display a portion of the entire level background. Specifically, it will be showing the part from background_x_offset to background_x_offset + width.
Normally, mario moves left and right, and this changes mario_x_position.
Now, if Mario’s position is getting close to the right edge of the background, that is, if( background_x_offset + width - mario_x_position < width / 4 ){, then you know that, in addition to moving Mario to the right (mario_x_position++), you will also need to move the background’s x offset to the right as well (background_x_offset++).
1 Like
Thank you and but wouldn’t the background image need to be the same size as the dimensions? Meaning that if i move the background to the right there would be nothing to see?
No! You can certainly have a background image that is larger than your sketch! I took a bit of time to code you a working example:
float background_x_offset;
float mario_x_position;
float mario_y_position;
PImage bg;
void setup(){
size(200,200);
spoofBackgroundImage();
background_x_offset = 0;
mario_x_position = width/2;
}
void draw(){
background(0);
if( kd[0] ) mario_x_position--;
if( kd[1] ) mario_x_position++;
if( mario_x_position > 3*width/4 && background_x_offset < 600 ){
mario_x_position--;
background_x_offset++;
}
mario_x_position = constrain(mario_x_position,10,190);
image(bg, -background_x_offset,0 );
fill(255,0,0);
ellipse(mario_x_position,170,20,20);
fill(255);
ellipse(mario_x_position,170,10,10);
}
void keyPressed(){
k(true);
}
void keyReleased(){
k(false);
}
int[] ks = {LEFT, RIGHT};
boolean[] kd = {false,false};
void k(boolean b){
for( int i = 0; i < ks.length; i++){
if( ks[i] == keyCode ) kd[i] = b;
}
}
void spoofBackgroundImage(){
PGraphics pg = createGraphics(800,200);
pg.beginDraw();
pg.background(100,100,200);
pg.noStroke();
pg.fill(255);
for( int i = 0; i < 20; i++){
pg.ellipse(random(800), random(200),30,20);
}
pg.stroke(0);
for( int i = 0; i < 40; i++){
pg.fill(255,5*i,100);
pg.rect(20*i,180,20,20);
}
pg.endDraw();
bg = pg.get();
}
2 Likes
Hi there @tokyo!
I recently started writing a series of tutorials for p5.js, and I’ve made one about making the illusion of a 2D camera with matrix translations, which might be useful for what you’re trying to do.
It might take some work porting everything from p5.js to Processing, but it should still be a help with getting acquainted with the translate() function.
Hope that helps!
-Andrew
2 Likes
Thank you so much! I just saw the code and its definitely a great reference! Haha I’ve always been told the background must be the same size as your sketch by my previous teachers but the more you know.
Hey, sorry to be asking all these questions but I inserted a couple of images to the screen and they are relative to Mario so they are always on the screen but I want them to be scrolled out. I tried a couple things but they didn’t work so I was wondering what you’d recommend me to do if its ok.