Sticky collisions in Arcade physics

[deedeekaka]

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');
		
	}

};