Interact with Rive on a Canvas

[BitBarrel]

How do I send mouse input to Rive when the renderTexture is on a Canvas?

The examples provided only deal with Rive being drawn as a camera overlay or on a 3D object. However, when the renderTexture is on a Canvas, there are several things to consider:

-The Rect transform should be taken into account as the renderTexture can stretch and be positioned according to screen resizing.

-An image on a Canvas has no mesh collider. Raycasts are handled differently. The raw image component has a "Raycast Target" option and it does not detect a raycast using Physics.Raycast. I think it should be handled with EventSystem.current.RaycastAll()

I tried a bunch of things but I could not get it to work.

As mentioned in my latest point in the API Feedback thread, sending mouse interaction to Rive should be handled totally by the API, similar to how NoesisGUI does it. Currently, it requires way too much coding and the examples do not work for all use cases (Canvas).

Here is an example of my setup:

[damzobridge]

If you're working with URP, this is the approach I've used. I'm using the new input system, but you can convert it to the legacy input system if needed.

You'll need to place that within a Screen Space canvas.

Configuring the RiveCanvasImage Script

• Rive Asset: Drag your .riv file from the Assets folder to the Rive Asset field in the script component.
• Fit & Alignment: Configure how the Rive content fits within the view.
• RawImage: Assign the RawImage component attached to the game object if empty.
• RenderTexture Size: Enter the size for the RenderTexture used for the Rive asset. This controls the resolution of the RenderTexture.
• Pointer Action: I recommend using the default UI/Point input action that’s created when you set up your Input Actions Asset with the New Input system. The RiveCanvasImage uses this to track the pointer's screen position and relay it to the Rive assets. If you don’t see any options in the asset picker, you’ll need to make sure you’ve created an Input Actions Asset .

[BitBarrel]

Thanks, much appreciated.

[BitBarrel]

@damzobridge

I tried the script but I am getting z-fighting. Any idea how to solve it?

[damzobridge]

@damzobridge

I tried the script but I am getting z-fighting. Any idea how to solve it?

Could you share a bit more about how you're implementing it (render pipeline, settings, repro etc.) and where the z-fighting is happening? E.g The script was intended as an alternative to the RiveScreen.cs script, so it's usually meant to fill the screen.

[BitBarrel]

The z-fighting is happening at the bottom of the screen (from about halfway). I use the script to fill the screen, not in 3D space. Not all riv files cause z-fighting but it seems all of them are cut off from halfway down. In the repo I made, I used the minion riv file and although it doesn't cause z-fighting, half of it is cut off.

If you re-size the game view window in Unity, you will see that the cut-off part will intermittently be shown.

The cut off / z-fighting happens in OpenGL (Android and Windows), but not with Dx11. Although in Dx11, the rive elements are all offset.

Repo here: RiveURP.zip

Edit: it might be a Rive bug though. See the new issues I reported related to Direct3D11 and OpenGLCore.

[damzobridge]

Thanks for sending the repro over. I tested it on a mac with Metal, and your sample project seem to work fine, I'm not seeing any cut-off parts or z-fighting in the example.

Based on the details you've provided, I'll have to test on a Window's editor soon as well, but yeah , if that doesn't work, it might be a lower-level rendering issue.

[BitBarrel]

Thanks for looking into it. Hopefully they can fix it if it is a low level issue.