Using Twine 2.3.2 and Sugarcube 2.28.2, how do I superimpose one or more images on top of a base image? The superimposed images will, of course, have transparent areas so the base image shows through. The idea is to have an image of the main character, which can have several different backgrounds and several different appearances dependent on the story. I don’t want to have to produce a separate image for each possible combination. I gather there’s a thing called ‘absolute positioning’ of images, but I can’t find any documentation on it. Thanks.
1 Like
It sounds like what you are wanting is what happens in Virtual Novels, which have character “paper dolls” which move freely over a background and sometimes will change facial expressions over the same model. This is inherent to VN systems like Ren’Py which accounts for multiple display layers and a background in code, essentially treating character graphic assets as sprites.
Another application would potentially be a map with an icon that moves around like a boardgame token.
You’d probably have to work it out in CSS since Twine is just displaying graphics and does not have this built-in. Here are some potential links to get you started. (I just googled, not sure how relevant or helpful these are.) If there are specific Twine tricks, someone else will likely chime in.
You can either use the “style” attribute on the <img> elements to set the top, left, and z-index CSS properties, along with the “position: relative” CSS property, or just do the same by setting an id for each image and then styling them from the Stylesheet section of your game. (“Relative” works a bit better than “absolute”, since it doesn’t break if you change the zoom.)
I put together this Paper Doll Test to show how it can be done. You can download the source and images from here: Paper_Doll_Test.zip
Hope that helps! 
3 Likes
That looks like it, thanks. Now all I need do is find the time to adapt the code to my story! Thanks again.