Загрузка листа спрайтов в pixi v3

Я пытаюсь изучить Pixi.js для игры, которую я хотел бы написать, но у меня самые тяжелые времена с одной из самых основных задач: загрузка листа спрайтов. Настоящая проблема в том, что Pixi v3 нарушила совместимость со старым способом загрузки спрайтов, который, по-видимому, был PIXI.AssetLoader(). Все учебники, которые я могу найти, используют этот метод, но когда я попытался его использовать, PIXI выдал ошибку, говорящую мне использовать их класс PIXI.loader.Loader. Я бы предпочел использовать самую последнюю версию библиотеки, так что это справедливо.

Я посмотрел их документацию здесь: http://pixijs.github.io/docs/PIXI.loaders.Loader.html

Проблема в том, что документация скудна (в ней даже не описаны методы, принадлежащие классу). Я могу понять, как загрузить одно изображение в качестве текстуры... я думаю... но я хочу загрузить листы спрайтов! И что больше всего расстраивает, так это то, что на главной странице явно заявлена ​​поддержка загрузки листов спрайтов. Так как вы это делаете?

Лучшее, что я получил, основываясь на том, что я мог подобрать, это:

Это мой лист спрайтов JSON:

{
  "frames": {
    "exampleFrame1.png": {
      "frame": {"x":0, "y":0, "w":100, "h":100},
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {"x":0, "y":0, "w":100, "h":100},
      "sourceSize": {"w": 100, "h": 100}
    }
  },

  "meta": {
    "image": "./images/example-sprite-sheet.png"
  }
}

А это код, запрашивающий спрайт:

var sprite;
var loader = new PIXI.loaders.Loader("./images", 5);
loader.add('example-sprites', 'example-sprite-sheet.json');
loader.on('complete', onAssetLoad);
loader.load();

function onAssetLoad(){
  sprite = PIXI.Sprite.fromFrame("exampleFrame1.png");
  //attach sprite to stage etc...
}

Я мог бы ошибиться с этим кодом выше, но я ничего не могу найти в документации Pixi, и даже все учебники и примеры, которые есть на их сайте, используют неверный метод PIXI.AssetLoader().

Кто-нибудь знает, как сделать то, что я пытаюсь сделать в Pixi v3? Или еще лучше, кто-нибудь знает, где я могу найти нужную мне информацию?


javascript pixi.js sprite-sheet
person Cappielung    schedule 03.11.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Ваш код выглядит нормально. Я думаю, вам просто нужна косая черта после «images»:

var loader = new PIXI.loaders.Loader("./images/", 5);

Кроме того, это не обязательно, но вы можете использовать «один раз» вместо «вкл» для своего обработчика событий, если вам нужно прослушать его только один раз.

loader.once('complete', onAssetLoad);

Перейдите сюда, чтобы посмотреть несколько замечательных примеров: http://pixijs.github.io/examples/index.html?s=basics&f=spritesheet.js&title=SpriteSheet%20Animation

person Karmacon    schedule 04.11.2015
comment
Спасибо! Я как-то пропустил эту примерную страницу. И это сводится к тому, что я просто недостаточно знал о том, как Sprite Sheets были созданы с помощью таких инструментов, как TexturePacker, если честно. - person Cappielung; 06.11.2015