Javascript PIXI.RenderTexture 无渲染

发布于08月11日

我构建了一个简单的PIXI.js应用程序来实现PIXI.RenderTexture，但它不起作用.

它应该渲染两个正方形的精灵，黑色和白色.黑色的加上常规的stage.addChild:

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

白色的应该渲染为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);

然而，只能看到黑色的正方形.

这可能是什么问题？到底出了什么问题？

Github回购的最小示例:https://github.com/poludnev/test-pixi-render-texture

推荐答案

修好了.我认为这是自动检测渲染器选项的问题，你可以简单地使用应用程序中的渲染器，这应该会起作用:

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);

这是一张demo美元的钞票

我更改了其他一些东西，以最大限度地减少潜在的问题: