Sorting sprites and Rive models

Hi everyone, I need help to figure out something about the rendering pipeline and predicates, specifically for the Rive extension.

In my game, I have to use both sprites and rivemodels in the same space. My “player” object has a rivemodel, and all the enemies and background elements are sprites. I am using rendercam to slightly tilt the camera so my 2D elements behave like they have depth, using the method described in this forum post.

Right now, with the render script setup, rivemodels always have to be drawn in front of sprites, unless the sprites use a custom material I made that has a different predicate so they are, on the contrary, always being drawn in front of rivemodels. The problem is that rivemodels and sprites can never interact in a 2.5D fashion because they will always be drawn before or after the rivemodels.

I tried to figure out how everything worked with the documentation but I lack the some knowledge specifically about what is possible with the Rive extension. For example, is it possible to render rivemodels on the same predicate as sprite at all, or is it a technical limitation? I also wonder if swapping materials in runtime could be a solution but I prefer asking your opinion before spending 5 hours breaking my game :sweat_smile:

Thank you in advance!

No, a sprite and a rive model requires vastly different ways of rendering. The current version of the Rive extension also uses a pretty complicated render technique. We are close to releasing an updated version which should be faster and simpler.

@jhonny.goransson and @JCash what is the ETA for merging the updated Rive renderer?

1 Like

I’d say it’s a few days away. We need to update the editor part to match the changes.

1 Like

Thank you for your advice!
I was afraid I would run into problems but actually swapping materials in runtime totally did the job. This works for me since I have only one rive model in my game (the player) but it is a severely limited workaround in a scenario where multiple rive models have to interact. I’ll explain briefly in case anyone wonders how to do :

  • Create render predicates (render.predicate() in your init function) in your render script that is drawn (render.draw() in the update function) before/after the rive model.
  • Copy-paste the relevant material (typically the sprite material) and set their tags accordingly to the predicates you created
  • Use resource.material in a go.property() to get those materials in a script attached to your object
  • Compare the position y value to the one of the rive model and swap to display the object behind or above the rive model