Using RenderTexture

[adamsmasher]

Apologies if this isn't the appropriate place to ask questions:

Is there any way to use a RenderTexture with react-pixi? That is, I'd like to render a react-pixi component to a texture. I've googled around and haven't been able to find any examples of doing this. The custom render function, which seemed like it might be appropriate, requires a Container, which RenderTexture is not.

Thanks!

[inlet]

I believe this is what you’re looking for https://github.com/inlet/react-pixi/issues/328

This is not really related to this lib but more to PIXI itself

[adamsmasher]

If I'm understanding that ticket correctly (apologies if I'm not!), it concerns trying to draw traditional PIXI objects onto a texture and then rendering that texture using React Pixi.

In my case, I have existing React Pixi components that I'd like to render onto a texture. I don't believe I can use app.renderer for that, can I? I'd imagine it only understands true PIXI objects - I can't just invoke app.renderer.generateTexture(<MyReactPixiComponent ... />), can I? TypeScript takes issue with it, at least.

[adamsmasher]

@inlet would just like to clarify here - am I misunderstanding something about that linked issue? Or is there no way to do this with React-Pixi at the moment?

[inlet]

Hi @adamsmasher,

This isn’t implemented in this lib, but you can easily achieve this by ref’ing the display object (I.e Sprite, Container etc) and use imperative pixi code..

pseudo code (not tested):

const MyComp () => {
  const app = useApp();
  const ref = useRef();

  React.useEffect(() => {
    const renderTexture = PIXI.RenderTexture.create({ width: 800, height: 600 });
    app.renderer.render(ref.current, { renderTexture });
  });

  return (
    <MyContainer ref={ref} />
  );
};

Or create a hook for it.

I hope this helps you