Lo que estoy tratando de crear es un juego de aventura de apuntar y hacer clic con decisiones que afectan tu resultado. Hasta ahora, solo he agregado texto, así que quería subir imágenes y usarlas en mis escenas. Uno de mis intentos de hacer que esto funcione es el siguiente, así como un ejemplo de una de las escenas. También intenté crear propiedades dentro de la escena y luego intenté codificar algo similar a image(scenes[pointer].sceneGraphic, scenes[pointer].graphicXPosition, scenes[pointer].graphicYPosition) , lo que resultó en un posible error de alcance en el consola.
El siguiente código se puede ver completo en este enlace del editor de p5js .
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); } }La línea que contiene if (scenes[pointer] == 4) { debería ser if (pointer == 4) { si desea que la imagen se dibuje en el lienzo. Al cambiar eso en el enlace del editor de p5js , dibujó la imagen del gato después de presionar Espacio hasta que mostró la Escena 4.
En cuanto a la configuración de imágenes en cada escena específica, solo necesita hacer referencia a la imagen al configurar cada escena, como
scenes[4] = { // other options ... sceneGraphic: loadImage('cat.png') graphicXPosition: width/2, graphicYPosition: height / 2 }Y dibujarlo debería verse así:
if (pointer == 4) { image(scenes[pointer].sceneGraphic, scenes[pointer].graphicXPosition, scenes[pointer].graphicYPosition); }