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

[Wanderer777]

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,	);

[tips4design]

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

This only applies in your case as both callbacks are indentical. I do not know any multiple bindings methods.

[xerver]

You can't bind multiple events in a single "on" call right now. But .on() returns the object it is binding to, so:

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

[Wanderer777]

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?

 

[GBeebe]

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.

[Wanderer777]

While I tried to test this this in various mobile browsers, I found that the touch events applied to PIXI objects do not work at all in Opera Mobile on Android.

[xerver]

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.

[Wanderer777]

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.

[xerver]

 

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.

[Wanderer777]

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.

[xerver]

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.

[Exca]

Setting the viewport in html like:
<meta name="viewport" content="width=device-width, user-scalable=no" />
Should help with the zooming. Might not work on older androids though.