如何更改 p5.js 中 2d 对象的 z 坐标？（和其他东西）

Question

我正在尝试制作一款具有 3D 层次感的 2D 游戏（例如 不要一起挨饿） Link: https://editor.p5js.org/TheDiamondfinderYT/full/pBfQMdgSd

但这就是我得到的（走到“树”）。两个问题是直接的：

重复
边框叠加
树从不在广场后面帮助。

Answer 1

对于初学者来说，你在画正方形之后再画树，所以树总是在最上面。您需要一个条件来更改绘制对象的顺序。

要解决您的“重复”问题，您不会在每次抽奖时清除 canvas，因此您需要使用 background(0);（或您想要的任何颜色）[=18] =]

要解决您的“边框叠加”问题，您需要使用noStroke()关闭描边。

这是完整的更新代码：https://editor.p5js.org/Samathingamajig/sketches/b5NcCuioK

// There's more stuff up here, setting up variables and such

function draw() {
  background(0); //  <===
  camera.lookAt(0, 0, 30, 0, 0, playerX-Xdrag, playerY-Ydrag);
  rectMode(CENTER);
  
  if (playerY >= 110) { //  <=== here, you would need to make variables for the tree's location
    noStroke(); //  <===
    fill(255);
    image(tree, 30, 30, 100, 100);
    fill(100);
    rect(playerX, playerY, 30, 30, 1);
  } else { //  <===
    noStroke(); //  <===
    fill(100);
    rect(playerX, playerY, 30, 30, 1);
    fill(255);
    image(tree, 30, 30, 100, 100);
  }

  // More stuff down here too, but just some logic making the variables change
}

同样在 link 中，我更改了一些内容（不是功能方面的），例如添加分号 ;、修复缩进以及将 variable = variable + 5 更改为 variable += 5和 -= 到减法。

除了将图像修改为没有边框外，无法（使用代码）对树的边框做任何事情，因为它上面有大约 5 个像素的黑色边框。

如何更改 p5.js 中 2d 对象的 z 坐标？（和其他东西）

How do I change the z coordinate of 2d objects in p5.js?(and other stuff)

javascript

p5.js