Help creating a fullbody character picture with the hair overlaping the clothing/body

Authoring Twine
,
1

Twine Version: 2.3.16
Story Format: Sugarcube 2.36.1

So, in my game the player can choose hair styles and clothing and in the character page they can see the fullbody picture of their character. I am an artist so I am drawing the hairs and clothing myself.

The hair is chosen in the beginning of the game (there are 3) and the clothing the player can buy during the game.

All the clothing pictures are from the neck down and the hair picture are of the head. My question is, how do I show the fullbody character with the hair/head pictures on top of the clothing/body pictures based on which outfit the player is using at the moment?

PS: english is not my native language so forgive me if I said something weird or confusing.

1 Like
2

If I understand correctly you want to show two pictures, one for the head and one for the body. They should not be separated. Also you want to be able to show different head pictures, and also different body pictures.

You can manage with styles, <div></div> elements and variables.

In your style sheet you can create two classes, one for the head and one for the full body. For instance:

.head {
  position: absolute;
  left: 400px;
  top: 250px;
}

.fullbody {
  position: absolute;
  left: 400px;
  top: 450px;
}

What’s important is that the “top:” property of the “fullbody” style minus the “top:” property of the “head” style is exactly the height of your image. Above the example assumes a 200 pixel height (450px and 250px).

At any point in your story you can set $head and $fullbody to be exactly what you need.
For instance:

<<set $head to "images/head_long_brown,.png">>
<<set $body to "images/body_redshirt.png">>

All you now need is to place, in whatever passage you need:

<div class="head">[img[$head]]</div>
<div class="fullbody">[img[$body]]</div>

If I’ve understood wrongly, don’t hesitate to rephrase your request and I’ll try to offer a more appropriate answer.

1 Like
3

I’m not good with CSS/HTML positioning at all, but when I read this I was picturing layering identically-sized transparent PNGs with each element over each other like cel-animation - like there’s a body, then the chosen costume overlaps and shows the head/arms through the alpha layer, then hair/hat is layered over that - essentially how Ren’Py allows sprite layers.

I’m not sure if that’s possible to do in Twine. It seems it would make alignment of different hair and costumes work easier, but it sounds like this is more of the “paper doll flip book” style and just horizontal alignment would also work.

…like this:

Dress-up-Doll-Flipbook-8
Dress-up-Doll-Flipbook-81920Ă—1285 181 KB

1 Like
4

I think it is possible, with the “z-index:” property. The higher “z-index” is on top.
However I can’t test it because I lack transparent pictures.

For instance:

.hair{
  position: absolute;
  left: 400px;
  top: 250px;
  z-index: 2;
}

.clothes{
  position: absolute;
  left: 400px;
  top: 250px;
  z-index: 1;
}

.fullbody {
  position: absolute;
  left: 400px;
  top: 250px;
  z-index: 0;
}

The image within the “.hair” division will appear. Whenever it will not, the “.clothes” will. If none of the above appear, then the “.fullbody” will appear. As a matter of fact the images who wille appear in div elements with lower “z-index” do not need to be transparent, but others need to.

1 Like
5

@souppilouliouma thank you that worked perfectly!! I only have one question, is it possible to show two or three dolls per line, side by side? I wanted to have a page where the player could see all the outfits they have, side by side. So, in the character page there would be only one doll, with the current outfit, and in this other page there would be a lot of dolls, showing all the outfits. I hope i made sense @_@

7

Indeed it is possible, you can create other styles with “left:” property more to the left (lower pixel number) or more to the right (higher pixel number).