Vectrosity drawing overlaying the Canvas in Overlay render mode

Unity Engine
1

Hi folks,

I’m working on some kind of feedback for a mouse driven gesture input. I would like to draw a line which represents the mouse movement. The drawing of the line works just fine. But I couldn’t get the drawing in front of the UI which is hold by the canvas in Overlay render mode. Screen space mode kind of solves this, but my former dynamic behavior of positioning is getting distorted.

Is there a reasonable approach to overlay the drawing on the canvas which is in Overlay render mode?

I’m thankful for any reply!

2

Overlay always renders on top of everything. If you want to render 3D objects on top of UI elements you’ll need to use Screen Space - Camera.

3

The VectorLine object of Vectrosity is rendered on a specific camera. Could this provide a point to start out from?

Is there a uGUI Element where a renderTexture can be applied to?

edit: got it working now.

4

The RawImage component can accept any texture type. Also, why not write a custom Vectrocity UI component to put the verts right onto the canvas?

5

It would be nice to develope such an addition to Vectrosity. But I can’t think of a good start for accomplishing this component. I definetly need some inspiration on how to start out.

edit: But still the Screen Space - Camera mod messed up my current UI Layout behavior. It doesn’t react as aspected when I change the screen size.

6

Can you provide more details? Preferrably a screencast showing how the behavior is different when using Screen Space - Camera compared to Screen Space - Overlay. They’re supposed to work the same layout-wise (except for the effects of perspective if you’re not using an orthographic camera).

7

The first image shows the drawing behind the overlay. The second one uses the render mode camera.
I have to reposition the drawing according to the camera’s position and I have to change the layer of the VectorLine’s camera to make it visible.

The problem with the camera render mode is that the sword icon in the middle of that squared pattern won’t hold its relative location if the screen size gets adjusted. The icon is locked to the lower right edge of the squared pattern. After resizing the screen its far off.

Furthermore I need to adjust the position of the drawing manually (pretty much fixed, not dynamic).
Everything works like a charm with the overlay render mode, except the drawing which I want to get on top.

edit. The sword symbol is moved by mouse input.

1760323--111469--01_overlay_rawing_behind.png
1760323--111469--01_overlay_rawing_behind.png1149×586 13.1 KB

1760323--111470--01_overlay_rawing_on_top.png
1760323--111470--01_overlay_rawing_on_top.png1149×586 13.6 KB

8

I can’t see anything from these pictures of why that would happen. I suggested a screencast where you show the behavior because that is often much more informative than just pictures. You can use Jing or similar. Make sure to show the Inspector and Hierarchy too in the screencast, and show the anchoring settings of the various objects; especially the problematic ones.

9

You might ask @Eric5h5 if he has done and/or plans to do this.

10

+1

It would be nice.

Tim C or runevision. Are you considering to have an API to draw basic stuff like it does Vectrosity? Lines, Circles, etc…

11

It has UIVertex and SetVertices. So yes that’s something I’ve been thinking about for Vectrosity.

–Eric

3 Likes
12

This post might also be of interest.

–Eric