RomainMazB

mouseover works but mouseout don't? can't retrieve event.target

Recommended Posts

Hi all.

New to PixiJS, I'm working on a divination card game.

I just want to add a basic animation on card mouseover/mouseout: just change the z position +/-10.

In my code mouseover works, but mouseout don't:

card.interactive = true;
card.on('mouseover', onMouseOver);
card.on('mouseout', onMouseOut);

function onMouseOver(event) {
  event.target.position3d.y += 10;
}

function onMouseOut(event) {
  console.log(event.target); // Fire null
  event.target.position3d.y -= 10;
}

I also tried mouseleave: same result.

Any idea?

Share this post


Link to post
Share on other sites
1 hour ago, ivan.popelyshev said:

That demo uses pixi-layers. It hacks interaction.

Update pixi-layers to latest version. i guess i didnt upload it to pixi-examples yet :)

I'm using the latest version of pixi-layers

1 hour ago, jonforum said:

use `event.currentTarget` no ?
lcfrwjiA_o.png

currentTarget is null too.

you can see below in attachment console.log(event) inside of onMouseOut callback

 

In some thread I see people use hitArea which I'm not using. Should I? I supposed if I don't need to mouseover, I don't need either to mouseout?

event.png

Share this post


Link to post
Share on other sites

Have you tried to use pointerout? The currentTarget is set for that. I use pointerover/pointerout for my hover code. Are you just trying to animate an object on hover? 

I don't care about target. If card has the position3d property, then just use an arrow function to get the proper this context.

This would change your code. to look like.

card.interactive = true;
card.on('mouseover', event => {
	this.position3d.y += 10;
});

card.on('mouseout', event => {
	this.position3d.y -= 10;
});

 

Share this post


Link to post
Share on other sites

See this fiddle, based on the first interaction example.

both over and out return null for target

2 minutes ago, mobileben said:

Have you tried to use pointerout? The currentTarget is set for that. I use pointerover/pointerout for my hover code. Are you just trying to animate an object on hover? 

I don't care about target. If card has the position3d property, then just use an arrow function to get the proper this context.

This would change your code. to look like.


card.interactive = true;
card.on('mouseover', event => {
	this.position3d.y += 10;
});

card.on('mouseout', event => {
	this.position3d.y -= 10;
});

 

I tried pointerout with the callback. I'll check with the arrow function

Share this post


Link to post
Share on other sites

 

1 minute ago, mobileben said:

I don't care about target. If card has the position3d property, then just use an arrow function to get the proper this context.

That means *5 *2 new function objects. Some people dont like that :)

without arrow function , just function with "this" will take care about it.

Share this post


Link to post
Share on other sites

OK, then i think you can report this as a probable bug in pixijs issues https://github.com/pixijs/pixi.js/issues . Our top expert on interaction answers there, and either provides workaround either fixes this thing. The bug is already reported, its just a formality that we use your github tag in release if its real bug.

Its good that you already have the demo, we dont need to use telepathy anymore.

Share this post


Link to post
Share on other sites

@mobileben

card.interactive = true;

card.on('pointerover', event => {
  this.position3d.y += 10;
});
card.on('pointerout', event => {
  this.position3d.y -= 10;
});

says to me: Uncaught TypeError: Cannot read property 'y' of undefined

and this:

card.on('pointerover', event => {
  event.target.position3d.y += 10;
});
card.on('pointerout', event => {
  event.target.position3d.y -= 10;
});

render the same result as the beginning: pointerover works well, pointerout don't...

@ivan.popelyshev Thanks for the welcoming :)

Share this post


Link to post
Share on other sites

Fair point about the new function objects 😁!

I think the reason there is not target is that it fails the hit test. The actual DisplayObject in question no longer has the point within the object. Hence target cannot be set to it (I looked at the code in a debugger).  I believe in this case, if currentTarget is set, it is the parent.

This is the normal code that should set the appropriate target (Pixi.js code).

            if (displayObject.interactive)
            {
                if (hit && !interactionEvent.target)
                {
                    interactionEvent.target = displayObject;
                }

                if (func)
                {
                    func(interactionEvent, displayObject, !!hit);
                }
            }

 

 

Share this post


Link to post
Share on other sites

Bizarre. I'm nascent with Javascript/Typescript. Try this variant. 

card.on('pointerout', event => {
  card.position3d.y -= 10;
});

It is probably grabbing the `this` context from the current scope that  card is in.

Share this post


Link to post
Share on other sites
13 minutes ago, RomainMazB said:

@mobileben


card.interactive = true;

card.on('pointerover', event => {
  this.position3d.y += 10;
});
card.on('pointerout', event => {
  this.position3d.y -= 10;
});

says to me: Uncaught TypeError: Cannot read property 'y' of undefined

and this:


card.on('pointerover', event => {
  event.target.position3d.y += 10;
});
card.on('pointerout', event => {
  event.target.position3d.y -= 10;
});

render the same result as the beginning: pointerover works well, pointerout don't...

@ivan.popelyshev Thanks for the welcoming :)

try simple function, not a lambda. 

function(event) { this.position3d.y += 30;}

Share this post


Link to post
Share on other sites

if you console.log  object without a breakpoint, when you open reference of the object in developer tool, it will refresh and you will see null on target it normal.
Try add break point just after fired.
Open developer tool before mouse hover in this example, it should work.
https://www.pixiplayground.com/#/edit/dBu7ExlkcemL_VzPC4WrD


 

Share this post


Link to post
Share on other sites

for me it look logic or maybe am not understand the issue here!
If i have A and B , and B is inside A.
If i out B.
A will be target and B currentTarget.

 

if i out A
target will null
currentTarget will be A.

 

Am out 🤞

Share this post


Link to post
Share on other sites

I think the problem is the implementation and the definition of how `target` gets assigned. Keep in mind that how the browser handles the mouse events is different than how pixi does. Pixi essentially transforms it into "pixi space" or rather the node hierarchy. Mozilla documentation indicates that mouseout would have an assigned target. 

Based on the code base, `processInteractive` is responsible for `target` assignment and that is assigned based on hit, where hit has several criteria much of which is dependent upon the point being within the DisplayObject. Since, when there is a mouseout, the point is no longer in the affected DisplayObject, target will be null.

So what ends up happening (at least in my test cases) is that target == null and currentTarget = parent.

@RomainMazB you may want to think about creating a class for your cards. This would make it easier to manage your cards.

Share this post


Link to post
Share on other sites

ya, it was for another test from a bug related to interactiveChildren and hitArea but if you add some console.log target in BLUESQUARE interaction you should able to log the parent target

Share this post


Link to post
Share on other sites

@mobileben I already have a class for my cards. In fact I base my script on the 3D Cards example.

@jonforum Class auto bind works perfectly!

@ivan.popelyshev Thanks for the example, it's really great and made me choose PixiJS than an other game engine. I have to create this little game for now but I'm not a full-time game maker. I'll do the issue report tomorrow with my fiddle for example.

Share this post


Link to post
Share on other sites

@RomainMazB got it, I perused the code.

Some unsolicited suggestions (feel free to ignore) which may make your life easier, especially given the actual behavior is to make `onClick` part of the CardSprite class and avoid using `event` to derive the target to use.

I would also recommend you wrap setting the card to be interactive and listening to events into another `CardSprite` method. You can control enabling and disabling a card from being interactive as well as listening to the mouse over. This will be helpful if you have several cards where some are interactable but others are not ... and the state can change depending on user actions.

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.