Adding filter to parent container crops filters on its children

[SlavomirDurej]

Say I have a sprite bg inside of container thumb. I've added a drop shadow to the bg sprite, and then added color matrix filter to the thumb, this will remove the drop shadow on the bg sprite..

[PrimaryFeather]

Thanks a lot for the report! Could you create a quick sample code that shows how exactly you're doing this? A textual description always leaves room for interpretation -- while code is unambiguous. :wink:

[SlavomirDurej]

Sure thing, here is simple demo code :

package com.durej.d3demo
{
    import starling.core.Starling;
    import starling.display.Quad;
    import starling.display.Sprite;
    import starling.filters.ColorMatrixFilter;
    import starling.filters.DropShadowFilter;
    import flash.utils.setTimeout;

    public class DemoApp extends Sprite
    {
        public function DemoApp()
        {

        }

        public function start() : void
        {
            //create white BG
            var bg : Quad = new Quad(Starling.current.stage.stageWidth, Starling.current.stage.stageHeight,0xFFFFFF);
            this.addChild(bg);

            //create parent container
            var parent_gfx : Sprite  = new Sprite();
            this.addChild(parent_gfx);

            //create child container
            var child_gfx   : Sprite = new Sprite();
            parent_gfx.addChild(child_gfx);

            //create square with drop shadow
            var content : Quad = new Quad(100, 100,0xDEDEDE);
            content.x = content.y = 50;
            child_gfx.addChild(content);
            child_gfx.filter = new DropShadowFilter();

            setTimeout(function ():void {
                parent_gfx.filter = new ColorMatrixFilter();
            }, 
            1500);
        }
    }       
}

The above code will render the light grey rectangle with drop shadow, then after second and a half that drop shadow will disapear..

[PrimaryFeather]

Thanks, Slavomir! I can reproduce that, and I understand the issue. The two filters actually do nest, but the outer filter unfortunately crops the shadow away. :confused:

A quick workaround: add some padding to the outer filter, e.g.:

setTimeout(function ():void {
        parent_gfx.filter = new ColorMatrixFilter();
        parent_gfx.filter.padding.setTo(10, 10, 10, 10);
        // or even better:
        // parent_gfx.filter.padding.copyFrom(child_gfx.filter.padding);
    }, 1500);

That will fix it. As for automating this, I'm not sure yet how best to approach it. I'll have to think this through.

[PrimaryFeather]

BTW, another workaround is to add both filters to the same display object via the new FilterChain. That way, the padding is extended correctly.

[SlavomirDurej]

Hey Daniel, Thanks for the suggestions / workarounds, will employ those until a more systematic / automated solution is found..