2dt

Tutorials on event handling?

Recommended Posts

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)

Share this post


Link to post
Share on other sites
 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

Share this post


Link to post
Share on other sites
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 ;)

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.