0

I'm trying to build a simple top-down game in P5js where the player is centred on the screen and the map is rotated around the player. To test it , I've drawn a square to see how the map is moving. The square isn't rotating around the player, though, its rotating around the translated centre point.

I've tried to move around where the axes are rotated and translated however, this messes up the player movement, locking it to the rotated axes. I've also tried drawing the cube in relation to the players (x,y) coordinates, thinking this would make sure the origin isn't moved, however it still has the same problem.

draw function

let lookAngle = 0;
let mouseSensitivity = 0.001;

function draw() {
  translate(width/2, height/2); 
  scale(1, -1);
  background(180);
  player.update();
  lookAngle += movedX * mouseSensitivity;
  
  push();
  translate(player.position);
  rotate(lookAngle);
  rect(100, 100, 50, 50);
  pop();
  
}

player update

  update() {
    let acceleration = 3;
    let maxSpeed = 20;
    let xSpeed = 0;
    let ySpeed = 0;
    
    if (keyIsDown(65)) {
      xSpeed += acceleration;
    }  if (keyIsDown(68)) {
      xSpeed -= acceleration;
    }  if (keyIsDown(87)) {
      ySpeed -= acceleration;
    }  if (keyIsDown(83)) {
      ySpeed += acceleration;
    }
    
    if (xSpeed > maxSpeed) {
        xSpeed = maxSpeed;
    } if (xSpeed < -maxSpeed) {
        xSpeed = -maxSpeed;
    } if (ySpeed > maxSpeed) {
        ySpeed = maxSpeed;
    } if (ySpeed < -maxSpeed) {
        ySpeed = -maxSpeed;
    } 
         
    this.xPosition += xSpeed;
    this.yPosition += ySpeed;
    this.position.set(this.xPosition, this.yPosition);
    
    fill(100);
    rect(0, 10, 5, 15);
    fill(255);
    circle(0, 0, 20);
  }
Kelsey
  • 1
  • 3
  • Related, shows the technique agnostic of p5: [HTML5 Canvas camera/viewport - how to actually do it?](https://stackoverflow.com/a/48236672/6243352) – ggorlen Dec 09 '22 at 17:10
  • Thanks, I'm going to see if i can use this tomorrow, as it looks like it should work the same for me, I'll update once I've tried it. – Kelsey Dec 09 '22 at 22:11
  • Yep, it's basically the same. P5 just uses a different drawing API. Curious to hear how it goes. – ggorlen Dec 09 '22 at 22:13
  • Its mostly working now, and my original problem is solved, however I can't figure out how to use A and D for lateral movement rather than rotation. Using the mouse for rotation is working perfectly though. I'm going to keep messing around with it, and hopefully I'll find how to get it working. Thanks again for your help. – Kelsey Dec 12 '22 at 12:17
  • Lateral movement seems like it'd be the same as forward movement except the vector or trig calulation is pointing in a different direction. In other words, same calculation but change the direction/heading angle 90 degrees. – ggorlen Dec 12 '22 at 19:06
  • it turned out to be quite simple, just had to add 90 degrees to the look angle depending on what direction the player is moving. [link](https://editor.p5js.org/27331/sketches/fVxCjZEXd) – Kelsey Dec 15 '22 at 11:41
  • Great--feel free to add a [self answer](https://stackoverflow.com/help/self-answer) to help preserve that knowledge for future visitors. – ggorlen Dec 15 '22 at 15:28

1 Answers1

0

Just to update, I fixed the problem thanks to ggorlen, and if you want to look through the base character movement you can find it [here] (https://editor.p5js.org/27331/sketches/fVxCjZEXd)

I think ggorlen’s answer will explain it better than I can so that can be found [here] (https://stackoverflow.com/a/48236672/6243352)

Hope this can help someone else out aswell!

Kelsey
  • 1
  • 3