无法在 React 上的 Pixijs 中运行精灵动画

Posted 2023-02-22

【中文标题】无法在 React 上的 Pixijs 中运行精灵动画

【英文标题】：Can't get a sprite animation running in Pixijs on React

【发布时间】：2018-01-21 02:38:27

【问题描述】：

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

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

举一个简单的动画精灵的例子。我遇到的问题是我几乎完全按照我的要求进行操作，但我遇到了一个错误 - 我不知道是什么导致了问题，也不知道如何自行进行调试。

例子有：

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 是网站上的示例所说的让它工作的方式，我想我正在复制代码非常紧密。

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

【问题讨论】：

问题似乎是在执行代码时调用函数，而不是在精灵表加载后。你有没有试过改变这个：load(()=>this.spriteLoaded()) 这个load(this.spriteLoaded)？ load() 方法只需要你想在资源准备好时执行的函数，但你现在是在运行时调用该函数。

我在 load 调用上尝试了所有不同类型的迭代，因为这是一个常见的问题。尚未解决问题。

这里提供了答案github.com/pixijs/pixi.js/issues/4223

【参考方案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;