Setting a color alpha value (Canvas.DrawColor.A) has no effect

Discussions about Coding and Scripting
1337GameDev
Experienced
Posts: 85
Joined: Thu Apr 16, 2020 3:23 pm
Personal rank: GameDev

Setting a color alpha value (Canvas.DrawColor.A) has no effect

Post by 1337GameDev » Sat Dec 26, 2020 11:40 pm

I currently want to make a simple icon that im drawing on the HUD to blink, and am alternating between 0 -> 255 at various speeds.

I noticed that setting the alpha channel to 0 or 255 does nothing for the texture visibility.

Why is this?
Shouldnt setting the Alpha channel to 0 be making it transparent, and 255 making it opaque (fully visible according to the texture)

User avatar
Feralidragon
Godlike
Posts: 5300
Joined: Wed Feb 27, 2008 6:24 pm
Personal rank: Work In Progress
Location: Liandri

Re: Setting a color alpha value (Canvas.DrawColor.A) has no effect

Post by Feralidragon » Sun Dec 27, 2020 2:39 pm

One thing you will quickly realize while working with this engine version, is that there is a lot of stuff exposed in UScript which isn't actually completed or implemented at all on the engine-side.

The alpha channel is one of those: as you have noted, changing the alpha has absolutely no effect whatsoever, since it's there but wasn't really implemented internally.

Starting with v469 however, it might do something now, but I am not completely sure: there's quite some work put into supporting textures with transparency and such, but I am not really certain if this translated into something as far as the alpha channel of the Canvas goes.
You can try the same code in a v469 install to check if it works or not.

Alternatively, generally the way to make something fade in the HUD, is to set the canvas style as STY_Translucent and then change the RGB channels so they darken (to achieve full transparency) or brighten (to achieve full opacity, or nearly full).
One thing to take into account however, is that STY_Translucent is not the same as "alpha", but rather it's a blending style that makes the rendering "translucent", as the opacity depends on how closer to full black or full white it is, and if the background is fully white, then your icon won't be visible at all, regardless of its color.

There are ways to achieve an "alpha" effect though, but not much for fading effects, such as rendering 2 versions of the same icon, one on top of the other: 1 version which represents the alpha channel of the icon, rendered as STY_Modulated (fully opaque when black, fully transparent at gray RGB(127,127,127), so 7 bits of transparency rather than 8 ), and then the normal version rendered on top of that one as STY_Translucent.

But then again, with this last way the fading wouldn't work, since STY_Modulated is not affected by DrawColor at all (which is dumb, but it is what it is).

1337GameDev
Experienced
Posts: 85
Joined: Thu Apr 16, 2020 3:23 pm
Personal rank: GameDev

Re: Setting a color alpha value (Canvas.DrawColor.A) has no effect

Post by 1337GameDev » Sun Dec 27, 2020 7:01 pm

I am currently on v469 and it still has no effect.

That's kind of a shame. Using them alpha channel would have made things easier :/
STY_Translucent and then change the RGB channels so they darken (to achieve full transparency) or brighten (to achieve full opacity, or nearly full).
Hmm, so I adjust the rgb values they move closer to black (0,0,0) and closer to white (255,255,255) by adding some kind of "step" to each value?

And what's the difference between them translucent and normal styles? What do they do to rendering? I never noticed a difference when changing color or my icon I'm rendering.
There are ways to achieve an "alpha" effect though, but not much for fading effects, such as rendering 2 versions of the same icon, one on top of the other: 1 version which represents the alpha channel of the icon, rendered as STY_Modulated (fully opaque when black, fully transparent at gray RGB(127,127,127), so 7 bits of transparency rather than 8 ), and then the normal version rendered on top of that one as STY_Translucent.
So I have 2 icons, one which is normal and one that is black / white?

Currently my icons are black and white, as to allow coloring via the DrawColor, so I'm unsure how to go about what you suggested.

Hmm, what does modulated style do to rendering on the canvas? Why can't I use translucent style for this second part?

Also, I can rendering things directly on top of each other in my own code, and as long as I order their draw calls, then they'll show up in the right other?

If I do the above method with 2 textures, does it matter which icon is behind / above?

And what should the "alpha layer" texture even look like if my icon is already black / white?

(My icons are simple and not very complex)
For example, one icon looks similar to this (I'm away from the computer, so I can't attach my source BMP icon): https://images.app.goo.gl/UrmvCuMyJCzH3VLGA

How would this be made to fade?
And can the technique be applied to an icon in general without new image files?

User avatar
Feralidragon
Godlike
Posts: 5300
Joined: Wed Feb 27, 2008 6:24 pm
Personal rank: Work In Progress
Location: Liandri

Re: Setting a color alpha value (Canvas.DrawColor.A) has no effect

Post by Feralidragon » Mon Dec 28, 2020 12:44 am

Then that means that v469 still works the same way (there was some work put into importing textures with alpha channel, so I thought maybe something could already have been done there as well, but it doesn't seem to be the case).

Translucency makes the texture transparent, in such a way that the texture is rendered with full transparency (if fully black) or with full opacity (if fully white), with all the levels in between, with gray being half-transparent.

However it's not an "alpha"-like transparency, but rather the colors are just "added" to whatever color was already there in each pixel rendering-wise, and that makes it so that something like a fully opaque red color as RGB(255,0,0) rendered as translucent is rendered as purple in a blue background such as RGB(0,0,255), since the pixel would just be RGB(255,0,255) in the end.

This also means that any texture rendered as translucent will be completely invisible in a fully white background, which is a problem even for the current HUD (since the HUD is rendered as translucent, at least at high settings, when looking at a white wall the HUD becomes completely invisible).
This is the sort of thing you will understand better with your own experimentation.

Modulated rendering is also a type of rendering that makes the texture transparent to some degree based on its color, but it behaves differently, as:
  • it's fully transparent on mid-gray, as RGB(127,127,127);
  • as it approaches full black, as RGB(0,0,0), it darkens the pixels behind it and becomes more and more opaque;
  • as it approaches full white, as RGB(255,255,255), it lightens the pixels behind it and also becomes more and more opaque.
But it has some big limitations that you don't have with normal or translucent rendering, namely textures rendered as modulated are only rendered with their original color without color blending, meaning you cannot do fade effects by modifying the color like you can do with translucent.

However, one of the things it can be used for, is to be used in conjunction with a translucent texture to create something very close to alpha transparency, by rendering a translucent texture on top of a modulated one, where the modulated one would be a grayscaled version of the original texture, but with the colors in such way that it would match the original texture in terms of the intended transparency areas.

Something like this:
IRPRCross.jpg
IRPRCrossAlpha.jpg

where the first is the one which would be rendered as translucent, fully color-blended with the color you want, and the second the one you would render as modulated, serving only as a darkened background for the translucent want to be rendered on top of, so that it's still perfectly visible even in white-background (like true alpha would be).

But then again, this is only a technique to solve the problem of a translucent texture from becoming completely invisible on a white background, but this is incompatible with the fading effects you want to make, thus you would have to make a choice: either live with having the icon you want to render to disappear on a white background (by using translucency alone), or not have that fading effect at all (if you also use a modulated one), or maybe even have the fading effect but only applied to the translucent one on top of the modulated one, which may work for you depending on the type of effect you're actually intending to implement (the effect would simply be a fade to the modulated gray/black behind rather than a fade as a transparency on top of the background).

As for the fading itself, you just need to interpolate between the color you want and fully black: you establish the color you want, and from there you just apply an "alpha" by multiplying by the color, for example:

Code: Select all

//local alpha var representing the fade alpha, between 0.0 and 1.0
local float alpha;

//calculate
Canvas.DrawColor = <some color value>;
Canvas.DrawColor.R = Byte(Canvas.DrawColor.R * alpha);
Canvas.DrawColor.G = Byte(Canvas.DrawColor.G * alpha);
Canvas.DrawColor.B = Byte(Canvas.DrawColor.B * alpha);
You do not have the required permissions to view the files attached to this post.