CODEWITHSUNDEEP
javascriptp5.jsp5.play
Clover Johnson
Clover Johnson

Reputation: 57

P5: How to find collisions with specific sprite

I am building a few demos to compare physics engines to make an actual game. I am stuck at p5.js however, due to the fact that I cant seem to find a function to check if a sprite is colliding with another sprite, and only that sprite (or sprite group.) Is there a function for this? I can't seem to find a reference for one on p5play, only the colliding/overlapping functions, but mine don't overlap, and the colliding function only checks frames, and I don't think it's specific.

Here is my code, for debugging purposes:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>weebloo</title>

    <script defer src="lib/p5.min.js"></script>
    <script defer src="lib/p5.sound.min.js"></script>
    <script defer src="lib/p5play.js"></script>
    <script defer src="lib/planck.min.js"></script>
    <script defer src="lib/p5.input.js"></script>

    <style>
        html, body {
            font-family: "Comic Sans MS", cursive, sans-serif;
            padding: 0;
            margin: 0;
        }

        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <script src="index.js"></script>
</body>
</html>

let sprite;

let floor, wallLeft, wallRight, ceiling;

let bouncyFloor, slipperyFloor;

let jumpPower;
let agility = 2.5;
let jumps = 2;

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  frameRate(60);

  sprite = new Sprite(width / 2, height / 2, 30, 30);
  sprite.rotationLock = true;
  sprite.bounciness = 0.15;

  floor = new Sprite(width * 0.5, height, width, 10, "s");
  ceiling = new Sprite(width * 0.5, 0, width, 10, "s");
  wallLeft = new Sprite(0, height * 0.5, 10, height, "s");
  wallRight = new Sprite(width, height * 0.5, 10, height, "s");

  bouncyFloor = new Sprite(width * 0.25, height * 0.75, 100, 10, "s");
  bouncyFloor.bounciness = 1;
  slipperyFloor = new Sprite(width * 0.75, height * 0.75, 100, 10, "s");
  slipperyFloor.friction = 0;

  world.gravity.y = 10;
  jumpPower = world.gravity.y * 0.5;
}

function draw() {
  background(255);
  fill("rgba(0,0,0,0.7)");
  textSize(16);
  textAlign(LEFT);
  text(`fps: ${int(getFrameRate())}`, 10, 20);
  text(`xvel: ${Math.round(float(sprite.vel.x) * 10) / 10}`, 10, 36);
  text(`yvel: ${Math.round(float(sprite.vel.y) * 10) / 10}`, 10, 52);

  fill(0);
  textAlign(CENTER);
  text("bouncy", bouncyFloor.pos.x, height * 0.75 - 10);
  text("slippery", slipperyFloor.pos.x, height * 0.75 - 10);
}

function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    sprite.vel.x = sprite.vel.x - agility;
  } else if (keyCode === RIGHT_ARROW) {
    sprite.vel.x = sprite.vel.x + agility;
  } else if (keyCode === DOWN_ARROW) {
    sprite.vel.y = sprite.vel.y + jumpPower;
  } else if (keyCode === UP_ARROW) {
    if (jumps > 0) {
      sprite.vel.y = sprite.vel.y - jumpPower;
      jumps = jumps - 1;
    } else {
      if (sprite.overlap(floor) == true) {         //
        jumps = 2;                                 //
        sprite.vel.y = sprite.vel.y - jumpPower;   // This goes through the floor? Why?
        jumps = jumps - 1;                         //
      }                                            //
    }
  }
}

Upvotes: 0

Views: 119

Answers (2)

Typ&#216;
Typ&#216;

Reputation: 11

For one I would recommend using the documentation for P5.play What you need to do to detect if two specific sprites are colliding is:

if (spriteA.colliding(spriteB) {
do things
}

I also noticed you are using KeyPressed. built into P5.play is another route to detect key presses.

if (kb.presses('key') {

}
//for dectecting single presses

if (kb.pressing('key') {

}
//for detecting held key presses

if (kb.pressed('key') {

}
//for detecting released key presses
<script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1/lib/addons/p5.sound.min.js"></script>
        
<script src="https://p5play.org/v3/planck.min.js"></script>
<script src="https://p5play.org/v3/p5play.js"></script>

let me know if this helped!

Upvotes: 1

Clover Johnson
Clover Johnson

Reputation: 57

Well, it appears I was using some functions wrong.

The code I used was in a keyPressed() event listener. The fixed code is in the draw() function (runs every frame) and looks like this:

// floors is the group of all floor objects that restore jumps.
// jumps is used when the player presses UpArrow.
// maxJumps is the maximum number of jumps possible.

if (sprite.collide(floors)) {
    jumps = maxJumps;
  }

Upvotes: 1

Related Questions