# Grid Area Visual Generator

The **Grid Area Visual Generator** is a component designed to visually represent specific grid areas generated in runtime within the Easy Grid Builder Pro 2 system. You can locate this component in: <mark style="color:purple;">**SoulGames > Easy Grid Builder Pro 2 > Scripts > Grid Visuals Scripts**</mark> This component supports dynamic visualization of grid areas on various surfaces, including flat and non-flat terrains. It is versatile for generating rectangular or circular visual indicators and includes customizable materials and effects for enhanced visual feedback.

{% hint style="info" %}
You can attach this component to your **Buildable Objects** to display a unique **underline grid visual** specific to that object. This visual can be dynamically controlled during grid interactions, such as grid mode changes, selection events, and more.
{% endhint %}

<figure><img src="/files/0KX4CtwwPKw3wytDGpqF" alt=""><figcaption></figcaption></figure>

***

## <mark style="color:green;">General Settings</mark>

<table data-full-width="false"><thead><tr><th width="216">Property</th><th width="429.3333333333333">Function</th><th>Required</th></tr></thead><tbody><tr><td>Grid Axis</td><td>Defines the plane of the grid (XZ or XY)</td><td><mark style="color:red;">Yes</mark></td></tr><tr><td>Warp Around Surface Below</td><td>Enables warping of the generated visual indicator to align with underlying surfaces</td><td>No</td></tr><tr><td>Custom Warp Surface Layer Mask</td><td>Specifies which layers are eligible for surface warping</td><td>No</td></tr><tr><td>Raycast Above Offset</td><td>The height above the surface from which raycasting is performed to determine the Warp Surface</td><td>No</td></tr><tr><td>Space Between Visual and Surface</td><td>The distance between to offset the grid visuals from the detected surface (This is used for offsetting the visual slightly to prevent overlapping)</td><td>No</td></tr><tr><td>Update On Position Change</td><td>Determines whether the visuals update dynamically when the component's position changes (If the Visual is static and won't change its position during runtime disable this)</td><td>No</td></tr></tbody></table>

***

## <mark style="color:green;">Area Shape</mark>

<table data-full-width="false"><thead><tr><th width="216">Property</th><th width="429.3333333333333">Function</th><th>Required</th></tr></thead><tbody><tr><td>Shape</td><td>Defines the shape of the generated visual area (Rectangle or Circle)</td><td><mark style="color:red;">Yes</mark></td></tr><tr><td>Cell Size</td><td>Specifies the size of each visual cell. (While this doesn’t have to match your Grid System’s cell size, it is recommended to keep them the same in most cases)</td><td><mark style="color:red;">Yes</mark></td></tr><tr><td>Width</td><td>Number of cells along the width of the visual shape</td><td><mark style="color:red;">Yes</mark></td></tr><tr><td>Length</td><td>Number of cells along the length of the visual shape</td><td><mark style="color:red;">Yes</mark></td></tr><tr><td>Radius</td><td>Radius for circular grid visuals (This is ignored for Rectangular shape)</td><td><mark style="color:red;">Yes</mark></td></tr></tbody></table>

***

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

<table data-full-width="false"><thead><tr><th width="216">Property</th><th width="429.3333333333333">Function</th><th>Required</th></tr></thead><tbody><tr><td>Enable Gizmos</td><td>Toggles the display of debugging gizmos</td><td>No</td></tr><tr><td>Enable Simplified Gizmos</td><td>Displays a simplified gizmo representation (Better for editor performance)</td><td>No</td></tr><tr><td>Gizmo Color</td><td>Sets the color for the debug gizmos</td><td>No</td></tr></tbody></table>

{% hint style="info" %}
If the blue gizmos aren’t visible, ensure that **"Show Gizmos"** is enabled in your Scene view.
{% endhint %}

***

## <mark style="color:green;">Visual Settings</mark>

<table data-full-width="false"><thead><tr><th width="216">Property</th><th width="429.3333333333333">Function</th><th>Required</th></tr></thead><tbody><tr><td>Visual Material</td><td>Material applied to the grid visuals</td><td><mark style="color:red;">Yes</mark></td></tr><tr><td>Cell Image Texture</td><td>The texture used for each cell in the grid visual</td><td><mark style="color:red;">Yes</mark></td></tr><tr><td>Cell Show Color</td><td>Color when the generated visual is visible</td><td><mark style="color:red;">Yes</mark></td></tr><tr><td>Cell Hide Color</td><td>Color when the generated visual is hidden</td><td><mark style="color:red;">Yes</mark></td></tr><tr><td>Cell Show Color HDR</td><td>Similar to the <strong>Cell Show Color</strong> property this one uses an emissive HDR color</td><td>No</td></tr><tr><td>Cell Hide Color HDR</td><td>Similar to the <strong>Cell Hide Color</strong> property this one uses an emissive HDR color</td><td>No</td></tr><tr><td>Color Transition Speed</td><td>Speed of color transitions between show and hide</td><td><mark style="color:red;">Yes</mark></td></tr></tbody></table>

{% hint style="info" %}
In the **Visual Material** property, custom materials cannot be used. Instead, you must use the specific material called **Grid Quad Shader Graph Material**, located in:\ <mark style="color:purple;">**SoulGames > Easy Grid Builder Pro 2 > Misc Assets > Materials**</mark><mark style="color:purple;">.</mark>

This material uses the **Grid Quad Shader Graph** shader, which is specifically designed for these components. If you need multiple versions of this material, simply duplicate it and use the duplicates with the **Grid Area Visual Generator** component.
{% endhint %}

{% hint style="info" %}
For the **Cell Image Texture** property, you can use any of the provided cell textures located in:\ <mark style="color:purple;">**SoulGames > Easy Grid Builder Pro 2 > Misc Assets > Grid Textures > Cell Textures**</mark><mark style="color:purple;">,</mark>\
or you can use any custom cell texture you’ve designed.
{% endhint %}

***

## <mark style="color:green;">Scrolling Noise</mark>

You can apply a **Scrolling Noise** effect to the generated grid visuals, similar to the functionality available in the **Visual - Object Grid** section of your **Easy Grid Builder Pro XZ / XY** components.

<table data-full-width="false"><thead><tr><th width="216">Property</th><th width="429.3333333333333">Function</th><th>Required</th></tr></thead><tbody><tr><td>Use Scrolling Noise</td><td>Enables scrolling noise textures on the generated visuals</td><td>No</td></tr><tr><td>Noise Texture</td><td>The texture used for noise</td><td>No</td></tr><tr><td>Texture Tiling</td><td>Tiling factor for the noise texture</td><td>No</td></tr><tr><td>Texture Scrolling</td><td>Scrolling speed and direction for the noise texture</td><td>No</td></tr></tbody></table>

{% hint style="info" %}
For the **Noise Texture** property, you can use any of the provided noise textures located in: <mark style="color:purple;">**SoulGames > Easy Grid Builder Pro 2 > Misc Assets > Grid Textures > Scrolling Noise Textures,**</mark> or you can use any custom cell texture you’ve designed.
{% endhint %}

## <mark style="color:green;">Interactions And Active Self</mark>

<table data-full-width="false"><thead><tr><th width="216">Property</th><th width="429.3333333333333">Function</th><th>Required</th></tr></thead><tbody><tr><td>Is Attached To A Buildable Object</td><td>Set if the component is attached to a GameObject that has a <strong>Buildable Object</strong> component</td><td>No</td></tr><tr><td>Buildable Object</td><td>If the <strong>Attached To A Buildable Object</strong> property is enabled, a reference to the attached <strong>Buildable Object</strong> component</td><td>No</td></tr><tr><td>Deactivate On Ghost Mode</td><td>If <strong>Is</strong> <strong>Attached To A Buildable Object</strong>, Automatically hides visuals in ghost mode while attempting to place the <strong>Buildable Object</strong> on the grid</td><td>No</td></tr><tr><td>Deactivate After Build</td><td>If <strong>Is</strong> <strong>Attached To A Buildable Object</strong>, Hides visuals after the <strong>Buildable Object</strong> is placed</td><td>No</td></tr><tr><td>Toggle On Select</td><td>If <strong>Is</strong> <strong>Attached To A Buildable Object</strong>, Toggles visibility when the <strong>Buildable Object</strong> is selected</td><td>No</td></tr><tr><td>Toggle On Move</td><td>If <strong>Is</strong> <strong>Attached To A Buildable Object</strong>, Toggles visibility when the <strong>Buildable Object</strong> is moved</td><td>No</td></tr><tr><td>Activate On Default Mode</td><td>Activate the visibility on Grid Mode None (Default)</td><td>No</td></tr><tr><td>Activate On Build Mode</td><td>Activate the visibility on Grid Mode Build</td><td>No</td></tr><tr><td>Activate On Destroy Mode</td><td>Activate the visibility on Grid Mode Destroy</td><td>No</td></tr><tr><td>Activate On Select Mode</td><td>Activate the visibility on Grid Mode Select</td><td>No</td></tr><tr><td>Activate On Move Mode</td><td>Activate the visibility on Grid Mode Move</td><td>No</td></tr></tbody></table>

## <mark style="color:green;">Example Use case</mark>

This component generates a **Visualizable Grid** at runtime using the provided properties. It can be used to:

* Display an underlined grid visual for **Buildable Objects** (e.g., highlighting an object's area) by attaching this to Buildable Objects.
* Highlight specific areas on the grid independently.

This component is highly versatile and fully customizable, allowing you to adapt it to meet your specific requirements.

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

```csharp
namespace SoulGames.EasyGridBuilderPro
```

```csharp
public void SetInputEnableGridAreaVisual()
// Enables the grid area visual by starting the LerpAndEnable() coroutine
```

```csharp
public void SetInputDisableGridAreaVisual()
// Disables the grid area visual by starting the LerpAndDisable() coroutine
```


---

# 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/secondary-components/grid-area-visual-generator.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.