Objects that have been made to look semi-transparent in the editor appear opaque on twotech

[TanyaPegasus]

Examples include items such as any glass bottles or jars:

https://twotech.twohoursonelife.com/3338-Glass-Bottle

Items such as windows, however, appear transparent as they should:
https://twotech.twohoursonelife.com/12273-Windowed-Brick-Wall

The processor uses a multiply layer to alter colours when the hsv sliders have been used within the editor. It appears this may be causing the semi-transparent areas to become much more opaque. For items such as windows however, these sliders are not used, as the original image is transparent, meaning multiply does not need to be applied.

How multiply may be affecting this:
"When you place a multiply layer over the semi-transparent white layer, it will multiply the pixel values of the layers beneath. Since the semi-transparent white layer contributes white to the image, the multiply operation will effectively amplify the white color. This tends to lighten or maintain the brightness of the pixels beneath it."

Note: It appears that the blueprints (which appear as solid adobe floors on twotech) are also appearing opaque. They are also being affected by issue #42 which is why they don't appear blue.
https://twotech.twohoursonelife.com/14064-Floor-Blueprint

[TanyaPegasus]

Fix for colour issue mentioned above also applied to glass, which was being tinted a blue colour.
This means that multiply was never being applied to any of these objects.

Objects now appear coloured, but are still not completely correct, and multiply is still a suspect. Also check when and how transparency is being applied, especially if it is before multiply.
Note, any earlier attempts to fix the transparency issue may have failed due to the colour processing issue, however may have been on the right track otherwise.

[connorhsm]

Related to #42

[connorhsm]

Experimenting in https://github.com/twohoursonelife/twotech/tree/feature/transparency-bug

[mtklass]

Removing the line targetContext.setTransform(1, 0, 0, 1, 0, 0); from overlayCanvas() fixes the glass bottle transparency issue.

I'm still working out what is going on here, but wanted to report that interesting tidbit.

[mtklass]

Or maybe I'm confused about this. What do we want, say, the Glass Bottle to look like?

[TanyaPegasus]

Do you have a screenshot of how yours is looking?
Ideally we would find a way to simulate exactly what they look like in game, but with relevant js functions.

[mtklass]

Here's a screenshot. Note that I only regenerated the sprite for object 3338 (Glass Bottle), so the other images in the Transition list don't have the change applied.

[mtklass]

For Glass Bottle, the issue is related to the third sprite for the object:
id=3338
Glass Bottle
containable=1
... etc ...
numSlots=0#timeStretch=1.000000
slotSize=1.000000
slotsLocked=0
numSprites=3
spriteID=3025
pos=5.000000,-9.000000
rot=0.000000
hFlip=0
color=0.300000,0.300000,0.300000
ageRange=-1.000000,-1.000000
parent=2
invisHolding=0,invisWorn=0,behindSlots=0
invisCont=0
spriteID=3024
pos=1.000000,-7.000000
rot=0.000000
hFlip=0
color=1.000000,1.000000,1.000000
ageRange=-1.000000,-1.000000
parent=2
invisHolding=0,invisWorn=0,behindSlots=0
invisCont=0
spriteID=3023
pos=1.000000,-9.000000
rot=0.000000
hFlip=0
color=0.000000,0.144338,0.183000
ageRange=-1.000000,-1.000000
parent=-1
invisHolding=0,invisWorn=0,behindSlots=0
invisCont=0
spritesAdditiveBlend=0,2
headIndex=-1
bodyIndex=-1
backFootIndex=-1
frontFootIndex=-1
numUses=1,1.000000
useVanishIndex=-1
useAppearIndex=-1
pixHeight=19

Removing this sprite makes things better, but not as good as what's shown above. But it does remove the coloring, which makes sense, since the color field of the 3rd sprite is that teal color.

[connorhsm]

Ideal would be to see it like this

@TanyaPegasus and I, with others, played around with this but didn't make a lot of progress. We got up to a similar point where we had removed the sprite with the colour and were able to view the bottle exactly as you've shown. Also played with changing the background colouring of the canvas, as it appears that has an effect when the teal sprite is included.

To me, it appears to have a light teal look in game, which should be replicated in twotech. The presumption is that it can only have that appearance in this specific "lighting" context. It'd be interesting if the object could be rendered with a white (or other) background, but anything outside the object is the regular twotech background.

[risvh]

In the game, the transparent layer is blended with what is behind it with an "additive blend" from OpenGL.

https://github.com/twohoursonelife/minorGems/blob/fbd0365bcb2ab3b1daf6c9f278c91a905a0186a1/game/platforms/openGL/gameGraphicsGL.cpp#L159

Exact formulas are here: https://registry.khronos.org/OpenGL-Refpages/gl4/html/glBlendFunc.xhtml

The formulas allow me to recreate the effect in python:

https://github.com/risvh/massEditor/blob/a12e6350f9851d8caec40145cc3fbc2216ac8cb5/draw.py#L72

And this is the result.

Conclusion is that how the transparent sprite looks depends on the background it is drawn on to. You may wanna leave these sprite as transparent for twotech, but how transparent layers are rendered in the browser is probably different than this "additive blend", hence different results are unavoidable. Or you may wanna pre-calculate the resulting pixels with a fixed background. However twotech draws these sprites on different shades of grey in different pages.

If you ask me, this issue is not a major one and it has been around since onetech started years ago. People got used to how they are drawn and understand from the weird look that these parts are transparent. I think how it looks below is acceptable, it is equivalent to drawing the transparent sprite on a black background with "additive blend". (Compare the dark teal with the bottle on black background in the image above)

[connorhsm]

@risvh Thanks for the thorough information!

I'm going to keep this open, as I would like to see an attempt at improving the current state, where bottles don't look so dark. Otherwise, I agree that it's acceptable and most are comfortable understanding what it is.