TileView Unreal Engine 5 – Dynamic UI with Blueprints & Structs

TileView Unreal Engine 5 – Dynamic UI with Blueprints & Structs

Published: June 05, 2025 • Series: Widget Blueprint Series • Level: intermediate

unreal ue5 umg tileview ui blueprints widgets structs gamedev hud

This is Rambod, and today we’re building a dynamic TileView system in Unreal Engine 5.
TileView is one of the most powerful UMG widgets: it lets you display arrays of data as a flexible, scrollable grid. Perfect for inventories, menus, galleries, and selection screens.

By the end of this tutorial you’ll have:
✅ A custom struct for your tile data
✅ A Blueprint Object to carry that data
✅ A Tile Entry Widget that displays text + color dynamically
✅ A main widget with a TileView populated at runtime
✅ A working system that scales with your array

1) Creating the Main TileView Widget

  1. In the Content Drawer, right-click → User Interface → Widget Blueprint.
  2. Name it WBP_TileView.
  3. Open it and add a Canvas Panel as root.
  4. Drag a TileView into the Canvas.

TileView settings:

  • Anchor = Center
  • Position X = 0, Y = 0
  • Size X = 300, Y = 200
  • Alignment X = 0.5, Y = 0.5
  • Rename to TileView and check Is Variable.
  • Under List Entry, set Entry Height = 100, Entry Width = 100.

👉 This ensures each tile will be a neat 100×100 block in the grid.

2) Creating the Tile Entry Widget

  1. In TileView’s Entry Widget Class, click the + button to create a new Widget Blueprint.
  2. Name it WBP_TileWidget.
  3. Open it and set Screen Size = Custom, 100×100.
  4. Add an Overlay as root (great for stacking).

Inside the Overlay:

  • Add an Image → rename to Image_Tile, check Is Variable.
    • Alignment = Fill (H + V)
    • Padding = 2
  • Add a Text Block → rename to TextBlock_Tile, check Is Variable.
    • Alignment = Center (H), Bottom (V)
    • Text = “Text”
    • Color = Black

Selection event:

  • In the Graph, under Interfaces, double-click On Item Selection Changed.
  • Print the tile’s text with Print String → helps debug what gets selected.

3) Creating the Tile Struct

  1. Right-click → Blueprints → Structure.
  2. Name it TileStruct.
  3. Add variables:
    • TextDisplay (Text)
    • Color (SlateColor)

👉 This keeps the data clean: each tile has a label and a tint color. You can expand it later (icons, IDs, etc.).

4) Creating a Blueprint Object for Tile Data

  1. Right-click → Blueprint Class → expand → Object.
  2. Name it BP_TileObject.
  3. Open it and add a variable:
    • TileData (TileStruct)
    • Check Instance Editable and Expose on Spawn.

💡 This makes it easy to pass structured data into each Tile entry when creating it.

5) Populating the Tile Data Array

Inside WBP_TileView:

  1. Add a variable Tile_List (Array of TileStruct).
  2. Fill it with about 8 dummy items (different text labels + random colors).

This acts as your data source.

6) Wiring Tile Data into the TileView

In the Graph of WBP_TileView:

  • On Event Construct:
    1. Drag in Tile_List.
    2. Use a ForEach Loop.
    3. For each element:
      • Construct Object from Class → BP_TileObject.
      • Set its TileData to the current struct.
      • Add Item → connect the object to TileView.

👉 Now the TileView will automatically spawn entries for every struct in your array.

7) Binding Data with OnEntryInitialized

  1. Select the TileView → bind On Entry Initialized.
  2. In the Graph:
    • Cast Widget → WBP_TileWidget.
    • Cast Item → BP_TileObject.
    • Get TileData → Break TileStruct.
    • Set TextBlock_Tile → SetText = TextDisplay.
    • Set Image_Tile → Set Brush Tint Color = Color.

✅ Each tile now displays its unique text + color from your array.

8) Showing TileView in the Level

To test it:

  • Open Level Blueprint.
  • On Event Begin Play:
    • Create Widget → WBP_TileView.
    • Add to Viewport.

👉 Run the game: your TileView displays a grid of items, fully driven by your struct array.

9) Subtitle Expansion (Full Tutorial Flow)

“This is Rambod. TileView is a grid-based list widget — perfect for inventories or galleries. Start by creating WBP_TileView and adding a TileView widget, centered at 300×200. Set entry size to 100×100. Create WBP_TileWidget as the entry widget, with an Overlay, Image, and Text Block. The image fills the tile, and the text sits centered at the bottom. Next, create a TileStruct with TextDisplay and Color. Then create BP_TileObject (Blueprint Object) holding a TileData variable of that struct. In WBP_TileView, make a Tile_List array of structs with dummy data. On Construct, loop through the array, construct a BP_TileObject for each, and add it to the TileView. Then bind OnEntryInitialized: cast Widget to WBP_TileWidget, cast Item to BP_TileObject, break the struct, set the text and image tint. Finally, in Level Blueprint, create WBP_TileView on Begin Play and add it to the viewport. Run it: you’ll see a dynamic, data-driven TileView grid. Clean, flexible, and scalable.”

10) Wrap-Up

We’ve built a data-driven TileView system:

  • Custom Struct (TileStruct) → defines data.
  • Blueprint Object (BP_TileObject) → stores struct.
  • Tile Entry Widget (WBP_TileWidget) → shows data.
  • Main Widget (WBP_TileView) → loops and populates grid.
  • Level Blueprint → displays it at runtime.

💡 From here you can expand with:

  • Icons instead of colors
  • Selection highlighting
  • Item actions on click
  • Drag-drop functionality

👉 Watch the full tutorial: YouTube Link
👉 More UI tips: rambod.net
👉 Subscribe: Rambod Dev