Search the Community

I am building a basketball game. I cannot get the ball to stop sticking to the rim colliders. When I was running p2 physics, the ball would simply bounce off the rim colliders as expected, but now, everytime the ball touches the rim colliders, it slows down movement rapidly and doesn't bounce or fall as expected. I think I might be missing a property setting somewhere. I set the rim colliders (leftMarker + rightMarker) to be immovable in create() but I'm not sure what else I need. I don't understand why the colliders stick to each other! Any help is appreciated! Basketball.Game = function (game) { this.score = null; this.scoreText = null; this.ball = null; this.net = null; this.basket = null; this.rim = null; this.leftMarker = null; this.rightMarker = null; this.checker = null; this.ballCollisionGroup = null; this.rimCollisionGroup = null; this.collisionsOn = false; this.launched = false; this.respawned = false; this.lastPointerPos = null; //HTML element that will produce screenshot this.clickToSave = null; //Constants this.GRAVITY = 1600; this.SHOOT_FORCE = 1400; this.EDGE_CUSHION = 10; this.SCALE_PERCENT = 0.55; }; Basketball.Game.prototype = { create: function () { //Initialize physics world this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.physics.arcade.gravity.y = this.GRAVITY; //Create basket group this.basket = this.game.add.group(); //Load net sprite this.net = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY - 200, 'net'); this.net.anchor.setTo(0.5); this.basket.add(this.net); //Load hoop markers this.leftMarker = this.game.add.sprite(this.game.world.centerX - 57, 232, 'marker'); this.rightMarker = this.game.add.sprite(this.game.world.centerX + 57, 232, 'marker'); this.leftMarker.anchor.setTo(0.5); this.rightMarker.anchor.setTo(0.5); this.basket.add(this.leftMarker); this.basket.add(this.rightMarker); //Load ball sprite this.ball = this.game.add.sprite(this.game.world.centerX, this.game.world.height - 100, 'ball'); this.ball.anchor.setTo(0.5); //Load rim sprite this.rim = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY - 200, 'rim'); this.rim.anchor.setTo(0.5); this.basket.add(this.rim); //Load checker sprite this.checker = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY - 80, 'checker'); this.checker.anchor.setTo(0.5); this.basket.add(this.checker); //Setup physics this.game.physics.arcade.enable([this.leftMarker, this.rightMarker, this.ball]); this.leftMarker.body.setCircle(this.leftMarker.width / 2); this.rightMarker.body.setCircle(this.rightMarker.width / 2); this.leftMarker.body.moves = false; this.rightMarker.body.moves = false; this.leftMarker.body.immovable = false; this.rightMarker.body.immovable = false; this.leftMarker.body.enable = false; this.rightMarker.body.enable = false; this.ball.body.setCircle((this.ball.width * this.SCALE_PERCENT) / 2); this.ball.body.allowGravity = false; this.ball.body.bounce.set(0.8); this.ball.body.velocity.set(0); //Enable input this.game.input.onDown.add(this.track, this); this.game.input.onUp.add(this.launch, this); //Initialize this.score = 0; this.scoreText = this.game.add.bitmapText(this.game.world.centerX, this.game.world.centerY, 'pixel', 'Score: ' + this.score, 36); this.scoreText.anchor.setTo(0.5); this.lastPointerPos = new Phaser.Point(0, 0); //For mobile Phaser.Canvas.setTouchAction(this.game.canvas, 'auto'); this.game.input.touch.preventDefault = true; }, update : function () { this.game.physics.arcade.collide(this.ball, this.leftMarker); this.game.physics.arcade.collide(this.ball, this.rightMarker); //Only enable collisions when the ball is above the net markers if (this.ball.y < this.basket.children[1].y - this.ball.height / 2) { console.log("Detect collisions!"); this.leftMarker.body.enable = true; this.rightMarker.body.enable = true; } //Check if the ball is out of bounds if (this.ball.x < this.camera.x - this.ball.width / 2 || this.ball.x > this.camera.width + this.ball.width / 2|| this.ball.y < this.camera.y - this.ball.height / 2 || this.ball.y > this.camera.height + this.ball.height / 2) { //Respawn the ball if it hasn't already if (!this.respawned) { this.respawn(); } } }, render : function () { this.game.debug.body(this.ball); if (this.leftMarker.body.enable) { this.game.debug.body(this.leftMarker); this.game.debug.body(this.rightMarker); } }, track : function () { //Update the last finger position this.lastPointerPos.x = this.input.x; this.lastPointerPos.y = this.input.y; //Set the ball physics to be still this.ball.body.allowGravity = false; this.ball.body.velocity.set(0); this.launched = true; }, launch : function () { //Launch the ball if it hasn't already if (this.launched) { this.game.add.tween(this.ball.scale).to({ x: this.SCALE_PERCENT, y: this.SCALE_PERCENT }, 1000, Phaser.Easing.Linear.Out, true); this.launched = false; this.ball.body.allowGravity = true; //Get the direction of finger swipe, normalize it, and apply a scalar to the velocity of the ball var direction = new Phaser.Point(this.input.x - this.lastPointerPos.x, this.input.y - this.lastPointerPos.y); Phaser.Point.normalize(direction, direction); if (direction.y < 0) { this.ball.body.velocity.x = direction.x * this.SHOOT_FORCE; this.ball.body.velocity.y = direction.y * this.SHOOT_FORCE; } } }, respawn : function () { this.respawned = true; //Set the ball physics to be still again this.ball.body.allowGravity = false; this.ball.body.velocity.set(0); //Disable collisions this.leftMarker.body.enable = false; this.rightMarker.body.enable = false; this.game.time.events.add(Phaser.Timer.SECOND * 0.25, function () { this.respawned = false; //Rescale the ball and its body this.ball.scale.setTo(1); this.ballResized = false; //Spawn the ball in a new, random location var ballSpawnX = this.game.rnd.integerInRange(this.camera.x + this.ball.width / 2 + this.EDGE_CUSHION, (this.camera.width - this.ball.width / 2) - this.EDGE_CUSHION); ballSpawnX = this.game.math.snapTo(ballSpawnX, 10); //Make sure the ball is in the boundary we set if (ballSpawnX < this.ball.width + this.EDGE_CUSHION) { ballSpawnX = this.ball.width + this.EDGE_CUSHION; } else if (ballSpawnX > this.world.width - this.EDGE_CUSHION) { ballSpawnX = this.world.width - this.EDGE_CUSHION; } this.ball.x = ballSpawnX; this.ball.y = this.game.height - 100; }, this); }, saveCanvas : function () { var link = this.game.canvas.toDataURL('image/png'); window.open(link, '_blank'); } };

I ran into this in a little game I'm building, but I've managed to boil it down to a simple example that illustrates the problem (I modified the Arcade Physics "sprite vs sprite" example). sprite2 falls under gravity until it lands on sprite1, then after sitting there for one frame (essential to demo the bug) it gains a steadily increasing upwards force. Expected: sprite2 will take off and fly up to the top of the screen. Actual: sprite2 sticks to sprite1 and tows it up to the top of the screen. If we enable sprite1.immovable, sprite2 will stick to sprite1 (and not move upwards) regardless of the amount of force applied. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });function preload() { game.load.image('atari', 'assets/sprites/atari130xe.png'); game.load.image('mushroom', 'assets/sprites/mushroom2.png');}var sprite1;var sprite2;var force2 = 0;var takeOff2 = false;var count2 = 0;function create() { game.physics.startSystem(Phaser.Physics.ARCADE); sprite1 = game.add.sprite(300, game.world.height, 'atari'); sprite2 = game.add.sprite(300, game.world.height - 200, 'mushroom'); game.physics.enable([sprite1, sprite2], Phaser.Physics.ARCADE); sprite1.name = 'atari';// sprite1.body.immovable = true; sprite1.body.collideWorldBounds = true; sprite2.name = 'mushroom'; sprite2.body.gravity.y = 100; sprite2.body.collideWorldBounds = true;}function update() { if (takeOff2) force2 -= .5; sprite2.body.velocity.y += force2; game.physics.arcade.collide(sprite1, sprite2, collisionHandler, null, this);}function collisionHandler (obj1, obj2) { // let it sit in contact for one frame before attempting to take off if (count2++ > 0) takeOff2 = true;}function render() { game.debug.text("force " + force2, 0, 50);}