Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice

Question Drawing a Guid/Tilemap in a UI Canvas

Discussion in 'UGUI & TextMesh Pro' started by Finite8, Nov 9, 2023.

  1. Finite8

    Finite8

    Joined:
    Oct 16, 2023
    Posts:
    2
    I'm not sure if I am using the right terminology here, but I am trying to find a way to render some Images in a grid pattern at runtime on a UI Canvas. Essentially I want to be able to specify my own dimensions (i.e: 10x25) and then have some gameobject render within its bounds the given Texture.

    I have tried getting the TileMap as a child to the UI Canvas GameObject but I have been unable to do so. I can see that I can achieve this by creating multiple "Image" gameobjects and positioning them accordingly, but this seems overly complicated for a simple task of throwing onto the screen a 2D image n times. Is there an easier way to achieve this or is this my only option?
     
  2. spiney199

    spiney199

    Joined:
    Feb 11, 2021
    Posts:
    8,204
    Finite8 likes this.
  3. Finite8

    Finite8

    Joined:
    Oct 16, 2023
    Posts:
    2
    I tried using the LayoutGrid, but as it didn't give me control over the actual positioning of the tiles other than the order i put them in, it wasn't much use. Instead I went down the path of using individual objects which works well enough for now.


    Code (CSharp):
    1. public class InvGridRenderer : MonoBehaviour
    2. {
    3.  
    4.     public GameObject templateTile;
    5.     public Vector2Int cellsize;
    6.  
    7.     private class InvGridCell
    8.     {
    9.         public int X, Y;
    10.         public GameObject Obj;
    11.         public InvGridCell(int x, int y)
    12.         {
    13.             X = x;
    14.             Y = y;
    15.         }
    16.     }
    17.  
    18.     private InvGridCell[,] currLayout;
    19.  
    20.     // Start is called before the first frame update
    21.     void Start()
    22.     {
    23.         bool[,] example = { { false, true, false }, { true, true, true } };
    24.  
    25.         SetGrid(example);
    26.     }
    27.  
    28.     public bool requireUpdate;
    29.  
    30.     // Update is called once per frame
    31.     void Update()
    32.     {
    33.         if (requireUpdate)
    34.         {
    35.             if (currLayout != null)
    36.             {
    37.                 foreach (var cell in currLayout)
    38.                 {
    39.                     if (cell != null)
    40.                     {
    41.                         int xOffset = cell.X * cellsize.x;
    42.                         int yOffset = cell.Y * cellsize.y;
    43.                         var trans = cell.Obj.GetComponent<RectTransform>();
    44.                         trans.anchoredPosition = new Vector3(xOffset, -yOffset);
    45.                         Debug.Log("update");
    46.                     }
    47.                 }
    48.             }
    49.             requireUpdate = false;
    50.         }
    51.     }
    52.  
    53.     private InvGridCell[,] buildLayout(bool[,] layout)
    54.     {
    55.         InvGridCell[,] retlayout = new InvGridCell[layout.GetLength(0), layout.GetLength(1)];
    56.         var colcount = layout.GetLength(1);
    57.         for (int y = 0; y < layout.GetLength(1); y++)
    58.         {
    59.             for (int x = 0; x < layout.GetLength(0); x++)
    60.             {
    61.                 if (layout[x, y])
    62.                 {
    63.                     retlayout[x, y] = new InvGridCell(y, x);
    64.                 }
    65.             }
    66.         }
    67.         return retlayout;
    68.     }
    69.  
    70.     void applyLayout(InvGridCell[,] newLayout)
    71.     {
    72.         // this needs to
    73.         // 1. clear/erase the old layout
    74.         // 2. apply the new layout
    75.         if (currLayout != null)
    76.         {
    77.             foreach (var cell in currLayout)
    78.             {
    79.                 if (cell != null)
    80.                 {
    81.                     GameObject.Destroy(cell.Obj);
    82.                 }
    83.  
    84.             }
    85.             currLayout = null;
    86.         }
    87.         if (newLayout != null)
    88.         {
    89.             foreach (var cell in newLayout)
    90.             {
    91.                 if (cell != null)
    92.                 {
    93.  
    94.                     cell.Obj = Instantiate(templateTile);
    95.                     cell.Obj.transform.SetParent(transform, false);
    96.                     cell.Obj.SetActive(true);
    97.                 }
    98.             }
    99.             currLayout = newLayout;
    100.             requireUpdate = true;
    101.         }
    102.     }
    103.     void SetGrid(bool[,] layout)
    104.     {
    105.         var lo = buildLayout(layout);
    106.         applyLayout(lo);
    107.     }
    108. }
     
    spiney199 likes this.