Estoy creando un juego con PixiJS y necesito usar videos como fondo. Puedo cargar el video y hacer que llene el lienzo, pero cuando se reproduce el video, obtengo un gran impacto en el rendimiento del resto del juego.
He visto algo sobre renderizar el video con su propio teletipo, por lo que no se renderiza a ~60 fps, pero no he podido descifrar cómo agregar varias instancias de teletipo en PixiJS.
Aquí está mi código para el video:
let video = document.createElement('video'); video.preload = 'auto'; video.loop = true; video.autoplay = false; video.src = '../assets/placeholder/VIDEO FILE.mp4'; let texture = PIXI.Texture.from(video); let videoSprite = new PIXI.Sprite(texture); app.stage.addChild(videoSprite);Y aquí está mi código de renderizado:
function render() { app.ticker.add((delta) => { elapsed += delta; gameLoop() }); }¿Es esta la forma correcta de usar texturas de video en PixiJS?
Pude solucionar este problema usando VideoResource y configurando el FPS:
const videoResource = new PIXI.resources.VideoResource(video); videoResource.updateFPS = 30 // set video to render at 30FPS to avoid performance issues let texture = PIXI.Texture.from(videoResource); let videoSprite = new PIXI.Sprite(texture); this.backgroundVideo = videoSprite this.backgroundVideo.height = h this.backgroundVideo.width = w app.stage.addChild(this.backgroundVideo);