CODEWITHSUNDEEP
javascriptinternet-explorerpixi.js
Jonas Grumann
Jonas Grumann

Reputation: 10786

pixijs mousedown event not working (any version)

my click events aren't working in any version of ie and I can't really find a solution for it.

The curious thing is that if I swap my mousedown with a mousemove it works, meaning the events get into the pixijs canvas correctly, but in my project the mousemove is not an option.

Here's the relevant code:

// This function gets called from somewhere else
var new_word = getRandomWord();
var color = new_word == currentWord ? 0xffffff : 0xffffff;
var fontSize = isSmallScreen ? Math.round(Math.random() * 10 + 10) : Math.round(Math.random() * 40 + 20);
var creationPadding = isSmallScreen ? 0 : 200;
var text = new PIXI.Text(new_word, {
            font: fontSize + 'px Clarendon',
            fill: color,
            dropShadow: !isTouchDevice,
            dropShadowColor: 0xffffff,
            dropShadowDistance: 0,
            dropShadowBlur: 8,
            dropShadowAlpha: .2,
            padding: 5,
            align: 'left'
        });
text.pivot.set(text.width / 2, text.height / 2);
text.position.x = getRandomArbitrary(creationPadding, renderer.width - creationPadding);
text.position.y = getRandomArbitrary(0, renderer.height - beer.position.y - 156);
text.rotation = degToRad(getRandomArbitrary(-20, 20));
text.interactive = true;
currentlyShownWords.push(text._text);

text.on('mousedown', function (e) {
    alert('mousedown');
    if (inGame) {
        e.stopPropagation();
        if (text._text == currentWord) {
            clickedCorrectWord(text);
        } else {
           clickedWrongWord(text);
        }
    }
});

Upvotes: 0

Views: 3193

Answers (2)

bluelights
bluelights

Reputation: 1306

Here is another but somewhat relevant case to this topic which I got into while working with pixiJS.

  1. I was developing a game for all screens: desktop, tab, mobile.
  2. I used this function for touch events: 
     aPIXIContainerOrSprite.on("tap", event => {
          /* some action */
        });

Whenever a real device was not available, I always used to test the game by using chrome developer tools and selecting a mobile screen (no responsive screen).

One time, I try to test the game without the chrome developer tools and with the default desktop browser screen and I found that I was unable to interact with the game elements.

Hence, I look into the code to get an understanding of the issue. Then after a little pixiJS documentation lookout, I changed the tap event to mousedown event and this solved the issue.

My final implementation was to use a single callback function and register it with both tap and mousedown event.

Upvotes: 0

Kevin Sandow
Kevin Sandow

Reputation: 4033

Are you sure, that there isn't any other error in your code, since what you're showing looks correct.

I created a fiddle of what's seen here: https://jsfiddle.net/6bydjrpo/

var stage = new PIXI.Stage(0x97c56e, true);
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);

var text = new PIXI.Text('Click me!', {
  font: '48px Clarendon',
  fill: 0xffffff,
  dropShadowColor: 0xffffff,
  dropShadowDistance: 0,
  dropShadowBlur: 8,
  dropShadowAlpha: .2,
  padding: 5,
  align: 'left'
});

text.pivot.set(text.width / 2, text.height / 2);
text.position.x = renderer.width / 2;
text.position.y = renderer.height / 2;
text.rotation = 0;
text.interactive = true;
stage.addChild(text);

text.on('mousedown', function (e) {
  alert('mousedown');
});

function animate() {
  renderer.render(stage);
  requestAnimationFrame(animate);
}

document.body.appendChild(renderer.view);
renderer.view.style.position = "absolute";
renderer.view.style.top = "0px";
renderer.view.style.left = "0px";
requestAnimationFrame(animate);

Upvotes: 2

Related Questions