I am building a game with PixiJS and need to use videos as the background. I am able to load the video and have it fill the canvas but when the video plays I get a major performance hit on the rest of the game.
I have seen something about rendering the video with its own ticker so it's not rendering at ~60fps but I have not been able to figure out how to add multiple ticker instances in PixiJS.
Here is my code for the 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);
And here is my render code:
function render() {
app.ticker.add((delta) => {
elapsed += delta;
gameLoop()
});
}
Is this the proper way to use video textures in PixiJS?
I was able to fix this issue using VideoResource and setting the 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);