I've a procedurally generated hex tilemap, which is larger than the bounds of the screen (when not zoomed out). What I want to do is create a border around the tilemap.

The tilemap is a child of a Canvas object, because I want to be able to write text to the map. What I've done is place a UI panel as a parent of the hex grid, then added a nine-slice image as a background to the panel. Once the tilemap has been generated, I resize the UI panel using the local bounds of the tilemap. Have tried resizing the panel - borderImage in the code below - various ways (including ContentSizeFitters and HorizontalLayouts on the UI panel) with no success. The image just shows up as a small rectangle in the bottom left-hand corner of the screen.

Bounds bounds = map.localBounds;    
RectTransform uiTransform = borderImage.GetComponentInParent<RectTransform>();
//uiTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, bounds.max.x);
//uiTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, bounds.max.y);
//uiTransform.localScale = new Vector3(bounds.max.x, bounds.max.y, 0);
uiTransform.sizeDelta = new Vector2(bounds.max.x, bounds.max.y);

Placing the border image on the canvas gives me a border around the screen, but what I want is to have the border around the edges of the tilemap.

Thanks in advance for suggestions about how to solve this problem.


1 Answer 1


OK, so the answer to this problem is actually pretty simple (perhaps the reason nobody bothered to reply).

First create a new sorting layer - background - and move it above the default sorting layer. Then create a new empty game object called Background, setting the transform position to match the position of the canvas which contains the Tilemap, minus whatever offset you want to use to display the border. Then add a Sprite Renderer component with your border sprite as sprite.

Background Game Object

Finally, add your Background game object to whatever object is handling the Tilemap generation. As soon as the Tilemap has been generated, just modify the size of the background image to the size of the Tilemap plus the offset for the border to display.

Bounds bounds = map.localBounds;
Vector3 worldMax = bounds.max;
SpriteRenderer backgroundSprite =
backgroundSprite.size = 
    new Vector2(worldMax.x + BorderOffset, worldMax.y + BorderOffset);

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .