Container alpha issue

[aW4KeNiNG]

Hi!

I have an issue when i set the alpha property in a container. Here a code sample:

Toolkit.openFullscreen(function(root:Root) {
            var container = new Absolute();
            container.percentWidth = 100;
            container.percentHeight = 100;

            var button = new Button();
            button.width = 100;
            button.height = 50;
            button.text = "Click Me";
            button.disabled = true;
            button.disabled = false;

            var text = new Text();
            text.width = 100;
            text.height = 50;
            text.y = 70;
            text.style.color = 0x000000;
            text.text = "Text";

            container.addChild(button);
            container.addChild(text);

            button.addEventListener(UIEvent.CLICK, function(e:UIEvent){
                var alpha = container.alpha == 1 ? 0.2 : 1;
                Actuate.tween(container, 5, {alpha: alpha}).onUpdate(function(){
                    //button.invalidate(InvalidationFlag.DISPLAY);   //Uncomment to work
                });
            });

            root.addChild(container);
        });

The problem is with the Button. The alpha in the Button child doesn't change, but it works in the Text. If you move the cursor over the Button, then it is updated. If you uncomment the invalidate line then it works in real time.

Also, it works if you modify the DisplayObject.hx class with invalidate(InvalidationFlag.DISPLAY, true);

The problem is with the Button. The alpha in the Button child doesn't change, but it works in the Text. If you move the cursor over the Button, then it is updated. If you uncomment the invalidate line then it works in real time.

Also, it works if you modify the DisplayObject.hx class with invalidate(InvalidationFlag.DISPLAY, true);

I though to create a PR, but maybe you can think another solution.

Kind Regards.

[aW4KeNiNG]

Sorry, i said InvalidationFlag.DISPLAY, i mean STYLE, not DISPLAY.

I have created a PR #337 with the solution.

Kind Regards.

[ianharrigan]

What platform are you testing? Ive tried with flash and it seems fine...

[aW4KeNiNG]

Windows and Android.

[ianharrigan]

it feels like an openfl bug, but im not sure about that - setting alpha should set alpha of everything. The thing that makes me feel like it might not be openfl related is that you can defeat it by recursively invalidating the style. Let me check it out.

The main reason im a little hesitant to merge the pull request is it seems expensive to recursively invalidate things. I mean, imagine you had 1000s of components and you made the top level container alpha = .2, thats a lot of invalidation

[aW4KeNiNG]

Yes, i know. Because of that, i said that maybe you can find a better solution.

It is weird. Text component works fine. Button and ListSelector (extends Button) doesn't work.

[ianharrigan]

Ok, well i found the issue, its to do with the filters. So i think its an openfl bug. Basically if you have a filter set on a displayobject and set the alpha it seems to ignore it until you set the filter again, basically, if you remove these lines:

            if (_baseStyle.filter != null) {
                _sprite.filters = [_baseStyle.filter];
            } else {
                _sprite.filters = [];
            }

the it works, but of course you never have the filters any more, looking for a better solution now

[aW4KeNiNG]

Good catch!

[ianharrigan]

Its not the best solution, but it should work, its easier than invalidating all children and its only applied if there is a filter and an ancestor has alpha set.

Let me know if it fixes this haxelib version 1.8.6

[aW4KeNiNG]

It works with a single level. But it didn't work with a container inside of another container. Example:

Toolkit.openFullscreen(function(root:Root) {
            var container = new Absolute();
            container.percentWidth = 100;
            container.percentHeight = 100;

            var button = new Button();
            button.width = 100;
            button.height = 50;
            button.text = "Click Me";

            var text = new Text();
            text.width = 100;
            text.height = 50;
            text.y = 70;
            text.style.color = 0x000000;
            text.text = "Text";

            var selector = new ListSelector();
            selector.width = 100;
            selector.height = 50;
            selector.text = "Selector";

            var container2 = new Absolute();
            container2.percentWidth = 100;
            container2.percentHeight = 100;
            container2.y = 130;
            container2.addChild(selector);

            container.addChild(button);
            container.addChild(text);
            container.addChild(container2);

            button.addEventListener(UIEvent.CLICK, function(e:UIEvent){
                var alpha = container.alpha == 1 ? 0.2 : 1;
                Actuate.tween(container, 5, {alpha: alpha});
            });

            root.addChild(container);
        });

[ianharrigan]

Ok, yeah, my previous addition didnt make sense, ie:

        if (_sprite.alpha >= 1) { // is only an issue if alpha is less than 1
            return;
        }

[ianharrigan]

Actually, i move the check to the applyStyle, i think it make sense there and if the alpha hasnt been set we dont want to constantly iterate children on a style change

[aW4KeNiNG]

It works now! Jeje, thanks for your help. Really i appreciate it.

I can't wait to play with the v2! :dancer: