Phaser spritesheet加载旋转90cw

时间:2016-02-26 05:17:06

标签: javascript phaser-framework

我使用TexturePacker创建一个带有JSON文件的spritesheet,这是我的代码:

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {
    preload: preload,
    create: create,
    update: update
});

function preload() {
    game.load.atlas('seyan_f_torch', '../sprite_hashes/seyan_f_torch.png', '../sprite_hashes/seyan_f_torch.json');
};

function create() {
    var seyan_f_torch = game.add.sprite(20, 20, 'seyan_f_torch', '00219001.png');
    console.log(Phaser.Animation.generateFrameNames('00', 219016, 219023, ''));
    seyan_f_torch.animations.add('walk-s', Phaser.Animation.generateFrameNames('00', 219016, 219023, '.png'), 10, true);
    // seyan_f_torch.animations.play('walk-s');
};

function update() {

};

一切正常,这就是json代码:

"00219001.png":
{
    "frame": {"x":782,"y":139,"w":37,"h":58},
    "rotated": true,
    "trimmed": true,
    "spriteSourceSize": {"x":39,"y":67,"w":37,"h":58},
    "sourceSize": {"w":120,"h":240},
    "pivot": {"x":0.5,"y":0.5}
},

但是当图像加载时,它会像这样加载:

enter image description here

有关如何让它以正确方式转向的任何信息都将非常感谢。

编辑:

看来Phaser不支持旋转的地图集,所以如果你在我的情况下使用纹理包,请取消选中旋转图像。 https://github.com/photonstorm/phaser/issues/2359#issuecomment-189161540

1 个答案:

答案 0 :(得分:0)

来自Phaser forum

// Set anchor to the center of your sprite
sprite.anchor.setTo(.5, .5);

// Invert scale.x to flip left/right
sprite.scale.x *= -1;

// Invert scale.y to flip up/down
sprite.scale.y *= -1;