添加街机物理的Phaser混淆了精灵

Question

当我向我的精灵添加Arcade物理时，整个游戏都会破坏，精灵表现得非常奇怪。

当启用物理学的两行被注释掉时，我得到了我期待的行为。

//game.physics.arcade.enable(paddle);
//game.physics.arcade.enable(ball);

我正在尝试添加它，以便我可以进行一些碰撞检测。

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {

    game.load.image('sky', 'assets/sky.png');
    game.load.image('paddle', 'assets/reactangle.jpg');
    game.load.image('circle', 'assets/circle.png');

}

var paddle; 
var ball; 
var ballDir;
var ballSpeed;

function create() {
    game.physics.startSystem(Phaser.Physics.ARCADE);

    game.add.sprite(0, 0, 'sky');

    paddle = game.add.sprite(game.width/2  ,500, 'paddle');

    ballSpeed = 5
    ballDir = -ballSpeed;

    ball = game.add.sprite(10, 10, 'circle');

    ball.x = 400;
    ball.y = 20;
    game.physics.arcade.enable(paddle);
    game.physics.arcade.enable(ball);
}

function update() {
    paddle.x = game.input.mousePointer.x - (paddle.width/2);
    ball.y -= ballDir;
}