Overlay canvas and world space coordinates

I'm looking for good and reliable ways of translating coordinates between screen space (and overlay canvas) position and vice versa, that also take canvas scaling into consideration.

My common use cases are:

1. Translate mouse position to world position.
2. Translate game object position from the world to overlay position in order to place UI element near that object.
3. Translate anchored overlay UI element to world position.

For case 1 I use Camera.main.ScreenToWorldPoint(Input.mousePosition) and it seems to work okay for my purposes.

For case 2 I use RectTransformUtility.WorldToScreenPoint(Camera.main, obj.transform.position);

For case 3 I use Camera.main.ScreenToWorldPoint(rectTransform.transform.position) and it seems to give good results.

Are there any officially advised ways of translating between overlay canvas and world space coordinates?

 

this is the best way to translate between these two coordinate systems.

You could do a Matrix 4x4 transform, but it's alot more complicated than the provided Unity Methods

 

Hallelujah! I've been fighting with case 3 for a little while now. Appears to work for mapping an object in world space to a point on the overlay UI.

The only issue I had is that it maps my sprite to the depth (z) of the camera, and the sprite won't render that way initially. Easy to work around. Does anyone know of a built-in fix?

 

I just want to say I keep coming back to this post. So helpful.

 

I found this after a couple years because i was having a problem with the conversion between world coordinates back to screen coordinate position..

WorldToScreenPoint is slightly off!

When canvas scaler mode is set to: stretch to screen size

The problem is that the canvas screen point is not actually the same screen size as the current resolution... the canvas screen size is more like, the best optimized view screen resolution... under the stretch parameters you can see the variables for Reference Resolution.. this is the resolution of the canvas.

A better explanation of CANVAS SCALING is by using my most recent problem...


Quick Description of my problem:
I was using the Canvas to display a sprite ( a healthbar) which floats over all the characters. The problem however, was when i tried to obtain the WorldToScreenPoint it kept giving a result that was slightly off.... for example: the healthbar looked a little okay when the character was immediately in front of the camera... but as the character walks to the edge of the camera's fulstrum, the screens x,y placement becomes more and more incorrect.

Days and days of research and trying different combinations finally showed me that maybe there is a scaling issue which pointed me to look at **Canvas / Canvas Scaler / scaling mode: scale with screen**

Originally, this worked wonderfully when i had only 1 character and his healthbar stayed stuck to the top of the screen like old classic double dragon games. BUT when i made the decision to have many characters and they all need "floating healthbars", i didnt come back to re-evaluate whether this option needed to change.

**Setting the canvas Scaler to: keep constant pixel size**
, fixes the problem and i now have the correct WORLDtoSCREENpoint that i needed! And now the healthbar floats beautifully above the characters...

BUT WAIT, ANOTHER PROBLEM! Now, if the screen resolution is small... the Ui sprite is obsurdly large..... and if the screen resolution is high definition then Ui sprite is way too small!

QUESTION: So how do i use the "scale with screen size" mode, but yet also still get back a correct WorldToScreenPoint?

ANSWER: you must take into consideration the overal scaling of the canvas when it is stretched to fit (whatever current resolution that you are using)

INSTEAD OF:

Code (CSharp):

1.    RectTransform myRect = GetComponent<RectTransform>();
2.     Vector2 myPositionOnScreen = Camera.main.WorldToScreenPoint (myOwner);
3.     myRect.anchoredPosition = myPositionOnScreen

YOU CALCULATE THE OVERALL SCALE FACTOR LIKE THIS:

Code (CSharp):

1. RectTransform myRect = GetComponent<RectTransform>();
2.         Vector2 myPositionOnScreen = Camera.main.WorldToScreenPoint (myOwner);
3.  
4.     Canvas copyOfMainCanvas = GameObject.Find ("Canvas").GetComponent <Canvas>();
5.     float scaleFactor = copyOfMainCanvas.scaleFactor
6.  
7.     Vector2 finalPosition = new Vector2 (myPositionOnScreen.x / scaleFactor , myPositionOnScreen.y / scaleFactor);
8.     myRect.anchoredPosition = finalPosition;

If this helped anyone please log in to give me a thumbs up....

 

Great answer @karma0413. Thanks a lot!

 

Thanks for this thread! and this reply!

@karma0413, One question though. This doesn't work when I assign this to "RectTransform.AnchoredPosition".
Don't I need to use below?
Vector2 myPositionOnScreen = Camera.main.WorldToViewportPoint(myOwner);

Code (CSharp):

1.  
2.  
3.  public static Vector2 GetAnchoredPositionFromWorldPosition(Vector3 _worldPostion, Camera _camera,  Canvas _canvas)
4.         {
5.             //Vector2 myPositionOnScreen = _camera.WorldToScreenPoint(_worldPostion); // for transform.position?
6.             Vector2 myPositionOnScreen = _camera.WorldToViewportPoint(_worldPostion); //for RectTransform.AnchoredPosition?
7.             float scaleFactor = _canvas.scaleFactor;
8.              return new Vector2(myPositionOnScreen.x / scaleFactor, myPositionOnScreen.y / scaleFactor);
9.         }
10.  
11.  

 

work with me

 

Hello everyone, sorry for replying to this old topic but Im stuck and I cant find a proper solution.

Apparently case 3 is not working for me, It looks like the issue is with the canvas render mode ( Im using Screen Space-Camera ).
Do you guys know how to solve it?

Thank you very much

 

Hope the Thread is not to old for answering. Just pops up when you search UI and WorldSpace issues.
None of the solutions worked for me.
I have some UI Icons and I want a worldSpace gameObject flys to the position.

My best solution so far is:

Code (CSharp):

1. Vector2 myPositionOnScreen = Camera.main.ViewportToWorldPoint(gameObject.transform.position);
2. Vector3 finalPosition = new Vector3(myPositionOnScreen.x, myPositionOnScreen.y * 3, 0f);

The x coordinate is kind of accurate but the y position is around 3 times to small. Was also checking the _canvas.scaleFactor, which is around 1.5f in my case so it's not covering my case here.

If someone knows the "right way" I would appricate it!

 

@allpublic

"I have some UI Icons and I want a worldSpace gameObject flys to the position."

So which canvas type are you using?

Screen Space - overlay canvas, or perhaps some other canvas type?

Remember, when you are working with UGUI, you are working Canvas space, and most likely is different for different canvas types.

It probably would be better to ask this in your own thread, with detailed information about your setup.