How can we layer images in Sugarcube 2-18?

+3 votes
asked Aug 10 by Charlie (2,210 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?

1 Answer

+2 votes
answered Aug 10 by Akjosch (3,950 points)
selected Aug 10 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:

<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.

commented Aug 10 by Charlie (2,210 points)
Awesome, thank you!
...