Overlaps not working

[Yant]

Hello everyone! I'm italian so sorry for my bad english . I'm using Phaser to create my first (very very simple) game. There is a ball that should move with the mobile tilt to an hole. When the ball (player) overlaps the hole (cerchio) the background should change from orange to green. I used gyro.js (www.tomg.co/gyrojs) to control the tilt on mobile. It works and the player moves fine. But when I enable the arcade physic to the hole (cerchio) gyro.js doesn't work anymore.  If I disable gyro.js overlaps works and the background change. Here is my code (with gyro.js and overlaps): 

var game = new Phaser.Game(320, 568, Phaser.CANVAS, '', { preload: preload, create: create, render: render, update: update });                var player;        var cerchio;                function preload () {                        game.stage.backgroundColor = 'rgba( 254, 132, 57, 0.869 )';            game.load.image("player", "player.png");            game.load.image("cerchio", "cerchio2.png");                    }                function create () {            game.physics.startSystem(Phaser.Physics.ARCADE);                        player = game.add.sprite(30, 30, "player");            cerchio = game.add.sprite(20, 20, "cerchio");                        game.physics.enable( [player, cerchio], Phaser.Physics.ARCADE);                        player.body.collideWorldBounds = true;                        player.body.bounce.set(0.3);                        gyro.frequency = 1;// start gyroscope detection          gyro.startTracking(function(o) {               // updating player velocity               player.body.velocity.x += o.gamma/7;               player.body.velocity.y += o.beta/7;          });                                }                        function update(){                        game.physics.arcade.overlap(player, cerchio, collisionHandler, null, this);                        }                                function collisionHandler (obj1, obj2) {    //  The two sprites are colliding    game.stage.backgroundColor = '#3dff33';}                                function render () {        }    };

 Hope you understand, and someone can help me. Thank you all! 

[Yant]

up 

[drhayes]

Can you post the code that uses gyro.js? What does it do?

[Yant]

gyro.js let the player move with the tilt on mobile (gyroscope and accelerometer), the code is in the original post above.

gyro.frequency = 1;// start gyroscope detection          gyro.startTracking(function(o) {               // updating player velocity               player.body.velocity.x += o.gamma/7;               player.body.velocity.y += o.beta/7;          });

here is it

[drhayes]

Whoops, it was right there the whole time. Sorry to make you repost it!

 

When you say "the hole stops working", you mean the collision handler doesn't fire, right? Are there any errors in the dev console when you use gyro.js?

[Yant]

When you say "the hole stops working", you mean the collision handler doesn't fire, right? 

Exactly

 

Are there any errors in the dev console when you use gyro.js?

I just noticed Safari says "Failed to load resource: Impossibile trovare l'URL richiesto su questo server." reffering to phaser.map

 

I used phaser.min.js (don't think this could cause trouble)

[Yant]

anyone?

[drhayes]

Safari is looking for a source map. It's an optional file used in debugging. It's not a real error that would stop your game from working.

 

I'm not sure why your collision handler for the hole isn't working, though. If you add "console.log('hey');" to your collision handler, it doesn't show up?

[Yant]

If you add "console.log('hey');" to your collision handler, it doesn't show up?

No

[Yant]

I just wrote some code to move the player with the keyboard keys and noticed that even now the overlaps doesn't work. The background is always green (either when the player is on the hole or when the player isn't on the hole) but it should be orange when the player is not on the hole and green when the player is on the hole.   

[Yant]

Ok, I changed the initial position of the player from 30, 30 (on the hole) to 100, 100 (not on the hole). The background is orange. If I move with the keyboard keys the player to the hole background changes to green (this means overlaps works). But if I move again the player out of the hole the background doesn't change another time to orange (initial color). So now the question is: how to let Phaser check also if Overlpas no longer takes place?

[Yant]

Solved. I put the background color in the update function instead of the preload function. This is the code now. Everything works fine.

var game = new Phaser.Game(320, 568, Phaser.CANVAS, '', { preload: preload, create: create, render: render, update: update });                var player;        var cerchio;                function preload () {                        game.load.image("player", "player.png");            game.load.image("cerchio", "cerchio2.png");                    }                function create () {            game.physics.startSystem(Phaser.Physics.ARCADE);                        cerchio = game.add.sprite(20, 20, "cerchio");            player = game.add.sprite(100, 100, "player");                        game.physics.enable( [player, cerchio], Phaser.Physics.ARCADE);                        player.body.collideWorldBounds = true;                        player.body.bounce.set(0.3);                                    upKey = game.input.keyboard.addKey(Phaser.Keyboard.UP);            downKey = game.input.keyboard.addKey(Phaser.Keyboard.DOWN);            leftKey = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);            rightKey = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);                                    gyro.frequency = 1;          gyro.startTracking(function(o) {               player.body.velocity.x += o.gamma/7;               player.body.velocity.y += o.beta/7;          });                                   }                                     function update(){                        game.stage.backgroundColor = 'rgba( 254, 132, 57, 0.869 )';                        game.physics.arcade.overlap(player, cerchio, collisionHandler, null, this);                        if (upKey.isDown)    {        player.y-=speed;    }    else if (downKey.isDown)    {        player.y+=speed;    }    if (leftKey.isDown)    {        player.x-=speed;    }    else if (rightKey.isDown)    {        player.x+=speed;    }                                   }                                function collisionHandler (obj1, obj2) {    game.stage.backgroundColor = '#3dff33';}                                function render () {                    }    };

[Igor Georgiev]

On 8/25/2015 at 1:51 AM, Yant said:

Solved. I put the background color in the update function instead of the preload function. This is the code now. Everything works fine.

var game = new Phaser.Game(320, 568, Phaser.CANVAS, '', { preload: preload, create: create, render: render, update: update });                var player;        var cerchio;                function preload () {                        game.load.image("player", "player.png");            game.load.image("cerchio", "cerchio2.png");                    }                function create () {            game.physics.startSystem(Phaser.Physics.ARCADE);                        cerchio = game.add.sprite(20, 20, "cerchio");            player = game.add.sprite(100, 100, "player");                        game.physics.enable( [player, cerchio], Phaser.Physics.ARCADE);                        player.body.collideWorldBounds = true;                        player.body.bounce.set(0.3);                                    upKey = game.input.keyboard.addKey(Phaser.Keyboard.UP);            downKey = game.input.keyboard.addKey(Phaser.Keyboard.DOWN);            leftKey = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);            rightKey = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);                                    gyro.frequency = 1;          gyro.startTracking(function(o) {               player.body.velocity.x += o.gamma/7;               player.body.velocity.y += o.beta/7;          });                                   }                                     function update(){                        game.stage.backgroundColor = 'rgba( 254, 132, 57, 0.869 )';                        game.physics.arcade.overlap(player, cerchio, collisionHandler, null, this);                        if (upKey.isDown)    {        player.y-=speed;    }    else if (downKey.isDown)    {        player.y+=speed;    }    if (leftKey.isDown)    {        player.x-=speed;    }    else if (rightKey.isDown)    {        player.x+=speed;    }                                   }                                function collisionHandler (obj1, obj2) {    game.stage.backgroundColor = '#3dff33';}                                function render () {                    }    };

It is strange that it works during update. I don't think it is a good idea to set background color 60 times a sec. 

As for the game.physics.overlap, weird as well that it doesn't work for me as well, but I don't think it should be in the update method as well..... weird.

[Yant]

On 24/2/2017 at 9:35 AM, Igor Georgiev said:

It is strange that it works during update. I don't think it is a good idea to set background color 60 times a sec. 

Hi there! This is a very old project (2 years ago now) and I was doing just to test my skill. I remember checking background in the update was the only way to let it work.

 

On 24/2/2017 at 9:35 AM, Igor Georgiev said:

As for the game.physics.overlap, weird as well that it doesn't work for me as well, but I don't think it should be in the update method as well..... weird.

I just published a new game now (Rocking Square on Android and iOS, let's check it if you want) and I can confirm you overlap should be in the update function, I'm doing it this way and everything works just fine so try and let me know!

[Igor Georgiev]

On 2/26/2017 at 3:56 AM, Yant said:

Hi there! This is a very old project (2 years ago now) and I was doing just to test my skill. I remember checking background in the update was the only way to let it work.

 

I just published a new game now (Rocking Square on Android and iOS, let's check it if you want) and I can confirm you overlap should be in the update function, I'm doing it this way and everything works just fine so try and let me know!

Hi Thank you for the info