# Easy Grid Builder Pro XZ / XY

This component handles all Easy Grid Builder Pro grid-based functionalities for the **XY** and **XZ Axes.** These are the cornerstone components for manipulating grid data in Easy Grid Builder Pro. These components define how the grid is oriented in your project:

* **XZ Axis**: Uses the X and Z coordinates, ideal for 3D games, top-down views, or horizontal layouts
* **XY Axis**: Uses the X and Y coordinates, perfect for 2D games, side-view or vertical layouts

{% hint style="info" %}
Both these components function almost identically, with their main difference being the axis configuration. For simplicity, this documentation will focus on the **Easy Grid Builder Pro XZ Component**. However, rest assured that the same features and functionalities also apply to the **Easy Grid Builder Pro XY Component**.
{% endhint %}

You can find these two core grid scripts in the following directory:\ <mark style="color:purple;">**SoulGames > Easy Grid Builder Pro 2 > Scripts > Core Grid Scripts > Grid Core**</mark>

These scripts are attached to the **EGB Pro 2 Grid XZ** and **EGB Pro 2 Grid XY** prefabs, which are available here:\ <mark style="color:purple;">**SoulGames > Easy Grid Builder Pro 2 > Prefabs**</mark>

<figure><img src="https://2651556506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeumhICLT4oHoEIEssOjB%2Fuploads%2FLmqSMpn7WzcG3WnakqJX%2Fimage.png?alt=media&#x26;token=a440db45-27ca-49fe-9bff-018030ccc529" alt=""><figcaption></figcaption></figure>

***

## <mark style="color:green;">Core Grid Properties</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 Unique ID</td><td>The unique ID of this specific Grid.</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Update Grid In Editor</td><td>Enable grid updates directly in the Unity Editor</td><td>No</td></tr><tr><td>Gird Width</td><td>Width of the grid (Number of cells along the first axis)</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Grid Length</td><td>Length of the grid (Number of cells along the second axis)</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Cell Size</td><td>Size of a single grid cell (1 Unit = 1 Unity unit)</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Update Grid Position</td><td>Enable grid position updates during runtime.</td><td>No</td></tr><tr><td>Grid Origin</td><td><p>Sets the grid origin to <strong>Centered</strong> or <strong>Default</strong>.</p><ul><li><strong>Centered</strong>: Commonly used in most cases.</li><li><strong>Default</strong>: Used when "Update Grid Width and Length" is enabled.</li></ul></td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Update Grid Width and Length</td><td>Enable runtime updates for grid width and length.</td><td>No</td></tr><tr><td></td><td></td><td></td></tr><tr><td>Active Camera Mode</td><td>Displays the current active camera mode, useful for quick debugging.</td><td>No</td></tr><tr><td>Active Grid Mode</td><td>Displays the current active grid mode for this grid system, useful for quick debugging.</td><td>No</td></tr><tr><td>Active Grid Origin</td><td>Displays the active grid origin in world space, useful for debugging.</td><td>No</td></tr><tr><td>Active Object SO</td><td>Displays the currently active Object SO asset, useful for debugging.</td><td>No</td></tr><tr><td>Active Vertical Grid Index</td><td>Displays the current active vertical grid index, useful for debugging.</td><td>No</td></tr></tbody></table>

{% hint style="success" %}
When adding a new Grid System to your scene, ensure you generate a unique Grid ID. Whether you're using the **EGB Pro 2 Grid XZ** or **XY** prefabs or adding the Grid System manually, click the **Refresh** button on the right to generate a new Grid Unique ID.
{% endhint %}

***

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

This is where you add your prepared Buildable SO assets. All added assets can be placed on the grid during runtime and can also be added or removed dynamically (refer to the API documentation for more details).

<figure><img src="https://2651556506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeumhICLT4oHoEIEssOjB%2Fuploads%2FnnPTwIPNAEWnYRwa2ZnS%2Fimage.png?alt=media&#x26;token=59cec3d8-eab6-4a15-b0eb-740cc8c341fb" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214.33333333333331">Property</th><th width="416">Function</th><th>Required</th></tr></thead><tbody><tr><td>Buildable Grid Object SO List</td><td>List of Buildable Grid Object SO assets.</td><td>No</td></tr><tr><td>Buildable Edge Object SO List</td><td>List of Buildable Edge Object SO assets.</td><td>No</td></tr><tr><td>Buildable Corner Object SO List</td><td>List of Buildable Corner Object SO assets.</td><td>No</td></tr><tr><td>Buildable Free Object SO List</td><td>List of Buildable Free Object SO assets.</td><td>No</td></tr></tbody></table>

***

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

Vertical grids enable the creation of additional grids above the base grid, allowing for object placement on vertical levels, such as multi-floor buildings or unique modular designs.

<figure><img src="https://2651556506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeumhICLT4oHoEIEssOjB%2Fuploads%2FaKpQ1vR3TrOAZh1cgP9g%2Fimage.png?alt=media&#x26;token=66671de0-e058-4283-b056-f36c1791ab6d" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="211.33333333333331">Property</th><th width="431">Function</th><th>Required</th></tr></thead><tbody><tr><td>Vertical Grid Count</td><td>Sets the number of grids to generate. (Default is 1, which generates only the base grid.)</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Vertical Grid Height</td><td>Sets the height (distance between each vertical grid). Ignored if the Vertical Grid Count is set to 1.</td><td>No</td></tr><tr><td>Switch Vertical Grid With Input</td><td>Enable switching between vertical grids using the assigned input.</td><td>No</td></tr><tr><td>Auto Detect Vertical Grid</td><td>Enable automatic detection and switching of vertical grid levels based on the pointer's height value using Raycast.</td><td>No</td></tr><tr><td>Custom Grid Surface Layer Mask</td><td>Specifies the Layer Mask for the grid system when using a custom surface, such as Terrain or other surfaces.</td><td>No</td></tr><tr><td>Auto Detection Layer Mask</td><td>Specifies the Raycast Layer Mask for pointer height checking when Auto Detect Vertical Grid is enabled.</td><td>No</td></tr></tbody></table>

***

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

This section of the component manages collision checks and grid collider settings.

<figure><img src="https://2651556506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeumhICLT4oHoEIEssOjB%2Fuploads%2FGhBkgAp8XVSgr3L0lTEk%2Fimage.png?alt=media&#x26;token=217eff25-ea85-4311-91ff-30d94f663dc1" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="211">Property</th><th width="429.3333333333333">Function</th><th>Required</th></tr></thead><tbody><tr><td>Collider Size Multiplier</td><td>Specifies the collider scale (1 means the collider matches the grid scale).</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Lock Collider At Bottom Grid</td><td>When enabled, switching vertical grids will not affect the collider's height level.</td><td>No</td></tr></tbody></table>

<div align="center"><figure><img src="https://2651556506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeumhICLT4oHoEIEssOjB%2Fuploads%2F7UbA6kACtHVy95m8y2V9%2Fimage.png?alt=media&#x26;token=363b635f-8872-404e-be56-fb7733d1812c" alt=""><figcaption></figcaption></figure></div>

An example of using a **Collider Size Multiplier** of 2 (making the collider twice the size of the grid) is shown in the top image. With this setup, you can move your ghost-buildable object outside the grid area, and it will still display because it remains within the collider's bounds. However, when the mouse pointer moves outside the collider's bounds, the ghost-buildable object visual will disappear.

{% hint style="info" %}
When using multiple grids, ensure their colliders do not overlap to avoid potential issues.
{% endhint %}

***

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

<figure><img src="https://2651556506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeumhICLT4oHoEIEssOjB%2Fuploads%2FHEWOwtguJFpFBuL6mfFd%2Fimage.png?alt=media&#x26;token=be14650e-bfb7-4e8d-af89-95938e61f2ba" alt=""><figcaption></figcaption></figure>

These four sections are designed for visualizing your Grid System, each offering a unique display method:

* **Visual - Object Grid** and **Visual - Canvas Grid**: Can be used both in the editor and during runtime.
* **Visual - Runtime Text Grid** and **Visual - Runtime Procedural Grid**: Exclusively for runtime generation.

Each method provides a distinct approach to rendering your grid system based on your needs.

{% hint style="warning" %}
**Visual - Canvas Grid** was the primary grid visualization method in Easy Grid Builder Pro 1. However, with Easy Grid Builder Pro 2 introducing the new and more powerful **Visual - Object Grid** method, the Canvas Grid method is now considered obsolete. It may be completely removed in future updates of Easy Grid Builder Pro 2.
{% endhint %}

***

## <mark style="color:green;">Visual - Object Grid</mark>

This is the primary grid visual solution for the Easy Grid Builder Pro 2 and it is highly customizable and performant. This visual is available in the editor and in the play mode.

<figure><img src="https://2651556506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeumhICLT4oHoEIEssOjB%2Fuploads%2FwrAnmYAo3U24qUGNj7Bm%2Fimage.png?alt=media&#x26;token=5deb87f3-e461-4e7c-b581-1c67bd5ded52" alt=""><figcaption></figcaption></figure>

Lets break down the properties of this into 3 sections. 01. Primary properties. 02. Alpha Mask properties. 03. Scrolling Noise properties.

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

In this section, you can configure the primary properties required for the **Object Grid** visual to function correctly.

<table><thead><tr><th width="211.33333333333331">Property</th><th width="431">Function</th><th>Required</th></tr></thead><tbody><tr><td>Display Object Grid</td><td>Toggle to display or hide the grid overlay of Visual - Object Grid</td><td>No</td></tr><tr><td>Object Grid Prefab</td><td>Assign the prefab to be used as the visual representation of the object grid.</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Cell Image Texture</td><td>Select the texture to be applied to each cell in the grid for visual customization</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Grid Show Color</td><td>Set the color used to display the grid when it is visible</td><td>No</td></tr><tr><td>Grid Hide Color</td><td>Set the color used for the grid when it is hidden</td><td>No</td></tr><tr><td>Grid Show Color HDR</td><td>Enable HDR color settings for the grid's visible state, allowing for high dynamic range color customization. This color multiplies with the <strong>Grid Show Color</strong></td><td>No</td></tr><tr><td>Grid Hide Color HDR</td><td>Enable HDR color settings for the grid's hidden state, allowing for high dynamic range color customization. This color multiplies with the <strong>Grid Hide Color</strong></td><td>No</td></tr><tr><td>Color Transition Speed</td><td>Adjust the speed at which the grid color transitions between the show and hide states</td><td>No</td></tr><tr><td>Only Show Active Vertical Grid</td><td>Toggle to display only the currently active vertical grid, hiding all other vertical grids</td><td>No</td></tr><tr><td>Always Lock At First Grid</td><td>Toggle to lock Object Grid to the first vertical grid, regardless of other and active vertical grids</td><td>No</td></tr><tr><td>Display On Grid Mode Default</td><td>Enable or disable the display of the object grid in Grid Mode Default (None)</td><td>No</td></tr><tr><td>Display On Grid Mode Build</td><td>Enable or disable the display of the object grid in Grid Mode Build</td><td>No</td></tr><tr><td>Display On Grid Mode Destroy</td><td>Enable or disable the display of the object grid in Grid Mode Destroy</td><td>No</td></tr><tr><td>Display On Grid Mode Select</td><td>Enable or disable the display of the object grid in Grid Mode Select</td><td>No</td></tr><tr><td>Display On Grid Mode Move</td><td>Enable or disable the display of the object grid in Grid Mode Move</td><td>No</td></tr></tbody></table>

The **Object Grid Prefab** property requires a specifically designed prefab to function correctly. A sample prefab can be found at: <mark style="color:purple;">**Assets/SoulGames/Easy Grid Builder Pro 2/Prefabs/Grid Visuals/Object Grid (Object Prefab)**</mark>

This prefab consists of a **Plane GameObject** with a **Grid Plane Shader Graph Material** attached. The material dynamically renders the grid system on the plane, ensuring accurate and visually appealing grid visuals.

{% hint style="info" %}
If you need multiple grid systems with different colors, follow these steps:

1. **Locate the Material**\
   Navigate to: <mark style="color:purple;">**Assets/SoulGames/Easy Grid Builder Pro 2/Misc Assets/Materials/Grid Plane Shader Graph Material.mat**</mark>.
2. **Duplicate the Material**\
   Duplicate the **Grid Plane Shader Graph Material** to create a new instance.
3. **Duplicate the Object Grid Prefab**\
   Find the **Object Grid (Object Prefab)** in: <mark style="color:purple;">**Assets/SoulGames/Easy Grid Builder Pro 2/Prefabs/Grid Visuals**</mark>, duplicate it, and open the duplicated prefab in the editor.
4. **Replace the Material**\
   In the duplicated prefab, replace the existing material with the new duplicated material.
5. **Customize the New Grid System**\
   Use the duplicated prefab for your second grid system. You can now modify the color to set a unique color for the second grid system.
   {% endhint %}

The **Cell Image Texture** property uses the provided sprite image to tile and create the grid's visual. Sample images are located in: <mark style="color:purple;">**Assets/SoulGames/Easy Grid Builder Pro 2/Misc Assets/Grid Textures/Cell Textures.**</mark>

If you create your own image, ensure the following properties of your image:

* Set its **Texture Type** to **Sprite (2D and UI)**.
* Set its **Wrap Mode** to **Repeat**.

### <mark style="color:orange;">Alpha Mask Properties</mark>

In this section, you can add an alpha mask, which can be static or dynamically follow the pointer. This allows you to display the grid visual in a focused area rather than across the entire grid.

<table><thead><tr><th width="211.33333333333331">Property</th><th width="431">Function</th><th>Required</th></tr></thead><tbody><tr><td>Use Alpha Mask</td><td>Toggle to enable or disable the use of the alpha mask</td><td>No</td></tr><tr><td>Alpha Mask Texture</td><td>Assign the texture to be used as the alpha mask</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Mask Size</td><td>Set the base size of the alpha mask to determine the default area</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Mask World Position</td><td>Specify the world position of the alpha mask when it is static</td><td>No</td></tr><tr><td>Mask Follow Cursor</td><td>Toggle to enable the alpha mask to dynamically follow the cursor position</td><td>No</td></tr><tr><td>Mask Follow Ghost Object</td><td>Toggle to enable the alpha mask to dynamically follow the position of the ghost object during placement</td><td>No</td></tr><tr><td>Mask Add Ghost Object Scale</td><td>Toggle to include the ghost object's scale to the size of the alpha mask</td><td>No</td></tr><tr><td>Custom Surface Layer Mask</td><td>Define the layer mask of the custom surfaces, if your grid is on any custom surface like terrain</td><td>No</td></tr><tr><td>Display On Grid Mode Default</td><td>Enable or disable the display of the Alpha Mask in Grid Mode Default (None)</td><td>No</td></tr><tr><td>Display On Grid Mode Build</td><td>Enable or disable the display of the Alpha Mask in Grid Mode Build</td><td>No</td></tr><tr><td>Display On Grid Mode Destroy</td><td>Enable or disable the display of the Alpha Mask in Grid Mode Destroy</td><td>No</td></tr><tr><td>Display On Grid Mode Select</td><td>Enable or disable the display of the Alpha Mask in Grid Mode Select</td><td>No</td></tr><tr><td>Display On Grid Mode Move</td><td>Enable or disable the display of the Alpha Mask in Grid Mode Move</td><td>No</td></tr></tbody></table>

The **Alpha Mask Texture** property requires a texture to define the mask for the Alpha Mask. Sample textures can be found at: <mark style="color:purple;">**Assets/SoulGames/Easy Grid Builder Pro 2/Misc Assets/Grid Textures/Alpha Mask Textures.**</mark>

In these textures:

* The **black areas** represent regions with no alpha.
* The **white areas** represent regions where the alpha mask is applied (fully visible depending on the contrast).

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

In this section, you can use scrolling noise to give your grid cells an artistic touch by multiplying another texture with their alpha values. You can also add a scrolling animation in a specific direction to enhance the visual effect.

<table><thead><tr><th width="211.33333333333331">Property</th><th width="431">Function</th><th>Required</th></tr></thead><tbody><tr><td>Use Scrolling Noise</td><td>Toggle to enable or disable scrolling noise</td><td>No</td></tr><tr><td>Noise Texture</td><td>Assign the texture to be used as the scrolling noise, which will be multiplied with the grid cells' alpha values</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Texture Tiling</td><td>Set the tiling of the noise texture to control its scale and repetition across the grid</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Texture Scrolling</td><td>Define the scrolling direction and speed of the noise texture using a Vector2 value for dynamic visual effects</td><td>No</td></tr></tbody></table>

The **Noise Texture** property uses textures to create the scrolling noise effect. Sample textures can be found at: <mark style="color:purple;">**Assets/SoulGames/Easy Grid Builder Pro 2/Misc Assets/Grid Textures/Scrolling Noise Textures.**</mark>

{% hint style="info" %}
To ensure your **Scrolling Noise Texture** aligns with the grid's scale, set the **Texture Tiling** values to match your **Grid Width** and **Grid Length** values. This ensures the texture scales proportionally with the grid.
{% endhint %}

## <mark style="color:green;">Visual - Canvas Grid</mark>

This visual is available in the editor and in the play mode.

<figure><img src="https://2651556506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeumhICLT4oHoEIEssOjB%2Fuploads%2FVmAZcXylf7ac0eHZhGlG%2Fimage.png?alt=media&#x26;token=ecda3962-fdd7-43d3-8e93-58c1c3ab2707" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="211.33333333333331">Property</th><th width="431">Function</th><th>Required</th></tr></thead><tbody><tr><td>Display Canvas Grid</td><td>Toggle to display or hide the grid overlay of Visual - Canvas Grid</td><td>No</td></tr><tr><td>Canvas Grid Prefab</td><td>Assign the prefab to be used as the visual representation of the canvas grid.</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Cell Image Sprite</td><td>Select the texture to be applied to each cell in the grid for visual customization</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Grid Show Color</td><td>Set the color used to display the grid when it is visible</td><td>No</td></tr><tr><td>Grid Hide Color</td><td>Set the color used for the grid when it is hidden</td><td>No</td></tr><tr><td>Color Transition Speed</td><td>Adjust the speed at which the grid color transitions between the show and hide states</td><td>No</td></tr><tr><td>Only Show Active Vertical Grid</td><td>Toggle to display only the currently active vertical grid, hiding all other vertical grids</td><td>No</td></tr><tr><td>Always Lock at First Grid</td><td>Toggle to lock Canvas Grid to the first vertical grid, regardless of other and active vertical grids</td><td>No</td></tr><tr><td>Display On Grid Mode Default</td><td>Enable or disable the display of the object grid in Grid Mode Default (None)</td><td>No</td></tr><tr><td>Display On Grid Mode Build</td><td>Enable or disable the display of the object grid in Grid Mode Build</td><td>No</td></tr><tr><td>Display On Grid Mode Destroy</td><td>Enable or disable the display of the object grid in Grid Mode Destroy</td><td>No</td></tr><tr><td>Display On Grid Mode Select</td><td>Enable or disable the display of the object grid in Grid Mode Select</td><td>No</td></tr><tr><td>Display On Grid Mode Move</td><td>Enable or disable the display of the object grid in Grid Mode Move</td><td>No</td></tr></tbody></table>