Phaser game problem

[edvinsdainis]

Hi, I am developing simple game where eggs are falling from air, and cat will catch them, but i can't get egg caching to work, states changes, cat is moving, and eggs are spawning, but i cant catch them, here is the code. p.s also it says when loading game state, that this.egg is not defined.

import Phaser from 'phaser'

//Define all variables to use this(game need's to use global object for chaining).
let cat = this.cat;
let egg = this.egg;
let eggs = this.eggs;
let fallenCount = this.fallenCount;
let score = this.score;
let scoreString = this.scoreString;
let scoreTxt = this.scoreTxt

export default class extends Phaser.State {

    create() {

        this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.game.scale.refresh();

        this.physics.startSystem(Phaser.Physics.ARCADE);

        //Refactor this to shorter code, at this time all ifs needed for proper app work on all devices
        if (window.innerWidth < 640) {
            let startBackground = game.add.tileSprite(0, 0, this.game.width, this.game.height, 'start-bg-mob');
            startBackground.scale.y = 4.5;
            startBackground.scale.x = 2.0;
        }

        if (window.innerHeight > 700) {
            let startBackground = game.add.tileSprite(0, 0, this.game.width, this.game.height, 'start-bg-mob');
            startBackground.scale.y = 7.7;
            startBackground.scale.x = 4.0;
        }

        if (window.innerWidth > 641) {
            let startBackground = game.add.tileSprite(0, 0, this.game.width, this.game.height, 'start-bg-tablet')
            startBackground.scale.y = 2.8;
            startBackground.scale.x = 2.0;
        }

        if (window.innerWidth >= 1024) {
            let startBackground = game.add.tileSprite(0, 0, this.game.width, this.game.height, 'start-bg')
            startBackground.scale.y = 1.5;
            startBackground.scale.x = 2.0;
        }

        if (window.innerWidth >= 1367) {
            let startBackground = game.add.tileSprite(0, 0, this.game.width, this.game.height, 'start-bg')
            startBackground.scale.y = 1.0;
            startBackground.scale.x = 2.0;
        }

        //Make cat and anchor it to middle of screen
        this.cat = game.add.sprite(game.world.centerX, game.world.centerY+500, 'cat')
        this.cat.anchor.setTo(0.5, 0.5);

        //Enable physics for cat, set it moving limits inside screen(if physics not enabled for model, you will get body null eror)
        this.physics.enable(this.cat, Phaser.Physics.ARCADE)
        this.cat.enableBody = true;
        this.cat.body.collideWorldBounds = true;

        this.cat.body.onCollide.add(this.removeEgg(), this)

        //Fallen egg count
        this.fallenCount = 0;

        //Add score counter
        this.score = 0;
        this.scoreString = 'Eggs cached: '
        this.scoreTxt = game.add.text(10, 10, this.scoreString + this.score, { font: '34px Arial', fill: '#fff' });

    }

    //This method is like watcher for all events in game
    update () {

        //Add controls for cat
        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
        {
          this.cat.x -= 20;
        }
        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
        {
          this.cat.x += 20;
        }

        //Egg spawning
        if (this.fallenCount < 200) {

            setTimeout(function () {

                this.eggs = game.add.group();
                this.eggs.enableBody = true;

                //Create new eggs and arrange width of drop area
                this.egg = this.eggs.create(Math.floor((Math.random() * this.game.width) + 1) * 7, 40, 'egg')

                //Sets speed for egg falling
                this.egg.body.gravity.y = 200;
                this.fallenCount +=1
            }, 1500)
        }

        this.game.physics.arcade.collide(this.egg, this.cat, this.removeEgg(), null, this)
        

        if (this.fallenCount == 200) {
            this.state.start('Result')
        }
    }

    removeEgg () {
        this.egg.kill();
        this.score+=1;
        this.scoreTxt.text = this.scoreString + this.score
    }
}

what should be wrong?

 

 

[oplayer]

        this.game.physics.arcade.collide(this.egg, this.cat, this.removeEgg(), null, this)

You are calling removeEgg instead of giving it as a callback.
Replace this.removeEgg() with this.removeEgg

[hcakar]

Hello edvinsdainis,

the oplayer's answer could be work for you. I also noticed that you are keep creating group's of eggs and keep enabling body's on them. 

 

On 05.03.2018 at 5:09 PM, edvinsdainis said:

this.eggs = game.add.group(); this.eggs.enableBody = true;

Delete these two line of code on your update and write them to the create method after creating your cat. That would be more appropriate.

This is only a friendly suggestion.

[edvinsdainis]

thanks guys, i will try this out

[edvinsdainis]

import Phaser from 'phaser'

//Define all variables to use this(game need's to use global object for chaining).
let cat = this.cat;
let egg = this.egg;
let eggs = this.eggs;
let fallenCount = this.fallenCount;
let score = this.score;
let scoreString = this.scoreString;
let scoreTxt = this.scoreTxt

export default class extends Phaser.State {

    create() {

        this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.game.scale.refresh();

        this.physics.startSystem(Phaser.Physics.ARCADE);

        //Refactor this to shorter code, at this time all ifs needed for proper app work on all devices
//        if (window.innerWidth < 640) {
//
//        }
//
//        if (window.innerWidth > 641) {
//
//        }
//
//        if (window.innerWidth >= 1024) {
//
//        }
        
        this.background = this.add.image(0, 0, "main-bg-deskt");
        this.background.height = this.game.height;
        this.background.width = this.game.width;
        console.log(window.innerHeight)

        //Make cat and anchor it to middle of screen
        this.cat = game.add.sprite(game.world.centerX, game.world.centerY+500, 'cat-stand')
        this.cat.anchor.setTo(0.5, 0.5);

        //Enable physics for cat, set it moving limits inside screen(if physics not enabled for model, you will get body null eror)
        this.physics.enable(this.cat, Phaser.Physics.ARCADE)
        this.cat.enableBody = true;
        this.cat.body.onCollide(this.removeEgg(), this)
        this.cat.body.collideWorldBounds = true;

        //Fallen egg count
        this.fallenCount = 0;

        //Add score counter
        this.score = 0;
        this.scoreString = 'Eggs cached: '
        this.scoreTxt = game.add.text(10, 10, this.scoreString + this.score, { font: '34px Arial', fill: '#fff' });

    }

    //This method is like watcher for all events in game

    update () {

        //Add controls for cat
        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
        {
          this.cat.x -= 20;
        }
        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
        {
          this.cat.x += 20;
        }

        //Egg spawning
        if (this.fallenCount < 200) {

            setTimeout(function () {

                this.eggs = game.add.group();
                this.eggs.enableBody = true;

                //Create new eggs and arrange width of drop area
                this.egg = this.eggs.create(Math.floor((Math.random() * this.game.width) + 1) * 7, 40, 'egg')

                //Sets speed for egg falling
                this.egg.body.gravity.y = 200;
                this.fallenCount +=1
            }, 1500)
        }

        this.game.physics.arcade.collide(this.egg, this.cat, this.removeEgg, null, this)

        if (this.fallenCount == 200) {
            this.state.start('Result')
        }
    }

    removeEgg () {
        this.egg.kill();
        this.score+=1;
        this.scoreTxt.text = this.scoreString + this.score
    }
}

 

Still not working, now I am getting error in removeEgg method, says, Cannot read property 'kill' of undefined, any help?

[hcakar]

Hello edvinsdainis,

Can you please try this one?

import Phaser from 'phaser'

//Define all variables to use this(game need's to use global object for chaining).
let cat = this.cat;
let egg = this.egg;
let eggs = this.eggs;
let fallenCount = this.fallenCount;
let score = this.score;
let scoreString = this.scoreString;
let scoreTxt = this.scoreTxt

export default class extends Phaser.State {

    create() {

        this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.game.scale.refresh();

        this.physics.startSystem(Phaser.Physics.ARCADE);

                    //Refactor this to shorter code, at this time all ifs needed for proper app work on all devices
            //        if (window.innerWidth < 640) {
            //
            //        }
            //
            //        if (window.innerWidth > 641) {
            //
            //        }
            //
            //        if (window.innerWidth >= 1024) {
            //
            //        }
        
        this.background = this.add.image(0, 0, "main-bg-deskt");
        this.background.height = this.game.height;
        this.background.width = this.game.width;
        console.log(window.innerHeight)

        //Make cat and anchor it to middle of screen
        this.cat = game.add.sprite(game.world.centerX, game.world.centerY+500, 'cat-stand')
        this.cat.anchor.setTo(0.5, 0.5);

        //Enable physics for cat, set it moving limits inside screen(if physics not enabled for model, you will get body null eror)
        this.physics.enable(this.cat, Phaser.Physics.ARCADE)
        this.cat.enableBody = true;
        this.cat.body.onCollide(this.removeEgg(), this)
        this.cat.body.collideWorldBounds = true;

        //Fallen egg count
        this.fallenCount = 0;

        //Add score counter
        this.score = 0;
        this.scoreString = 'Eggs cached: '
        this.scoreTxt = game.add.text(10, 10, this.scoreString + this.score, { font: '34px Arial', fill: '#fff' });


        this.eggs = game.add.group();
        this.eggs.enableBody = true;

    }

    //This method is like watcher for all events in game

    update () {

        //Add controls for cat
        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
        {
          this.cat.x -= 20;
        }
        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
        {
          this.cat.x += 20;
        }

        var _this = this;
        //Egg spawning
        if (this.fallenCount < 200) {

            setTimeout(function () {
                //Here we use _this for referancing the current state.
                //It's cause if u just console.log(this); inside this "function" you will see that this isn't reffering our state.

                //Create new eggs and arrange width of drop area
                _this.egg = _this.eggs.create(Math.floor((Math.random() * _this.game.width) + 1) * 7, 40, 'egg')

                //Sets speed for egg falling
                _this.egg.body.gravity.y = 200;
                _this.fallenCount +=1
            }, 1500)
        }

        this.game.physics.arcade.collide(this.egg, this.cat, this.removeEgg, null, this)

        if (this.fallenCount == 200) {
            this.state.start('Result')
        }
    }

    removeEgg () {
        //this will kill all egg's on egg group
        // this.egg.kill();
        //I believe you should use something like this:
        this.egg.getChildAt(this.fallenCount - 1).kill(); //or .destroy();
        this.score += 1;
        this.scoreTxt.text = this.scoreString + this.score
    }
}

I believe the problem is that you cannot use this.egg.kill(); that function possibly should kill one of the egg group's child.

[edvinsdainis]

4 hours ago, hcakar said:

Hello edvinsdainis,

Can you please try this one?

import Phaser from 'phaser'

//Define all variables to use this(game need's to use global object for chaining).
let cat = this.cat;
let egg = this.egg;
let eggs = this.eggs;
let fallenCount = this.fallenCount;
let score = this.score;
let scoreString = this.scoreString;
let scoreTxt = this.scoreTxt

export default class extends Phaser.State {

    create() {

        this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.game.scale.refresh();

        this.physics.startSystem(Phaser.Physics.ARCADE);

                    //Refactor this to shorter code, at this time all ifs needed for proper app work on all devices
            //        if (window.innerWidth < 640) {
            //
            //        }
            //
            //        if (window.innerWidth > 641) {
            //
            //        }
            //
            //        if (window.innerWidth >= 1024) {
            //
            //        }
        
        this.background = this.add.image(0, 0, "main-bg-deskt");
        this.background.height = this.game.height;
        this.background.width = this.game.width;
        console.log(window.innerHeight)

        //Make cat and anchor it to middle of screen
        this.cat = game.add.sprite(game.world.centerX, game.world.centerY+500, 'cat-stand')
        this.cat.anchor.setTo(0.5, 0.5);

        //Enable physics for cat, set it moving limits inside screen(if physics not enabled for model, you will get body null eror)
        this.physics.enable(this.cat, Phaser.Physics.ARCADE)
        this.cat.enableBody = true;
        this.cat.body.onCollide(this.removeEgg(), this)
        this.cat.body.collideWorldBounds = true;

        //Fallen egg count
        this.fallenCount = 0;

        //Add score counter
        this.score = 0;
        this.scoreString = 'Eggs cached: '
        this.scoreTxt = game.add.text(10, 10, this.scoreString + this.score, { font: '34px Arial', fill: '#fff' });


        this.eggs = game.add.group();
        this.eggs.enableBody = true;

    }

    //This method is like watcher for all events in game

    update () {

        //Add controls for cat
        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
        {
          this.cat.x -= 20;
        }
        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
        {
          this.cat.x += 20;
        }

        var _this = this;
        //Egg spawning
        if (this.fallenCount < 200) {

            setTimeout(function () {
                //Here we use _this for referancing the current state.
                //It's cause if u just console.log(this); inside this "function" you will see that this isn't reffering our state.

                //Create new eggs and arrange width of drop area
                _this.egg = _this.eggs.create(Math.floor((Math.random() * _this.game.width) + 1) * 7, 40, 'egg')

                //Sets speed for egg falling
                _this.egg.body.gravity.y = 200;
                _this.fallenCount +=1
            }, 1500)
        }

        this.game.physics.arcade.collide(this.egg, this.cat, this.removeEgg, null, this)

        if (this.fallenCount == 200) {
            this.state.start('Result')
        }
    }

    removeEgg () {
        //this will kill all egg's on egg group
        // this.egg.kill();
        //I believe you should use something like this:
        this.egg.getChildAt(this.fallenCount - 1).kill(); //or .destroy();
        this.score += 1;
        this.scoreTxt.text = this.scoreString + this.score
    }
}

I believe the problem is that you cannot use this.egg.kill(); that function possibly should kill one of the egg group's child.

Thanks for reply, with your code i get error - Uncaught TypeError: Cannot read property 'getChildAt' of undefined

[edvinsdainis]

Okay, now first problem is done, here is the code, but now i have second problem, when cat caches egg(its some random icon by now), it is not disappearing, it's just sticking to cat's head and when i move cat, it falls down, and next which is only starting to fall, disappears, the idea is to get that disappears egg which cat collided with.

Here is the code:

 

import Phaser from 'phaser'

//Define all variables to use this(game need's to use global object for chaining).
let cat = this.cat;
let egg = this.egg;
let eggs = this.eggs;
let firingTimer = this.firingTimer;
let score = this.score;
let scoreString = this.scoreString;
let scoreTxt = this.scoreTxt

export default class extends Phaser.State {

    create() {

        this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.game.scale.refresh();

        this.physics.startSystem(Phaser.Physics.ARCADE);

        if (window.innerWidth < 640) {
            let soundBtn = game.add.sprite(game.world.centerX+250, game.world.centerY-485, 'sound-on')
            soundBtn.anchor.setTo(0.5, 0.5);
            soundBtn.scale.x = 0.8
            soundBtn.scale.y = 0.8

        }

        if (window.innerWidth > 641) {

            let soundBtn = game.add.sprite(game.world.centerX+550, game.world.centerY-970, 'sound-on')
            soundBtn.scale.x = 1.5
            soundBtn.scale.y = 1.5
            soundBtn.anchor.setTo(0.5, 0.5);

        }

        if (window.innerWidth >= 1024) {

            let soundBtn = game.add.sprite(game.world.centerX+600, game.world.centerY-470, 'sound-on')
            soundBtn.anchor.setTo(0.5, 0.5);

        }
        
        this.background = this.add.image(0, 0, "main-bg-deskt");
        this.background.height = this.game.height;
        this.background.width = this.game.width;

        //Make cat and anchor it to middle of screen
        this.cat = game.add.sprite(game.world.centerX, game.world.centerY+500, 'cat-stand')
        this.cat.anchor.setTo(0.5, 0.5);

        //Enable physics for cat, set it moving limits inside screen(if physics not enabled for model, you will get body null eror)
        this.physics.enable(this.cat, Phaser.Physics.ARCADE)
        this.cat.enableBody = true;
        this.cat.body.collideWorldBounds = true;

        //Egg firing timer
        this.firingTimer = 0;

        this.eggs = game.add.group();
        this.eggs.enableBody = true;
        this.eggs.createMultiple(100, 'egg')
        this.eggs.setAll('outOfBoundsKill', true);
        this.eggs.setAll('checkWorldBounds', true);

        //Add score counter
        this.score = 0;
        this.scoreString = 'Eggs cached: '
        this.scoreTxt = game.add.text(10, 10, this.scoreString + this.score, { font: '34px Arial', fill: '#fff' });
        

    }

    //This method is like watcher for all events in game

    update () {

        //Add controls for cat
        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
        {
          this.cat.x -= 20;
        }
        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
        {
          this.cat.x += 20;
        }

        if (this.game.time.now > this.firingTimer) {
            this.generateEgg()
        }

        this.physics.arcade.collide(this.eggs, this.cat, this.aquireEgg, null, this)

        // if (this.game.time.now) {
        //     this.state.start('Result')
        // }

    }

    generateEgg () {

        this.egg = this.eggs.getFirstExists(false);

        if (this.egg) {
            this.egg.reset(300, 40);
            this.firingTimer = this.game.time.now + 2000;
            this.egg.body.gravity.y = 600;
        }
    }

    aquireEgg (egg, cat) {

        this.egg.destroy();
        this.score += 1;
        this.scoreTxt.text = this.scoreString + this.score
    }
}

 

P.S I tryed with kill and destroy, both same result.

 

This is how it looks.

[lewdoo]

I think your issue lies in the fact that when you generate your egg, its not being added to the group, try debugging whether it is in the group or not.

Also, with the 'aquireEgg' function,  you have added and option to pass in a value for egg but then not used it.

[edvinsdainis]

20 hours ago, lewdoo said:

I think your issue lies in the fact that when you generate your egg, its not being added to the group, try debugging whether it is in the group or not.

Also, with the 'aquireEgg' function,  you have added and option to pass in a value for egg but then not used it.

this.eggs.add(this.egg)

I add this to generateEgg and nothing changes, basicly i need, whenewer cat touches falling egg, it should dissapier, and i don't know now where the problem is, any help is needed, thanks