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

【问题标题】：Phaser js: is it possible to add css to a sprite?Phaser js：是否可以将 css 添加到精灵？
【发布时间】：2019-04-14 05:08:08
【问题描述】：

我想从我的 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;
    }

【问题讨论】：

标签： javascript css canvas phaser-framework

【解决方案1】：

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

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

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

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

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

【讨论】：

没用这种方式。我决定使用 sprite.tint 而不是为我的每个人创建一个新的精灵。谢谢！

【解决方案2】：

不，样式不能应用于移相器精灵，因为移相器将精灵添加到画布。但是，您可以使用 Phaser 将阴影效果添加到精灵。

请注意，CSS 不适用于在画布上绘制的对象（但您仍然可以将 CSS 添加到画布或父 div）

【讨论】：