javascript - 如何将上传的图片添加到特定场景？

Question

我正在尝试创建的是一款点击式冒险游戏，其决策会影响您的结果。到目前为止，我只添加了文本，所以我想上传图像并在我的场景中使用它们。我尝试使它起作用的一种尝试如下所示，以及其中一个场景的示例。我还尝试在场景中创建属性，然后尝试按照 image(scenes[pointer].sceneGraphic, scenes[pointer].graphicXPosition, scenes[pointer].graphicYPosition) 的方式编写代码，结果在控制台中可能出现范围错误。

下面的代码可以在this p5js editor link看到完整的.

let scenes = []
let pointer = 0

function setup() {
  createCanvas(700, 700);
  img1 = loadImage('cat.png'); // image has been uploaded properly

  // ... other scenes
  scenes[4] = { // example of one of the scenes I've created
    backgroundColor: color(230, 213, 223),
    sceneText: "scene 4 text",
    textColor: color(132, 44, 158),
    textSize: 15,
    textXPosition: width/2,
    textYPosition: 3*height/4,
    sceneKeys: [32],
    sceneOptions: [5]
  }

  // ... other scenes
}

function draw() {
  // ... other draw function calls
  if (scenes[pointer] == 4) { // not showing the image
    image(img1, width/2, height/2);
  }
}

Answer 1

包含 if (scenes[pointer] == 4) { 的行应该是 if (pointer == 4) { 如果你想在上面绘制图像 Canvas 。在你的 p5js 上改变它按 Space 直到显示场景 4 后，编辑器链接绘制了猫图像。

至于在每个特定场景中设置图像，您只需要在设置每个场景时引用图像即可

scenes[4] = {
  // other options ...
  sceneGraphic: loadImage('cat.png')
  graphicXPosition: width/2,
  graphicYPosition: height / 2
}

绘制它应该是这样的:

if (pointer == 4) {
  image(scenes[pointer].sceneGraphic, scenes[pointer].graphicXPosition, scenes[pointer].graphicYPosition);
}