Add color and opacity to group elements

[marcusx2]

There are only 3 types of element components: image, text, and group. Groups are used to control the size and position of its children, however there is more that could be done. Both image and text elements have in common the color and opacity properties. As such, the group could theoretically also control the color and opacity of its children.

If a group had the opacity set to 0.5, then a child image with opacity of 1 would only have effectively 0.5 opacity. If said child instead had 0.5 opacity, then it would have effectively 0.25 opacity(0.5 * 0.5). If the parent has color yellow and the child color blue, the child ends up with color green. And so on.

Why is this useful? For the same reason groups are already useful for positioning and scaling its children. When I want to control the color/opacity of a group of UI images/text at the same time. For example, If I want to fade out/fade in a UI screen, I currently have to iterate through each UI image/text to change the opacity, when I could just do that to the group if it was possible.

[NewboO]

Wouldn't yellow parent and blue child end up black instead of green? Yellow is (1, 1, 0) and blue is (0, 0, 1) so yellow * blue = (0, 0, 0).

Anyway, I support the idea and I think it could also include a property to control interactibility of children (to mass toggle Element.useInput and possibly Button.active so they appear disabled). And maybe also a way for a child group to ignore parent group (when you need complex hierarchy, it can be useful to "reset" those properties locally).

[marcusx2]

Wouldn't yellow parent and blue child end up black instead of green? Yellow is (1, 1, 0) and blue is (0, 0, 1) so yellow * blue = (0, 0, 0).

Hm...if you look at it this way, yeah. Not in the conventional way. But I guess it doesn't matter how it's done, as long as we can mix and get the result we want.

Anyway, I support the idea and I think it could also include a property to control interactibility of children (to mass toggle Element.useInput and possibly Button.active so they appear disabled). And maybe also a way for a child group to ignore parent group (when you need complex hierarchy, it can be useful to "reset" those properties locally).

+1

[NewboO]

Oh, I see, we're in the designer vs. developer zone 😄

Unfortunately, in PlayCanvas (and in most if not all game engines), if you set up an element component with a yellow texture and a blue color, it ends up black because it simply does a multiply blend in sRGB color space, without considering any design convention. Color blending can be done in lots of way and I know first hand it could lead to misinterpretation (like a graphist making an asset to be tinted but using a blend mode other than "multiply" to test it in Photoshop thus it doesn't look the same in the game engine).

It still is a nice idea though, and I wish I'd thought about it before. I already have a terribly hacky way to handle group opacity and adding color to it could really be a great addition. Maybe some day I might make a PR to add all of this to the engine (if no one does it before) but it's way longer to do it correctly than nastily.

[marcusx2]

I think it's specially useful the opacity and color properties, since all UI elements have them. However I also support mass activating buttons and a property on the child to ignore parent. Just afraid it could get convoluted.

If you liked this suggestion, I invite you to take a look at my other ones :). See my editor suggestions and other engine suggestions.