I am having hard times to make pixi.js work in react...
Can someone explain me how to get loader in react component?
I have tried withconst pixiApp = useApp();
and const loader = new PIXI.Loader();
but I am unable to get loader - it does not exists.
here is my component where whole point of it is to render images from .json file- spritesheet:
import React, { useEffect, useState } from "react"; import { AnimatedSprite, useApp } from "@pixi/react"; import * as PIXI from "pixi.js"; import HeroJSON from "../assets/sprites/hero/hero.json"; const AnimatedSpriteComponent = ({ xPropPos, yPropPos }) => { const [frames, setFrames] = useState([]); const pixiApp = useApp(); console.log("pixiApp: ", pixiApp); const spritesheet = HeroJSON; console.log(" spritesheet: ", spritesheet); useEffect(() => { const loadTextures = async () => { const loadedFrames = []; await new Promise((resolve) => pixiApp.loader.add(spritesheet).load((_, resource) => { const frames = Object.keys(resource[spritesheet].data.frames).map( (frame) => PIXI.Texture.from(frame) ); loadedFrames.push(...frames); resolve(); }) ); setFrames(loadedFrames); }; loadTextures(); }, [pixiApp.loader, spritesheet, pixiApp]); if (frames.length === 0) { return null; } return ( <AnimatedSprite anchor={0.5} textures={frames} isPlaying={true} initialFrame={0} animationSpeed={0.1} width={100} height={70} x={xPropPos} y={yPropPos} /> ); }; export default AnimatedSpriteComponent;
here is console log form 8th line:
pixiApp:
_Application2 {stage: _Container2, renderer: _Renderer2, _ticker: _Ticker2, stop: ƒ, start: ƒ, …}
cancelResize:null
queueResize:null
renderer:null
resize:null
stage:null
start:() => { this._ticker.start(); }
stop:() => { this._ticker.stop(); }
_resizeId:null
_resizeTo:null
_ticker:null
so there is no loader, and everything is empty?