UE5 Dynamic TileView UI

What You Will Build

• A main widget that contains a TileView
• A reusable tile entry widget
• A custom struct for tile data
• A Blueprint Object that carries tile data into the TileView
• A runtime loop that populates the TileView from an array
• An On Entry Initialized setup that fills each tile with dynamic data
• A working grid UI displayed in the level

What TileView Does in Unreal Engine

TileView is a list-style UMG widget designed to display items in a grid-like layout. It works similarly to ListView, but instead of showing items vertically as rows, it arranges them as tiles.

This makes TileView useful for UI layouts where each item has a visual block shape, such as:

• inventory slots
• skill cards
• level thumbnails
• character portraits
• item galleries
• shop products
• save game slots

The important thing to understand is that TileView does not directly display raw structs by itself in the way beginners usually expect. It works with objects. That is why this tutorial uses a Blueprint Object to carry the data into the TileView.

Why Use Structs and Blueprint Objects

A clean TileView setup usually separates data from presentation.

In this tutorial:

• the struct stores the tile data
• the Blueprint Object carries that data as a TileView item
• the entry widget displays the data visually
• the main widget creates and populates the TileView

That separation matters. If you mix all logic directly into visual widgets, the system becomes harder to debug and harder to expand.

Step 1: Create the Main TileView Widget

In the Content Drawer, right-click and create a new Widget Blueprint:

User Interface → Widget Blueprint

Name it:

WBP_TileView

Open the widget and add a Canvas Panel as the root if one is not already present.

Then search for:

TileView

and drag it into the Canvas.

Step 2: Configure the TileView Layout

Select the TileView widget and configure it for a simple centered layout.

Example settings:

Anchor = Center
Position X = 0
Position Y = 0
Size X = 300
Size Y = 200
Alignment X = 0.5
Alignment Y = 0.5

Rename the widget to:

TileView

and make sure:

Is Variable = true

This is important because you need to access it later in the Graph to add items at runtime.

Step 3: Set Entry Size

In the TileView settings, configure the entry size.

Example:

Entry Height = 100
Entry Width = 100

This gives every tile a predictable square size.

You can adjust these values later depending on your UI design. For inventories, you may want smaller slots. For character portraits or level cards, you may want larger tiles.

Step 4: Create the Tile Entry Widget

The TileView needs an entry widget class. This is the widget that will be created for each tile item.

Create a new Widget Blueprint named:

WBP_TileWidget

Open it and set the preview size to:

Custom
Width = 100
Height = 100

This matches the TileView entry size.

Step 5: Build the Tile Entry Layout

Inside WBP_TileWidget, add an Overlay as the root layout.

An Overlay is useful because it lets you stack visual elements on top of each other. For a tile, that is usually exactly what you want.

Add an Image to the Overlay and rename it:

Image_Tile

Enable:

Is Variable = true

Set it to fill the tile and give it a little padding.

Then add a Text Block and rename it:

TextBlock_Tile

Enable:

Is Variable = true

Place the text near the bottom center of the tile.

Why the Entry Widget Needs Variables

The Image and Text Block need to be variables because you will update them dynamically later.

If Is Variable is disabled, the Graph cannot easily access those widgets to set text, color, or style.

This is a common beginner mistake in UMG. If you cannot find a widget in the Graph, check Is Variable first.

Step 6: Add a Selection Debug Event

In the WBP_TileWidget Graph, use the list entry interface event:

On Item Selection Changed

For debugging, connect it to a Print String.

This helps confirm that item selection is working and that the TileView is properly interacting with your entry widgets.

Step 7: Create the Tile Data Struct

Now create a struct to store the data for each tile.

In the Content Drawer, create:

Blueprints → Structure

Name it:

TileStruct

Add these variables:

TextDisplay = Text
Color = SlateColor

This struct now represents the data for one tile.

Why a Struct Is Better Than Loose Variables

A struct keeps related data together.

Instead of managing separate arrays like one array for names and one array for colors, each tile gets one clean data package.

This scales much better when you add more fields later, such as:

• icon
• item ID
• description
• rarity
• price
• unlock state
• selection state

Step 8: Create a Blueprint Object for Tile Data

TileView items are object-based, so create a Blueprint Object that will carry your struct data.

Create a new Blueprint Class and choose:

Object

Name it:

BP_TileObject

Open it and add a variable:

TileData = TileStruct

Then enable:

Instance Editable = true
Expose on Spawn = true

Why TileView Uses Objects

TileView is designed around object entries. That means it expects objects as items, not simple raw values.

The Blueprint Object acts as a wrapper around your struct. This makes the data compatible with the TileView system while still letting you keep the actual tile information clean and structured.

Step 9: Create the Tile Data Array

Go back to:

WBP_TileView

Create a new variable named:

Tile_List

Set the type to:

TileStruct

Then convert it into an array.

This array is your data source.

Step 10: Add Sample Data

Add several entries to the Tile_List array.

Example labels:

Tile One
Tile Two
Tile Three
Tile Four
Tile Five
Tile Six
Tile Seven
Tile Eight

Give each entry a different color if you want the result to be easy to inspect visually.

In a real project, this data could come from a Data Table, Save Game, backend response, inventory component, or any runtime system.

Step 11: Populate the TileView at Runtime

In the Graph of WBP_TileView, use:

Event Construct

Then get the Tile_List array and run a:

ForEach Loop

For each item in the array:

1. Construct Object from Class
2. Set the class to BP_TileObject
3. Pass the current TileStruct into TileData
4. Add the created object to the TileView using Add Item

How the Runtime Population Works

This is the important logic:

1. The widget constructs.
2. The Tile_List array is looped.
3. Each struct becomes a BP_TileObject.
4. Each BP_TileObject is added to the TileView.
5. The TileView creates visual entries as needed.

That is the correct data-driven flow.

Step 12: Bind On Entry Initialized

The next step is making sure each visual tile receives its data.

Select the TileView and create the event:

On Entry Initialized

This event gives you access to:

• the widget that was created
• the item object associated with it

This is where you connect the data object to the visual tile widget.

Step 13: Cast the Widget and Item

Inside On Entry Initialized:

Cast the Widget to:

WBP_TileWidget

Cast the Item to:

BP_TileObject

Once both casts succeed, get TileData from BP_TileObject and break the TileStruct.

Step 14: Set Text and Color Dynamically

From the broken TileStruct:

• connect TextDisplay to Set Text on TextBlock_Tile
• connect Color to Set Brush Tint Color on Image_Tile

Now each tile uses its own data instead of hardcoded placeholder text.

Why On Entry Initialized Is Important

TileView widgets are generated dynamically. You should not treat them like manually placed UI widgets.

On Entry Initialized is the point where the TileView gives you a real entry widget and its item object. That is the correct time to push item data into the visual widget.

If you try to manually control every tile without respecting TileView’s entry flow, your setup becomes fragile fast.

Step 15: Display the TileView in the Level

Open the Level Blueprint.

On Event Begin Play:

Create Widget → WBP_TileView
Add to Viewport

Press Play.

You should now see your dynamic TileView grid displayed on screen.

What the Final Result Should Show

If everything is working correctly, the TileView should display multiple tiles in a grid.

Each tile should show:

• its own text
• its own color
• the same reusable visual layout

This proves your TileView is driven by data, not manual widget placement.

Why This Architecture Is Better

This setup is much better than manually creating tiles because it separates responsibility:

• TileStruct defines the data
• BP_TileObject wraps the data for TileView
• WBP_TileWidget displays one item
• WBP_TileView owns the TileView and population logic

That makes the system easier to extend and debug.

Common Problem: TileView Is Empty

If nothing appears, check:

• Did you add items to Tile_List?
• Did Event Construct run?
• Did you call Add Item on the TileView?
• Is TileView marked as variable?
• Is Entry Widget Class set correctly?

Most empty TileView bugs come from missing Add Item or missing Entry Widget Class.

Common Problem: Tiles Show But Data Is Missing

If tiles appear but text or color does not update, check:

• Is On Entry Initialized wired?
• Does the Widget cast to WBP_TileWidget succeed?
• Does the Item cast to BP_TileObject succeed?
• Are TextBlock_Tile and Image_Tile marked as variables?
• Are you breaking the correct struct?

Common Problem: Cast to BP_TileObject Fails

If the item cast fails, you are probably adding the wrong object type to the TileView.

Make sure you are using:

Construct Object from Class → BP_TileObject

and adding that object to the TileView, not the raw struct.

Common Problem: Entry Widget Size Looks Wrong

If the tile size looks wrong, check both:

• TileView Entry Width and Entry Height
• WBP_TileWidget custom preview size and internal layout

These should match closely while testing.

How to Expand This System

Once the basic version works, the system can be extended into a much more practical UI.

Possible upgrades include:

• icons instead of plain colors
• item rarity borders
• selection highlight states
• hover effects
• tooltips
• click actions
• drag and drop
• Data Table-driven items
• inventory integration
• save and load support

Where TileView Is Most Useful

This setup is especially useful for:

• inventory grids
• level selection screens
• character selection screens
• shop menus
• card collections
• achievement galleries
• build menus in strategy games
• equipment selection UI

Any time you have repeated UI items generated from data, TileView is worth considering.

Conclusion

In this tutorial, you created a dynamic TileView UI system in Unreal Engine 5 using UMG, Blueprints, a custom struct, and a Blueprint Object. You built a main TileView widget, created a reusable entry widget, prepared structured tile data, converted that data into TileView item objects, populated the TileView at runtime, and initialized each tile with its own text and color.

This is the correct foundation for scalable grid-based UI in Unreal Engine. It is cleaner than manual widget placement and much easier to expand for real gameplay systems.

Watch the full video on YouTube: TileView Unreal Engine 5 – Dynamic UI with Blueprints & Structs

More Unreal Engine tutorials: rambod.net

Subscribe for more Unreal Engine UI tutorials: Subscribe to Rambod on YouTube

Resources

• YouTube Tutorial
• More Unreal Engine Tutorials
• Rambod Dev YouTube Channel

Frequently Asked Questions

What is TileView in Unreal Engine?

TileView is a UMG widget that displays object-based entries in a grid-style layout. It is useful for inventories, menus, galleries, selection screens, and other repeated item interfaces.

Why do I need a Blueprint Object for TileView?

TileView expects object items. A Blueprint Object is a clean way to wrap your struct data so it can be added to the TileView.

Can TileView display structs directly?

Not in the same clean way as object entries. The better workflow is to store data in a struct, wrap it in a Blueprint Object, and add that object to the TileView.

What is On Entry Initialized used for?

On Entry Initialized gives you access to the generated entry widget and the item object, allowing you to push the object data into the visual tile.

Can I use TileView for an inventory system?

Yes. TileView is a strong choice for inventory grids because it can generate item entries dynamically from data.

How can I expand this TileView system?

You can add icons, item IDs, descriptions, rarity colors, tooltips, click events, selection highlights, drag and drop, and Data Table integration.