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.
This guide doesn't cover setting up Easy Grid Builder Pro settings and packages. It is highly recommended to read the Quick Start Guide and get your project all set up to work with Easy Grid Builder Pro before following this guide.
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
To get a better understanding It is highly recommended to read the Easy Grid Builder Pro Component and all its functionalities before proceeding with this guide.
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.
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 component to it. Now Enable the "Rotate Scale & Pivot For XY" property and then simply click on Calculate Size & Pivot 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 component to it. Now Enable the "Rotate Scale & Pivot For XY" property and then simply click on Calculate Size & Pivot 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.
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.
To get a better understanding It is highly recommended to read about the Buildable Grid Object Type SO assets and all their functionalities before proceeding with this guide.
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.
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.
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.
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.
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 component and Easy Grid Builder Pro Inputs SO 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 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.
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 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 asset this UI section will also update automatically.
You can see the same process in the video down below.
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.
Last updated
