3

I built a simple PIXI.js app to implement PIXI.RenderTexture, and it doesn't work.

It should render two square sprites, black and white. The black one is added with regular stage.addChild:

const sprite1 = new PIXI.Sprite(PIXI.Texture.from('bc-sq-200.png'));
sprite1.x = 500;
app.stage.addChild(sprite1);

The white one is supposed to be rendered with renderTexture:

const sprite2 = new PIXI.Sprite(PIXI.Texture.from('wt-sq-200.png'));
// app.stage.addChild(sprite2);

const renderer = PIXI.autoDetectRenderer();
const renderTexture = PIXI.RenderTexture.create({ width: 700, height: 700 });
renderer.render(sprite2, { renderTexture });

const mainSprite = PIXI.Sprite.from(renderTexture);
app.stage.addChild(mainSprite);

However, only the black square can be seen.

What could be the problem? What is going wrong?

Minimal example Github repo: https://github.com/poludnev/test-pixi-render-texture

Utgarda
  • 686
  • 4
  • 23
Roman Poludnev
  • 95
  • 5

1 Answers1

3

Fixed it. I think it's a problem with the autodetect renderer option, you can simply use the renderer from the app instead and that should work:

let app = new PIXI.Application({
  width: 500,
  height: 256,
  antialiasing: true,
  transparent: false,
  resolution: 1
});

document.body.appendChild(app.view);

//To change the background color
app.renderer.backgroundColor = "0xff0000";
const sprite1 = new PIXI.Sprite(PIXI.Texture.from("public/bc-sq-200.png"));

app.stage.addChild(sprite1);
const sprite2 = new PIXI.Sprite(PIXI.Texture.from("public/wt-sq-200.png"));

sprite2.position.x = 0;
sprite2.position.y = 0;
sprite2.anchor.x = 0;
sprite2.anchor.y = 0;

setTimeout(() => {
  const renderTexture = PIXI.RenderTexture.create({ width: 200, height: 200 });
  console.log(renderer);

  app.renderer.render(sprite2, {
    renderTexture
  });
  const mainSprite = new PIXI.Sprite(renderTexture);
  mainSprite.x = 200;
  mainSprite.y = 0;
  mainSprite.width = 200;
  mainSprite.height = 200;
  app.stage.addChild(mainSprite);
  console.log(mainSprite);
}, 2000);

Here is a demo

Some other stuff I changed to minimize potential problems:

  1. The setTimeout means that the png has enough time to load. You should ensure you pre-load assets, the setTimeout was just because it's easy.

  2. Width and height for mainSprite are important

  3. added a red background so you could more easily see the two boxes.

I really thought this would be a 10 second fix, but this legit took me an hour or two. Definitely needs better documentation to make the relationship between autoDetectRenderer and RenderTexture more clear, since OPs original code was almost straight from the docs.

Sam Spade
  • 1,107
  • 7
  • 20
  • "Definitely needs better documentation." - i think there are already docs about loading assets: "Loading the Image" part in PIxiJS Guides: https://pixijs.io/guides/basics/textures.html . Or Milton Candelero "PixiJS Elementals" tutorial: https://www.pixijselementals.com/#recipe-preloading-assets (everyone should read this whole tutorial as it shows many good practices and tricks :) ). – domis86 Aug 11 '22 at 07:52
  • Or PIXI.Assets feature added recently in PixiJS: https://pixijs.download/release/docs/PIXI.Assets.html - with examples here: https://pixijs.io/examples/#/assets/promise.js – domis86 Aug 11 '22 at 07:54
  • If you use one of above ways then you done need to use "setTimeout" and guessing that it will load in 2 seconds etc :) – domis86 Aug 11 '22 at 07:57
  • @domis86 what needs better documentation is the relationship between renderTexture and getActiveRenderer, because OPs code is basically straight copied from the docs, and it doesn't work. All other changes I made were just to reduce variables and complexities. – Sam Spade Aug 11 '22 at 17:54
  • @SamSpade thanks a lot, your demo help me much. Actually, I tried several times to use timeout and loader in a real project, not in the demo but didn't succeed. The trouble was in the texture size: the actual size of png is around 1500 * 1500 px, and once I set the sprite size to the stage size, got the result immediately. – Roman Poludnev Aug 13 '22 at 11:06
  • addendum to PIXI.Assets feature: there is new Guide about it: https://pixijs.io/guides/basics/assets.html – domis86 Aug 16 '22 at 16:18