Skip to main content
1y ago

Swapping image assets

I'm using Rive in a React app. Using assetLoader in useRive to dynamically load images assets at runtime.

const { rive, RiveComponent } = useRive({
    src: RiveFile,
    stateMachines: 'State Machine 1',
    artboard: 'AvatarElements',
    layout: new Layout({
      fit: Fit.Cover,
      alignment: Alignment.Center,
    }),
    autoplay: true,
    assetLoader: (asset: FileAsset, bytes: Uint8Array) => {
      if (asset.isImage) {
        const imageAsset = asset as ImageAsset;
        if (asset.name === 'Top') {
            setImage(imageAsset, 'specific-top-image.png');
        }
        // etc
        return true;
      }
      return false;
    },
  });

Is it possible to swap the images after the initial load? For example, if a player updates their avatar, it would be nice if I could somehow call setRenderImage again.

2 replies
1y ago

Hey this is already possible! You can just maintain a reference to the asset for example the ImageAsset and at any point call asset.setRenderImage . Here is an example that showcases various different cached assets that are swapped out dynamically: https://github.com/rive-app/rive-wasm/blob/master/wasm/examples/out_of_band_example/index.ts

1y ago

Ha, that seems so obvious in retrospect! Thanks