使用 Phaser 从 spritesheet 加载 sprite 时遇到问题答案

【问题标题】：Trouble loading sprite from spritesheet with Phaser使用 Phaser 从 spritesheet 加载 sprite 时遇到问题
【发布时间】：2016-12-18 09:39:50
【问题描述】：

我正在重新创建一个突破克隆来帮助我学习 Phaser（遵循 jsbreakouts.org 的整体设计）。无论如何，我已经设置了开始屏幕。从开始屏幕，我可以毫无问题地过渡到游戏状态。在我的游戏状态下，我可以毫无问题地加载背景和桨。桨叶按预期响应鼠标输入。

但是由于某种原因球没有加载。球来自精灵表。表格中的每个球都是 16x16，其中有 5 个。我什至无法加载其中一个，更不用说为它们设置动画了。

balls spritesheet 与 paddle 位于同一目录中。我在网上查看了其他代码，据我所知，我做得对。但是，它不起作用。

我做错了什么？

这是我的游戏状态代码：

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;

    },
};

【问题讨论】：

对移相器不太了解，但我注意到你没有将锚设置在球上，但你做了桨。当我为我的 spritesheet 使用间距移相器时，我也遇到了麻烦，所以它会尝试在我的 sprite 之间加载对我来说看起来没什么的空间。我不得不摆弄尺寸和间距，直到我看到一条腿的一部分并从那里出发
@Ian 锚点无关紧要，因为它应该只是默认值（我假设在左上角）。我只是测试了它以确认它没关系。您关于精灵表的提示很有趣。很难想象这会有所作为，但我会调查的。谢谢。
您可以在创建精灵时设置它的框架，game.add.sprite(100,100, 'ballsheet', 0) 尽管您也可以稍后设置框架，所以这并不重要。我看不出你的代码有什么问题。 JavaScript 控制台中是否有任何错误消息？
是的，我认为它有一个默认值，但我不确定。就像我说的我不太了解并且永远使用它，但我记得我在调整大小后遇到了精灵表加载问题，结果是尝试加载背景，因为调整大小使精灵变得巨大，所以空间比它介于两者之间。祝你好运
你在位置 100, 100 看到什么了吗？还是什么都没有？

标签： javascript sprite game-engine phaser-framework

【解决方案1】：

我回顾了我制作的一些游戏，我的代码和你的唯一不同的是你声明了 spritesheet。

你声明你的球精灵表：

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

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

您在加载图块 spritesheet 时似乎已经这样做了。您只需声明每个图块的宽度和高度，无需指定 spritesheet 中有多少个精灵。

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

希望对你有所帮助。

【讨论】：

【解决方案2】：

我会推荐纹理图集而不是 Spritesheets。它们提供更好的性能并且更易于使用，因为您无需处理设置框架尺寸的废话。

What is Texture Atlas

Create Texture Atlas

Preloading Texture Atlas (actually any Phaser assets)

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

【讨论】：