custome Event for pixi

[abbas jafari]

hi friends.

I want dispatch a custom event for one sprite. 

for example:

when click on bunny sprite. dispatch an event that name is : sayHello.

i wirte this code:

Quote

const container = new PIXI.Container();

app.stage.addChild(container);

// Create a new texture
const texture = PIXI.Texture.from('examples/assets/bunny.png');

const bunny = new PIXI.Sprite(texture);
container.addChild(bunny)
bunny.anchor.set(0.5);
bunny.x = 300;
bunny.y = 200;

bunny.interactive = true;
bunny.buttonMode = true;

bunny.on('click', function(){
    const event1 = new CustomEvent('syaHello', {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    })
    
    this.dispatchEvent(event1)
})

document.addEventListener('sayHello', function(e){
console.log(e)

but when run and click on bunny show this error:

Quote

this.dispatchEvent is not a function

but if i change this code:

this.dispatchEvent to -> document.boy.dispatchEvent

work successfuly.

but i Want dispatch to my sprite or container . can do it????

[ivan.popelyshev]

Hi!

Its a common Javascript newbie problem.

https://stackoverflow.com/questions/2236747/what-is-the-use-of-the-javascript-bind-method

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Either bind the function, either use arrow function.

bunny.on('click', () => {
   ...
});

Its not obvious, and its not something universal, for example your code could work in ActionScript

Edited December 17, 2019 by ivan.popelyshev

[abbas jafari]

On 12/17/2019 at 2:42 PM, ivan.popelyshev said:

Hi!

Its a common Javascript newbie problem.

https://stackoverflow.com/questions/2236747/what-is-the-use-of-the-javascript-bind-method

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Either bind the function, either use arrow function.

bunny.on('click', () => {
   ...
});

Its not obvious, and its not something universal, for example your code could work in ActionScript

thanks. so now I another a question.

i want add event for just red area . can do it????

[ivan.popelyshev]

add a container inside, add containsPoint() that checks if its in red area. It should be easy if you know equations for square and circle.