# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://soulgamess-studio.gitbook.io/easy-grid-builder-pro-2-documentation/walk-through-tutorial/make-a-2d-city-builder/setting-up-visual-object-grid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.