Canvas mask lagging on moving object

[marchbold]

This is following on from the discussion on the forum: http://forum.starling-framework.org/topic/starling-20-masks-on-moving-objects

To replicate this issue I've taken the standard samples/scaffold_mobile project and changed the Game.as to the code at this gist:

https://gist.github.com/marchbold/8bcd636924cf0d02b2134323ad3e7b33

The change is basically to apply a circle Canvas mask to the bird image, place this object inside a container Sprite and moving the container sprite.

Both of these are required to replicate the issue, using a mask works fine, if you move the object directly but not when it's inside the container.

private function init():void
{
    _bird = new Image(Root.assets.getTexture("starling_rocket"));
    _bird.addEventListener(TouchEvent.TOUCH, onBirdTouched);

    applyCanvasMask( _bird );

    _container = new Sprite();
    _container.addChild( _bird );

    _container.x = Constants.STAGE_WIDTH / 2;
    _container.y = Constants.STAGE_HEIGHT / 2;
    _container.pivotX = _container.width / 2;
    _container.pivotY = _container.height / 2;

    addChild( _container );
    moveContainer();
}

private function applyCanvasMask( s:Image ):void
{
    var radius:Number = Math.min( s.width, s.height ) * 0.5;
    var mask:Canvas = new Canvas();
    mask.x = s.width/2;
    mask.y = s.height/2;
    mask.beginFill(0x0000ff, 0.5);
    mask.drawCircle(0,0,radius);
    mask.endFill();
    s.mask = mask;
}

private function moveContainer():void
{
    var scale:Number = Math.random() * 0.8 + 0.2;
    Starling.juggler.tween( 
        _container, 
        Math.random() * 2 + 0.5, 
        {
            x: Math.random() * Constants.STAGE_WIDTH,
            y: Math.random() * Constants.STAGE_HEIGHT,
            scaleX: scale,
            scaleY: scale,
            rotation: Math.random() * deg2rad(180) - deg2rad(90),
            transition: Transitions.EASE_IN_OUT,
            onComplete: moveContainer
        }
    );
}

Let me know if you need any additional information.

[PrimaryFeather]

Thanks for taking the time to create the sample! I'll probably look into it next week and get back to you as soon as it's fixed.

[marchbold]

No problems, hope it helps identifying the issue. Let me know if anything isn't clear.

[PrimaryFeather]

That should do it! Please give it a try and let me know if this fixes the problem for you.

[marchbold]

Thanks! This has solved our issue.

[kevinfoley]

I am experiencing an issue with a canvas mask tearing holes in other display objects when the object containing the mask is moved (e.g. outerSprite contains maskedImage (which uses a canvas mask) and unmaskedImage, but holes corresponding to the shape of the edges of the canvas mask appear in unmaskedImage when the outerSprite is moved). It sounds related to this issue, but the fix you made on the 30th doesn't resolve the problem I'm seeing. Let me know if you need more details.

[PrimaryFeather]

Hi Kevin, I'm sorry to hear about those problems! By all means, it would be great if you could open up a new issue with a small sample project that I can use to reproduce the problem! Thanks a lot in advance.