Git Product home page Git Product logo

Comments (9)

Harissa avatar Harissa commented on March 29, 2024

This would be useful for me too. I had a look at the Interaction Manager code and it seems to be trapping mouse move but using it for mouse over and I'm not sure how to get a mouse move event. Any pointers would be great.

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

cool, will rustle up an example :D

from pixijs.

 avatar commented on March 29, 2024

Hi there! Just to bump this! I saw that too, in the Interaction Manager "mousemove" and even "hittest". This would be perfect if we can just call "mousemove" on any sprite and + a hittest method to have full interaction with our content! Right now I use a custom way based on updateHandler + mouseup / down event, not very clean!
PixiJS is a very cool engine! Very fun to build stuff! Thanks for your work!

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

no worries! re-working a few bits on the interaction manger as we speak :)
Nearly finished too!

heres the WIP multi touch example:

http://www.goodboydigital.com/pixijs/examples/temp_6/

works great on an ipad..

I'm basically adding a few more bits:

Some new callbacks:

mousemove
mouseupoutside

touchendoutside
touchmove

I also added getLocalPosition function to the interactionData. This means you can get the cords of a touch/mouse from anywhere..

and most importantly I have been looking into making any object interactive :)

keen to know anyones thoughts on this! (you can view the src code in the example above to see how it would work)

Thanks!

from pixijs.

mud avatar mud commented on March 29, 2024

Yes, this is great!

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

woop woop!! I have just pushed the updated interaction manager up along with docs and new example.
let me know if it works ok for you guys! :D

from pixijs.

 avatar commented on March 29, 2024

It's perfect! Thank you! Now we can fully interact with our content ;-) !
And, just to go to the end of this topic: does anyone know how to implement a simple hitTest for PixiJS?

if ( hitTest( objectA, objectB ) ) console.log( "Woot!" );

I have a custom method to calculate lengh between 2 points like:

function hitTest( a, b ) {
  var dX = b.position.x - a.position.x;
  var dY = b.position.y - a.position.y;
  var dist = Math.sqrt( dX * dX - dY * dY );
  return dist <= a.width / 2 + b.width / 2;
}

// blabla --

Doesn't work everytime, and not very elegant! And I saw "PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)" in InteractionManager.as, so maybe we can start from that?

Thanks again!
PIXI-TIIIIME

from pixijs.

GoodBoyDigital avatar GoodBoyDigital commented on March 29, 2024

Excellent :D

The interactionManager hit test only performs a hittest on a single point so it may not be what you are looking for :/
Hit testing with non rotated rectangles is fairly straight forward process. It does get a little trickier once they are rotated though. Using SAT (Separating Axis Theorem) would be a good way of detecting any intersections.. but i'm sure there must be a simpler way if they are both rectangles..

Gonna close this thread now that all the mouse events are in!

from pixijs.

lock avatar lock commented on March 29, 2024

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

from pixijs.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.