Agfdhyk

I want to take a sprite from my Phaser game and add to it some CSS. Is it possible? I made researches but found nothing. I would like to add to my sprite this CSS:

img {

       webkit-filter: drop-shadow(1px 1px 0 black)

       drop-shadow(-1px -1px 0 black);

       filter: drop-shadow(1px 1px 0 black) 

       drop-shadow(-1px -1px 0 black);

       background-color: lightcoral;

    }

No, you cannot style a Phaser sprite with CSS.

However, if you're using an image for the sprite you could add the element to the page as an img element and then apply CSS styling to it. But, it could not then be used within the game with that styling.

If you wanted to do this in Phaser one option would be to make a duplicate of the sprite and tint it and offset it from the original sprite so that it looks like a shadow.

There's a Sprite Shadow example for Phaser 2 that shows this in action.

var sprite;

var shadow;

var offset = new Phaser.Point(10, 8);



function create() {

    shadow = game.add.sprite(game.world.centerX, game.world.centerY, 'hotdog');

    shadow.anchor.set(0.5);

    shadow.tint = 0x000000;

    shadow.alpha = 0.6;



    sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'hotdog');

    sprite.anchor.set(0.5);



    game.input.addMoveCallback(move, this);

}



function move(pointer, x, y) {

    sprite.x = x;

    sprite.y = y;



    shadow.x = sprite.x + offset.x;

    shadow.y = sprite.y + offset.y;

}

Alternatively, you could update your asset to include the drop shadow, if it should always be present. That would generally be more performant than adding it programmatically.

No, style can't be applied to a phaser sprite as Phaser adds the sprite to a Canvas.
However, you can add the drop-shadow effect to a sprite using Phaser.

Please note that CSS doesn't works on the objects which are drawn over a Canvas (but you can still add CSS to a canvas or parent div)