javaprocessinggame-development

How to create a 2d top-down movement system where moving while holding two keys is possible in processing?


So, Im trying to teach myself how to make smaller games and I wanted to make a top-down game. I'm still generally new to coding so my code isn't the best. I am trying to create a movement system, but when I hold two keys, only the last press gets used by the code. This was confirmed by me checking if they get registered by using a print(key); statement.

So far, I tried to use booleans that switch on and off using the keyPressed() and keyReleased() methods. I also tried this inside of the player class, which as of right now is just a rect that has it's x and y variables updated deepending on the key that is pressed. The current movement code comes from a modified version of a pong game I made in processing, where the movement did work. Attached under is my code. Anyone got any tips?

boolean gameStart = false;

boolean up = false;
boolean down = false;
boolean left = false;
boolean right = false;
 
Player p;

void setup(){
  size(1000,1000);
  p = new Player();
}

void draw(){
  if(!gameStart){
    menu();
  }
  else{
    game();
  }
}

void menu(){
  background(0);
  textSize(90);
  
  stroke(110);
  strokeWeight(10);
  fill(0);
  rectMode(CENTER);
  rect(500,600,300,150);
  fill(255);
  text("GAME",385,300);
  text("PLAY",400,625);
  if(mousePressed && ((mouseX > 350 && mouseX < 650) && (mouseY > 525 && mouseY < 675))){
    gameStart = true;
    noStroke();
  }
}

void keyPressed(){
  if(key == 'w'){
    up = true;
  }
  else if(key == 's'){
    down = true;
  }
  else if(key == 'd'){
    right = true;
  }
  else if(key == 'a'){
    left = true;
  }
}

void keyReleased(){
  if(key == 'w'){
    up = false;
  }
  else if(key == 's'){
    down = false;
  }
  else if(key == 'd'){
    right = false;
  }
  else if(key == 'a'){
    left = false;
  }
}

void game(){
  background(0);
  p.update();
  p.render();
}

class Player{
  
  float x = 500;
  float y = 500;
  
  
    
  
  void player(float x, float y){
    this.x = x;
    this.y = y;
  }
  
  void update(){
    if(up){
      y-=7.5;
    }
    else if(down){
      y+=7.5;
    }
    else if(left){
      x-=7.5;
    }
    else if(right){
      x+=7.5;
    }
  }
  void render(){
    fill(255,0,0);
    rect(x,y,100,100);
  }
}
  
  

Solution

  • The following source code will move a rectangle diagonally when two keys are pressed simultaneously. A boolean array is used to keep track of keyPresses.

    boolean[] keyDwn = new boolean[4];
    
    final int _keyA = 65;
    final int _keyW = 87;
    final int _keyS = 83;
    final int _keyD = 68;
    
    int x, y;
    
    void setup() {
      size(600, 600);
      surface.setTitle("A=up : S=left : W=down : D=right : AS=diagonal : WD=diagonal ");
      // init values
      keyDwn[0] = false;
      keyDwn[1] = false;
      keyDwn[2] = false;
      keyDwn[3] = false;
      fill(0, 0, 255); // color for rectangle
      x = width/2;  
      y = height/2; 
    }
    
    void draw() {
      background(209);
      moveObj();
      rect(x, y, 100, 100);
    }
    
    void keyPressed() {
      if (keyCode == _keyA) {
        keyDwn[0] = true;
        println("keyA pressed = ", keyCode);
      }
      if (keyCode == _keyW) {
        keyDwn[1] = true;
        println("keyW pressed = ", keyCode);
      }
      if (keyCode == _keyS) {
        keyDwn[2] = true;
        println("keyS pressed = ", keyCode);
      }
      if (keyCode == _keyD) {
        keyDwn[3] = true;
        println("keyD pressed = ", keyCode);
      }
    }
    
    void keyReleased() {
      if (keyCode == _keyA) {
        keyDwn[0] = false;
      }
      if (keyCode == _keyW) {
        keyDwn[1] = false;
      }
      if (keyCode == _keyS) {
        keyDwn[2] = false;
      }
      if (keyCode == _keyD) {
        keyDwn[3] = false;
      }
    }
    
    void moveObj() {
      if (keyDwn[0]) y -= 3;
      if (keyDwn[1]) y += 3;
      if (keyDwn[2]) x -= 5;
      if (keyDwn[3]) x += 5;
    }