React Animated Sprite

[Iustin]

Hi, guys!

I've searched before make this topic but I didn't find any solution for my problem. If there are more topics with this situation I will delete it after someone will help me. Thank you!

I'm new with pixiJs and I'm trying to make a poll game.
I have some animations to display, but in the same time I have some problem displaying them ?.

My problem and question is how I can use the images because when I start the project is looking for them in the root of  the aplication folder (e.g: "http://localhost:3000/image1.png") and if I don't have the image there, is showing me an error.
I have a folder inside src folder named assets and I want there to be the images, not on root folder (because I can't create the build and take the images too). And if is possible to use the json file from local too will be great (now is on a webserver). 

Please help me with this problem, i've tried it in so many ways and with no success.
Thank you! 

This is the piece of code: 

import React, { useEffect, useState } from "react";
import { AnimatedSprite, Container, useApp } from "@inlet/react-pixi";
import * as PIXI from "pixi.js";

const AnimatedAnswer = () => {
const [frames, setFrames] = useState([]);
const app = useApp();

const spritesheet = "https://pixijs.io/examples/examples/assets/spritesheet/fighter.json";

useEffect(() => {
app.loader.reset();
app.loader.add(spritesheet).load((_, resource) => {
setFrames(
Object.keys(resource[spritesheet].data.frames).map((frame) =>
PIXI.Texture.from(frame)
)
);
});
}, []);

if (frames.length === 0) {
return null;
}

return (
<AnimatedSprite
width={200}
height={150}
anchor={0.5}
animationSpeed={0.5}
isPlaying={true}
loop={false}
/>
);
};

export default AnimatedAnswer;

 

[ivan.popelyshev]

> how I can use the images because when I start the project is looking for them in the root of  the aplication folder

if you are trying to "require('src_path/image')" - it wont work. pixi loader does not have any integration with react, and so far i didnt see that anyone did it - people probably too lazy to share

>I have a folder inside src folder named assets and I want there to be the images

webpack copies that folder somewhere to public, right? wherever it copies assets - specify it for pixi loader.

[Iustin]

Thank you @ivan.popelyshevfor your reply. 
Someone help me with this solution: 

import React, { useEffect, useState } from "react";
import { AnimatedSprite, useApp } from "@inlet/react-pixi";
import * as PIXI from "pixi.js";

import frameNew1 from "../assets/frame_apngframe1.png";
import frameNew2 from "../assets/frame_apngframe2.png";
import frameNew3 from "../assets/frame_apngframe3.png";
import frameNew4 from "../assets/frame_apngframe4.png";
import frameNew5 from "../assets/frame_apngframe5.png";
import frameNew6 from "../assets/frame_apngframe6.png";
import frameNew7 from "../assets/frame_apngframe7.png";


const AnimatedAnswer = () => {
  const [frames, setFrames] = useState([]);
  const app = useApp();

  useEffect(() => {
    PIXI.utils.clearTextureCache();
    app.loader.reset();

    app.loader.add(frameNew1);
    app.loader.add(frameNew2);
    app.loader.add(frameNew3);
    app.loader.add(frameNew4);
    app.loader.add(frameNew5);
    app.loader.add(frameNew6);
    app.loader.add(frameNew7).load((_, resource) => {
      setFrames(
        Object.values(resource).map((frame) => PIXI.Texture.from(frame.url))
      );
    });
  }, []);

  if (frames.length === 0) {
    return null;
  }

  return (
	<AnimatedSprite
		width={200}
		height={150}
		anchor={0.5}
		animationSpeed={0.5}
		isPlaying={true}
		loop={false}
	/>
  );
 };
};

export default AnimatedAnswer;

It's took some imports and adds to the loader but in this way react knows where are the assets.

Edited August 3, 2021 by Iustin

[ivan.popelyshev]

does it actually work?

[Iustin]

Yes, is working

[ivan.popelyshev]

Why do you need Texture.from() there?

why not resource[frame].texture  ?

[Iustin]

Not sure why, but seems not working in this way. 

[ivan.popelyshev]

Then you probably dont need loader, only a series of `Texture.fromUrl()` as promises

[Iustin]

@ivan.popelyshev You know any method how I can stop the useTick in react? I didn't find a proper method to do that. If yes, can you please provide me an example? Thank you!