Touch control not behaving like keyboard input?

Phaser 3
1

I am creating a flappy bird game where by pressing space key the bird jumps/flaps. Everything works fine. I also want the game to be playable on touch screens. When a touch input is detected the bird disappears off the screen because gravity is not being applies for some reason.
The strange thing is if I first press space key to jump then use touch it works?
I have been struggling with this for a number of days. Any help is appreciated.

class GamePlay extends Phaser.Scene {
        constructor() {
            super('game');
        }

        preload () {
            this.load.image('ground', 'ground.png');
            this.load.image('background', 'background.png');
            this.load.image('bird1', 'bird1.png');
            this.load.image('bird2', 'bird2.png');
            this.load.image('bird3', 'bird3.png');
            this.load.image('pipe', 'pipe.png');
            this.load.image('pipe180', 'pipe180.png');
        }

        create() {
            // Generate a random integer between min (inclusive) and max (inclusive)
            function getRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
            }

            console.log("game started");

            // Create the background sprite
            background = this.add.sprite(0, -200, 'background').setOrigin(0, 0);
            background2 = this.add.sprite(431, -200, 'background').setOrigin(0, 0);

            // Physics for pipes
            margin = 200;
            pipes = this.physics.add.staticGroup();
            for (var i = 0; i < 20; i++) {
                let randomY = getRandomInt(200, 400);
                pipes.create(400 + margin, randomY, 'pipe').setOrigin(0, 0).refreshBody();
                pipes.create(400 + margin, (randomY - getRandomInt(100, 200)), 'pipe180').setOrigin(0, 1).refreshBody();
                margin += 400;
            }

            // Physics for ground
            ground_physics = this.physics.add.staticGroup();
            ground_physics.create(0, 500, 'ground').setOrigin(0, 0).refreshBody();
            ground_physics.create(468, 500, 'ground').setOrigin(0, 0).refreshBody();
            
            // Debugging
            //this.physics.world.createDebugGraphic();
            
            // Create the bird sprite
            bird = this.physics.add.sprite(170, 250, 'bird1'); // Adjust the position as needed

            this.anims.create({
                key: 'birdAnimation',
                frames: [
                    { key: 'bird1' },
                    { key: 'bird2' },
                    { key: 'bird3'},
                    { key: 'bird2'}
                ],
                frameRate: 15, // Frames per second (e.g., 24)
                repeat: -1 // -1 means the animation repeats indefinitely
            });

            // Play the "birdAnimation" when a specific event occurs
            bird.play('birdAnimation');

            // Check for collisions
            this.physics.add.collider(bird, pipes, Callback);
            this.physics.add.collider(bird, ground_physics, Callback);

            function Callback() {
                console.log("")
            }
        }

        update() {
            // Scroll the ground horizontally
            let scrollSpeed = 3; // Adjust the scrolling speed as needed
            ground_physics.children.iterate(item => {
                item.x -= scrollSpeed;
                // Reset if it has gone off screen
                if (item.x + 468 <= 0) {
                item.x = 468;
                }
            })

            // Scroll the background
            background.x -= 1;
            background2.x -= 1;

            if (background.x + 431 <= 0) {
                background.x = 429;
            }
            if (background2.x + 431 <= 0) {
                background2.x = 429; 
            }

            // Scroll the pipes horizontally
            pipes.children.iterate(item => {
                item.x -= scrollSpeed;
                item.body.x -= scrollSpeed;
            })

            // Trigger jump animation when space key is pressed
            spaceBar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
            isJumping = false;
            console.log(isJumping);

            if (Phaser.Input.Keyboard.JustUp(spaceBar) && !isJumping) {
                console.log('click');
                bird.setVelocityY(-350); //-350
                isJumping = true;
            }  

            // Handle touch input
            if (game.input.activePointer.isDown && !isJumping) {
                console.log('touch');
                bird.setVelocityY(-350); //-350
                isJumping = true;
            }

            if (isJumping) {
                // Apply gravity while the bird is in the air
                bird.setGravityY(750); //750
                console.log(isJumping)
            }

            // If bird is going up or down tilt angle
            bird.angle = Math.min(90, bird.body.velocity.y * 0.15);
        }
    }
2

How are you testing touch input?

Try this:

3

Hi. I got a solution from photonstorm on discord. A few adjustments made but the main thing is I had to move the input handling from the update function to the create function.

<!DOCTYPE html>
<html>
<head>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
</head>
<body>
    <script>
    
    // Splash screen
    let spaceBar;
    let ground_physics;
    let background;
    let background2;
    let pipes;
    let margin;
    let bird;
    let isJumping = false;
    let touch;
    let isClicking = false;

    class StartMenu extends Phaser.Scene {
        constructor() {
            super('StartMenu');
        }

        preload() {
            this.load.image('get_ready', 'get_ready.png');
        }

        create() {
            this.add.image(200, 400, 'get_ready');
            this.input.once('pointerdown', (pointer) => {
                this.scene.start('game');
            });

            this.input.keyboard.once('keyup-SPACE', event =>
            {
                this.scene.start('game');
            });
        }

        update() {

        }
    }


    class GamePlay extends Phaser.Scene {
        constructor() {
            super('game');
        }

        preload () {
            this.load.image('ground', 'ground.png');
            this.load.image('background', 'background.png');
            this.load.image('bird1', 'bird1.png');
            this.load.image('bird2', 'bird2.png');
            this.load.image('bird3', 'bird3.png');
            this.load.image('pipe', 'pipe.png');
            this.load.image('pipe180', 'pipe180.png');
        }

        create() {
            // Generate a random integer between min (inclusive) and max (inclusive)
            function getRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
            }

            spaceBar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);

            // Create the background sprite
            background = this.add.sprite(0, -200, 'background').setOrigin(0, 0);
            background2 = this.add.sprite(431, -200, 'background').setOrigin(0, 0);

            // Physics for pipes
            margin = 200;
            pipes = this.physics.add.staticGroup();
            for (var i = 0; i < 20; i++) {
                let randomY = getRandomInt(200, 400);
                pipes.create(400 + margin, randomY, 'pipe').setOrigin(0, 0).refreshBody();
                pipes.create(400 + margin, (randomY - getRandomInt(100, 200)), 'pipe180').setOrigin(0, 1).refreshBody();
                margin += 400;
            }

            // Physics for ground
            ground_physics = this.physics.add.staticGroup();
            ground_physics.create(0, 500, 'ground').setOrigin(0, 0).refreshBody();
            ground_physics.create(468, 500, 'ground').setOrigin(0, 0).refreshBody();
            
            // Debugging
            //this.physics.world.createDebugGraphic();
            
            // Create the bird sprite
            bird = this.physics.add.sprite(170, 250, 'bird1'); // Adjust the position as needed

            this.anims.create({
                key: 'birdAnimation',
                frames: [
                    { key: 'bird1' },
                    { key: 'bird2' },
                    { key: 'bird3'},
                    { key: 'bird2'}
                ],
                frameRate: 15, // Frames per second (e.g., 24)
                repeat: -1 // -1 means the animation repeats indefinitely
            });

            // Play the "birdAnimation" when a specific event occurs
            bird.play('birdAnimation');

            // Check for collisions
            this.physics.add.collider(bird, pipes, Callback);
            this.physics.add.collider(bird, ground_physics, Callback);

            function Callback() {
                //console.log("")
            }
            
            // Input for jumping
            const jump = () => {
                isJumping = true
                bird.setVelocityY(-350); //-350
            };

            this.input.keyboard.on('keyup-SPACE', event => jump());
            this.input.on('pointerup', event => jump());
        }

        update() {
            // Scroll the ground horizontally
            let scrollSpeed = 3; // Adjust the scrolling speed as needed
            ground_physics.children.iterate(item => {
                item.x -= scrollSpeed;
                // Reset if it has gone off screen
                if (item.x + 468 <= 0) {
                item.x = 468;
                }
            })

            // Scroll the background
            background.x -= 1;
            background2.x -= 1;

            if (background.x + 431 <= 0) {
                background.x = 429;
            }
            if (background2.x + 431 <= 0) {
                background2.x = 429; 
            }

            // Scroll the pipes horizontally
            pipes.children.iterate(item => {
                item.x -= scrollSpeed;
                item.body.x -= scrollSpeed;
            })

            if (isJumping) {
                // Apply gravity while the bird is in the air
                bird.setGravityY(750); //750
                console.log(isJumping)
            }

            // If bird is going up or down tilt angle
            bird.angle = Math.min(90, bird.body.velocity.y * 0.15);
        }
    }

    var config = {
        type: Phaser.AUTO,
        width: 400,
        height: 600,
        transparent: true,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 0 }
            }
        },
        scene: [
        StartMenu, 
        GamePlay
        ]
    };

    var game = new Phaser.Game(config);

    </script>

</body>
</html>