> For the complete documentation index, see [llms.txt](https://soulgamess-studio.gitbook.io/easy-grid-builder-pro-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-documentation/walk-through-tutorial/make-2d-build-system-lite.md). # Make 2D Build System (LITE) This guide will quickly walk through how to easily create an expandable 2D building system with Easy Grid Builder LITE features. {% hint style="info" %} This guide doesn't cover setting up Easy Grid Builder Pro settings and packages. It is highly recommended to read the [**Quick Start Guide**](/easy-grid-builder-pro-documentation/getting-started/quick-start-guide.md) and get your project all set up to work with Easy Grid Builder Pro before following this guide. {% endhint %} We will break this guide into smaller sections and will walk you through step by step. ## Step 01. Setting Up The Scene Open **Demo 2D Tutorial** scene located in ***EasyGridBuilder Pro > Demo Scenes*****.** Then select the Main Camera from the scene and set its Transform Position values to 0, 100, -10, and in the camera component change the Projection property to Orthographic and Size to 60. Now we have a proper 2D view. The next step is to add EGB Pro prefab which is located in ***EasyGridBuilder Pro > Prefabs*** and simply drag and drop it into the scene. Now right-click on EGB Pro prefab from the hierarchy and ***Prefab > Unpack Completely*****.** This part is important, otherwise, it can cause unnecessary issues later. For this guide, we only need one grid system therefore delete **Easy Grid Builder Pro XZ** child object inside EGB Pro object. Now you will end up with a scene similar to the image below.
## Step 02: Setting Up the Grid System {% hint style="info" %} To get a better understanding It is highly recommended to read the [Easy Grid Builder Pro Component](/easy-grid-builder-pro-documentation/primary-components/easy-grid-builder-pro.md) and all its functionalities before proceeding with this guide. {% endhint %} ***NOTE**: In this guide, we are using GRID LITE version of the Easy Grid Builder Pro component. Click on GRID LITE button to switch to GRID LITE mode. You can always switch back to GRID PRO version anytime.* Now select **Easy Grid Builder Pro XY** child object inside EGB pro object and set the CORE GRID properties as follows. * [x] Grid Axis = XY * [x] Grid Width = 20 * [x] Grid Length = 12 * [x] Cell Size = 10 * [x] Use Holder Position As Origin = Enable You can see when you change the properties the grid visual updates in real-time. Let's leave all other properties as default for now. Now you will end up with a scene similar to the image below.
## Step 03: Setting Up Buildable Prefabs To use buildable objects in EGB Pro, we need to prepare buildable prefabs first. We will prepare 2 buildable prefabs in this guide. First create a new folder in your scene to hold our two prefabs and name it to "**2D Prefabs"**. For our first prefab we will use the "**Blue"** sprite located in ***EasyGridBuilder Pro > Misc Assets > 2D Sprites.*** **Drag & drop the sprite to your hierarchy and then again drag & drop it to newly created folder to create a prefab out of it. Then delete the object from your hierarchy.** Now **Double click** on the prefab or **Right click** then select **Open** to open the prefab view. Then add a **Box Collider** component to the object. Now select the parent object "**Blue**" and add the [**Buildable Grid Object**](/easy-grid-builder-pro-documentation/primary-components/buildable-grid-object.md) component to it. Now **Enable** the "**Rotate Scale & Pivot For XY"** property and then simply click on [**Calculate Size & Pivot**](/easy-grid-builder-pro-documentation/walk-through-tutorial/auto-pivot-and-scale-calculation.md) button to automatically calculate the pivot and scale. ***NOTE**: The collider component that is added to the object sprite should be a 3D collider(a **Box Collider** in this case ). 2D colliders don't work the same. You can still add 2D colliders to the object with the 3D collider, for your own features.* Now you will end up with an object similar to the image below.
Let's make our second object prefab. Similar to the previous steps, drag & drop the "**Yellow"** sprite located in ***EasyGridBuilder Pro > Misc Assets > 2D Sprites.*** **Drag & drop the sprite to your hierarchy and then again drag & drop it to the** "**2D Prefabs" folder to create a prefab out of it. Then delete the object from your hierarchy.** Now **Double click** on the prefab or **Right click** then select **Open** to open the prefab view. Then add a **Box Collider** component to the object. Now select the parent object "**Yellow**" and add the [**Buildable Grid Object**](/easy-grid-builder-pro-documentation/primary-components/buildable-grid-object.md) component to it. Now **Enable** the "**Rotate Scale & Pivot For XY"** property and then simply click on [**Calculate Size & Pivot**](/easy-grid-builder-pro-documentation/walk-through-tutorial/auto-pivot-and-scale-calculation.md) button to automatically calculate the pivot and scale. Now you will end up with an object similar to the image below.
And that's it for the buildable prefab preparation. You can see the same process in the video down below. {% embed url="" %} ## Step 04: Setting Up Buildable Type SO Assets In this step, we will create two scriptable object assets for our 2 buildable prefabs. These assets hold all the data of your buildable objects. {% hint style="info" %} To get a better understanding It is highly recommended to read about the [**Buildable Grid Object Type SO**](/easy-grid-builder-pro-documentation/scriptable-objects/buildable-grid-object-type-so.md) assets and all their functionalities before proceeding with this guide. {% endhint %} Now create a new folder in your project and name it "**Buildable 2D Grid Object Type SO Assets**" go to **Buildable 2D Grid Object Type SO assets** folder and ***right-click > Create > SoulGames > Easy Grid Builder Pro > Buildable Grid Object Type SO*** and create a new "**Buildable Grid Object Type SO"** asset and name it as "**2D Building Small Buildable Grid Object Type SO**". You can see how to create the asset in the image below.
***NOTE**: This buildable object should snap to grid cells as that's the reason we are using the "**Buildable Grid Object Type SO"** asset instead of a "**Buildable Free Object Type SO"** asset**.*** Let's fill in the properties of our "**2D Building Small Buildable Grid Object Type SO"** asset as follows. * [x] Unique Object Name = 2D Building Small * [x] Object Prefab = Drag & drop previously created **2D Building Small** prefab * [x] Placeable Ghost Material = Drag & drop **PlaceableVisualMat** material located in ***EasyGridBuilder Pro > Misc Assets > Materials*** * [x] Not Placeable Ghost Material = Drag & drop **NotPlaceableVisualMat** material located in ***EasyGridBuilder Pro > Misc Assets > Materials*** * [x] Show Grid Below Object = Enable * [x] Object Grid Canvas = Drag & drop **Grid Canvas** prefab located in ***EasyGridBuilder Pro > Prefabs > Canvas Grid Samples*** * [x] Grid Image Sprite = Drag & drop any sprite image from ***EasyGridBuilder Pro > Prefabs > Canvas Grid Samples*****.** I'll be using **WhiteBoxMiddleEmpty02** sprite. * [x] Grid Image Placeable Color = Set a blue color * [x] Grid Image Not Placeable Color = Set a red color Now your "**2D Building Small Buildable Grid Object Type SO"** should look similar to the image below.
Now for our other buildable object go to the "**Buildable 2D Gird Object Type SO assets"** folder and ***right-click > Create > SoulGames > Easy Grid Builder Pro > Buildable Grid Object Type SO*** and create another new "**Buildable Grid Object Type SO"** asset and name it as "**2D Building Big Buildable Grid Object Type SO**". Let's fill in the properties of our "**2D Building Big Buildable Grid Object Type SO"** asset as follows. * [x] Unique Object Name = 2D Building Big * [x] Object Prefab = Drag & drop previously created **2D Building Big** prefab * [x] Placeable Ghost Material = Drag & drop **PlaceableVisualMat** material located in ***EasyGridBuilder Pro > Misc Assets > Materials*** * [x] Not Placeable Ghost Material = Drag & drop **NotPlaceableVisualMat** material located in ***EasyGridBuilder Pro > Misc Assets > Materials*** * [x] Show Grid Below Object = Enable * [x] Object Grid Canvas = Drag & drop **Grid Canvas** prefab located in ***EasyGridBuilder Pro > Prefabs > Canvas Grid Samples*** * [x] Grid Image Sprite = Drag & drop any sprite image from ***EasyGridBuilder Pro > Prefabs > Canvas Grid Samples*****.** I'll be using **WhiteBoxMiddleEmpty02** sprite. * [x] Grid Image Placeable Color = Set a blue color * [x] Grid Image Not Placeable Color = Set a red color Now your "**2D Building Big Buildable Grid Object Type SO**" should look similar to the image below.
You can see the same process in the video down below. {% embed url="" %} ## Step 05: Finalize Buildable Prefabs Now, to finalize our created buildable prefabs select each prefab and drag and drop created "**Type SO**" assets to their "**Buildable Grid Object**" component property fields. You can see how it should look after you added the asset references to both prefabs.
You can see the same process in the video down below. {% embed url="" %} ## Step 06: Check Input Setup You can change or add new inputs to Easy Grid Builder Pro very easily. To learn how the input system works and how to change and add inputs, it is recommended to read about [**Multi Grid Input Manager**](/easy-grid-builder-pro-documentation/primary-components/multi-grid-input-manager.md) component and [**Easy Grid Builder Pro Inputs SO**](/easy-grid-builder-pro-documentation/scriptable-objects/easy-grid-builder-pro-inputs-so.md) assets. For now, we can use the default built-in Easy Grid Builder Pro input setup. ## Step 07: Play Test Now before we play test select "**EGB Pro Grid XY**" grid system and add created "**2D Building Small Buildable Grid Object Type SO**" asset and "**2D Building Big Buildable Grid Object Type SO**" asset to the "**Buildable Grid Object Type SO List**". That's it! now press play and press the "**R**" key to toggle build mode then select buildable objects by using the **mouse scroll**. And place objects on the grid using the **left mouse button**. To check or change the inputs, use **Default KeyBoard - Easy Grid Builder Pro Inputs SO** asset located in ***EasyGridBuilder Pro > Scriptable Objects > Easy Grid Builder Pro Inputs SO***. ## Step 08: Setting UP the UI Let's take our build system a little further by setting up a UI system. To display our buildable objects in the UI system we need to categorize our buildable objects by adding [**Buildable Object Type Category SO**](/easy-grid-builder-pro-documentation/scriptable-objects/buildable-object-type-category-so.md) assets to them. Create a new folder in your project and name it "**Buildable Object Type Category SO Assets**". Then ***right-click > Create > SoulGames > Easy Grid Builder Pro > Buildable Object Type Category SO*** and create a new **Buildable Object Type Category SO** asset. Let's name it as "**Buildings Buildable Object Type Category SO**" and then fill in the properties of the asset as follows. * [x] Category Name = Buildings * [x] Category Icon = Drag & drop "**UI Category Buildings Icon**" from ***EasyGridBuilder Pro > Misc Assets > Icons*** Now go back to your **2D Building Small Buildable Grid Object Type SO** asset and **2D Building Big Buildable Grid Object Type SO** asset then add **Buildings Buildable Object Type Category SO** asset to the both of their **Buildable Category SO** property. And also drag and drop the **2D Building 1x1 Icon** located in ***EasyGridBuilder Pro > Misc Assets > Icons** to the **Object Icon*** property in **2D Building Small Buildable Grid Object Type SO** asset. And the **2D Building 3x2 Icon** located in ***EasyGridBuilder Pro > Misc Assets > Icons** to the **Object Icon*** property in **2D Building Big Buildable Grid Object Type SO** asset. Now your **2D Building Small Buildable Grid Object Type SO** asset and **2D Building Big Buildable Grid Object Type SO** asset should look similar to the below images.
Drag & drop "**EGB Pro UI**" and "**EGB Pro UI ToolTip**" prefabs from ***EasyGridBuilder Pro > Prefabs*** to the scene and set ***right-click > Prefab > Unpack Completely***. Then select EGB Pro UI object and add previously created two **Buildable Object Type Category SO** asset to the **Buildable Object Type Category SO** property in [**Multi Grid UI Manager**](/easy-grid-builder-pro-documentation/primary-components/multi-grid-ui-manager.md) component. Now press play and you have a fully functioning UI system. From now on you can add any newly created **Buildable Object Type Category SO** assets to the Multi Grid UI Manager component to expand the categories. The UI system automatically identifies all the buildable objects the current grid system has, and displays them in the UI. This way you can have multiple grids with different buildable objects and the UI system will auto-update the UI according to the active grid system in real-time. Also when you are in play mode you can see a question mark button in the right bottom corner of your screen. When you press it you will get an auto-updating Help Menu that displays all the Input Keys. If you change any input from your active [**Easy Grid Builder Pro Inputs SO**](/easy-grid-builder-pro-documentation/scriptable-objects/easy-grid-builder-pro-inputs-so.md) asset this UI section will also update automatically.
You can see the same process in the video down below. {% embed url="" %} ## Step 09: Setup Save & Load Adding save and load to your grid system is extremely easy. Simply select **"EGB Pro Grid XY"** grid system and enable **Enable Save & Load** property. For the **Unique Save Name** property, make sure to add and provide a unique name, otherwise, grid systems with the same name will override its saved data. That's it! Press play and place objects on your grid and press the "**O**" key or press the save button from your UI to save your grid data. And press the "**P**" key or press the load button to load your saved grid data. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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-documentation/walk-through-tutorial/make-2d-build-system-lite.md?ask= ``` 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.