In sugarcube, have different image appear in the same passage depending on what character you picked?

Question

So I've written a simple story for practice but have two different characters that I illustrate throughout the game. If you pick character 1 you'll do the story with images of that character. If you pick character 2 you'll play the same story but the images that show up will be of character 2. I've finished the story and had the images set up for character 1. I want to know if there's a quick way to make it so if you pick character 2 at the start all the images will be of the character 2 set rather than character 1. I don't want to go to every passage and set up 'if' statements so that the image will be character 1 if character 1 is chosen at the start and images of character 2 will appear if character 2 is chosen at the start. That's the only way I know how for now, was wondering if there would be a quicker way?

 

Thanks

Answer 1

You didn't explain how you are storing the images nor how you distinguish Character 1 images from those of Character 2, so I will assume you are using either foldernames or filenames to do this.

"char1/portrait.jpg"

"char2/portrait.jpg"

... you also disn't include an example of the code you're using to display the image so I will assume that it is something like the following.

<img src="char1/portrait.jpg">

<img src="char2/portrait.jpg">

If the above assumptions are correct then you could use a custom widget/macro combined with a known story variable to achieve the desired effect.

1. Initialise the story variable used to track which Character's images to display by default, this ideally should be done within your project's StoryInit special passage.

<<set $charPath to "char1">>

2. Create a custom widget that knows how to generate an img element based on the name of an image plus the current value of the $charPath story variable. The following code needs to be places within a widget tagged special passage.

<<widget "CharImage">>
	\<<set _image to $charPath + "/" + $args[0]>>
	\<img @src="_image">
\<</widget>>

3. Use the new widget to display an image for the current Character.

<<CharImage "portrait.jpg">>

4. To display the images for a different Character simple change the current value of the $charPath story variable.

<<set $charPath to "char2">>

 

Comments

Yes that is the code I was using, I'm new to widgets so I might play around with them like you've shown me until I get it right, thanks a lot!

Update:

Can't seem to get it to work, I think I'm making some simple mistakes, not sure how to explain it. I've started a new story to test it out and set up an image that I want to use for char1 potrait but I can't get it to come up. Not sure what I'm doing wrong, I've copied and pasted your codes into the relevant pathways exactly, probably making some simple mistake.

---

Would you be able to explain yourself in more detail for me? Sorry I'm pretty new to this I haven't even completed my first story and can't find what I'm looking for anywhere. Let's say I have 10 passage. I have two folders char1 and char2 both with 10 jpgs named 1 to 10. Could you explain how the widget works so that depending on what character you pick, images from char1 folder are used in all 10 passages if you're character 1, and images from char2 folder are used if you pick character 2. I didn't understand the widget at all and can't find anything on it anywhere on the internet, no tutorials or anything. If you could show me where to get tutorials on this I'd appreciate it. Thanks