canvasspritepixi.jsrender-to-texture

PIXI RenderTexture "use RenderTexture.create instead of the ctor directly" warning


In PIXI.js I am creating texture from custom graphics to be used as a sprite (so I can add interactivity to it. The code looks as follows:

function makeTextureFromGraphics(props) {
  const gfx = new PIXI.Graphics()
  gfx.beginFill(props.fill)
  /* ...make my graphics here... */
  gfx.endFill()

  const texture = new PIXI.RenderTexture(app.renderer, props.size , props.size)
  texture.render(gfx)
  return texture
}

Then I create a texture with customized props and create sprite:

const myTexture = makeTextureFromGraphics(myprops)
const sprite = new PIXI.Sprite(myTexture)
sprite.on('pointerup', pointerUpCallback)

Then I am adding the sprite to app like so:

app.stage.addChild(sprite)

With such setup I get warning:

Please use RenderTexture.create(10, 10) instead of the ctor directly.

Can you please give some hint how to refactor code so it's inline with RenderTexture.create?

In docs I've found example:

let renderTexture = PIXI.RenderTexture.create(800, 600);
let sprite = PIXI.Sprite.fromImage("spinObj_01.png");
renderer.render(sprite, renderTexture);

but it renders sprite from image not from graphics, moreover renderTexture has no reference to my graphics.


Solution

  • Here is the example, that generates texture from graphics without warnings

    var graphics = new PIXI.Graphics();
    graphics.beginFill(0xff22aa);
    graphics.drawRect(0, 0, 50, 50);
    graphics.endFill();
    
    var texture = app.renderer.generateTexture(graphics);
    
    var sprite = new PIXI.Sprite(texture);
    app.stage.addChild(sprite);
    

    https://repl.it/@CurlyBrace/PixiTexture