Phaser js：是否可以将 css 添加到精灵中？

Question

我想从我的 Phaser 游戏中取出一个精灵并添加一些 CSS。可能吗？我做了研究，但一无所获。我想将此 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;
    }

Answer 1

不，您不能使用 CSS 设置 Phaser 精灵的样式。

但是，如果您使用图像作为 sprite，您可以将该元素作为 img 元素添加到页面，然后对其应用 CSS 样式。但是，它无法在具有该样式的游戏中使用。

如果您想在 Phaser 中执行此操作，一种选择是复制 sprite 并对其着色并从原始 sprite 偏移，使其看起来像一个阴影。

有一个 Sprite Shadow example for Phaser 2 展示了这一点。

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;
}

或者，您可以更新您的资产以包含阴影（如果它应该始终存在的话）。这通常比以编程方式添加它的性能更高。

Answer 2

不，不能将样式应用于 Phaser Sprite，因为 Phaser 会将 Sprite 添加到 Canvas。但是，您可以使用 Phaser 将阴影效果添加到 sprite。

请注意 CSS 不适用于在 Canvas 上绘制的对象（但您仍然可以将 CSS 添加到 canvas 或父级div)

Phaser js：是否可以将 css 添加到精灵中？

Phaser js: is it possible to add css to a sprite?

javascript

css

canvas

phaser-framework