Flappy Bird Collision problem

[pacxiu]

Hi there,
today I started learning Phaser3 - I'm building Flappy Bid game. Unofrtunately I have problem with detecting of collision - it seems that overlap is not working for me and this.bird and this.pipes are never colliding according to it :(. 
I have tried several solutions but none seems to be working for me. I'm using phaser version from npm, because I'm working with React along for some UI stuff. Also I'm not sure if I can somehow refresh texture of all pipe elements after it is loaded?

Also this.bird.body is returning undefined - I don't know why is this. I think it should return Arcadic Physics?

import Phaser from 'phaser';

import bird from '../../assets/bird.png';
import pipe from '../../assets/pipe.png';

class GameScene extends Phaser.Scene {
  constructor(test) {
    super({
      key: 'GameScene',
      physics: {
        arcade: {
          gravity: { 
            y: 0 
          },
          debug: true
        }
      },
    });
  }

  preload() {
    this.textures.addBase64('bird', bird);
    this.textures.addBase64('pipe', pipe);
  }

  create() {
    // updating textures
    this.textures.on('onload', () => {
      this.bird.setTexture('bird');
    });

    // bird definition
    this.bird = this.physics.add.image(100, 245, 'bird')
      .setActive(true)
      .setVelocity(0, 0)
      .setGravity(0, 1000)

    this.physics.world.enable(this.bird)

    // obstacles definition
    this.pipes = this.add.group();

    this.physics.world.enable(this.pipes)

    this.keys = {
      jump: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP)
    }

    this.timedEvent = setInterval(() => { this.addPipeColumn(); }, 2000);
    this.addPipeColumn();
  }

  update() {
    if (this.bird.y < 0 || this.bird.y > 800) {
      this.gameOver();
    }

    if (this.keys.jump.isDown) {
      this.jump();
    }

    this.physics.overlap(this.bird, this.pipes, this.gameOver, null, this)
  }

  gameOver() {
    clearInterval(this.timedEvent);
    this.scene.restart();
  }

  jump() {
    this.bird.body.velocity.y = -350;
  }

  addPipe(x, y) {
    const pipe = this.physics.add.image(x, y, 'pipe')
      .setActive()
      .setVelocity(-200, 0)
      .setGravity(0);

    pipe.checkWorldBounds = true;
    pipe.outOfBoundsKill = true;

    this.pipes.create(pipe);
  }

  addPipeColumn() {
    const hole = Math.floor(Math.random() * 5) + 1;

    for (let i = 0; i < 12; i++) {
      if (i !== hole && i !== hole + 1) {
        this.addPipe(800, i * 60 + 10);
      }
    }
  }
}

export default GameScene

I'm also adding React code where I mount Game:

 

import React, { Component } from 'react';
import Phaser from 'phaser';

import GameScene from './scenes/GameScene'

class Game extends Component {
  componentDidMount() {
    this.createGame();
  }

  createGame() {
    const config = {
      type: Phaser.AUTO,
      width: 800,
      height: 600,
      parent: 'Game',
      backgroundColor: '#71c5cf',
      // comment out general physics
      // physics: {
      //   default: 'arcade',
      //   arcade: {
      //     gravity: { y: 100 }
      //   }
      // },
      scene: [
        GameScene
      ]
    };

    // creating game
    new Phaser.Game(config);
  }

  render() {
    return (
      <div id="Game"></div>
    );
  }
}

export default Game;

 

[samme]

https://github.com/photonstorm/phaser/issues/3777

[pacxiu]

Hi, unfortunately add.collider also doesn't work for me when comparing sprite/image with staticGroup. Same problem as person here: 

I refactored a little bit of code:
 

import Phaser from 'phaser';

import bird from '../../assets/bird.png';
import pipe from '../../assets/pipe.png';

class GameScene extends Phaser.Scene {
  constructor(test) {
    super({
      key: 'GameScene',
      physics: {
        default: 'arcade',
        arcade: {
          gravity: { 
            y: 100 
          },
          debug: true
        }
      },
    });
  }

  preload() {
    this.textures.addBase64('bird', bird);
    this.textures.addBase64('pipe', pipe);
  }

  create() {
    // updating textures
    this.textures.on('onload', () => {
      this.bird.setTexture('bird');
    });

    // bird definition
    this.bird = this.physics.add.image(100, 445, 'bird')
    this.bird.body.gravity.y = 1000
    this.bird.body.setAllowGravity(false)

    // obstacles definition
    this.pipes = this.physics.add.staticGroup();
    // console.log(this.pipes)

    this.keys = {
      jump: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP)
    }

    this.timedEvent = this.time.addEvent({ 
      delay: 1500,
      callback: this.addPipeColumn,
      callbackScope: this,
      loop: true
    });

    this.addPipeColumn();
    this.physics.add.collider(this.bird, this.pipes, this.gameOver, null, this)
  }

  update() {
    if (this.bird.y < 0 || this.bird.y > 800) {
      this.gameOver();
    }

    if (this.keys.jump.isDown) {
      this.jump();
    }

    // this.physics.world.collide(this.bird, this.pipes, this.gameOver, null, this)
    // this.physics.add.collder(this.bird, this.pipes, this.gameOver, null, this)
  }

  gameOver() {
    console.log('end')
    this.scene.restart();
  }

  jump() {
    this.bird.body.velocity.y = -350;
  }

  addPipe(x, y) {
    const pipe = this.physics.add.image(x, y, 'pipe')
      
    pipe.body.velocity.x = -200;
    pipe.body.setAllowGravity(false)
    pipe.checkWorldBounds = true;
    pipe.outOfBoundsKill = true;

    this.pipes.add(pipe);
  }

  addPipeColumn() {
    const hole = Math.floor(Math.random() * 5) + 1;

    for (let i = 0; i < 10; i++) {
      if (i !== hole && i !== hole + 1) {
        this.addPipe(300, i * 60 + 10);
      }
    }
  }
}

export default GameScene

When I change staticGroup to group and have a little fun with velocity/gravity then there  is a proper collision detection.

[samme]

You shouldn't use a StaticGroup for the pipes because they're moving.

Use { arcade: { debug: true } }.