Quantcast
Channel: Pixi.js Latest Topics
Viewing all articles
Browse latest Browse all 3981

PIXI.Loader() not working in React.js - Need Help!

$
0
0

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?


Viewing all articles
Browse latest Browse all 3981

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>