Creé una aplicación PIXI.js simple para implementar PIXI.RenderTexture y no funciona.
Debería generar dos sprites cuadrados, en blanco y negro. El negro se agrega con stage.addChild normal:
const sprite1 = new PIXI.Sprite(PIXI.Texture.from('bc-sq-200.png')); sprite1.x = 500; app.stage.addChild(sprite1); Se supone que el blanco se renderiza con 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);Sin embargo, solo se puede ver el cuadrado negro.
¿Cual podría ser el problema? ¿Qué está yendo mal?
Ejemplo mínimo de repositorio de Github: https://github.com/poludnev/test-pixi-render-texture
Arreglado. Creo que es un problema con la opción del renderizador de detección automática, simplemente puede usar el renderizador de la aplicación y eso debería funcionar:
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);Aquí hay una demostración
Algunas otras cosas que cambié para minimizar los problemas potenciales:
El setTimeout significa que el png tiene suficiente tiempo para cargar. Debe asegurarse de cargar previamente los activos, el setTimeout fue solo porque es fácil.
El ancho y la altura de mainSprite son importantes
agregó un fondo rojo para que pueda ver más fácilmente los dos cuadros.
Realmente pensé que esto sería una solución de 10 segundos, pero esto me tomó una o dos horas. Definitivamente necesita una mejor documentación para que la relación entre autoDetectRenderer y RenderTexture sea más clara, ya que el código original de OP era casi directo de los documentos.