Phaserを使用してスプライトシートからスプライトをロードするとき

Question

jsbreakouts.orgの全体的なデザインに従って、Phaserを学ぶのに役立つブレークアウトクローンの再作成に取り組んでいます。とにかく、私は開始画面を設定しました。スタート画面からは問題なくゲーム状態に移行できます。私のゲーム状態では、バックグラウンドとパドルを問題なくロードできます。パドルは、想定されているようにマウス入力に応答します。

しかし、ボールは何らかの理由でロードされません。ボールはスプライトシートから来ています。シートの各ボールは16x16で、そのうち5枚があります。私はそれらのうちの1つにアニメーションを付けることはできませんが、ロードすることさえできません。

ボールスプライトシートは、パドルと同じディレクトリにあります。私は他のコードをオンラインで見てきました。私が知る限り、正しいことをしています。しかし、それは動作していません。

私は間違っていますか？ここで

は私のゲームの状態コードです：

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; 

    }, 
}; 

Answer 1

私は私が作ったいくつかのゲームを通じて戻って、あなたがspritesheetを宣言するときに私のコードとあなたの間で異なる唯一のものです。

あなたのボールspritesheetを宣言：

game.load.spritesheet('ballsheet', './assets/balls.png', 16, 16, 5); 

私はあなたが最後に5を必要としないと思います。各スプライトの幅と高さをPhaserに伝えるだけで、スプライトシート上のスプライト間にギャップがないと仮定すると、スプライトの正しい数に自動的に分割されます。

タイルスプライトシートを読み込むときにこのようにしたようです。各タイルの幅と高さを宣言したばかりで、スプライトシートにいくつのスプライトがあるかを指定する必要はありませんでした。

これは私がこの問題を引き起こしていると考えられる唯一のことです。

私はそれが何らかの形であなたを助けてくれることを願っています。

Answer 2

Texture Atlases over Spritesheetsをお勧めします。フレームの次元をナンセンスに設定する必要がないので、パフォーマンスが向上し、使いやすくなります。

What is Texture Atlas

Create Texture Atlas

Preloading Texture Atlas (actually any Phaser assets)

var s = new Sprite(game, 'key', 'frame')