I´m creating an inventory system where you can also see your character appearance change as you equip different clothes.For example, here I'm trying to show a piece of armor that's inside an object. BTW i´m using sugarcube 2 and twine 2.
//This is how I declare the object previously, I want all the information about the item to be inside an object, including the image
<<set $ACplate ={name:"Plate Armor", pro:10, prc:50,img:"Char/plate.png"}>>
In the passage where I want to display all the images of the character wearing the armor, I have been able to show images without a problem, and they show in the correct place, size and they overlap each other well.
<div
style="position: relative; width: 574px; height: 1000px; padding: 5px; border: 0px solid grey">
<img
src="Char/default.png"
style="position: absolute; left: 0; top: 0; width: 574px; height: 1000px">
<<if ($face eq 1)>>
<img
src="Char/face1.png"
style="position: absolute; left: 0; top: 0; width: 574px; height: 1000px">
<<else>>
<img
src="Char/face2.png"
style="position: absolute; left: 0; top: 0; width: 574px; height: 1000px">
<</if>>
//Around here is where i would like to put the sentence that shows the image, and it would have to be in the same position as all the other images
</div>
But these ones aren't inside an object so i know how to display them, the question is how do i call the image from inside the object and how do i make it appear in the right size, position and what determines which images are going to overlap.