How can we layer images in Sugarcube 2-18?

+3 votes
asked Aug 10, 2017 by Charlie (7,170 points)

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?

2 Answers

+2 votes
answered Aug 10, 2017 by Akjosch (4,340 points)
selected Aug 10, 2017 by Charlie
Best answer

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:

	style="position: relative; width: 640px; height: 640px; padding: 5px; border: 2px solid grey">
		style="position: absolute; left: 0; top: 0; width: 640px; height: 640px">
		style="position: absolute; left: 0; top: 0; width: 640px; height: 640px">
		style="position: absolute; left: 0; top: 0; width: 640px; height: 640px">

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

commented Aug 10, 2017 by Charlie (7,170 points)
Awesome, thank you!
0 votes
answered Dec 29, 2017 by TheMadExile (38,930 points)

I'm late to the party, but here's an image layering demo/example I did for someone a while back ( ), 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;"
<img class="layer1"
	style="right: 0px; top: 25px;"
<img class="layer2"
	style="right: 0px; top: 25px;"
* //Character: [['"Lee"'|]] by [[chocobikies @DA|]]//
* //Background: unknown//

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


Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.