Configuring Tile Style

In this guide, you'll learn how to set the tile style and border for your Grid Inventory.

In the Inventory Settings SO file, there's a section called Grid Settings where you can specify the images for your grid style.

Grid Settings area on InventorySettingsSOLoading image

To help you understand the Grid Settings properties, we've included an image that explains how these properties work, making it easier to configure them.

Here's an example illustrating the Grid Settings on the grid:

Grid Settings ExplanationLoading image

Configuring Following the UI Tutorial

Following our UI Tutorial, we'll set up the slot and border for our Inventory.

In our Figma project, we've exported the slot and border as PNGs, which we'll import into Unity. You can create any rectangle in the tool of your choice; we're using Figma.

Figma Slot Border ComponentsLoading image

Importing Slot and Border to Unity

To import these images into Unity, simply drag and drop them into the Project files tab, resulting in the following:

Imported Slot and BorderLoading image

One important step is to make these images re-sizable. Ensure the Sprite Editor is installed in your project.

Changing the Sprites

With the package installed, configure the Border and Slot images using the steps below:

Configuring Border with Sprite EditorLoading image

After making the adjustments, hit Apply to save the changes.

IMPORTANT: Only make these changes to the Border image, not the Slot image, as altering the Slot image can cause issues in the UI. The Slot image should maintain its default values, as shown here:

Slot Sprite Editor default valuesLoading image

(Optional) For better visibility of the grid, set the Filter Mode on the images to Point (no filter).

Referencing to Inventory Settings SO

After configuring the images, reference them in the Inventory Settings SO:

New Grid Images ConfiguredLoading image

That's it! You've successfully configured your grid style. You can now proceed to the next page to continue your setup.