RawImage to world

Questions & Answers
1

Hey everyone,

I have a UI that shows an orthographic view of my terrain, I call it a minimap. The UI also shows a green square raw image on the mini map. The green square’s size and position can be modified through user input via inputfield. The idea is to select a location from the minimap as well as how far and wide this chosen location spans. Once this is configured,a bunch of gameobjects are spawned randomly within that location and area. The issue is that when I spawn a bunch of spheres for example, the spawn location in real world does not reflect the location that the UI shows.

I thought it was as straightforward as rawImage.localPosition.x - (locator.sizeDelta.x/2), so on and so forth to ensure that the min and max range for chosen area is always within bounds. I imagine it is because of the raw image being 2D. How should I go about this?

2

I’m doing something very similar for a minimap in my project, this is the function that I am using to calculate world position given the mouse position (or any other screen space position as an input to this function)

/// <summary>
    /// Get the world positon given a point in screen space
    /// </summary>
    /// <param name="position">Screen position</param>
    /// <returns> Point in world space</returns>
    public Vector3 getWorldPosition(Vector3 position)
    {
        try
        {
            //Get the screen rectangle of the image
            Vector3[] corners = new Vector3[4];
            GetComponent<RawImage>().rectTransform.GetWorldCorners(corners);
            Rect newRect = new Rect(corners[0], corners[2] - corners[0]);
            if (newRect.Contains(position))
            {
                //Do all the fancy scaling
                Vector3 relativeUiMousePosition = corners[0] - position;
               
                float xScale = GetComponent<RectTransform>().lossyScale.x;
                float yScale = GetComponent<RectTransform>().lossyScale.y;               

                float widthScale = GetComponent<RectTransform>().rect.width;
                float heightScale = GetComponent<RectTransform>().rect.height;
                relativeUiMousePosition.x = relativeUiMousePosition.x / (widthScale* xScale);
                relativeUiMousePosition.y = relativeUiMousePosition.y / (heightScale* yScale);
                Vector3 scaledMousePosition = ((relativeUiMousePosition) + new Vector3(0.5f, 0.5f, 0)) * camera.orthographicSize;
                Vector3 textureToWorld = new Vector3(-2 * scaledMousePosition.x, 0, -2 * scaledMousePosition.y);
                return camera.transform.position + textureToWorld;
            }
            return Vector3.zero;
        }
        catch { }
        return Vector3.zero;

    }

I wrote this so long ago that I don’t remember the reasons I had for every line here but it works for me so hopefully this is helpful

3

Thanks for sharing, I found a lot of interesting information here. A really good post, very thankful and helpful that you will write many more posts like this one.