> For the complete documentation index, see [llms.txt](https://soulgamess-studio.gitbook.io/easy-grid-builder-pro-2-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://soulgamess-studio.gitbook.io/easy-grid-builder-pro-2-documentation/secondary-components/grid-area-visual-generator.md).

# 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="https://2651556506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeumhICLT4oHoEIEssOjB%2Fuploads%2FQK4oNtmls8KN9zTeKznU%2Fimage.png?alt=media&amp;token=ab6c8134-5256-49e3-8b76-d84a17091a09" 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
```