Sugarcube - Creating customizable avatars by overlaying images and customizing traits?

So what I’m trying to do is:

1. How layering images on top of each other can be done in Sugarcube.
2. How I can create some kind of system for customization

The first one is self-explanatory, the second one I have to explain.

Let’s say I insert

<<set $gwimbles to ‘testimage2.png’>>
<img src=$gwimbles>

The resulting image’s path is $gwimbles, not $testimage2.png.

What I’m trying to do is make it so that I can set factors to certain texts so that I can write say $hairstyle/$haircolour.png as it’ll manifest as twintails/purple.png to give an example, but then I can do something like set $haircolour to red to get twintails/red.png.

maybe try something like the following?

<<set $image to 'image.png'>>
<<script>>
jQuery(this.output).wiki(`<img src=${State.variables.image}>`);
<</script>>

Yeah, you want the attribute directive syntax: <img @src="$gwimbles">

2 Likes

Yep, this was exactly what I was seeking! Thanks!