Jump to content

Any shorter way to add interactions (mouseover, mousedown etc.)?


Wanderer777
 Share

Recommended Posts

Is there a short way to apply interactions to an object?

 

Example -instead of:

Button.on("mouseup", function(eventData) 	{ 	titleScreen_Clear();	gameScreen_Create(); 	});Button.on("mouseout", function(eventData) 	{ 	titleScreen_Clear();	gameScreen_Create(); 	});

do something like this?

Button.on(["mouseup","mouseout"], function(eventData) 	{ 	titleScreen_Clear();	gameScreen_Create(); 	});

or this?

Button.on(	"mouseup": myFunc,	"mouseout": myFunc,	);
Link to comment
Share on other sites

Button.on("mouseup", doStuff).on("mouseout", doStuff);

This was what I was looking for - thanks! :)

 

BTW - after adding touch support to my game and testing it on my Android tablet, I realized two problems:

 

  • The entire game canvas gets highlighted with a blue rectangle each time the user taps on it
  • Two taps shortly after another are treated as a double-tap by the browser, which causes the browser to zoom the page

 

Both are a real killjoy and very annoying while playing a game. How can this behaviour be suppressed?

 

Link to comment
Share on other sites

I don't know about the .on method. But methods like .onclick allow me to pass the event so I can event.preventDefault (); which stops the browser from doing stuff with the event.

 

They are identical, just the .on() methods allow you to register multiple callbacks.  You can do just what you said in the event handler registered using .on() as well.

Link to comment
Share on other sites

Pixi mobile support seems to be quite gappy :(

  • Opera Mobile: Pixi touch actions do not work at all -but event.preventDefault() suppresses double-tap zooming.
  • UC Mobile browser: Pixi touch actions do not work at all.
  • Android standard browser: Pixi touch actions work, but there is still double-tap zooming.
Link to comment
Share on other sites

 

Pixi mobile support seems to be quite gappy :(

  • Opera Mobile: Pixi touch actions do not work at all -but event.preventDefault() suppresses double-tap zooming.
  • UC Mobile browser: Pixi touch actions do not work at all.
  • Android standard browser: Pixi touch actions work, but there is still double-tap zooming.

 

 

That doesn't really make sense, either interactions work or they don't. They can't "not work" but still get called so you can preventDefault...

 

As far as wether or not preventDefault stops a browser action, that has nothing to do with pixi and everything to do with the browser and your user code.

Link to comment
Share on other sites

Sorry, to be more precise:

 

- Opera Mobile: touch interactions within the game's canvas do not work at all.

 

- UC Mobile: touch interactions within the game's canvas do not work at all.

 

- Android browser: interactions with Pixi objects (buttons) do work, but double-tapping within the game canvas causes page zooming (even with event.preventDefault()). As far as I can see, event.preventDefault() just suppresses the blue overlay rectangle that was shown when touching the game canvas.

Link to comment
Share on other sites

Sorry, to be more precise:

 

- Opera Mobile: touch interactions within the game's canvas do not work at all.

 

- UC Mobile: touch interactions within the game's canvas do not work at all.

 

- Android browser: interactions with Pixi objects (buttons) do work, but double-tapping within the game canvas causes page zooming (even with event.preventDefault()). As far as I can see, event.preventDefault() just suppresses the blue overlay rectangle that was shown when touching the game canvas.

 

Hmm, not sure. I would open an issue and link it with this one: https://github.com/pixijs/pixi.js/issues/2071

 

Just another thing that should be fixed in the new interaction manager.

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