Tutorials on event handling?

[2dt]

Any good tutorials on how to bind and handle events in Pixi? The documentation of each event handlers reads "interactionData" as parameter, but I don't really understand what that's supposed to be?

 

Thanks.

[2dt]

Grr. actually I just found the tutorial on the goodboydigital blog.

 

Anyway, I guess I'll rephrase the question to any tips or quirks I should know about the event handling system in Pixi? Thanks.

[alwayzambitious]

I am actually asking this same question today.. and am going as far back through the posts I can..

Have you found your answer... 

[clement_cvL]

There is this repository with all the pixi v3 examples (including events) : github.com/pixijs/examples

And concerning the binding :

developer.Mozilla.org/en-US/docs/Web/Javascript/Reference/Global_Objects/Function/Bind

the only tip I think about events is to not forget "mouseupoutside" and "touchendoutside" (if you need to)

[alwayzambitious]

I already saw those examples... on events.. but none of them included passing variables to the function... and I really dont feel like right a function for each button.. thanks for binid tip tho

[alwayzambitious]

 button

        // set the mousedown and touchstart callback...

        .on('mousedown', onButtonDown)

        .on('touchstart', onButtonDown)

 

        // set the mouseup and touchend callback...

        .on('mouseup', onButtonUp)

        .on('touchend', onButtonUp)

        .on('mouseupoutside', onButtonUp)

        .on('touchendoutside', onButtonUp)

 

        // set the mouseover callback...

        .on('mouseover', onButtonOver)

 

        // set the mouseout callback...

        .on('mouseout', onButtonOut)

 

 

        // you can also listen to click and tap events :

        //.on('click', noop)

        

button.tap = noop;

button.click = noop;

 

 

 

 

its so weird to me.. the button.click and button.on is not in the pixi library.... .on and .click are in the jquery library... but it doesnt work out... let me ask my coworkers but this is soooo weird, lol...

 

I still believe in pixi though

[clement_cvL]

I may be wrong, but "every" elements in Pixi (I mean Sprite, Container, Graphics, etc.) inherits from DisplayObject, which inherits itself from EventEmitter.

 

In Pixi.js source, there is the method associate to EventEmitter (l.1541):

 

EventEmitter.prototype.on = function on(event, fn, context) {

 ...

};

which explain the .on() you're using.

 

Then, to explain the click and the tap, in Pixi.js source again, if you look at the code at InteractionManager, you have (l.21894):

 

InteractionManager.prototype.processMouseUp = function ( displayObject, hit )

{

    ...

    this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData );

   ...

};

 

and the same for tap:

 

InteractionManager.prototype.processTouchEnd = function ( displayObject, hit )

{

    ...

    this.dispatchEvent( displayObject, 'tap', this.eventData );

    ...

};

 

There is nothing to do about Jquery, only javascript! You can look at the source, it's well commented

But Mat Grove or Chad Engler would explain that much more efficiently than me

[alwayzambitious]

Thank you for this. To my credit, I went all the way back to Display object in the docs but when it said it was based off EventEmitter, i wasnt able to click on it to see that... 

 

For some reason i thought looking through the source was offlimits and to instead use the api's but ill do that.. thank you clement, now how do i make this thread answered...

[xerver]

We use event emitter 3 (see the dependency in our package.json). Just like clement_cvL mentions, DO inherits from EventEmitter which most other object inherit from as well.

 

Always look at the source when confused, it is (no pun intended) the source of truth for what the library will do and even the api docs themselves. If you look at DO, you can see it inherits from EE which is included from the eventemitter3 package:

 

https://github.com/GoodBoyDigital/pixi.js/blob/a144d10c00a5ab9b98ae34b8f8706576fb8a106d/src/core/display/DisplayObject.js#L3-L16

[alwayzambitious]

Even tho I've been developing for a while ive always been scared to

look in API's whether it be like threeJS or pixi its like learning a new language literally. plus i had the incorrect impression source code

is something "sacred" that shouldnt be touched and would instead look for tutorials...

 

but i guess the guys who made the tutorials were the ones who werent afraid to dig in the docs

 

But thanks xerver for your patience.. I will check out the source event emmitter and get to work.

[d13]

but i guess the guys who made the tutorials were the ones who werent afraid to dig in the docs

You're not alone!

I make lots of tutorials and am always scared to death to delve into the source code.

Its a labyrinth of dark and sinister magic from which I only emerge many years later, old and gray!