Невозможно загрузить изображения с pixi.js

Question

Я хотел создать небольшую игру в . Написал, используя Pixi.js как двигатель рендеринга. Вначале я следовал http://ezelia.com/2013/05/pixi-tutorial/. Были ошибки в коде, но мне удалось их исправить. Теперь я хотел загрузить свой спрайт с pixi. К сожалению, у меня есть ошибка в консоли отладки: Uncaught Error: The frameId 'body.png' does not exist in the texture cache function (baseTexture, frame).

Это мой код, чтобы загрузить spritesheet:

var assetsToLoader = ["/pixi/img/Spritesheet.json"], 
    loader = new PIXI.AssetLoader(assetsToLoader); 
loader.onComplete = IntroScene.onAssetsLoaded; 
loader.load(); 

Вот это мое IntroScene.onAssetsLoaded() метод:

private static onAssetsLoaded() { 
    for (var i = 0; i < IntroScene.images.length; i++) { 
     var frameName = IntroScene.images[i], 
      texture = PIXI.Texture.fromFrame(frameName); 
     IntroScene.textures.push(texture); 
    } 
} 

Это мой IntroScene.images:

private static images: any = [ 
    "body.png", 
    "curvedBody1.png", 
    "curvedBody2.png", 
    "head.png", 
    "tail.png", 
    "smallFood.png", 
    "bigFood.png", 
    "background.png" 
]; 

И наконец Spritesheet.json генерируется с текстурой пакера (http://www.codeandweb.com/texturepacker):

{"frames": [ 

{ 
    "filename": "background.png", 
    "frame": {"x":2,"y":2,"w":64,"h":64}, 
    "rotated": false, 
    "trimmed": false, 
    "spriteSourceSize": {"x":0,"y":0,"w":64,"h":64}, 
    "sourceSize": {"w":64,"h":64} 
}, 
{ 
    "filename": "bigFood.png", 
    "frame": {"x":68,"y":2,"w":40,"h":40}, 
    "rotated": false, 
    "trimmed": false, 
    "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40}, 
    "sourceSize": {"w":40,"h":40} 
}, 
{ 
    "filename": "body.png", 
    "frame": {"x":2,"y":68,"w":40,"h":40}, 
    "rotated": false, 
    "trimmed": false, 
    "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40}, 
    "sourceSize": {"w":40,"h":40} 
}, 
{ 
    "filename": "curvedBody1.png", 
    "frame": {"x":44,"y":68,"w":40,"h":40}, 
    "rotated": false, 
    "trimmed": false, 
    "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40}, 
    "sourceSize": {"w":40,"h":40} 
}, 
{ 
    "filename": "curvedBody2.png", 
    "frame": {"x":86,"y":68,"w":40,"h":40}, 
    "rotated": false, 
    "trimmed": false, 
    "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40}, 
    "sourceSize": {"w":40,"h":40} 
}, 
{ 
    "filename": "head.png", 
    "frame": {"x":2,"y":110,"w":40,"h":40}, 
    "rotated": false, 
    "trimmed": false, 
    "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40}, 
    "sourceSize": {"w":40,"h":40} 
}, 
{ 
    "filename": "smallFood.png", 
    "frame": {"x":44,"y":110,"w":40,"h":40}, 
    "rotated": false, 
    "trimmed": false, 
    "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40}, 
    "sourceSize": {"w":40,"h":40} 
}, 
{ 
    "filename": "tail.png", 
    "frame": {"x":86,"y":110,"w":40,"h":40}, 
    "rotated": false, 
    "trimmed": false, 
    "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40}, 
    "sourceSize": {"w":40,"h":40} 
}], 
"meta": { 
    "app": "http://www.codeandweb.com/texturepacker ", 
    "version": "1.0", 
    "image": "Spritesheet.png", 
    "format": "RGBA8888", 
    "size": {"w":128,"h":256}, 
    "scale": "1", 
    "smartupdate": "$TexturePacker:SmartUpdate:a9757ea06ba8b63665a1e5d45be72609$" 
} 
} 

Я был бы очень признателен, если бы кто-то помог мне.

Answer 1

Вы пытаетесь вызвать Texture.fromFrame, как если бы это был статический метод, но на самом деле это метод экземпляра. Вы, вероятно, хотели бы позвонить Texture.fromImage?

Answer 2

Посмотрите пример spritesheet here, как вы видите в примере «frames» - это объект, и вместо этого у вас есть массив. Исправьте Spritesheet.json или вы можете получить доступ к вашей текстуре численного идентификатора, например PIXI.Texture.fromFrame (0) для тела, PIXI.Texture.fromFrame (1) для curvedBody1 и т.д.

Answer 3

Я имел та же ошибка делает учебник по http://peepsquest.com/tutorials/isometric-tiles-with-height.html

Я это исправил, заменив

уаг плитка = PIXI.Sprite.fromFrame (имя файла);

с

вар плитки = PIXI.Sprite.fromImage (имя файла);