Get Input.mousePosition in UI coordinates?

How to get Input.mousePosition in UI coordinates?

Thank you.

 

If you're using a UI canvas, these exist in game space like any other objects, but are mapped to your screen's pixels (unless you're using a fancy 3D UI with world space projection). Since they exist in the same coordinate system as the cursor, the position of the cursor on the UI is just Input.mousePosition.

If you are using a 3D or perspective UI, you'll need to use raycasts with rays generated from your UI camera.

If I'm not understanding correctly, let us know.

 

It's 2D orthographics projection. Canvas render mode is screen space - camera and reference resolution is 480x854.

When I put image size of 100x100 in canvas with lower left corner at 0,0, mousePosition shows 100,100 at upper right corner. If I change screen resolution to 720x1280, mousePosition now shows higher values at upper right corner (not 100,100), but image.rectTransform.sizeDelta.x returns size of 100 no matter what screen resolution is used.

Is it possible to mousePosition returns 100,100 at upper right image corner no matter what screen resolution is used or that image.rectTransform.sizeDelta.x returns the size according to screen resolution (at 480x854 is 100x100, at 720x1280 it will be bigger).

My english is bad, I hope you can undrestand what I'm trying to ask.

Thank you.

 

That makes sense.

Depending on what you have your Canvas Scaler set to, your canvas will/won't scale the UI elements under it when the resolution changes. You might need to change the scaling mode to get what you're looking for. The best way to get an idea of what happens with each setting is to set the editor Game view to Free Aspect and change the size of the view with the UI visible. See here for helpful UI information on variable resolutions.

If you know you want your canvas scaled exactly as it is already, you can simply normalize the mouse position to 100 if you want the upper right corner to always correspond to (100, 100). Divide the mouse position by the total number of pixels in the view (for each dimension), then multiply by 100.

Can you post pictures to help us visualize your problem?

 

I think it would help if you describe what behavior you're trying to create. There may be a simpler way to accomplish it than converting and normalizing coordinates every frame.

 

I want to do this:

On screen is UI Image, and I need to exactly know what part of image is clicked on (no matter what resolution is used).

 

For what purpose though? If you need to designate clickable regions of the image, you can create button sections to click on, which will scale with the image canvas. If there are complex shapes to click on, you can break the single image into multiple images, making each one a button to click on, which will also scale properly.