Trouble loading sprite from spritesheet with Phaser

Question

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 = {


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;

    },
};

existenzial · Accepted Answer · 2016-08-23 18:46:18Z

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

Also when adding the ball animations, the 2nd parameter should generate the complete frame names of each individual sprite, not just their # on the spritesheet. Phaser's documentation can be a bit fuzzy on just how to do this properly but you can use this code for guidance:

ball.animations.add("rotate", Phaser.Animation.generateFrameNames("ball_seq_", 0, 4, ".png", 0), 10, false, false);

The call to generateFrameNames is meant to assemble the file path for every sprite in the sequence from the start value (0) up to (4) followed by the file extention and how many zeros you want to pad the file path with (e.g. a pad of 3 would look like "ball_seq_0004.png").

The rest of the ball.animations.add () parameters are the frame rate (e.g.: 10fps) and 2 boolean values describing whether to loop the animation continuously. See here in the Phaser docs for more on the parameters for the animations.add method.

Stack Exchange Network

Trouble loading sprite from spritesheet with Phaser

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Trouble loading sprite from spritesheet with Phaser

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions