non-rectangular images and transparency

[Eddenwulf]

Been diving into the pre-defined Turbine UI elements finally. Not as bad as I'd feared... especially thanks to Garan's intro. (Thanks Garan!)

But using background images for buttons is giving me a royal pain.

I want to have non-rectangular sized buttons, with transparent pixels.

I know this is possible. Songbook has a non-rectangular 'toggle window' which rounded edges, where the background is unaffected by those 'transparent' pixels.

I know that, with alpha-blending, black pixels are treated as transparent. (And this is what songbook does.)

So I load my background image (with black pixels where I want transparency) and blendmode set to Turbine.UI.BlendMode.AlphaBlen d ... and the black pixel are rendered as black!!

:-(

And no matter what combination of BlendMode(), BackColor(), BackColorBlendMode() I use, I either get the image with *nothing* showing, or I get it with no pixes treated as transparent.

I even created a slider to interactively check opacity. Not only did this not do the trick, it revealed that my controls are completely ignoring their opacity settings. (Again, mystifying, since songbook has no trouble with it.)


Does this sound at all familiar?

Does anyone have some good sample code that can point me to?... since mimicing songbook's code doesn't seem to do the trick (though I have no idea why...)


grrrr.

[Garan]

What you want is to use a .tga image which defines a transparency color (not the same as black) instead of a .jpg image. You can create .tga files in many paint programs, including paint.net which is free. Just load the .tga file as the background using SetBackground() and set the control's blend mode to Overlay using SetBlendMode(Turbine.UI.BlendM ode.Overlay).

There are many examples of this, for instance the annotations, controls and mini-icon in MoorMap. The Overlays also support transparency as demonstrated by the Berry's Deed Overlays.

[Thurallor]

One important thing to note is that if you want images to overlay each other, and be able to see the back image through the transparent parts of the front image, you need to put them in separate top-level windows (Turbine.UI.Window). If you just put them in separate controls (Turbine.UI.Control) within the same window, it won't work.

[Garan]

One important thing to note is that if you want images to overlay each other, and be able to see the back image through the transparent parts of the front image, you need to put them in separate top-level windows (Turbine.UI.Window). If you just put them in separate controls (Turbine.UI.Control) within the same window, it won't work.

This is incorrect.

You can overlay a control with a .tga background over another control with a .tga background and see them layered with correct transparency. For instance, load MoorMap and turn on the debug window and execute the following code:

resourcePath="GaranStuff/MoorMap/Resources/"
mapPath="GaranStuff/MoorMap/Maps/"


testWindow=Turbine.UI.Lotro.Window()
testWindow:SetSize(400,400)
testWindow:SetPosition(200,200)
testWindow:SetText("Test Window")
testWindow:SetVisible(true)

background=Turbine.UI.Control()
background:SetParent(testWindow)
background:SetSize(380,340)
background:SetPosition(10,40)
background:SetBackground(mapPath.."Cliving.jpg")

testButton=Turbine.UI.Control()
testButton:SetParent(background)
testButton:SetSize(32,32)
testButton:SetPosition(10,45)
testButton:SetBlendMode(Turbine.UI.BlendMode.Overlay)
testButton:SetBackground(resourcePath.."Annotations.tga")

testButton2=Turbine.UI.Control()
testButton2:SetParent(background)
testButton2:SetSize(32,32)
testButton2:SetPosition(10,45)
testButton2:SetBlendMode(Turbine.UI.BlendMode.Overlay)
testButton2:SetBackground(resourcePath.."Barber_Icon.tga")

This will generate three images all overlayed with transparency, the topmost with the 16x16 barbershop icon tiled with transparency over the mini-icon of the 32x32 annotations icon which in turn is transparent over the background of the top left corner of the Cliving map. While this is a relatively ugly sample, it clearly shows that you can layer multiple transparent images. This also shows that the controls can either be contained within the control behind them or simply use ZOrder (or order of definition) to control which is topmost. The key is to use .tga images and set the BlendMode to Overlay. Note, a whole separate, more complicated set of rules applies if any of the controls or their parents use SetStretchMode to stretch their images so try to stay away from SetStretchMode when layering controls with transparency.

[Eddenwulf]

good news - following your lead, I messed about with photoshop 'til I got it definitely saving the .tga files with transparency properly encoded.

bad news - now I can't make the image show up at all, regardless of what settings I'm using.



What I'm *trying* to do is similar to the chat tabs on the lotro chat interface. I'll have the top part of a window control where I want a non-rectangular thing sticking up, surrounded by transparent pixels (to give the impression of a non-rectangular window.)

So I've got a rectangular control for that part of the window, with a back color alpha of 0 (so that places where there's no control are transparent) and mousevisible of false (so clicks are passed through). Contained within this 'clear' rectangle are the child controls. So the space 'around' those controls is the clear rectangular parent.

And those children themselves I want to consist of a non-rectangular image (or, rather, a rectangular .tga image with transparent pixels) and a background, again, with alpha=0.


I figure it must be possible, that that's what the chat-tabs are doing.

But I've yet to hit on a combination of tga format and settings that work.

Which is maddening, because I see songbook doing it an started off by doing just what - I thought - worked there!

[Eddenwulf]

<< Note, a whole separate, more complicated set of rules applies if any of the controls or their parents use SetStretchMode to stretch their images so try to stay away from SetStretchMode when layering controls with transparency. >>


Oh bother.

That was my next step.....

(Actually, come to think of it, the bit I need to stretch won't need transparent pixels, so maybe I'll be okay..)

[Garan]

You might want to check AltViewer, it has a fairly simplistic tab control class that should give you all you need to get started. Note, you shouldn't have to stretch anything for a tab control, just use three controls - the two ends (which contain the curved part of the tab border) and the central part which can have a tiled background without need for stretching - to save resources when tiling, I don't use a single pixel wide image, I usually use something like a 100 pixel wide image so there will be fewer repetitions. Typically, you would use a Label for the center portion just so you can get text and background all in one control. In the case of the AltViewer tab control, it uses .tga files with shades of grey and then uses the BackColor and BackColorBlendMode to generate colored tabs with borders and highlighting.

[Thurallor]

This is incorrect.

You can overlay a control with a .tga background over another control with a .tga background and see them layered with correct transparency. For instance, load MoorMap and turn on the debug window and execute the following code:

resourcePath="GaranStuff/MoorMap/Resources/"
mapPath="GaranStuff/MoorMap/Maps/"


testWindow=Turbine.UI.Lotro.Window()
testWindow:SetSize(400,400)
testWindow:SetPosition(200,200)
testWindow:SetText("Test Window")
testWindow:SetVisible(true)

background=Turbine.UI.Control()
background:SetParent(testWindow)
background:SetSize(380,340)
background:SetPosition(10,40)
background:SetBackground(mapPath.."Cliving.jpg")

testButton=Turbine.UI.Control()
testButton:SetParent(background)
testButton:SetSize(32,32)
testButton:SetPosition(10,45)
testButton:SetBlendMode(Turbine.UI.BlendMode.Overlay)
testButton:SetBackground(resourcePath.."Annotations.tga")

testButton2=Turbine.UI.Control()
testButton2:SetParent(background)
testButton2:SetSize(32,32)
testButton2:SetPosition(10,45)
testButton2:SetBlendMode(Turbine.UI.BlendMode.Overlay)
testButton2:SetBackground(resourcePath.."Barber_Icon.tga")

This will generate three images all overlayed with transparency, the topmost with the 16x16 barbershop icon tiled with transparency over the mini-icon of the 32x32 annotations icon which in turn is transparent over the background of the top left corner of the Cliving map. While this is a relatively ugly sample, it clearly shows that you can layer multiple transparent images. This also shows that the controls can either be contained within the control behind them or simply use ZOrder (or order of definition) to control which is topmost. The key is to use .tga images and set the BlendMode to Overlay. Note, a whole separate, more complicated set of rules applies if any of the controls or their parents use SetStretchMode to stretch their images so try to stay away from SetStretchMode when layering controls with transparency.

I could've sworn I tried that without success, back when I was messing with that stuff. Then again, I'm sure I was using SetStretchMode.

The complicated set of rules you refer to is arcane knowledge that is probably only known by a few people in the world, and I doubt if it includes anyone working at Turbine.

[Eddenwulf]

Definitely arcana. I still haven't figured it out, not really.

At this point, I'm just trying to find the right settings for my immediate problems, then I'll try for a comprehensive understanding later - if ever.

But, in pursuit of that latter, what *is* the logic of the relationship between background, back color, and blend modes.

That is to say - when I set the blend mode of the 'background', is that telling me how it is blended with the back color? Or is it the other way around? And once the background and back color are blended together, which of the modes is used to determine how they are blended with whatever lies behind that control?

And all this before even mentioning opacity!


Some intuitions/discoveries to share or double-check:

* I notice that when I set a top-level window's opacity value, it affects all its children. In the case of non-windows and non-top-level windows (created just to test this), however, children ignore the parent's opacity. This seems to hold true for all blend mode combinations I've tried.

* Just an intuitive guess here, but it /seems/ to me as if the weird behavior under stretch mode settings maps on to the behavior of layered controls. That is to say, as if, in the background, a 'dummy' control is being inserted (much the way, I gather, is the case with scrollable objects?)... so that the behavior of blend modes corresponds not to their settings when a single control is involved, but rather to the effect when blending a control into its parent. But that's just a guess, because of what it /feels/ like.


I still don't grok this stuff... but, if nothing else, trial and error is helping me find the right magical settings for my particular interface....

[Thurallor]

Sorry I can't answer all your questions, and probably no one can.

However, I did mess with this stuff quite a bit when I was making my "Another Color Picker" class. Included in the .zip file is an Excel spreadsheet showing how I configured the four different layers of overlaid images, their backgrounds, and their blending modes, to achieve the desired effects.

There's also this short thread, in which I posted some things I discovered:

Here are a few more facts I've picked up after playing with it for a while:

1. The BlendMode property, which applies to the Background image, really only supports the AlphaBlend mode. If you set BlendMode to another value, the image will either not be displayed at all, or it will be displayed in AlphaBlend mode.
2. The BackColorBlendMode property, which applies to the BackColor, does seem to support all values of BlendMode.
3. The BackColor (if not nil) for a given window is composited on top of the Background image.

The descriptions of the blending modes aren't very good in the Wiki, but the names seem to be somewhat industry standard, so you can refer to better documentation elsewhere, e.g. Wikipedia.

But as far as I can tell, there is remarkably little other discussion out there. Maybe Garan can point you to a thread that I've been unable to find with Google.