How can we layer images in Sugarcube 2-18?

Question

I would like to layer transparent .PNG images atop one another (so as to create a character portrait that changes based on inventory a la the paper dolls in old RPGs like Baldur's Gate).  Is this possible?

Answer 1

This is purely a CSS trick: Create a <div> with position: relative  and explicit width or height (or both), then inside you position your images, using position: absolute, explicit width, height or both, and top and left position set to 0.

In code:

<div
	style="position: relative; width: 640px; height: 640px; padding: 5px; border: 2px solid grey">
	<img
		src="http://i.imgur.com/zModH9Z.png"
		style="position: absolute; left: 0; top: 0; width: 640px; height: 640px">
	<img
		src="http://i.imgur.com/lIv9HHA.png"
		style="position: absolute; left: 0; top: 0; width: 640px; height: 640px">
	<img
		src="http://i.imgur.com/WJlkJDH.png"
		style="position: absolute; left: 0; top: 0; width: 640px; height: 640px">
</div>

SugarCube can easily produce such HTML, and it can also use CSS classes if you don't want the ugly inline style declarations.

Comments

Awesome, thank you!

Answer 2

I'm late to the party, but here's an image layering demo/example I did for someone a while back ( image_layering.zip ), which includes a compiled demo HTML file and requisite images.  The demo was compiled against the Twine 2 version of SugarCube, so it may be imported by Twine 2 or decompiled by Tweego or Twee2 to see the source code.

I'll also include the source code here in Twee notation: (demo images not included here, obviously)

:: StoryTitle
Image Layering


:: Story Stylesheet [stylesheet]
#scene {
	position: relative;
	display: block;
	width: 100%;
	height: 600px;
	overflow: hidden;
}
#scene img {
	position: absolute;
	z-index: 10;
}
#scene .layer0 {
	z-index: 10;
}
#scene .layer1 {
	z-index: 20;
}
#scene .layer2 {
	z-index: 30;
}


:: Start
<div id="scene">
<img class="layer0"
	style="left: -150px; bottom: 0px;"
	src="images/backgrounds/double-rainbow.jpg">
<img class="layer1"
	style="right: 0px; top: 25px;"
	src="images/characters/lee/base.png">
<img class="layer2"
	style="right: 0px; top: 25px;"
	src="images/characters/lee/uniform.png">
</div>
----
//''Attribution:''//
* //Character: [['"Lee"'|http://chocobikies.deviantart.com/art/character-sets-Azura-and-Lee-224922844]] by [[chocobikies @DA|http://chocobikies.deviantart.com/]]//
* //Background: unknown//


:: StoryMenu
<<click "Toggle: Background">>
	<<script>>$('#scene .layer0').toggle()<</script>>
<</click>>
<<click "Toggle: Character">>
	<<script>>$('#scene .layer1').toggle()<</script>>
<</click>>
<<click "Toggle: Apparel">>
	<<script>>$('#scene .layer2').toggle()<</script>>
<</click>>