What I am trying to create is a point and click adventure game with decisions that effect your outcome. So far, I have only added text so I wanted to upload images and use them in my scenes. One of my attempts to get this to work is as below as well as an example of one of the scenes. I also tried creating properties within the scene and then tried code something along the lines of image(scenes[pointer].sceneGraphic, scenes[pointer].graphicXPosition, scenes[pointer].graphicYPosition), which resulted in a possible scope error in the console.
The following code can be seen in full at 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);
}
}
The line containing if (scenes[pointer] == 4) { should be if (pointer == 4) { if you wanted the image to be drawn on the canvas. Changing that on your p5js editor link drew the cat image after pressing Space until it showed Scene 4.
As for setting images in each specific scene, you just need to reference the image when setting up each scene such as
scenes[4] = {
// other options ...
sceneGraphic: loadImage('cat.png')
graphicXPosition: width/2,
graphicYPosition: height / 2
}
And drawing it should look like:
if (pointer == 4) {
image(scenes[pointer].sceneGraphic, scenes[pointer].graphicXPosition, scenes[pointer].graphicYPosition);
}