Can't get a sprite animation running in Pixijs on React - json

Question

I am trying to follow along with the Pixijs guide provided here:
https://pixijs.github.io/examples/#/demos/animatedsprite-demo.js
- and after a bit of digging here is the sheet they use for their texture mapper
https://github.com/pixijs/examples/blob/gh-pages/required/assets/mc.json
To get an example up of a simple animated sprite. The issue that I am having is that I am following along almost exactly and I am getting an error - I do not know what is causing the problem and I don't know how to proceed debugging on my own.
The example has:
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);
}
Where I have:
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);
}
}
The error I am getting is:
Error: the frameId “mario_characters1_46.png” does not exist in the texture cache
This is frustrating as my texturepacker json file is displaying correctly:
{"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$"
}
}
If I console.log(PIXI.utils.TextureCache) I get:
{data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAQCAYAAAB6Hg0eAAAACXBIWXMAAAsTAAALEwEAmpwYAAABUUlEQVRIx6VVPZqFIAxM/DwE1+B1WL5j0NrucWxtPcYr106uwS2yxQobMWB0aVSciTP5QYRikTVU7mGI+BT3lIdXJCmIFqcRVeP1fHN9xXzvrP/dCws46wG/FryLK9cdXpduvkegBE7Xg9vJE02etLhy/y6vE52F5eCMP2txkrg7POSOJDc1UVe4YT72rzZ+4qGU0mpjsj7Q4p7GF13lrGwG1leEYQakyVMiZvf7+1qWWnH5MEi8QwY0ZSsxrY+k7NQ4tUnNzZ8CcIKmRBk/vsFtBtxmxFI5689ZGd85RjbHDJxKc3Xw1coiYfOE7YZaByyPP8yAfesDYllZXznrAez+Yv60h+Xi1CdriJe1KzMg/U74M4aIJxNM1NNfUbn6v4aNhylaoTExISKBIdg+pwaGcJ7IFeKhIlx8TbRqvCVxUqYlPMfVjhO1MM3SiP+PuB9QuQ5f9MhyUAAAAABJRU5ErkJggg==: Texture}
So it would seem that the error is saying that the Texture Cache is only seeing one image blob - however, calling Texture.fromFrame is how the example on the website says to get it to work, and I think I am reproducing the code very closely.
If anyone has any ideas please let me know.

Answer 1

It was not easy to find an example with React, if that can help someone.
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;

Answer 2

Yes I also struggled to get information for react on this. Had a sprite sheet without a json and created a function to generate the frame data. Adding on to the other answer is my code snippet
import React, { useRef, useState } from "react";
import KingHuman from "../../assets/mc.png";
import * as PIXI from 'pixi.js';
import { Stage, Container, AnimatedSprite } from '#inlet/react-pixi';
const generateFrames = (animationWidth, animationHeight, rowSize, colSize, fileWidth, fileHeight, imageName) => {
let generated = {
"frames": {},
"meta": {
"app": "Splash Software Assessment",
"version": "1.0",
"image": imageName,
"format": "RGBA8888",
"size": { "w": fileWidth, "h": fileHeight },
"scale": "1",
"smartupdate": ""
}
};
for (let i = 0; i < rowSize; i++) {
for (let j = 0; j < colSize; j++) {
const px = animationWidth * i;
const py = animationHeight * j;
const image = `${imageName}${px}${py}.png`
generated.frames[image] = {
"frame": { "x": px, "y": py, "w": animationWidth, "h": animationHeight },
"rotated": false,
"trimmed": false,
"spriteSourceSize": { "x": px, "y": py, "w": animationWidth, "h": animationHeight },
"sourceSize": { "w": animationWidth, "h": animationHeight }
}
}
}
return generated;
};
const PixiGame = () => {
const willMount = useRef(true);
const [textures, setTextures] = useState([]);
const KingHumanJson = generateFrames(240, 240, 4, 8, 1024, 2048, "mc.png")
const loadSpritesheet = async () => {
const baseTexture = PIXI.BaseTexture.from(KingHuman);
const spritesheet = new PIXI.Spritesheet(baseTexture, KingHumanJson);
const textures = await spritesheet.parse();
setTextures(Object.keys(textures).map((t) => 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;