Thread: Alphablending, Stretchmode and clipping

I've tried every which way round to solve this but either I'm missing something or this is a bug. I've been trying to get Opacity and blending working together but even after successfully getting blending working correctly there are still problems with clipping.

First some code to explain what I'm trying to do -

Code:

self.img  = Turbine.UI.Control()
self.img:SetBackColor(Turbine.UI.Color(1,0.4,0.3,0.2))
self.img:SetBackColorBlendMode(Turbine.UI.BlendMode.Color)
self.img:SetBlendMode(Turbine.UI.BlendMode.AlphaBlend)
self.img:SetBackground(image)

local value = 0.40
local col = self.img:GetBackColor()
self.img:SetOpacity(value)
--self.img:SetBackColor(Turbine.UI.Color(value,col.R,col.G,col.B))
--self.img:SetStretchMode(1)

Stretchmode not set and only using opacity will not apply to images, the text on the top and bottom are also 40% opacity (forecolor) and work fine.

Now if Stretchmode is set, to any mode at all > 0 as in

Code:

self.img  = Turbine.UI.Control()
self.img:SetBackColor(Turbine.UI.Color(1,0.4,0.3,0.2))
self.img:SetBackColorBlendMode(Turbine.UI.BlendMode.Color)
self.img:SetBlendMode(Turbine.UI.BlendMode.AlphaBlend)
self.img:SetBackground(image)

local value = 0.40
local col = self.img:GetBackColor()
self.img:SetOpacity(value)
--self.img:SetBackColor(Turbine.UI.Color(value,col.R,col.G,col.B))
self.img:SetStretchMode(1)

Opacity sort of works but due to the issue with Stretchmode not clipping to the parent control the image is rendered out of the window (and above other controls, see the scrollbar). There also seems to be some issue with the graphics engine not flushing because you can see the button of the slider is being clipped by the labels behind the image which have a ZOrder less than the image control; and the part outside the parent frame is showing the 40% opacity correctly but the part inside is not.



Refreshing the frame manually by resizing the window actually corrects this anomaly as shown above, there was no change in code at all, I just simply resized the window and it fixed itself. However this is only temporary because once the code is reloaded the problem re-appears.



I managed to fix this permanently by adding the SetBackColor code which alters the alpha of the back color and blends with the alpha of the image nicely. However, even with that, Opacity will not apply to images unless the Stretchmode is set.

This has now got me to a point that the blending works but it leaves me with the clipping issue for any Stretchmode other than 0.
I like the Stretchmode and it proves very handy for using dynamically loaded images, but it is not useable at the moment because of the clipping issues. Yes I could just use static images of knowable size and never touch the stretchmode but I believe there is a need for it and I can't really see why you would ever not want to clip to the parent controls size. Besides, the graphics left behind aren't intractable, for all intensive purposes they aren't there, even if you nil the reference to the control you can't clear or refresh them.

This is causing more issues now because I have no control if users want to resize the window or not, because the example above is using the new Plugin Options panel.

The first thing to remember about SetStretchMode is that it is not a documented portion of the API - that is, you use it at your own risk and it is pretty much guaranteed to have odd behaviour, especially when used with other methods that affect how a control renders. Since it is not documented and is truly only a beta interface, report the clipping bug with the /bug report tool but don't expect it to be fixed very soon (I reported it almost 2 years ago). Until it does become a documented API method you should report the buggy behaviour but you will have to work within the limitations of that behaviour.

I use SetStretchMode quite frequently, but I've gotten used to its limitations. It is best used on Windows rather than on child controls - if it is used on a child control you have to be sure the control is not positioned outside it's parent so that the clipping issue does not come into play - for instance, SetStretchMode will have undesirable results if used on a control that is a child of a scrollable parent. One of the neat features is that it can also stretch all of the child controls of the control it is applied to (although fonts get ugly and hard to read).

Thanks for the reply Garan (and btw thanks very much for all you're previous guidance posts), I have read all your previous posts regarding it's strange behavior and I am very grateful that you pointed me in the right direction. As you've already found out there are quite a few issues with SetStretchMode but I could live with those and work around them (as I have with the weird graphics refresh issue).

But I'm afraid I may have incorrectly given the impression that this is the root cause of the problem I was having. Although the title may have been misleading, I wanted to explain in detail as to what's happening in detail to the dev's with SetStretchMode, which you are correct, is undocumented and beta (although isn't the whole API still technically beta?). However the main issue I'm having is with the Opacity not working correctly on images when you DON'T use SetStretchMode.
Opacity is documented and has been in the API a long time, I may have missed someone else reporting this behavior as I'm relatively new to plugins for LoTRo, If I have I apologize for the duplicate report. The fact that Opacity does work when using any Stretchmode convinced me that the behavior without using it was not working as intended and was indeed a bug. When I first ran into this, I thought that simply setting SetStretchMode back to 0 after everything else would solve the problem but it doesn't.

Originally Posted by Garan

I use SetStretchMode quite frequently, but I've gotten used to its limitations. It is best used on Windows rather than on child controls - if it is used on a child control you have to be sure the control is not positioned outside it's parent so that the clipping issue does not come into play - for instance, SetStretchMode will have undesirable results if used on a control that is a child of a scrollable parent. One of the neat features is that it can also stretch all of the child controls of the control it is applied to (although fonts get ugly and hard to read).

I, like you, love the SetStretchMode and use it with the knowledge of its issues. In the past I've always had control of the parent window, in which case as you've mentioned you can hide the clipping problems from the user.
Enter the Options Panel.......it's resizable (which is great, don't fix this ), so you have no control over if the user resizes it beyond the child controls. I believe this is the same issue as you mentioned with the scrollable parent, clipping not occurring.
I've racked my brain to come up with a scenario when a developer would not want to have the graphics cleared outside of its parent but I'm at a loss on that one.

I maybe muddying the waters again so just to be clear...

Opacity does not work as expected for images without using SetStretchmode.

Unless I'm doing something wrong, in which case please let me know how to resolve this and I will go bake some humble pie

I realize this doesn't solve your problem, and may be a stupid question, but is there a reason you can't just make the image the way you want, and overlay it as is?

As far as I can tell (especially if this is in the options panel), you're dealing with a static background, so you can either fake opacity in the first place (since you know what your background will be ahead of time) or just give your image the correct opacity, and skip mucking around with trying to blend it with a background color.

(Obviously doesn't apply if you're trying to get different shades of an image by using the same image and varying the background color - I've found Multiply works well for that, but honestly, I don't fully understand how blending works, and I just keep trying things until I get something that works the way I want it to.)

Originally Posted by moebius92

I realize this doesn't solve your problem, and may be a stupid question, but is there a reason you can't just make the image the way you want, and overlay it as is?

“There is no stupid question. Except, possibly, a question not asked.” --Christer Romson

You are right, I could fake it, in this case I am dealing with a static background. But in the future I may want to overlay the control over a background image, I may want to layer multiple controls over each other. I may want to provide the control to the community so that people don't spend hours having to work on their own controls every project and they might want to do the same.
The problem isn't one of specific application, but of general behavior with the Opacity to background images. Again, I gave examples of what happens in Stretchmode>0 to demonstrate to devs so they can duplicate the issues, saving them time and possibly narrowing the root cause down.
I don't believe the Opacity is W.A.I. on images, all other controls (at least ones I've use) do behave as expected. A possible exception is of child controls showing the game layer through when setting their alpha, rather than the window contents of which the child control is on. But that can be worked around and may have been intended so I don't consider that a bug, merely an inconvenience.

Originally Posted by moebius92

I've found Multiply works well for that, but honestly, I don't fully understand how blending works, and I just keep trying things until I get something that works the way I want it to.)

The blending modes actually seem to work well, although I would like to see luminosity, difference, and darken blends added.
Multiply is subtractive, Screen is additive, Overlay is a combination of both. Subtractive blends will never lighten a pixel, Additive blends will never darken them.
Meaning:
Multiply; darkens the lower layer based on the darkness of the upper layer. Multiplying any color with black produces black, multiplying any color with white leaves the color unchanged.
Screen; is the opposite of Multiply, it brightens the lower layer based on the lightness of the upper layer. Screening with black leaves the color unchanged, screening with white produces white.
Overlay; multiplies the light colors and screens the dark colors. So it both multiplies dark areas (like multiply) and screens light areas (like Screen) at the same time, so dark areas become darker and light areas become lighter.

Hmm. Have you tried making self.img into a Turbine.UI.Window? It seems to handle SetOpacity differently than Turbine.UI.Control.

It's still fickle, and I think in my case staying with a semi-transparent image is a better solution, but you might be able to bash it into shape.