Как установить маску для GameObject, как будто это один GameObject? - PullRequest
Новая
       23

Как установить маску для GameObject, как будто это один GameObject?

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

Как переполнение: скрыто в CSS, я хочу установить маску для объекта изображения, а затем обработать их как один игровой объект. Например, показать форму аватара в виде звезды.

В phaser-ce я могу добавить и маску, и изображение в одну группу, а затем вернуть эту группу в качестве игрового объекта, добавить анимацию анимации в этой группе и также повлиять на маску. ,Все в порядке.

Но в Phaser 3 маска имеет глобальный характер, на позицию ее родительский контейнер не влияет. Когда я добавляю сложную анимацию к этому изображению, я должен сделать то же самое с его маской. Это беспокоит.

Так как реализовать переполнение: скрыто в Phaser 3?

Я пыталсясообщить о проблеме на github: https://github.com/photonstorm/phaser/issues/4765 Но Рич не думал, что это проблема, и не дал мне ответа, просто скажите it was designed this way and won't be changed for any v3 version

var config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#000066',
    parent: 'phaser-example',
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('bg', 'assets/ui/undersea-bg.png');
    this.load.image('ayu', 'assets/pics/ayu.png');
}

function createAvatar (scene)
{
    const container = scene.add.container(400, 300);

    const sprite1 = scene.add.sprite(0, 0, 'ayu');
    // must set x y exactly same with container's x and y here
    // even though shape1 is added to container
    const shape1 = scene.make.graphics().fillRect(400, 300, 100, 100);

    // !! I want mask attached to sprite1
    // !! because I don't know what will happen next
    container.add(shape1);
    container.add(sprite1);
    const mask = shape1.createGeometryMask();
    sprite1.setMask(mask);

    // return one game object, don't care how to show
    return container
}

function create ()
{
    var bg = this.add.image(400, 300, 'bg');

    // create a game object, don't care what's inside
    const avatar = createAvatar(this)

    // !! this is what happend next
    this.tweens.add({
        targets: avatar,
        angle: { value: 360, duration: 6000 },
        scaleX: { value: 0.5, duration: 3000, yoyo: true, ease: 'Quad.easeInOut' },
        scaleY: { value: 0.5, duration: 3000, yoyo: true, ease: 'Quad.easeInOut' },
        repeat: -1
    });
}

Вы можете вставить код в https://labs.phaser.io/edit.html, Это не так, как у меня, за исключением.

Я ожидаю, что маска вращается точно так же, как изображение, но на самом деле нет.

...