Javascript 使用相位器从精灵表加载精灵时出现问题

我正在重新创建一个突破克隆，以帮助我学习Phaser（遵循jsbreakouts.org的总体设计）。不管怎样，我已经设置好了开始屏幕。从开始屏幕，我可以毫无问题地过渡到游戏状态。在我的游戏状态下，我可以加载背景和挡板而不会出现问题。按理说，拨片会对鼠标输入做出响应

但由于某些原因，球没有加载。球是从雪碧片上射出来的。表中的每个球为16x16，共有5个球。我甚至无法加载其中一个，更不用说设置动画了

球精灵表与桨位于同一目录中。我在网上看过其他代码，据我所知，我做得不错。然而，它并不起作用

我做错了什么

这是我的游戏状态代码：

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;

    },
};

---

我回顾了我制作的一些游戏，我的代码和你的代码之间唯一不同的是当你声明精灵表时

您申报您的球精灵表：

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

我认为你不需要最后的5分。您只需告诉Phaser每个精灵的宽度和高度，它就会自动将其分割为正确数量的精灵，前提是精灵表上的精灵之间没有间隙

在加载瓷砖精灵表时，您似乎是这样做的。您只声明了每个平铺的宽度和高度，不需要指定精灵表中有多少精灵

这是我能想到的唯一可能导致问题的原因

---

我希望它在某种程度上对您有所帮助。

我回顾了我制作的一些游戏，我的代码和您的代码之间唯一的不同之处是当您声明精灵表时

您申报您的球精灵表：

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

我认为你不需要最后的5分。您只需告诉Phaser每个精灵的宽度和高度，它就会自动将其分割为正确数量的精灵，前提是精灵表上的精灵之间没有间隙

在加载瓷砖精灵表时，您似乎是这样做的。您只声明了每个平铺的宽度和高度，不需要指定精灵表中有多少精灵

这是我能想到的唯一可能导致问题的原因

---

我希望它能在某种程度上帮助你。

我推荐纹理地图集而不是精灵表。它们提供了更好的性能，并且更易于使用，因为您不需要处理设置帧维度的问题

---

var s=new Sprite（游戏，'key'，'frame'）

我建议使用纹理地图集而不是精灵表。它们提供了更好的性能，并且更易于使用，因为您不需要处理设置帧维度的问题

---

var s=new Sprite（游戏，'key'，'frame'）

不太了解phaser，但我注意到你没有将锚固定在球上，而是将桨固定在球上。我也遇到了麻烦，当我为我的精灵表使用间距移相器时，它会尝试在我的精灵之间加载空间，这对我来说似乎什么都不是。我不得不摆弄着尺寸和间距，直到我看到一条腿的一部分，然后离开there@Ian锚点不应该很重要，因为它应该只是默认的（我假设是在左上角）。我只是测试了一下，确认它不重要。你关于雪碧床单的提示很有趣。很难想象这会有什么不同，但我会研究一下。谢谢。您可以在创建精灵时设置其框架，

game.add.sprite（100100，'ballsheet'，0）

，不过您也可以稍后设置框架，所以这并不重要。我看不出你的代码有什么问题。JavaScript控制台中是否有任何错误消息？是的，我假设它有一个默认值，但我不确定。就像我说的，我知道的不多，很久以前就用过，但我记得在我调整了一些东西的大小后，我在加载精灵表时遇到了一个问题，结果它试图加载背景，因为调整大小使精灵HUGEEE变大了，所以中间的空间比它想象的要大。幸运的是，你在位置100看到什么了吗？或者什么都不知道？我对phaser不太了解，但我注意到你没有把锚固定在球上，而是划桨。我也遇到了麻烦，当我为我的精灵表使用间距移相器时，它会尝试在我的精灵之间加载空间，这对我来说似乎什么都不是。我不得不摆弄着尺寸和间距，直到我看到一条腿的一部分，然后离开there@Ian锚点不应该很重要，因为它应该只是默认的（我假设是在左上角）。我只是测试了一下，确认它不重要。你关于雪碧床单的提示很有趣。很难想象这会有什么不同，但我会研究一下。谢谢。您可以在创建精灵时设置其框架，

game.add.sprite（100100，'ballsheet'，0）

，不过您也可以稍后设置框架，所以这并不重要。我看不出你的代码有什么问题。JavaScript控制台中是否有任何错误消息？是的，我假设它有一个默认值，但我不确定。就像我说的，我知道的不多，很久以前就用过，但我记得在我调整了一些东西的大小后，我在加载精灵表时遇到了一个问题，结果它试图加载背景，因为调整大小使精灵HUGEEE变大了，所以中间的空间比它想象的要大。幸运的是，你在位置100看到什么了吗？还是什么都没有？