在 Phaser js 中添加精灵答案

【问题标题】：Adding sprite in Phaser js在 Phaser js 中添加精灵
【发布时间】：2014-10-02 11:04:37
【问题描述】：

我需要知道如何相应地添加这个精灵图像的第 2 行、第 3 行、第 4 行以进行左、右和向上（顶部）移动。

以下代码用于底部移动，作为精灵的第一行，我可以移动它。

如果我水平创建一个长精灵我可以实现它，还有其他方法吗？

请帮我弄清楚如何将第二行包含在内。

Sprite 图片（用户/玩家）：

function preload(){
    myGame.load.spritesheet('user', 'user4.png', 95, 158, 12);
}
var player;

function create(){
    player = myGame.add.sprite(500, 100, 'user');
    myGame.physics.arcade.enable(player);
    player.animations.add('bottom', [0,1,2,3,4,5,6,7,8,9,10,11], 12, true, true);

}

function update(){
        if (cursors.left.isDown) {
            //  Move to the left
            player.body.velocity.x = -150;
            player.animations.play('left');
        }
        else if (cursors.right.isDown)
        {
            //  Move to the right
            player.body.velocity.x = 150;
            player.animations.play('right');
        }
        else if (cursors.up.isDown)
        {
            //  Move to the right
            player.body.velocity.y = -50;
            player.animations.play('top');
        }
        else if (cursors.down.isDown)
        {
            //  Move to the right
            player.body.velocity.y = 50;
            player.animations.play('bottom');
        }
}

【问题讨论】：

标签： javascript phaser-framework

【解决方案1】：

只需按照您为底部所做的方式定义额外的动画：

player.animations.add('bottom', [0,1,2,3,4,5,6,7,8,9,10,11], 12, true, true); player.animations.add('left', [12,13,14,15,16,17,18,19,20], 12, true, true); player.animations.add('right', [21,22,23,24,25,26,27,28,29], 12, true, true);

等等。显然我只是猜到了上面的帧数，您需要将它们更正为您实际需要的任何内容。但是一旦你这样做了，你就可以在动画键上调用play。

【讨论】：

这件事我之前试过，我在控制台中收到错误：TypeError: frame is undefined localhost/game/js/phaser.js Line 31278 有没有办法在此行之前指定起始 x，y 坐标：player.animations .add('left', [12,13,14,15,16,17,18,19,20], 12, true, true);
你说得对，我认为问题出在我使用的 spritesheet 中，其中的帧不正确。
要让load.spritesheet 工作，工作表中的每一帧都必须具有完全相同的大小，并且在工作表的两侧没有额外的填充。如果您更愿意使用不同大小的帧，那么您需要使用纹理图集，无论如何这可能会更容易 - 但这完全取决于您的源资产是什么样的。
@photonstorm 会不会因为精灵的大小或数量不匹配而导致错误或乱码？
@expiredninja 取决于不匹配。如果它不能在数学上切割帧，你会在加载过程中出错。如果可以，但值不能准确映射到实际的精灵表，您会在动画播放期间看到损坏。

【解决方案2】：

将预加载更改为：

function preload() {
    game.load.spritesheet('user', 'user4.png', 95, 158, 48);
}

并为所有方向添加动画：

    player.animations.add('bottom', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 12, true, true);
    player.animations.add('left', [12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23], 12, true, true);
    player.animations.add('right', [24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35], 12, true, true);
    player.animations.add('top', [36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47], 12, true, true);

还记得在你的 create() 函数中捕获光标输入：

    cursors = game.input.keyboard.createCursorKeys();

对其进行了测试并使其工作。 Sprite 表不是 100% 正确，但看起来还不错。

【讨论】：

【解决方案3】：

为了让事情变得简单，我的方法是：

 animation_arr = ['idle', 'walk', 'jump', 'idle_towel', 'walk_towel', 'jump_towel' ];
 for(var i=0; i < animation_arr.length; i++){
    player.animations.add(animation_arr[i], [0+(i*10), 1+(i*10), 2+(i*10), 3+(i*10), 4+(i*10), 5+(i*10), 6+(i*10), 7+(i*10), 8+(i*10), 9+(i*10)], 10, true);
 }

【讨论】：