json - 无法在 React 上的 Pixjs 中运行 Sprite 动画

Question

我正在尝试遵循此处提供的 Pixijs 指南:

https://pixijs.github.io/examples/#/demos/animatedsprite-demo.js - 经过一番挖掘后，这里是他们用于纹理映射器的工作表 https://github.com/pixijs/examples/blob/gh-pages/required/assets/mc.json

获取简单动画 Sprite 的示例。我遇到的问题是，我几乎完全按照要求进行操作，但出现错误 - 我不知道是什么导致了问题，也不知道如何自行进行调试。

示例有:

var app = new PIXI.Application();
document.body.appendChild(app.view);

app.stop();

PIXI.loader
    .add('spritesheet', 'required/assets/mc.json')
    .load(onAssetsLoaded);

function onAssetsLoaded() {

    // create an array to store the textures
    var explosionTextures = [],
        i;

    for (i = 0; i < 26; i++) {
         var texture = PIXI.Texture.fromFrame('Explosion_Sequence_A ' + (i+1) + '.png');
         explosionTextures.push(texture);
    }

我有:

  componentDidMount(){
    this.renderer = PIXI.autoDetectRenderer(1366, 768);
    this.refs.gameCanvas.appendChild(this.renderer.view);
    this.stage = new PIXI.Container();
    this.stage.width = 400;
    this.stage.height = 400;

    console.log(littlemarioforwardwalkjson)

    PIXI.loader
        .add(littlemarioforwardwalkpng, littlemarioforwardwalkjson)
        .load(()=>this.spriteLoaded());

    // console.log(PIXI.utils.TextureCache);

  }

  spriteLoaded(){
    console.log('yolo');
    var frames = [];
    var index = 0;
    console.log('hello there sailor');
    console.log(PIXI.utils.TextureCache)
    for (var i = 0; i < 3; i++) {
          index = i+46;
          var texture = PIXI.Texture.fromFrame("mario_characters1_"+index+".png");
          marioTextures.push(texture);
     }
  }

我收到的错误是:

Error: the frameId “mario_characters1_46.png” does not exist in the texture cache

这令人沮丧，因为我的texturepacker json 文件正确显示:

{"frames": {

"mario_characters1_46.png":
{
    "frame": {"x":0,"y":0,"w":12,"h":15},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":12,"h":15},
    "sourceSize": {"w":12,"h":15},
    "pivot": {"x":0.5,"y":0.5}
},
"mario_characters1_47.png":
{
    "frame": {"x":12,"y":0,"w":11,"h":16},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":11,"h":16},
    "sourceSize": {"w":11,"h":16},
    "pivot": {"x":0.5,"y":0.5}
},
"mario_characters1_48.png":
{
    "frame": {"x":23,"y":0,"w":15,"h":16},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":15,"h":16},
    "sourceSize": {"w":15,"h":16},
    "pivot": {"x":0.5,"y":0.5}
}},
"meta": {
    "app": "http://www.codeandweb.com/texturepacker",
    "version": "1.0",
    "image": "littlemarioforwardwalk.png",
    "format": "RGBA8888",
    "size": {"w":38,"h":16},
    "scale": "1",
    "smartupdate": "$TexturePacker:SmartUpdate:ae9c1a55b9f5884f4a4c0182ea720ca9:80c341baf7877296bb8143f4c51a5998:383ea93646790c53db2201f0624e779e$"
}
}

如果我 console.log(PIXI.utils.TextureCache) 我得到:

{data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAQCAYAAAB6Hg0eAAAACXBIWXMAAAsTAAALEwEAmpwYAAABUUlEQVRIx6VVPZqFIAxM/DwE1+B1WL5j0NrucWxtPcYr106uwS2yxQobMWB0aVSciTP5QYRikTVU7mGI+BT3lIdXJCmIFqcRVeP1fHN9xXzvrP/dCws46wG/FryLK9cdXpduvkegBE7Xg9vJE02etLhy/y6vE52F5eCMP2txkrg7POSOJDc1UVe4YT72rzZ+4qGU0mpjsj7Q4p7GF13lrGwG1leEYQakyVMiZvf7+1qWWnH5MEi8QwY0ZSsxrY+k7NQ4tUnNzZ8CcIKmRBk/vsFtBtxmxFI5689ZGd85RjbHDJxKc3Xw1coiYfOE7YZaByyPP8yAfesDYllZXznrAez+Yv60h+Xi1CdriJe1KzMg/U74M4aIJxNM1NNfUbn6v4aNhylaoTExISKBIdg+pwaGcJ7IFeKhIlx8TbRqvCVxUqYlPMfVjhO1MM3SiP+PuB9QuQ5f9MhyUAAAAABJRU5ErkJggg==: Texture}

所以看起来错误是说纹理缓存只看到一个图像 Blob - 然而，调用Texture.fromFrame是网站上的示例所说的让它工作的方式，我想我正在重现代码非常紧密。

如果有人有任何想法，请告诉我。

Answer 1

找到一个 React 的例子并不容易，如果这可以帮助别人的话。

import React from "react";

import KingHuman from "./img/kinghuman/Idle/Idle.png";
import KingHumanJson from "./img/kinghuman/Idle/Idle.json";

import * as PIXI from 'pixi.js';
import { Stage, Container, AnimatedSprite } from '@inlet/react-pixi';


const PixiGame = () => {
    const willMount = useRef(true);
    const [textures, setTextures] = useState([]);

    const loadSpritesheet = () => {
        const baseTexture = PIXI.BaseTexture.from(KingHuman);
        const spritesheet = new PIXI.Spritesheet(baseTexture, KingHumanJson);
        spritesheet.parse(() => {
            setTextures( Object.keys(spritesheet.textures).map((t) => spritesheet.textures[t]));
        });
    }

    // Hooks way to do ComponentWillMount
    if (willMount.current) {
        loadSpritesheet();
        willMount.current = false;
    }

    return (
        <Stage width={300} height={300} options={{ backgroundColor: 0xeef1f5 }}>
            <Container position={[150, 150]}>
                <AnimatedSprite
                    anchor={0.5}
                    textures={textures}
                    isPlaying={true}
                    initialFrame={0}
                    animationSpeed={0.1}
                />
            </Container>
        </Stage>
    );
}


export default PixiGame;