如何将上传的图片添加到特定场景?
How do I add an uploaded image to specific scenes?
我想要创建的是一款点击式冒险游戏,其决策会影响您的结果。到目前为止,我只添加了文本,所以我想上传图像并在我的场景中使用它们。我尝试使它起作用的一种尝试如下所示,以及其中一个场景的示例。我还尝试在场景中创建属性,然后尝试按照 image(scenes[pointer].sceneGraphic, scenes[pointer].graphicXPosition, scenes[pointer].graphicYPosition)
的方式编写代码,这导致控制台中可能出现范围错误。
查看完整的以下代码
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);
}
}
如果要在 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);
}
我想要创建的是一款点击式冒险游戏,其决策会影响您的结果。到目前为止,我只添加了文本,所以我想上传图像并在我的场景中使用它们。我尝试使它起作用的一种尝试如下所示,以及其中一个场景的示例。我还尝试在场景中创建属性,然后尝试按照 image(scenes[pointer].sceneGraphic, scenes[pointer].graphicXPosition, scenes[pointer].graphicYPosition)
的方式编写代码,这导致控制台中可能出现范围错误。
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);
}
}
如果要在 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);
}