I am working on re-creating a breakout clone to help me learn Phaser (following the overall design of jsbreakouts.org). Anyway, I have the start screen set up. From the start screen, I can transition to the game state without any problems. In my game state, I can load the background and the paddle without issues. The paddle responds to mouse input as it is supposed to.

But the ball does not load for some reason. The ball is coming from a spritesheet. Each ball in the sheet is 16x16 and there are 5 of them. I can't even get one of them to load, let alone animate them.

The balls spritesheet is in the same directory as the paddle. I have looked at other code online and as far as I can tell, I'm doing it right. Yet, it is not working.

What am I doing wrong?

Here's my game state code:

var paddle;
var ball;

var Game = {

// Here we load all the needed resources for the level.
},

create : function() {
//enable physics

game.add.text(50, 390, "Lives: 3    Score: 700   Level: 1", { font: "12px sans-serif", fill: "#000000"});

//set the anchor to be the lower center of the paddle

ball.frame = 0;
//ball.body.collideWorldBounds = true;
//ball.play('rotate');

},
update: function() {

},
};


You need to set the anchor for the ball sprite the same as you did for the paddle, e.g.: ball.anchor.set(0.5, 1.0);
ball.animations.add("rotate", Phaser.Animation.generateFrameNames("ball_seq_", 0, 4, ".png", 0), 10, false, false);