Pixi.js touch events not firing on iPhone after pushing intel-xdk files

Question

I have created a small test project to replicate the problem. The project contains only pixi.min.js and index.html with code from this example:

http://pixijs.github.io/examples/index.html?s=demos&f=interactivity.js&title=Interactivity

Buttons work when I test it via the browser. They also work in the intel-xdk emulate tab.

But when I go to test tab, push files, scan QR code to open the created app on the iphone, the buttons appear but touch events are not working.

Why are the touch events not firing on the iPhone?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body style="margin:0; padding: 0; background: #333333;">
    <script src="pixi.min.js"></script>
    <script>
        var renderer = PIXI.autoDetectRenderer(800, 600);
        document.body.appendChild(renderer.view);

        var stage = new PIXI.Container();

        var textureButton = PIXI.Texture.fromImage('images/button.png');
        var textureButtonDown = PIXI.Texture.fromImage('images/button.png');
        var textureButtonOver = PIXI.Texture.fromImage('images/button2.png');

        var buttons = [];

        var buttonPositions = [
            175, 75,
            655, 75,
            410, 325,
            150, 465,
            685, 445
        ];

        var noop = function () {
            //console.log('click');
        };

        for (var i = 0; i < 5; i++)
        {
            var button = new PIXI.Sprite(textureButton);
            button.buttonMode = true;

            button.anchor.set(0.5);

            button.position.x = buttonPositions[i*2];
            button.position.y = buttonPositions[i*2 + 1];
            button.interactive = true;

            button.on('mousedown', onButtonDown)
                .on('touchstart', onButtonDown)
                .on('mouseup', onButtonUp)
                .on('touchend', onButtonUp)
                .on('mouseupoutside', onButtonUp)
                .on('touchendoutside', onButtonUp)
                .on('mouseover', onButtonOver)
                .on('mouseout', onButtonOut);

            button.tap = noop;
            button.click = noop;
            stage.addChild(button);
            buttons.push(button);
        }
        buttons[0].scale.set(1.2);
        buttons[2].rotation = Math.PI / 10;
        buttons[3].scale.set(0.8);
        buttons[4].scale.set(0.8,1.2);
        buttons[4].rotation = Math.PI;

        animate();

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

        function onButtonDown(){
            this.isdown = true;
            this.texture = textureButtonDown;
            this.alpha = 1;
        }

        function onButtonUp(){
            this.isdown = false;
            if (this.isOver){ this.texture = textureButtonOver;
            }else{ this.texture = textureButton; }
        }

        function onButtonOver(){
            this.isOver = true;

            if (this.isdown){
                return;
            }
            this.texture = textureButtonOver;
        }

        function onButtonOut(){
            this.isOver = false;
            if (this.isdown){ return; }
            this.texture = textureButton;
        }
    </script>
</body>
</html>

By 'not working', you mean nothing happens when you tap them? — Karmacon, Dec 14 '15 at 21:54
where are the images? what size are they? button.png and button2.png — krisrak, Dec 15 '15 at 00:09

score 2 · Accepted Answer · answered Dec 15 '15 at 01:18

var textureButton = PIXI.Texture.fromImage('images/button.png');
var textureButtonDown = PIXI.Texture.fromImage('images/button.png');
var textureButtonOver = PIXI.Texture.fromImage('images/button2.png');

It is working on iPhone, but you are not seeing anything happen cause you have the initial button image textureButton and textureButtonDown same (button.png). So you are not seeing any difference on screen when u touch on it. On iPhone there is no hover event for touch event, so the textureButtonOver is not applied

But when u test on emulator, you are using mouse, so when u move the mouse over the button textureButtonOver is applied and u see a change on screen.

So change the textureButtonDown to a different image (button3.png) and u will see it work on iPhone

I just used your code and changed button3.png and it worked on my iPhone — krisrak, Dec 15 '15 at 17:57
That's great. I am not sure how I have missed that :) Thank you for your help. — James May, Dec 16 '15 at 08:56

Pixi.js touch events not firing on iPhone after pushing intel-xdk files

1 Answers1