Adding graphics (a shadow) to a Sprite with texture (playing card)

[Alexander Farber]

Hello, I have a Sprite loading a playing card texture from sprite sheet.

Now I am trying to add a shadow to the card (when dragged) by just drawing a rectangle on the same sprite -

function Card(str) {
        PIXI.Sprite.call(this, PIXI.Texture.from(str));

        this.shadow = new PIXI.Graphics();
        this.shadow.beginFill(Card.SHADOW_ALPHA, .5);
        this.shadow.drawRoundedRect(0, 0, Card.WIDTH, Card.HEIGHT, Card.CORNER);
        this.shadow.endFill();
        this.shadow.x = Card.SHADOW_OFFSET - Card.WIDTH / 2;
        this.shadow.y = Card.SHADOW_OFFSET - Card.HEIGHT / 2;
        this.addChild(this.shadow); // HOW TO MOVE UNDERNEATH THE TEXTURE?

        this.anchor.set(.5);
        this.interactive = false;
        this.buttonMode = true;
        this.visible = true;
}

Card.prototype = Object.create(PIXI.Sprite.prototype);
Card.prototype.constructor = Card;

Card.WIDTH = 254;
Card.HEIGHT = 400;
Card.SHADOW_OFFSET = 24;
Card.SHADOW_COLOR = 0x000000;
Card.CORNER = 8;

Card.prototype.move = function(x, y) {
        this.x = x;
        this.y = y;
}

Card.prototype.moveBy = function(dX, dY) {
        console.log('moveBy: dX=' + dX + ', dY=' + dY);
        this.x += dX;
        this.y += dY;
}

However the shadow rect is displayed above the texture - while I would like it to be drawn beneath it -

Is there please a way to move the shadow one layer down?

And my 2nd problem is rotation: when I rotate the card Sprite, I would like the shadow to be displayed south-east of it instead of just rotating around the card. What would you recommend here please?

My target is displaying a shadow underneath the card being dragged by the user, to add some (poor man's) depth. I have tried using DropShadowFilter(), but didn't like how it looked (pixelated / dithered).

Greetings from Germany
Alex

 

 

Edited April 18, 2020 by Alexander Farber

[ivan.popelyshev]

> However the shadow rect is displayed above the texture - while I would like it to be drawn beneath it -
 

parent is rendered before child, always. unless you override this method: https://github.com/pixijs/pixi.js/blob/dev/packages/display/src/Container.ts#L529

If you need even more features, like that all shadows should be rendered before old cards - you have to separate them to different containers and update positions at the same time as cards or use pixi-layers. pixi-layers plugin allows to specify container where specific element will be rendered, like second parent. Danger! You have to read README and get through examples first, its a heavy stuff. You can also look at pixi-projection demo "cards" on pixijs examples:)

> My target is displaying a shadow underneath the card being dragged by the user, to add some (poor man's) depth. I have tried using DropShadowFilter(), but didn't like how it looked (pixelated).
 

yes, quality if the problem, you have to fiddle with params. Also its slow, you should use renderTexture to store that and reuse later. Graphics alternative is good enough.

 

Edited April 18, 2020 by ivan.popelyshev