pacxiu Posted August 26, 2018 Share Posted August 26, 2018 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; Link to comment Share on other sites More sharing options...
samme Posted August 26, 2018 Share Posted August 26, 2018 https://github.com/photonstorm/phaser/issues/3777 Link to comment Share on other sites More sharing options...
pacxiu Posted August 26, 2018 Author Share Posted August 26, 2018 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. Link to comment Share on other sites More sharing options...
samme Posted August 27, 2018 Share Posted August 27, 2018 You shouldn't use a StaticGroup for the pipes because they're moving. Use { arcade: { debug: true } }. Link to comment Share on other sites More sharing options...
Recommended Posts