P5.js 圖像沖突

Question

我最近發現 p5.js 中的圖像碰撞與常規矩形碰撞完全不同。 如果您想保持圖像的縱橫比而不在image()函數中手動設置高度和寬度參數，那么您可以使用scale()函數縮放圖像。 但是，這不會改變圖像的區域，因此要檢測碰撞，我必須將圖像乘以我設置的圖像比例。 例如，如果在構造函數中設置，獲取播放器寬度將是playerImage.width * player.scale 。

所以我已經完成了所有這些，甚至做了一個函數來顯示圖像的區域/命中框。 然后，當我用我的碰撞功能設置它時，底部和右側檢測到碰撞很好，但頂部和左側似乎表現得很奇怪。

你可以在這里看到發生了什么： https : //image-colliding.stcollier.repl.co/

有誰知道為什么左邊緣和上邊緣的碰撞是關閉的？

這是我的問題代碼：

 let debug = true; function preload() { playerImg = loadImage("https://image-colliding.stcollier.repl.co/Player.png") brickImg = loadImage("https://image-colliding.stcollier.repl.co/brick.jpeg") } function setup() { createCanvas(windowWidth, windowHeight) player = new Player(windowWidth/2, windowHeight/2, 0.5) brick = new Brick(windowWidth/10, windowHeight/3, 0.1) speed = 3; } function draw() { background(200, 200, 200) push(); brick.display(); pop(); push(); player.display(); pop(); if (debug) { showRectCollider(player.x, player.y, playerImg.width * player.s, playerImg.height * player.s) showRectCollider(brick.x, brick.y, brickImg.width * brick.s, brickImg.height * brick.s) if (player.collidesImg(brick.x, brick.y, brickImg.width, brickImg.height, brick.s)) { collidingColor = 'green'; } else { collidingColor = 'red' } } if (keyIsPressed && keyCode === UP_ARROW) { moveY(player, -speed) } if (keyIsPressed && keyCode === DOWN_ARROW) { moveY(player, speed) } if (keyIsPressed && keyCode === LEFT_ARROW) { moveX(player, -speed) } if (keyIsPressed && keyCode === RIGHT_ARROW) { moveX(player, speed) } } class Player { constructor(x, y, s) { this.x = x; this.y = y; this.s = s; } display() { translate(this.x, this.y) scale(this.s) image(playerImg, 0, 0) } collidesFunc1(x, y, w, h) { if ( this.x - w/2 <= x + w/2 && this.x + w/2 >= x - w/2 && this.y - h/2 <= y + h/2 && this.y + h/2 >= y - h/2) { return true; } else { return false; } } collidesFunc2(x, y, w, h) { if ( this.x >= x - w && this.x <= x + w && this.y >= y - h && this.y <= y + h) { return true; } else { return false; } } collidesImg(x, y, w, h, s) { if ( this.x >= x - (w * s) && this.x <= x + (w * s) && this.y >= y - (h * s) && this.y <= y + (h * s)) { return true; } else { return false; } } } class Brick { constructor(x, y, s) { this.x = x; this.y = y; this.s = s; } display() { translate(this.x, this.y) scale(this.s) image(brickImg, 0, 0) } } //Other functions var collidingColor = 'red'; function showRectCollider(x, y, w, h) { noFill(); stroke(collidingColor); strokeWeight(3); rect(x, y, w, h) } function moveX(object, speed) { object.x += speed; } function moveY(object, speed) { object.y += speed; }

 html, body { margin: 0; padding: 0; overflow: hidden; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script> </head> <body> <script src="script.js"></script> </body> </html>

我有三個用於檢測碰撞的函數，目前我正在使用我制作的collidesImg()函數。 所有三個函數都可以在第 71-106 行找到。

謝謝你的幫助。 對此，我真的非常感激。

Answer 1

你的碰撞邏輯有點不對，這里有解釋性評論：

    collidesImg(x, y, w, h, s) {
        if (
            // right edge of player to the right of left edge of brick
            this.x + playerImg.width * this.s >= x &&
            // left edge of player to the left of right edge of brick
            this.x <= x + (w * s) &&
            // bottom edge of player below top edge of brick
            this.y + playerImg.height * this.s >= y &&
            // top edge of player above bottom edge of brick
            this.y <= y + (h * s)) {
            return true;
        } else {
            return false;
        }
    }

 let debug = true; function preload() { playerImg = loadImage("https://image-colliding.stcollier.repl.co/Player.png") brickImg = loadImage("https://image-colliding.stcollier.repl.co/brick.jpeg") } function setup() { createCanvas(windowWidth, windowHeight) player = new Player(windowWidth / 2, windowHeight / 2, 0.5) brick = new Brick(windowWidth / 10, windowHeight / 3, 0.1) speed = 3; } function draw() { background(200, 200, 200) push(); brick.display(); pop(); push(); player.display(); pop(); if (debug) { if (player.collidesImg(brick.x, brick.y, brickImg.width, brickImg.height, brick.s)) { collidingColor = 'green'; } else { collidingColor = 'red' } showRectCollider(player.x, player.y, playerImg.width * player.s, playerImg.height * player.s) showRectCollider(brick.x, brick.y, brickImg.width * brick.s, brickImg.height * brick.s) } if (keyIsPressed && keyCode === UP_ARROW) { moveY(player, -speed) } if (keyIsPressed && keyCode === DOWN_ARROW) { moveY(player, speed) } if (keyIsPressed && keyCode === LEFT_ARROW) { moveX(player, -speed) } if (keyIsPressed && keyCode === RIGHT_ARROW) { moveX(player, speed) } } class Player { constructor(x, y, s) { this.x = x; this.y = y; this.s = s; } display() { translate(this.x, this.y) scale(this.s) image(playerImg, 0, 0) } collidesFunc1(x, y, w, h) { if ( this.x - w / 2 <= x + w / 2 && this.x + w / 2 >= x - w / 2 && this.y - h / 2 <= y + h / 2 && this.y + h / 2 >= y - h / 2) { return true; } else { return false; } } collidesFunc2(x, y, w, h) { if ( this.x >= x - w && this.x <= x + w && this.y >= y - h && this.y <= y + h) { return true; } else { return false; } } collidesImg(x, y, w, h, s) { if ( // right edge of player to the right of left edge of brick this.x + playerImg.width * this.s >= x && // left edge of player to the left of right edge of brick this.x <= x + (w * s) && // bottom edge of player below top edge of brick this.y + playerImg.height * this.s >= y && // top edge of player above bottom edge of brick this.y <= y + (h * s)) { return true; } else { return false; } } } class Brick { constructor(x, y, s) { this.x = x; this.y = y; this.s = s; } display() { translate(this.x, this.y) scale(this.s) image(brickImg, 0, 0) } } //Other functions var collidingColor = 'red'; function showRectCollider(x, y, w, h) { noFill(); stroke(collidingColor); strokeWeight(3); rect(x, y, w, h) } function moveX(object, speed) { object.x += speed; } function moveY(object, speed) { object.y += speed; }

 html, body { margin: 0; padding: 0; overflow: hidden; }

 <!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script> </head> <body> </body> </html>

P5.js 圖像沖突

問題描述

1 個解決方案

解決方案1
0 2021-11-15 00:49:22

P5.js 圖像沖突

問題描述

1 個解決方案

解決方案1 0 2021-11-15 00:49:22

解決方案1
0 2021-11-15 00:49:22