如何将精灵 sheet 及其 JSON 文件导入到我的 Phaser 游戏中？

Question

我正在使用 Phaser 游戏引擎创建游戏。我创建了一个精灵 sheet 并下载了它。它带有带有我的帧的 256∆×∆384 .png 文件和一个 JSON 文件，我认为该文件包含有关如何拆分帧的信息。我不知道如何将带有 JSON 文件的精灵 sheet 导入到我的 preload() 函数中。我尝试使用以下代码，但它不起作用。任何帮助将不胜感激。

var game = new Phaser.Game(1200, 750, Phaser.AUTO, '', { preload:   preload, create: create, update: update });
function preload(){
    game.load.image('background', 'assets2/background.png');
    game.load.json('robot', 'assets2/VillainSpriteSheet_json.json');
    game.load.spritesheet('robot', 'assets2/VillainSpriteSheet.png');
}

var villain; 

function create(){

var villainjson = game.cache.getJSON('robot');

//enable physics
game.physics.startSystem(Phaser.Physics.ARCADE);

//create background
var background = game.add.sprite(0, 0, 'background');

//villain
villain = game.add.sprite(50, 50, 'robot');

//enable phsyics 
game.physics.arcade.enable(villain);
villain.body.bounce.y = .2;
villain.body.gravity.y = 300; 
villain.body.collideWorldBounds = true;  


}

Answer 1

您不需要 jQuery 的 getJSON()。你想要移相器。

它会像

p = new Phaser.Game(...);
p.cache.getJSON('foo');
p.load.image(...);

Answer 2

我认为您混淆了两个框架，jQuery 和 Phaser。对于加载和显示精灵，您不需要 jQuery，只需 Phaser 即可。

load.spritesheet 需要一个 spritesheet，其中所有 sprite 都有 固定的宽度和高度 ，因此所有 sprite 都在网格布局中。

你的听起来像 spriteatlas，区别在于在 spriteatlas 中每个精灵可以有 不同的宽度和高度 ，所有这些宽度和高度每个精灵都在随附的 .JSON 文件中进行了描述。

所以我认为您正在寻找 load.atlasJSONHash 函数，如下所示：

function preload(){
    //..
    game.load.atlasJSONHash('robot', 'assets2/VillainSpriteSheet.png', 'assets2/VillainSpriteSheet_json.json');

// and then load a sprite like so
// Note: 'myframename1' should be some framename from the .json file
var villain = game.add.sprite(50, 50, 'robot', 'myframename1');

顺便说一下，Phaser 中的 load.json 可用于加载一个 .json 文件，例如用于您自己的自定义数据，如关卡布局，dialog/multilanguage 文本、高分数据、敌人模式等

如何将精灵 sheet 及其 JSON 文件导入到我的 Phaser 游戏中？

How do I import a sprite sheet with its JSON file into my phaser game?

javascript

json

sprite-sheet

phaser-framework