Large Rive Files Pink before rendering
I have a large rive file I am loading for a cutscene in my HTML game. It seems fine but right before it starts playing it renders pink for several seconds. This happens on shorter ones as well but this is by far the largest file with lots of images.
This is what it looks like:
This is my code to load the cutscene:
static async showCutscene(name, callback = null) {
var bytes = await (await fetch('assets/rive/cutscenes/' + name + '.riv')).arrayBuffer();
this.cutscene = await this.rive.load(new Uint8Array(bytes));
this.cutscene.artboard = this.cutscene.artboardByName('Cutscene');
this.cutscene.artboard.volume = Sound.GetSoundVolume() * 0.01;
this.cutscene.stateMachine = new this.rive.StateMachineInstance(
this.cutscene.artboard.stateMachineByName('State'),
this.cutscene.artboard
);
this.cutscene.callback = callback;
this.cutscene.loaded = true;
}
As soon as the loaded variable is true, I start rendering. I figured the rive.load wouldn't return until the file was ready. Is there something else I need to wait for to ensure it is ready to render?
Thanks!
What version of the runtime are you using and is it the canvas or the webgl2 runtime? Also, are you able to share the .rev so I can take a look in the editor? If you can't share it here, can you send it as a support ticket? https://rive.atlassian.net/servicedesk/customer/portals
I'm guessing that the runtime is having a hard time loading that background image into memory. Right now it's over 11,508px wide and 2256px tall.
I would recommend breaking that image up into smaller images. And if parts of the image repeat, only import a single image to Rive and add two of them to your scene.
Keep in mind that Rive for web renders to an HTML canvas element. When creating images for canvas, try to fit them in blocks that are powers of 2 (8, 1,6 1024, etc.). An image that is 1025 x 1024px will use twice the memory than an image that's 1024 x 1024px.
Thanks, I can improve the loading time, but is there a way to ensure all the images are loaded before rendering? Even smaller files take a split second to load but it's still noticeable.