Shadows don't display correctly

Phaser 2 / CE
1

I’m making a game based in Tangrams. I wanted to put shadows in the pieces but the sprites are cut somehow. When I check the image of the sprite it doesn’t have any line on it.

this.sprite.mask = tileMask;

    this.sprite.shadows = this.game.add.group();

    let shadowHeight = 22;
    let shadowAnchor = 0.5;
    let magic = 5.75;
    let magic2 = 10;

    let leftTopShadow = this.game.add.sprite(0, 0, 'atlas', AtlasDictionary.getCornerShadowName());
    leftTopShadow.anchor.setTo(shadowAnchor, shadowAnchor);
    leftTopShadow.position.x -= this.shape.width/2 + magic;
    leftTopShadow.position.y -= this.shape.height/2 + magic;
    this.sprite.shadows.add(leftTopShadow);

    let rightTopShadow = this.game.add.sprite(0, 0, 'atlas', AtlasDictionary.getCornerShadowName());
    rightTopShadow.anchor.setTo(shadowAnchor, shadowAnchor);
    rightTopShadow.position.x += this.shape.width/2 + magic;
    rightTopShadow.position.y -= this.shape.height/2 + magic;
    rightTopShadow.angle = 90;
    this.sprite.shadows.add(rightTopShadow);

    let leftBottomShadow = this.game.add.sprite(0, 0, 'atlas', AtlasDictionary.getCornerShadowName());
    leftBottomShadow.anchor.setTo(shadowAnchor, shadowAnchor);
    leftBottomShadow.position.x -= this.shape.width/2 + magic;
    leftBottomShadow.position.y += this.shape.height/2 + magic;
    leftBottomShadow.angle = -90;
    this.sprite.shadows.add(leftBottomShadow);

    let rightBottomShadow = this.game.add.sprite(0, 0, 'atlas', AtlasDictionary.getCornerShadowName());
    rightBottomShadow.anchor.setTo(shadowAnchor, shadowAnchor);
    rightBottomShadow.position.x += this.shape.width/2 + magic;
    rightBottomShadow.position.y += this.shape.height/2 + magic;
    rightBottomShadow.angle = 180;
    this.sprite.shadows.add(rightBottomShadow);

    let topShadow = this.game.add.tileSprite(0, 0, this.shape.width - magic2, shadowHeight, 'atlas', AtlasDictionary.getShadowName());
    topShadow.anchor.setTo(0.5, shadowAnchor);
    topShadow.position.y -= this.shape.height/2 + magic;
    this.sprite.shadows.add(topShadow);

    let bottomShadow = this.game.add.tileSprite(0, 0, this.shape.width - magic2, shadowHeight, 'atlas', AtlasDictionary.getShadowName());
    bottomShadow.anchor.setTo(0.5, shadowAnchor);
    bottomShadow.position.y += this.shape.height/2 + magic;
    bottomShadow.angle = 180;
    this.sprite.shadows.add(bottomShadow);

    let leftShadow = this.game.add.tileSprite(0, 0, this.shape.height - magic2, shadowHeight, 'atlas', AtlasDictionary.getShadowName());
    leftShadow.anchor.setTo(0.5, shadowAnchor);
    leftShadow.position.x -= this.shape.width/2 + magic;
    leftShadow.angle=-90;
    this.sprite.shadows.add(leftShadow);

    let rightShadow = this.game.add.tileSprite(0, 0, this.shape.height - magic2, shadowHeight, 'atlas', AtlasDictionary.getShadowName());
    rightShadow.anchor.setTo(0.5, shadowAnchor);
    rightShadow.position.x += this.shape.width/2 + magic;
    rightShadow.angle=90;
    this.sprite.shadows.add(rightShadow);

    this.sprite.shadows.position.x = this.sprite.position.x;
    this.sprite.shadows.position.y = this.sprite.position.y;

This is the code I use for the shadows

It shows like this

image
image534×508 85 KB

2

Could be rounding?

3

Rounding? What rounding?

4

Try adding { roundPixels: true } in game config.

5

It didn’t fix the problem. I tried moving the sprites of the shadows a little more and it didn’t help either. The bug only happens with pieces with a screw, so they can rotate.