How to create 2D map in unity using single image?

Question

I have to create 2D map in unity using single image. So, i have one .png file with 5 different pieces out of which I have to create a map & i am not allowed to crop the image. So, how do create this map using only one image.

I am bit new to unity, i tried searching but didn't find exactly what i am looking for. Also tried, tilemap using Pallet but couldn't figure out how to extract only one portion of the image.

Answer 1

You can create various Sprites from the given texture on the fly in code.

You can define which part of a given Texture2D shall be used for the Sprite using Sprite.Create providing the rect in pixel coordinates of the given image. Remember however that in unity texture coordinates start bottom left.

Example use the given pixel coordinate snippet of a texture for the attached UI.Image component:

[RequireComponent(typeof(Image))]
public class Example : MonoBehaviour
{
    // your texture e.g. from a public field via the inspector
    public Texture2D texture;

    // define which pixel coordinates to use for this sprite also via the inspector
    public Rect pixelCoordinates;

    private void Start()
    {
        var newSprite = Sprite.Create(texture, pixelCoordinates, Vector2.one / 2f);

        GetComponent<Image>().sprite = newSprite;
    }

    // called everytime something is changed in the Inspector
    private void OnValidate()
    {
        if (!texture)
        {
            pixelCoordinates = new Rect();
            return;
        }

        // reset to valid rect values
        pixelCoordinates.x = Mathf.Clamp(pixelCoordinates.x, 0, texture.width);
        pixelCoordinates.y = Mathf.Clamp(pixelCoordinates.y, 0, texture.height);
        pixelCoordinates.width = Mathf.Clamp(pixelCoordinates.width, 0, pixelCoordinates.x + texture.width);
        pixelCoordinates.height = Mathf.Clamp(pixelCoordinates.height, 0, pixelCoordinates.y + texture.height);
    }
}

---

Or you get make a kind of manager class for generating all needed sprites once e.g. in a list like

public class Example : MonoBehaviour
{
    // your texture e.g. from a public field via the inspector
    public Texture2D texture;

    // define which pixel coordinates to use for this sprite also via the inspector
    public List<Rect> pixelCoordinates = new List<Rect>();

    // OUTPUT
    public List<Sprite> resultSprites = new List<Sprite>();

    private void Start()
    {
        foreach(var coordinates in pixelCoordinates)
        {
            var newSprite = Sprite.Create(texture, coordinates, Vector2.one / 2f);

            resultSprites.Add(newSprite);
        }
    }

    // called everytime something is changed in the Inspector
    private void OnValidate()
    {
        if (!texture)
        {
            for(var i = 0; i < pixelCoordinates.Count; i++)
            {
                pixelCoordinates[i] = new Rect();
            }
            return;
        }

        for (var i = 0; i < pixelCoordinates.Count; i++)
        {
            // reset to valid rect values
            var rect = pixelCoordinates[i];

            rect.x = Mathf.Clamp(pixelCoordinates[i].x, 0, texture.width);
            rect.y = Mathf.Clamp(pixelCoordinates[i].y, 0, texture.height);
            rect.width = Mathf.Clamp(pixelCoordinates[i].width, 0, pixelCoordinates[i].x + texture.width);
            rect.height = Mathf.Clamp(pixelCoordinates[i].height, 0, pixelCoordinates[i].y + texture.height);

            pixelCoordinates[i] = rect;
        }
    }
}

---

Example:

I have 4 Image instances and configured them so the pixelCoordinates are:

• imageBottomLeft: X=0, Y=0, W=100, H=100
• imageTopLeft: X=0, Y=100, W=100, H=100
• imageBottomRight: X=100, Y=0, W=100, H=100
• imageTopRight: X=100, Y=100, W=100, H=100

The texture I used is 386 x 395 so I'm not using all of it here (just added the frames the Sprites are going to use)

so when hitting Play the following sprites are created: