How can I change Image background with mouse click?

I just want to make a 2D rpg games with the background of the game can change in different stages of the game. Please send help:((

Hello,

Resources here:

https://processing.org/tutorials/interactivity
https://processing.org/reference/mouseClicked_.html < You should be able to adapt this to change the background.

:)

1 Like

Hi @steven,

Sorry, but if you’re wondering how to set the proper background, the path to programming an RPG is a pretty demanding challenge…
However, and as so often said, one grows with its tasks. :slight_smile:

As it is always fun to do some coding…
I just made a simple example for a game and how it could be structured and maybe you can get some ideas from it.
(Doesn’t make much more than a movable player and sets the background of the room if the player is inside …)

Cheers
— mnse

// Main Sketch

KeyHandler keyhandler;
World world;

void setup() {
  size(1000, 1000);
  keyhandler = new KeyHandler();
  world=new World();
}

void keyPressed() {
  keyhandler.update(key, true);
}

void keyReleased() {
  keyhandler.update(key, false);
}

void draw() {
  background(0);
  world.update();
  world.display();
}

// -----------------------------------------------------
public class KeyHandler {
  public final static int KEY_UP = 0;
  public final static int KEY_DN = 1;  
  public final static int KEY_LEFT = 2;
  public final static int KEY_RIGHT = 3;
  public final static int KEY_FIRE = 4;  
  private final boolean[] keyStates = new boolean[] {false, false, false, false,false};  
  public void update(char k, boolean state) {
    switch(k) {
    case 'w':
      keyStates[KEY_UP]=state;
      break;
    case 's':
      keyStates[KEY_DN]=state;
      break;
    case 'a':
      keyStates[KEY_LEFT]=state;
      break;
    case 'd':
      keyStates[KEY_RIGHT]=state;
      break;
    case ' ':
      keyStates[KEY_FIRE]=state;
      break;
    default:
    }
  } 
  public boolean isKeyOn(int k) {
    switch(k) {
    case KEY_UP: 
    case KEY_DN: 
    case KEY_LEFT: 
    case KEY_RIGHT: 
    case KEY_FIRE: 
      return keyStates[k];
    default:
      return false;
    }
  }
}

// -----------------------------------------------------
public class Room {
  int id;
  PVector pos, size;
  color   bg;
  boolean isPlayerInside;
  int playerspeed; 

  public Room(int i, PVector p, PVector s) {
    id = i;
    playerspeed = i;    
    pos=p;
    isPlayerInside=false;    
    size=s;
    pushStyle();
    colorMode(HSB, 360, 100, 100);
    bg=color(random(360), 100, 100);
    popStyle();
  }

  public void update(Player p) {
    isPlayerInside = p.pos.x > pos.x && p.pos.x < pos.x+size.x && p.pos.y > pos.y && p.pos.y < pos.y+size.y;
    if (isPlayerInside) 
      p.speed=playerspeed;
  }

  public void display() {
    pushStyle();
    stroke(255);
    noFill();
    if (isPlayerInside) fill(bg);
    rect(pos.x, pos.y, size.x, size.y);
    popStyle();
  }
}

// -----------------------------------------------------
public class Player {  
  PVector pos, vel;
  float   size = 40, speed = 5, rot=0;
  Cannon  cannon;
  PVector firepos;

  public Player(PVector p) {  
    pos = p;
    vel = new PVector();
    cannon=new Cannon();
  }

  public void update() {
    vel.mult(0);
    if (keyhandler.isKeyOn(KeyHandler.KEY_UP)) 
      vel.y=-speed;
    else if (keyhandler.isKeyOn(KeyHandler.KEY_DN)) 
      vel.y=speed;
    if (keyhandler.isKeyOn(KeyHandler.KEY_LEFT)) 
      vel.x=-speed;
    else if (keyhandler.isKeyOn(KeyHandler.KEY_RIGHT))
      vel.x=speed;   
    // move      
    pos.add(vel);
    if (vel.x != 0 || vel.y != 0)
      rot= vel.heading();
      
    //check boundary
    if (pos.x < 0) {
      pos.x+=width;
    } else if (pos.x > width ) {
      pos.x-=width;
    }
    if (pos.y < 0) {
      pos.y+=height;
    } else if (pos.y > height ) {
      pos.y-=height;
    }
    
    if (keyhandler.isKeyOn(KeyHandler.KEY_FIRE) && cannon.isReadyToShoot()) {
      PVector tmp = PVector.add(pos, new PVector(size,0));
      firepos=new PVector(cos(rot) * (tmp.x-pos.x) - sin(rot) * (tmp.y-pos.y) + pos.x
                         ,sin(rot) * (tmp.x-pos.x) + cos(rot) * (tmp.y-pos.y) + pos.y);
      cannon.fire(firepos,PVector.fromAngle(rot).mult(10));
    }      
    cannon.update();
  }

  public void display() {
    pushMatrix();
    pushStyle();
    fill(255);
    stroke(128);
    strokeWeight(3);
    translate(pos.x, pos.y);
    rotate(rot);
    ellipse(0, 0, size, size);
    line(0, 0, size, 0);
    popStyle();
    popMatrix();
    cannon.display();
  }
}

// -----------------------------------------------------
class CannonBall {
  PVector pos;
  PVector vel;
  
  public CannonBall(PVector p, PVector v) {
    pos=p;
    vel=v;
  }
  
  public void update() {
    pos.add(vel);
  }
  
  public boolean isDead() {
    return (pos.x < 0 || pos.x > width || pos.y < 0 || pos.y >height);  
  }   
  
  public void display() {
    pushStyle();
    pushMatrix();
    translate(pos.x,pos.y);
    rotate(frameCount / 10.);
    stroke(255);
    fill(255,0,0);
    beginShape();   
    for (int i=0;i<10;i++) {
      float r = i%2==0 ? 10 : 5;
      vertex(r*cos(radians(36*i)),r*sin(radians(36*i)));
    }
    endShape();
    popMatrix();
    popStyle();
  }
  
}

// -----------------------------------------------------
class Cannon {
  ArrayList<CannonBall> cannonballs;
  int nextShot;
  int cannonDelay = 250;
  public Cannon() {
    cannonballs = new ArrayList<CannonBall>();
    nextShot = 0;
  }
  
  public boolean isReadyToShoot() {
    return millis() > nextShot;
  }
  
  public void fire(PVector p, PVector v) {
    if (isReadyToShoot()) {
      cannonballs.add(new CannonBall(p,v));
      nextShot = millis() + cannonDelay;
    }
  }
  
  public void update() {
    for (int i=cannonballs.size()-1;i>=0;i--) {
      CannonBall c=cannonballs.get(i);
      c.update();
      if (c.isDead()) {
        cannonballs.remove(i);
      }
    }     
  }
  
  public void display() {
    for (CannonBall b: cannonballs)
      b.display();    
  }
}

// -----------------------------------------------------
public class World {
  Room[] rooms;
  Player player;  

  public World() {
    rooms  = new Room[] { new Room(2,new PVector(0, 0), new PVector(width/2, height/2)), 
                          new Room(4,new PVector(width/2, 0), new PVector(width/2, height/2)), 
                          new Room(6,new PVector(width/2, height/2), new PVector(width/2, height/2)), 
                          new Room(8,new PVector(0, height/2), new PVector(width/2, height/2))};
    player = new Player(new PVector(rooms[0].pos.x+rooms[0].size.x/2, rooms[0].pos.y+rooms[0].size.y/2));
  }

  public void update() {
    player.update();
    for (Room r : rooms) 
      r.update(player);
  }

  public void display() {
    for (Room r : rooms) 
      r.display();
    player.display();
  }
}

EDIT1: For fun fact the player changes its walking speed depending on the room :slight_smile:
EDIT2: As it was so much fun I’ve also added a little Cannon (Certainly for demonstration purposes only, so no targets … say no to weapons! …)

2 Likes

Can i ask something about blinking text?

Hi @steven,

you are free to ask whatever you want… :wink:

Cheers
— mnse

1 Like

Can you give me and example on how to blink text? Please

Hi @steven,

you can use the same approch as from your other topic…

but instead of changing the background, switch on and off the text output …

Cheers
— mnse

PS:

final String myMessage="Hello World!";
int nextOne = 0;
boolean showText = false;

void setup() {
  size(500, 500);
  textSize(50);
  fill(255);
  textAlign(CENTER, CENTER);
}

void draw() {
  background(0);
  if (millis() > nextOne) {
    showText = !showText;
    nextOne = millis() + floor(map(mouseX, 0, width, 500, 50));
  }
  if (showText)
    text(myMessage, width/2, height/2);
}