Sprite (from spritesheet) not appearing

[FluxCapacitor]

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.

What am I doing wrong?

 

Here's my game state code:

var paddle;
var ball;

var Game = {

    preload : function() {
        // Here we load all the needed resources for the level.
        game.load.image('background', './assets/bg_prerendered.png');
        game.load.image('paddle',     './assets/paddle2.png');
        game.load.spritesheet('ballsheet', './assets/balls.png', 16, 16, 5);
        game.load.spritesheet('tiles', './assets/tile_spritesheet.png', 32, 16);
    },

    create : function() {
        //enable physics
        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.physics.arcade.checkCollision.down = false;
        
        //add the background
        background = game.add.sprite(0, 0, 'background');
        
        //add score text placeholder
        game.add.text(50, 390, "Lives: 3    Score: 700   Level: 1", { font: "12px sans-serif", fill: "#000000"});
        
        //add the paddle and set it up
        paddle = game.add.sprite(136, 384, 'paddle');
        
        //set the anchor to be the lower center of the paddle
        paddle.anchor.set(0.5,1);
        
        //enable paddle physics
        game.physics.enable(paddle, Phaser.Physics.Arcade);
        paddle.body.immovable = true;
        paddle.body.collideWorldBounds = true;
        

        ball = game.add.sprite(100,100, 'ballsheet');
        ball.frame = 0;
        //ball.animations.add('rotate',[0,1,2,3,4], 10, true);
        //game.physics.enable(ball, Phaser.Physics.Arcade);
        //ball.body.collideWorldBounds = true;
        //ball.play('rotate');
        
    },
    update: function() {
    paddle.x = game.input.x;
        
    },
};

 

[stupot]

things to try:

1. check you console for hints about problems

2 check the case of the filename, make sure you reference it exactly

3. check the size of image, can it really be chopped up into at least 5 6x16 cells

4. type'ball' into your console, what does it tell you it is