Phaser js: возможно ли добавить CSS в спрайт? - PullRequest
Новая
       12

Phaser js: возможно ли добавить CSS в спрайт?

0 голосов
/ 11 ноября 2018

Я хочу взять спрайт из моей игры 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;
    }

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

Нет, стиль не может быть применен к спрайту Phaser, так как Phaser добавляет спрайт в Canvas. Однако вы можете добавить эффект отбрасывания тени к спрайту, используя Phaser.

Обратите внимание, что CSS не работает с объектами, нарисованными поверх Canvas (но вы все равно можете добавить CSS в холст или родительский div)

0 голосов
/ 11 ноября 2018

Нет, вы не можете стилизовать спрайтер Phaser с помощью CSS.

Однако, если вы используете изображение для спрайта, вы можете добавить элемент на страницу как элемент img, а затем применить к нему CSS-стилизацию. Но его нельзя было использовать в игре с этим стилем.

Если вы хотите сделать это в Phaser, одним из вариантов будет создание дубликата спрайта, подкраска его и смещение от исходного спрайта, чтобы он выглядел как тень.

Есть пример Sprite Shadow для 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;
}

Кроме того, вы можете обновить свой актив, добавив в него тень, если она всегда присутствует. Это, как правило, более производительно, чем программное добавление.

...