Dynamic Assets

Hi Seth,

Does this grid always have the same number of circles? If so, then yeah, creating multiple asset references is the way to go at the moment. By setting these assets as Referenced rather than Embedded , they won't bulk up your exported .riv file—so no need to worry about file size there (if that was a concern). We’re actually working on a data-binding feature that should make this process much smoother and more intuitive in the future.

If you do plan to have a dynamic number of circles, then one approach here would be to componentize the individual circle as an Artboard, and then dynamically instance it and handle the list placement at runtime. So you'd be using one .riv file, and you only have to swap out one image for each instance.

Thanks for the quick response.

Right now, I was trying to stress test a bit with ~500+ assets, so was trying to avoid having to manually create 500 unique images and then individually assign them within Rive. It sounds like that might be the only way right?

In a real scenario, imagine we have a group of people that enter a drawing. We want to animate the drawing of the winner by showing avatars of people that have entered bouncing around and changing state to the actual winner afterwards. So the number of "circles" may be dynamic (depending how many enter the drawing).

Sounds like this is more of a feature request. It'd be nice to be able to have a single asset but when used it can optionally have it's own unique name/identifier rather than it being shared. Alternatively, it'd be nice to create a shape and add assets to it dynamically. For example, creating a path and then placing an image on that path at run time. That would avoid needing to create assets within rive and just use shapes as placeholders.

The more scalable approach for this is to use a single rive asset/file with one image reference, and then instance that file multiple times at runtime. You can then load in a different image for each using the assetLoader.

However, that means you would have to create the list within your runtime environment, instead of making the list in Rive. Maybe (our iOS DevRel) could show you what that looks like on iOS.

Thanks. , let me know if you have any bandwidth to help illustrate what Adam is referring to here.

The only part I'm not sure if I'm fully understand would be what part would be animated in rive vs in code. For example, lets say there's a particle effects type animation where each node in that effect would be a unique user image.

Hey! Sorry for the delay; some of us are away this week at Devcom. Regarding iOS: are you using UIKit or SwiftUI? That way, I can try and hopefully provide a more helpful example.

No problem. SwiftUI would be preferable.

I think I have a basic example showcasing something you might be interested in. Here's a quick TL;DR:

1. I created a Rive file that contains one referenced asset; in my case, the file and asset are both named color-asset

   1. This file will be re-used multiple times, providing a unique asset each time

2. I created a helper function to generate a new Rive view, reusing the single Rive file, but providing a unique asset for each view

3. I created the desired layout in SwiftUI (in the example, just a VStack containing 3 views)

It's important to note that the size of the image provided matches the size of the asset in the Rive file. In my case, I created a circle that was 300x300, providing jpegs that were 300x300.

This way, you can reuse a single Rive file that is agnostic to the actual asset you'd like to use; that's provided at runtime - the Rive file just provides the layout you'd like to achieve and reuse.

If you have any more questions, do let us know and we'll help how we can.

import SwiftUI
import RiveRuntime

struct ContentView: View {
    var body: some View {
        VStack {
            customView(for: "red")
            customView(for: "green")
            customView(for: "blue")
        }
        .padding()
    }

    @ViewBuilder
    func customView(for color: String) -> some View {
        RiveViewModel(fileName: "color-asset", customLoader: { asset, data, factory in
            if let asset = asset as? RiveImageAsset,
                asset.name() == "color-asset",
               let jpg = Bundle.main.url(forResource: "\(color)-asset", withExtension: "jpg"),
               let data = try? Data(contentsOf: jpg) {
                asset.renderImage(factory.decodeImage(data))
                return true
            }

            return false
        }).view()
    }
}

Thanks for getting back to me. I'll give this a try.

I think this will be fine for evaluating Rive a bit, but ultimately, it won't solve our overall issue since this wouldn't account for the re-used asset being part of a combined animation.

Ultimately, I think our feature request would be to allow for asset references that are optionally unique. This way, we could override all references to a given asset OR have the ability to individually determine individual references to override (which is not currently possible).

Let me know if I should create a separate thread under "Feature Requests" for that.

Feel free to post on the feature request board! Just as with this thread, the more details for your use case, the better. We've been asked to add support for similar functionality, so these kinds of things are something we're tracking internally. We do have some features in the pipeline that should be available by the end of the year that will help make things even more dynamic than they are today, but I don't have a more specific timeline than that to share at this time.