Sprite from texture not showing up

[Specy]

Im using a pixi app to create my own textures (in this case basic rectangles) that i then use in the sprites. Sort of a cache I previously used canvas and converted it to a URL to then use that url as image of the sprite, but i now wanted to convert that to a pixi app to have more "control" of how i create things

I generate the texture like this:

                const g = new Graphics()
                g.beginFill(new Color(noteData.background).rgbNumber())
                g.drawRoundedRect(
                    this.margin / 2,
                    this.margin / 2,
                    Math.ceil(this.noteWidth - this.margin - 1),
                    Math.floor(this.noteHeight - this.margin - 1),
                    radius
                ).endFill()
                const myCache = this.app.renderer.generateTexture(g)

and use it like this in the react component:

<Sprite
        texture={myCache}
/>

But this doesnt show anything in the stage, its all transparent. I tried to use a normal canvas and the pixi instance i used to create the cache and doing this works:

const sprite = new Sprite(myCache
this.app.stage.addChild(sprite)

what could be the issue? i cant find anything in the docs about this

• @inlet/react-pixi version: 6.6.5
• React version: 17.0.2
• ReactDOM version: 17.0.2
• PIXI version: 6.1.3

[inlet]

Not sure why yours isn’t working, but it might be the way you create the actual texture, here’s a working demo:

https://codepen.io/inlet/pen/WNGodOa

[Specy]

https://codepen.io/specy-the-bold/pen/eYeXvdx?editors=0110 Here it shows the problem, i think that the texture needs to come from the same renderer for it to work, i tried to use a third pixi app to render it and then add it to the second app, and that also didnt show up.

Do you know some other feature i could use to get a similar outcome? Im just trying to create my own texture to then use it in a sprite. Alternatively, can i get a reference of the renderer used in the react Pixi stage and then use that to generate the cache?

[inlet]

Sure you can use the useApp hook and get the app renderer:

https://reactpixi.org/hooks#useapp

[Specy]

Forgot to mention that I'm using class components so I'll have to use ref I guess, I'll see what I can do. Thanks for the help!

[Specy]

For anyone which might need this in the future, yes the issue was that you can render only a texture that comes from the same renderer. If you want to create your own cache, get the ref of the app from the stage, then use that to generate the textures