# Setting Up Visual - Object Grid

As you can see, this visual grid method offers a wide range of properties with many customizable options. While we won’t cover all these features in this tutorial, you can find a detailed explanation of each property in the [**Easy Grid Builder Pro XZ / XY Component Guide**](https://soulgamess-studio.gitbook.io/easy-grid-builder-pro-2-documentation/primary-components/easy-grid-builder-pro-xz-xy).

***

## <mark style="color:green;">Primary Properties</mark>

The **Object Grid Prefab** property requires a prefab specifically designed for the **Visual - Object Grid** method. You can find this prefab in:\ <mark style="color:purple;">**SoulGames > Easy Grid Builder Pro 2 > Prefabs > Grid Visuals > Object Grid (Object Prefab)**</mark><mark style="color:purple;">.</mark>

This prefab contains a **Plane** GameObject with the **Grid Plane Shader Graph Material** attached. The material is built with a custom shader designed specifically for the **Object Grid Visuals**, created using Unity's Shader Graph.

The **Cell Image Texture** property allows you to assign an image sprite as the grid texture for the Object Grid. By default, it uses the **Box Rounded** image, but you can replace it with custom images or any textures from:\ <mark style="color:purple;">**SoulGames > Easy Grid Builder Pro 2 > Misc Assets > Grid Textures > Cell Textures**</mark><mark style="color:purple;">.</mark>

### <mark style="color:orange;">Grid Colors Properties</mark>

* **Grid Show Color**: Sets the color of the grid when active. You can customize this to any color you like.
* **Grid Hide Color**: Sets the color of the grid when inactive. By default, the alpha value is set to 0, but you can use any color.
* **Grid Show Color HDR** and **Grid Hide Color HDR**: Add HDR color values for a glowing, emissive look. (To see HDR colors, ensure your scene uses post-processing with Bloom enabled). These are unset by default, and we’ll keep them that way for this tutorial.

### <mark style="color:orange;">Transitioning Colors</mark>

* **Color Transition Speed**: Controls the smooth interpolation between the colors when activating or deactivating the grid during runtime. The default value is **20**.

### <mark style="color:orange;">Vertical Grid Properties</mark>

* **Only Show Active Vertical Grid** and **Always Lock At First Grid**: These are specific to vertical grids and will remain at their default values for this tutorial.

### <mark style="color:orange;">Grid Modes</mark>

Easy Grid Builder Pro 2 offers five grid modes (grid states), which you can toggle during runtime using input keys or UI:

* **Grid Mode None** (Default)
* **Grid Mode Build**
* **Grid Mode Destroy**
* **Grid Mode Select**
* **Grid Mode Move**

By default, the grid starts in **Grid Mode None (Default)** when entering Play Mode. You can control when the **Visual - Object Grid** is active or inactive using the **Display Object Grid On Grid Mode** section. For this tutorial, disable grid visibility in **Grid Mode Default** by turning off the **Grid Mode Default** property, while keeping the other modes enabled.

By doing this, you’ll notice that the grid visual disappears in the Editor. This happens because the default **Grid Mode** in the Editor is **Grid Mode None (Default)**.

To ensure the grid is visible in the Editor, locate the **EditorGridVisualHandlerXY** child object within your **EGB Pro 2 Grid XY** object. This object has a component attached called [**Editor Grid Visual Handler XY**](https://soulgamess-studio.gitbook.io/easy-grid-builder-pro-2-documentation/primary-components/easy-grid-builder-pro-xz-xy/editor-grid-visual-handler-xz-xy), which is responsible for generating the grid visual in the Editor.

This component includes properties like **Active Vertical Grid Index** and **Active Grid Mode**, which are intended for debugging purposes in the Editor and have no effect in Play Mode.

To make the grid visual appear, set the **Active Grid Mode** property to **Build Mode**. After doing this, you’ll see the grid visual show up again because we enabled the **Grid Mode Build** property in the **Display Object Grid On Grid Mode** section.

<figure><img src="https://2651556506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeumhICLT4oHoEIEssOjB%2Fuploads%2FAT30ck7mq8GyDckAOnIK%2Fimage.png?alt=media&#x26;token=8656e041-22b7-468e-b1f4-5b16ed3f564b" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2651556506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeumhICLT4oHoEIEssOjB%2Fuploads%2FIJiayzVNwYdwa46BSkaU%2Fimage.png?alt=media&#x26;token=84f8830a-abde-40fb-8fb8-071fb62a6b71" alt=""><figcaption></figcaption></figure>

### <mark style="color:orange;">Additional Features</mark>

For this tutorial, we won’t use the **Use Alpha Mask** and **Use Scrolling Noise** properties, but you’re welcome to experiment with them on your own. These features will be covered in a later tutorial.