Problem: Image (background) needs to loop in it's --background; x position

Processing Coding Questions
1

I’m trying to make a small game and is currently stock on a few problems

  1. I have made my background/image move from left to right, but when it meets the edge of the background/picture within my processing window I want it to loop again, so my background seems endless.
  • I can’t seem to come up with a solution. Any pointers?
    (Maybe I should store the same image in an Array and forloop between the two? But how do I tell the image where it needs to start :P)
  1. I made a simple moveable circle, where a smaller circle should be shot from by pressing A
  • Here I’m stock in a position where can’t seem to get the smaller circle to keep moving
    (I need to somehow split the x,y positions from the big circle to the small one, but still be able to use the big circle’s position so that the smaller circle know where to start)

2.1) In addition to 2) I believe I need to store the position of big circle, some how, when pressed for shooting the smaller ball. Again, any hints would be great :smiley:

The above is an exercise ‘‘Make you own game’’, not a graded assignment.

PImage img;
int background = 0;
int playerPosX = 50;
int playerPosY = 50;
int playerSize = 50;
int tempShotX = playerPosX;

void setup() {
  size(1400,700);
  img = loadImage("background.jpg");
}

void draw() {
  //Moving background
  image(img, background, 0);
  --background;
 // image(img, -2345, 0);

 //Gem image under array og brug array
 
 //Player
 fill(255);
 ellipse(playerPosX, playerPosY, playerSize, playerSize);

 keyPressed();
 shooting();
}

void keyPressed(){
  if (keyCode == UP){
    playerPosY = playerPosY - 5;
  }
  if (keyCode == DOWN){ 
    playerPosY = playerPosY + 5;
  }
  if (keyCode == RIGHT){
    playerPosX = playerPosX + 5;
  }
  if (keyCode == LEFT){
    playerPosX = playerPosX - 5;
  }
}

void shooting(){
  if (keyCode == 'a' || keyCode == 'A'){
     stroke(0);
     fill(255);
     ellipse(tempShotX, playerPosY, 10, 10);
     tempShotX = tempShotX + 5;
  }
}
2

Hello,

Hint example:

PImage img;

void setup() 
  {
  size(976, 549, P2D);
  img = loadImage("https://cdn.theatlantic.com/thumbor/jb3UdKqcmt1JleWOqNj8UWRxcFk=/0x591:2832x2184/976x549/media/img/mt/2017/10/Pict1_Ursinia_calendulifolia/original.jpg");
  println(img.width, img.height);
  }

void draw() 
  {
  image(img, -width/2, 0);
  image(img, width/2, 0);
  }

image
image978×581 41.8 KB

Consider replacing the x and y locations of the images with variables and move the images each frame. Reset them to repeat when they have hit a limit.

Resources:

:)

3

Hi,

Thank you for your hint, but I just can see it.

I know about width, height, length etc. can be a help with some issues, but can’t see how I can use it here.

I tried to think alternative with the background and now tried and if statement, but of course it doesn’t work as the img.width is the same, even if it moves on the x-line.

void draw() 
  {
  if(img.width <= 100){
  image(img, background, 0);
  }else{
  image(img, background, 0);
  background = background - 10;
  }
}
4

I seem to be stock for good now… Just tried all I can to make the different things work out, but can’t seem to, and I have no idea of what to look for.

PImage img;

int background = 0;
int playerPosX = 50;
int playerPosY = 50;
int playerSize = 50;
int tempShotX = playerPosX;

Shots fire;
Shots[] ArrShot = new Shots[30];

void setup() {
  size(1400,700);
  img = loadImage("background.jpg");
  for(int i = 0; i < ArrShot.length; ++i){
  }
  fire = new Shots();
  
}

void draw() {
  //Moving background
  image(img, background, 0);
  --background;
 
 //Player
 fill(255);
 ellipse(playerPosX, playerPosY, playerSize, playerSize);

 keyPressed(); //Movement
 fire.shot();
}

void keyPressed(){ //Player movement
  if (playerPosY >= 10 + (playerSize/2) && keyCode == UP){
    playerPosY = playerPosY - 5;
  }
  if (playerPosY <= 550 && keyCode == DOWN){ 
    playerPosY = playerPosY + 5;
  }
  if (width > playerPosX && keyCode == RIGHT){
    playerPosX = playerPosX + 5;
  }
  if (playerPosX >= 10 + (playerSize/2) && keyCode == LEFT){
    playerPosX = playerPosX - 5;
  }
/*  if (keyCode == 'b' || keyCode == 'B'){
    println(playerPosX);
  } 
*/
}


class Shots {
int x;
int y;
int shotSize;
int xSpeed;

  void shot(){
  if (keyCode == 'a' || keyCode == 'A'){

     
     stroke(0);
     fill(255);
     ellipse(playerPosX, playerPosY, 10, 10);
     playerPosX = playerPosX + 5;
  }
}
}