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

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

如果要在 canvas 上绘制图像，则包含 if (scenes[pointer] == 4) { 的行应为 if (pointer == 4) {。在你的 p5js 编辑器上改变它 link 在按下 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);
}

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

How do I add an uploaded image to specific scenes?

javascript

p5.js