Jump to content

Tutorials on event handling?


2dt
 Share

Recommended Posts

  • 1 year later...
 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

Link to comment
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 ;)

Link to comment
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...

Link to comment
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

Link to comment
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.

Link to comment
Share on other sites

  • 3 weeks later...

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!

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...