# Easy Grid Builder Pro

{% hint style="info" %}
This component handles all the Easy Grid Builder Pro grid-based functionalities. And this is the major component you will be using the most to manipulate the grid data.
{% endhint %}

You can find this component under _**EGB Pro > Easy Grid Builder Pro XZ**_ and _**Easy Grid Builder Pro XY**_ in the EGB Pro prefab. You can find the EGB Pro prefab located in _**EasyGridBuilder Pro > Prefabs.**_

Since this component has many properties, we are going to divide it into smaller sections to cover all the features.

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2FvSBwgwKfyWvpowz37Jrh%2FScreenshot_62.png?alt=media&#x26;token=f377d29e-83d1-4001-bc2c-1679995dab3d" alt=""><figcaption></figcaption></figure>

## EASY GRID BUILDER PRO

You can find  "**GRID LITE**" and "**GRID PRO**" buttons under this section. By default, start with GRID PRO enabled and you can switch back to GRID LITE version by simply clicking on "**GRID LITE button**".

The major differences between GRID LITE and GRID Pro versions are as follows,

<table><thead><tr><th width="194">Version</th><th>Difference</th></tr></thead><tbody><tr><td>GRID PRO</td><td>Provide all the functionalities current Easy Grid Builder Pro provides</td></tr><tr><td>GRID LITE</td><td>Does not support Buildable Free Objects.<br>Does not support Vertical Grid Levels.</td></tr></tbody></table>

_**NOTE**: GRID LITE is simply a lighter version of the GRID PRO and it is more suitable for 2D games. But the majority of the time you will want to use GRID PRO version._

## CORE GRID - PRO

<table><thead><tr><th width="216">Property</th><th width="429.3333333333333">Function</th><th>Required</th></tr></thead><tbody><tr><td>Buildable Grid Object Type SO List</td><td>BuildableGridObjectTypeSO assets. These are the prepared buildable grid objects.</td><td>No</td></tr><tr><td>Buildable Free Object Type SO List</td><td>BuildableFreeObjectTypeSO assets. These are the prepared buildable free objects.</td><td>No</td></tr><tr><td>Grid Axis</td><td>Grid axis XZ or XY. Axis XZ is more suitable for 3D games and XY is more suitable for 2D games.</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Grid Width</td><td>Width of the grid (Number of cells in 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 in 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 (Size 1 = 1 Unity Unit)</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Grid Origin XZ/XY</td><td>Depending on Grid Axis, the grid's local origin. This is locked if "<strong>Use Holder Position As Origin</strong>" is enabled.</td><td>No</td></tr><tr><td>Use Holder Position As Origin</td><td>Set the holder object's local position as the grid's local position (Simply move the holder object to move the grid)</td><td>No</td></tr></tbody></table>

## Vertical Grid Data

{% hint style="warning" %}
Vertical Grid Data section is currently in beta stage. You can still use this feature but, it is not fully stable as of yet. Easy Grid Builder Pro v1.2.0 update will have a full release of this feature. See what's upcoming on EGB Pro using [**Trello**](https://trello.com/b/zSrcKcYN/easy-grid-builder-pro)**.**
{% endhint %}

By adding multiple vertical grids you can build objects vertically on top of each other. This can be very useful for modular buildings, Interior build systems, vertical-level buildings and so much more.

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2FblPJ8iDhW6NC2lhrXhzJ%2FScreenshot_64.png?alt=media&#x26;token=314e1ab5-7f65-4292-8d52-e1ac17dd487b" 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>Vertical Grids Count</td><td>The number of grids should be created vertically (If it's 1, only the base grid will be created)</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Grid Height</td><td>The height (space) between vertical grids. If "<strong>Vertical Grids Count</strong>" is 1, this property is ignored.</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Change Height With Input</td><td>Switch between vertical grid levels using a provided input</td><td>No</td></tr><tr><td>Auto Detect Height</td><td>Switch between vertical grid levels automatically. This is calculated using the mouse position. If "<strong>Change Height With Input</strong>" is also enabled, this property will be ignored.</td><td>No</td></tr></tbody></table>

## Buildable Distance Data

By enabling buildable distance you can add distance check conditions for placing objects on the grid. This can be useful especially in Third & First person perspectives to prevent object placement far from the player character.

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2FZERNawZFaZr5b3BIQ1OH%2FScreenshot_67.png?alt=media&#x26;token=058b39f8-3983-4b9d-945c-a95e4635aa54" 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>Use Buildable Distance</td><td>Enable buildable distance check settings</td><td>No</td></tr><tr><td>Distance Check Object</td><td>Object transform that will be used to check the buildable distance from. If empty Main Camera will be used.</td><td>No</td></tr><tr><td>Distance Min</td><td>The minimum distance from the Distance Check Object</td><td>No</td></tr><tr><td>Distance Max</td><td>The maximum distance from the Distance Check Object</td><td>No</td></tr></tbody></table>

## Grid Object Collision Data

This part of the component handles the collision check and the gird collider options.

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2FxOuG8Z1BJkqqzbbm5tcZ%2FScreenshot_68.png?alt=media&#x26;token=384ac921-c59e-4584-bfc4-a9c32c479ad3" 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>Grid Object Colliding Layer</td><td>Layer that buildable grid objects should collide. Set this layer mask to the "<strong>Grid Surface</strong>" layer.</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Free Object Colliding Layer</td><td>Layer that buildable free objects should collide. Set this layer mask to the "<strong>Grid Surface</strong>" layer and by adding other layers you can build free objects on top of other layer objects (Ex: Default layer).</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Collider Size Multiplier</td><td>Set the grid's "<strong>Collider Size Multiplier</strong>" relative to the grid's size (1 = collider size equal to the gird's size)</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Lock Collider On Height Change</td><td>When enabled grid collider position will change according to the current active vertical grid's position</td><td>No</td></tr></tbody></table>

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2FHXQZdSnOvqMa6EdXgMMX%2FScreenshot_69.png?alt=media&#x26;token=3d8666a3-86b1-4ffa-ae91-a5be5aeebc4f" alt=""><figcaption></figcaption></figure>

You can see an example use of the "**Collider Size Multiplier"** of 2 (the collider is 2x the size of the grid) in the top image. Here you can move your ghost-buildable object outside of the grid area and it will still display. This is because it's still inside the collider's bounds. When the mouse pointer is outside the collider's bounds ghost-buildable object visual will disappear.

_**NOTE**: When using multiple grids, make sure to set their colliders not to overlap with each other. Otherwise, it can cause unnecessary issues._

## VISUALS

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2FbNmJGhOPUQ5Z8B2vzo5P%2FScreenshot_70.png?alt=media&#x26;token=8d1718ec-ddab-43d7-b1bb-9a3e28540547" alt=""><figcaption></figcaption></figure>

This section controls all grid visual data. There are four unique methods you can use to display your grid visuals and you can use one or more of these methods at the same time.

## Canvas Grid Data

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

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2FIkvOckJsVPUPRZGdZpjh%2FScreenshot_72.png?alt=media&#x26;token=6df2cb6b-d774-4937-9a09-93bb98c6e985" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215.33333333333331">Property</th><th width="428">Function</th><th>Required</th></tr></thead><tbody><tr><td>Show Editor&#x26;Runtime Canvas Grid</td><td>Enable using the canvas grid</td><td>No</td></tr><tr><td>Grid Canvas Prefab</td><td>Add provided Grid Canvas prefab (located in <em><strong>EasyGridBuilder Pro > Prefabs > Canvas Grid Samples</strong></em>)</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Grid Image Sprite</td><td>Add a custom sprite to use as the grid cell image (pre-made sprites are located in <em><strong>EasyGridBuilder Pro > Prefabs > Canvas Grid Samples</strong></em>)</td><td>No</td></tr><tr><td>Show Color</td><td>Color of the grid visual when it is being displayed</td><td>No</td></tr><tr><td>Hide Color</td><td>Color of the grid visual when it is not being displayed (by default alpha value set to 0)</td><td>No</td></tr><tr><td>Color Transition Speed</td><td>Speed of the color transition when switching between show visual color and hide visual color</td><td>No</td></tr><tr><td>Show On Default Mode</td><td>Show canvas grid visual in Default Grid Mode in play mode</td><td>No</td></tr><tr><td>Show On Build Mode</td><td>Show canvas grid visual in Build Grid Mode in play mode</td><td>No</td></tr><tr><td>Show On Destruction Mode</td><td>Show canvas grid visual in Destruction Grid Mode in play mode</td><td>No</td></tr><tr><td>Show On Selection Mode</td><td>Show canvas grid visual in Selection Grid Mode in play mode</td><td>No</td></tr><tr><td>Lock Canvas Grid On Height Change</td><td>When disabled canvas grid visual will change it's position according to the current active vertical grid's position</td><td>No</td></tr></tbody></table>

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2FOHBAn5stJQv41Z7TEG8i%2FScreenshot_73.png?alt=media&#x26;token=b3a0ee76-be99-4d34-9471-4f3fad3dce2d" alt=""><figcaption></figcaption></figure>

As displayed in the image above, the canvas grid visual is functioning at runtime.

## Debug Grid Data

This is the quickest and most simple grid visual solution for the Easy Grid Builder Pro. This visual is available in the editor and in the play mode.

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2FkRW0Tt2L08u1I1ciY3pw%2FScreenshot_74.png?alt=media&#x26;token=e32319a5-8a7f-413c-9e31-ac645ef05124" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="212.33333333333331">Property</th><th width="433">Function</th><th>Required</th></tr></thead><tbody><tr><td>Show Editor&#x26;Runtime Debug Grid</td><td>Enable using the debug grid</td><td>No</td></tr><tr><td>Grid Lines Color</td><td>Color of the debug grid</td><td>No</td></tr><tr><td>Lock Debug Grid On Height Change</td><td>When disabled debug grid visual will change its position according to the current active vertical grid's position</td><td>No</td></tr></tbody></table>

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2FIfVsJoYyijIIRnmalWS8%2FScreenshot_75.png?alt=media&#x26;token=b2130570-e5ff-47ea-92ee-84138b73f4c5" alt=""><figcaption></figcaption></figure>

As displayed in the image above, the debug grid visual is functioning at runtime.

## Node Grid Data

With this grid visual method you can spawn objects in each grid cell. This visual is only available in the play mode.

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2FFOytraCRIssnN4nKaH2o%2FScreenshot_76.png?alt=media&#x26;token=9ba39bca-1476-4e86-8b12-2a82038dcfbc" 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>Show Runtime Node Grid</td><td>Enable using the node grid</td><td>No</td></tr><tr><td>Grid Node Prefab</td><td>Prefab object to spawn in each grid cell. If multiple provided, a random prefab will spawn in each cell.</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Grid Node Size Percentage</td><td>Size percentage of the provided node prefab </td><td>No</td></tr><tr><td>Grid Node Local Offset</td><td>The local position of each node object relative to the grid cell</td><td>No</td></tr></tbody></table>

_**NOTE**: In this method, it spawns objects at the start of the game. Do <mark style="color:red;">**not**</mark> use this visual method in larger grids with high cell counts._

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2Fj6YwzbtqQPJyvGlIywyD%2FScreenshot_77.png?alt=media&#x26;token=c49323ff-3154-47f2-9319-1f3792e9fa48" alt=""><figcaption></figcaption></figure>

As displayed in the image above, the node grid visual is functioning at runtime.

## Text Grid Data

With this grid visual method you can spawn highly customizable text objects in each grid cell. This visual is only available in the play mode.

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2F5K3GsDhTDtKq4QgJ4s5E%2FScreenshot_78.png?alt=media&#x26;token=7baeac7d-88d6-4751-af5a-f078cd53588b" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="216">Property</th><th width="422.3333333333333">Function</th><th>Required</th></tr></thead><tbody><tr><td>Show Runtime Text Grid</td><td>Enable using the text grid</td><td>No</td></tr><tr><td>Grid Text Color</td><td>Color of the spawned text</td><td>No</td></tr><tr><td>Grid Text Size Multiplier</td><td>Size multiplier of the grid text (0.5 = half of the size)</td><td>No</td></tr><tr><td>Show Cell Value Text</td><td>Display each cell's value (first cell = 0,0)</td><td>No</td></tr><tr><td>Grid Text Prefix</td><td>A prefix text to display in text grid</td><td>No</td></tr><tr><td>Grid Text Suffix</td><td>A suffix text to display in text grid</td><td>No</td></tr><tr><td>Grid Text Local Offset</td><td>The local position of each text object relative to the grid cell</td><td>No</td></tr></tbody></table>

_**NOTE**: In this method, it spawns objects at the start of the game. Do <mark style="color:red;">**not**</mark>_ _use this visual method in larger grids with high cell counts._

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2FZoMVoy9U0E94S8eM7oiE%2FScreenshot_79.png?alt=media&#x26;token=5fb71d5d-ec38-4978-8817-83ec89e9b7ab" alt=""><figcaption></figcaption></figure>

As displayed in the image above, the text grid visual is functioning at runtime.

## SAVE & LOAD

This section of the component cover all the Easy Grid Builder Pro save & load functionalities.

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2FRs0k8H1em4RS4aMfV2jq%2FScreenshot_80.png?alt=media&#x26;token=343557ab-e886-41e2-b46f-795c1693cf11" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="203.33333333333331">Property</th><th width="436">Function</th><th>Required</th></tr></thead><tbody><tr><td>Enable Save &#x26; Load</td><td>Enable using the grid data save &#x26; load</td><td>No</td></tr><tr><td>Unique Save Name</td><td>A unique name to save the file. This must be a unique name and not any other grid system should have the same name.</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr><tr><td>Save Location</td><td>Save file location. This is a read-only property.</td><td><mark style="color:red;"><strong>Yes</strong></mark></td></tr></tbody></table>

_**NOTE**: To prevent accidental changes "**Save Location**" property is set to read-only. You can change it inside the **EasyGridBuilderPro.cs** script in **line 198** as follows._

```csharp
[Tooltip("Provide save file location.")][ReadOnly]
[SerializeField]public string saveLocation = "/EasyGridBuilder Pro/LocalSaves/";
```

## DEBUG

This section of the component can be used to quickly debug Easy Grid Builder Pro runtime functionalities by enabling console messages for different features in Easy Grid Builder Pro.

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2Fj1KmIuScjYzVhhylJ4dK%2FScreenshot_81.png?alt=media&#x26;token=e6e2bc40-47e0-448f-9191-ad3b431b1afa" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="200.33333333333331">Property</th><th width="446">Function</th><th>Required</th></tr></thead><tbody><tr><td>Show Console Text</td><td>Enable using the grid data save &#x26; load</td><td>No</td></tr><tr><td>Object Placement</td><td>Enable console messages when placing objects</td><td>No</td></tr><tr><td>Object Destruction</td><td>Enable console messages when destroying objects</td><td>No</td></tr><tr><td>Object Selected</td><td>Enable console messages when selecting objects</td><td>No</td></tr><tr><td>Grid Level Change</td><td>Enable console messages when changing the vertical grid level</td><td>No</td></tr><tr><td>Save And Load</td><td>Enable console messages when saving and loading grid data</td><td>No</td></tr></tbody></table>

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2Fizwz5qtMBSv9GygiJWth%2FScreenshot_82.png?alt=media&#x26;token=b30c527a-1998-4fcf-a6ea-10d3247f1d51" alt=""><figcaption></figcaption></figure>

As displayed in the image above, the debug console messages are functioning at runtime.

## UNITY EVENTS

This last section of the component is extremely powerful and can be used to hook your own functionalities to the Easy Grid Builder Pro events directly, add extra features and much more.

<figure><img src="https://4076857463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzgUHYggWkJIGXQGAerRm%2Fuploads%2FHGJJdupnH1Y1CBm4NamR%2FScreenshot_83.png?alt=media&#x26;token=35a808b8-3ebb-4209-b1d1-efbf3c361e82" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="240">Property</th><th width="402.3333333333333">Function</th><th>Required</th></tr></thead><tbody><tr><td>On Selected Buildable Changed Unity Event</td><td>This event will fire up when selecting a new object to build from UI or from inputs</td><td>No</td></tr><tr><td>On Grid Cell Changed Unity Event</td><td>This event will fire up when a grid cell data is changed (If 5 cells changed at a time, the event will fire up 5 times)</td><td>No</td></tr><tr><td>On Active Grid Level Changed Unity Event</td><td>This event will fire up when the current vertical grid level changes</td><td>No</td></tr><tr><td>On Object Placed Unity Event</td><td>This event will fire up when trying to place a buildable object</td><td>No</td></tr><tr><td>On Object Removed Unity Event</td><td>This event will fire up when trying to destroy a buildable object</td><td>No</td></tr><tr><td>On Object Selected Unity Event</td><td>This event will fire up when a placed object on the grid is selected</td><td>No</td></tr><tr><td>On Object Deselected Unity Event</td><td>This event will fire up when a selected place object on the grid is deselcted</td><td>No</td></tr></tbody></table>

You can find an example implementation of unity events in the "**3D All In One Demo**" located in _**EasyGridBuilder Pro > Demo Scenes**_ folder.
