2

Pixi.jsをレンダリング エンジンとして使用して、 Typescriptで小さなゲームを作成したいと考えていました。最初はhttp://ezelia.com/2013/05/pixi-tutorial/をフォローしていました。コードにいくつかの間違いがありましたが、なんとか修正できました。ここで、スプライトシートにpixiをロードしたいと思いました。残念ながら、デバッグ コンソールにエラーが表示されました: 。Uncaught Error: The frameId 'body.png' does not exist in the texture cache function (baseTexture, frame)

それはスプライトシートをロードするための私のコードです:

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$"
}
}

誰かが私を助けてくれたらとても感謝しています。

4

3 に答える 3

2

例でわかるように、「フレーム」はオブジェクトであり、代わりに配列があります。Spritesheet.jsonを修正するか、数値 ID でテクスチャにアクセスできます。たとえば、ボディの場合は PIXI.Texture.fromFrame(0)、curvedBody1 の場合は PIXI.Texture.fromFrame(1) などです。

于 2013-08-22T23:41:56.937 に答える
1

http://peepsquest.com/tutorials/isometric-tiles-with-height.htmlのチュートリアルで同じエラーが発生しました

交換することでこれを修正しました

var tile = PIXI.Sprite.fromFrame(ファイル名);

と

var tile = PIXI.Sprite.fromImage(ファイル名);

于 2013-10-27T05:19:26.057 に答える