Filter cut child

[sjabberwocky]

I have button with some kinda border as a child of this button. When I set filter on this button it cuts borders. With Starling 1.x it works fine. https://i.gyazo.com/9e0a218915bdfd7b669bb4566f960d25.gif

[PrimaryFeather]

Thanks a lot for the report! Do you think you could set up a minimal sample for me, so that I can reproduce the problem easily? That would be a huge help.

[sjabberwocky]

Looks like this is Feathers issue. In this simple test filter works fine, but when level image is defaultSkin and border is child of this button filter cuts border.

        private var glow : GlowFilter = new GlowFilter(0xf0ffff);

        public function Test()
        {
            addChild(getImage(Resources.COMMON_UI, Resources.level));

            var border : Image = getImage(Resources.COMMON_UI, Resources.levelBorder);
            border.x = -53;
            border.y = -52;
            addChild(border);

            addEventListener(TouchEvent.TOUCH, onTouch);
        }

        private function onTouch(e : TouchEvent) : void
        {
            filter = e.getTouch(this, TouchPhase.HOVER) ? glow : null;
        }

        public static function getImage(atlas : String, name : String) : Image
        {
            return new Image(assets.getTextureAtlas(atlas).getTexture(name));
        }

[PrimaryFeather]

So you say the sample above will work just fine, right?

If it only shows up in Feathers: could you maybe try to reproduce it somehow in the ComponentsExplorer Demo that comes with Feathers? That would be the easiest way for me to reproduce it. Even though it only shows up in Feathers, I still suspect this to be a Starling issue.

Thanks a lot in advance!

[sjabberwocky]

To reproduce this issue with ComponentsExplorer try to add this code to ButtonScreen.

        override protected function initialize() : void
        {
            //at the end of this method
            var skull : Image = new Image(EmbeddedAssets.SKULL_ICON_DARK);
            skull.x = -20;
            filterButton.addChild(skull);
            addChild(filterButton);

            filterButton.addEventListener(TouchEvent.TOUCH, onTouch);
        }

        private var filterButton : Button = new Button();
        private var glow : GlowFilter = new GlowFilter(0xf0ffff);

        private function onTouch(e : TouchEvent) : void
        {
            filterButton.filter = e.getTouch(filterButton, TouchPhase.HOVER) ? glow : null;
        }

[sjabberwocky]

I checked previous release version of our game, actually, it has some kind a issue with filters, but in another way. Filter worked only with button as you can see on screen. http://dl2.joxi.net/drive/2016/04/21/0004/1311/288031/31/cb38ce51ec.jpg

[sjabberwocky]

Probably I found another way to reproduce this bug - button without graphics but with text loose text when you add filter to it. Looks like a problem with boundaries.

[PrimaryFeather]

Thanks, that information helped a lot! Actually, it seem this is a Feathers-issue, after all.

@joshtynjala The problem here is that FeathersControl.getBounds uses an optimized code that calculates the bounds directly via actualWidth and actualHeight. However, those values don't include the additional child that was added to the button.

In any case, Starling requires the correct bounds to know which area to render to the filter texture. I'm sure you know best how to approach this. Thanks a lot in advance!

[joshtynjala]

Thanks for letting me know. I'd hate to lose the performance boost from skipping measurement of children. As I recall, it was pretty significant at the time (I'll need to recheck it, though, because this was years ago). I'll probably simply add a special exemption when the filter property is not null.

[PrimaryFeather]

Mhm, I see what you mean Josh ... that's a tough choice. 😐

@sjabberwocky, what you could also do is simply set filter.padding.left += 20. That will extend the area of the filter so that it includes the icon.

[PrimaryFeather]

I guess this has always been this way, even in Starling 1.8. So one option, @joshtynjala, might be to simply document this behavior and add that tip with the padding. After all, it seems that this is not a very frequent problem.

In any case, I will close this issue, since it's not something that can be fixed on my side. @sjabberwocky, feel free to open it up again if there's anything else.