pixijs: создайте пользовательское событие в спрайте и прослушайте в другом спрайте

#events #pixi.js

#Мероприятия #pixi.js

Вопрос:

У меня есть два пользовательских спрайта (в моем случае это спрайт, другой — контейнер, но это не имеет значения). Мне нужно создать событие в одном спрайте и прослушать его в другом спрайте ( MyDragableElement ). В приложении у меня их много MyDraableElements: PIXI.Sprite . Идея заключается в том, что второй спрайт сможет управлять on MyDragableElement , но он должен знать, какой элемент выбран. Я решил, что события могут здесь помочь, но как это должно быть написано в Typescript?

 export class MyDragableElement extends PIXI.Sprite {
    constructor(

     super();

        this
        .on('pointerdown', this.onDragStart)
        .on('pointerup', this.onDragEnd)
        .on('pointerupoutside', this.onDragEnd)
        .on('pointermove', this.onDragMove);
    }

    private onDragStart(event) {
        this.emit('selectedElementChanged', this);
    }
}
 

Итак, как вы видите, это какой-то спрайт, и при запуске перетаскивания он должен выдавать глобальное событие.

Вот еще один спрайт, и он должен прослушать это событие.

 export class Toolbar extends PIXI.Container {
    selectedGameObject: any;

    constructor()
    {
        super();
        this.addListener("selectedElementChanged", 
                (e:any) =>  { 
                    // this.selectedGameObject = need to select this element
                    console.log(e); 
                });
        }
     }
  }
 

Выше приведена моя идея, но она не сработала. Нет опыта в отправке событий.

Ответ №1:

Я только что изучил эту тему и могу ошибаться, но…

если у вас есть какой-то спрайт

 let mySprite = new Sprite(someTexture);
 

… вы можете написать где-нибудь в своем коде следующее:

 mySprite.emit('customEvent', {myData: 'somedata'});
 

И вам также необходимо установить обработчик событий для этого пользовательского события в вашем спрайте:

 mySprite.on('customEvent', onCustomEvent);

let onCustomEvent = (event) => {
    console.log(event);
};