# Make 3D Build System (PRO) This guide will quickly walk through how to create a fully functional, easily expandable, smaller-scale city builder using Easy Grid Builder PRO core 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 3D Tutorial** scene located in ***EasyGridBuilder Pro > Demo Scenes*****.** \ In the scene simply delete the Main Camera and drag & drop [**WASDCameraHolder**](/easy-grid-builder-pro-documentation/controller-components/wasd-camera-controller.md) prefab located in ***EasyGridBuilder Pro > Prefabs > Tutorial Prefabs***. This top-down camera controller is more versatile and easy to control. 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 you can see two grids in your 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 now we only need one grid system therefore delete **EGB Pro Grid XY** 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 PRO version of the Easy Grid Builder Pro component.* Now select **EGB Pro Grid XZ** child object inside EGB pro object and set the CORE GRID properties as follows. * [x] Grid Axis = XZ * [x] Grid Width = 40 * [x] Grid Length = 20 * [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 3 buildable prefabs in this guide. For our first prefab we will use the "**3D Building 1x1"** prefab located in ***EasyGridBuilder Pro > Misc Assets > Prefabs > Buildings.*** **Double click** on the prefab or **Right click** then select **Open** to open the prefab view. Now select the parent object "**3D Building 1x1**" and add the [**Buildable Grid Object**](/easy-grid-builder-pro-documentation/primary-components/buildable-grid-object.md) component to it. Now 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 now let's also add the [**Spawn Effects**](/easy-grid-builder-pro-documentation/secondary-components/spawn-effects.md) component to add some effects to the object when it spawns. Set the properties of the Spawn Effects component as follows. * [x] Use Scaling Effect = Enable * [x] Use Scale Y = Enable * [x] Scale Effect Animation Curve = Select the 4th animation curve preset You can see how it's set up in the image below.
That's it for our first prefab. Make sure the all the changes are saved in the prefab before exit the prefab view. (Changes should be saved automatically) Let's make our second object prefab. Similar to the previous steps, open the "**LargeTree"** prefab located in ***EasyGridBuilder Pro > Misc Assets > Prefabs > Props***. And then add the [**Buildable Free Object**](/easy-grid-builder-pro-documentation/primary-components/buildable-free-object.md) component to it. Now 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 let's also add the [**Spawn Effects**](/easy-grid-builder-pro-documentation/secondary-components/spawn-effects.md) component and set all the properties similar to the previous steps. ***NOTE:** Make sure to add a collider to your buildable prefabs (especially for **Buildable Free Objects**) if there is no collider on the object you can not **Destroy** or **Select** your object after they are built on the grid.* For the last buildable prefab open the "**Bush**" prefab located in ***EasyGridBuilder Pro > Misc Assets > Prefabs > Props***. Then add the "[**Buildable Free Object**](/easy-grid-builder-pro-documentation/primary-components/buildable-free-object.md)" component to the parent object and 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. And also add the "[**Spawn Effects**](/easy-grid-builder-pro-documentation/secondary-components/spawn-effects.md)**"** component and set all the properties similar to the previous steps. 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 3 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) and [**Buildable Free Object Type SO**](/easy-grid-builder-pro-documentation/scriptable-objects/buildable-free-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 Grid Object Type SO Assets**" and create another folder and name it "**Buildable Free Object Type SO assets**". Go to **Buildable 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 "**3D 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 "**3D Building Small Buildable Grid Object Type SO"** asset as follows. * [x] Unique Object Name = 3D Building Small * [x] Object Prefab = Drag & drop previously prepared **3D Building 1x1** 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*** or simply click on **Auto Set** button * [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 "**3D Building Small Buildable Grid Object Type SO"** should look similar to the image below.
Now for our other buildable object go to the "**Buildable Free Object Type SO assets"** folder and ***right-click > Create > SoulGames > Easy Grid Builder Pro > Buildable Free Object Type SO*** and create a new "**Buildable Free Object Type SO"** asset and name it as "**3D Prop Vegetation Buildable Free Object Type SO**". ***NOTE**: This buildable object should not snap to grid cells and it should be placeable freely on the grid. That's why we are using the "**Buildable Free Object Type SO**" asset instead of the "**Buildable Grid Object Type SO"** asset.* Let's fill in the properties of our "**3D Prop Vegetation Buildable Free Object Type SO"** asset as follows. * [x] Unique Object Name = 3D Prop Vegetation * [x] Object Prefab = Drag & drop previously created "**3D Prop Tree**" prefab and "**3D Prop Bush** 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*** Now your "**3D Prop Vegetation Buildable Free Object Type SO**" should look similar to the image below.
As you can see we have put two prefabs we've created ("**LargeTree** and **Bush**") in the "**Object Prefab**" property. This way when we place the buildable object, a random object will be chosen from the provided ones. 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**" and "**Buildable Free Object**" component property fields. You can see how it should look after you added the asset references to all three 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 XZ**" grid system and add created "**3D Building Small Buildable Grid Object Type SO**" asset to the "**Buildable Grid Object Type SO List**" and, "**3D Prop Vegetation Buildable Free Object Type SO**" asset to the "**Buildable Free Object Type SO List**". That's it! now press play and you can move your camera with WASD keys (read [**WASD Camera Controller**](/easy-grid-builder-pro-documentation/controller-components/wasd-camera-controller.md) component for more details) 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*** Then create another **Buildable Object Type Category SO** asset and name it "**Props Buildable Object Type Category SO**" and then fill in the properties of the asset as follows. * [x] Category Name = Props * [x] Category Icon = Drag & drop **UI Category Extra Props Icon** from ***EasyGridBuilder Pro > Misc Assets > Icons*** Now go back to your **3D Building Small Buildable Grid Object Type SO** asset then add **Buildings Buildable Object Type Category SO** asset to the **Buildable Category SO** property. And also drag and drop **3D Building 1x1 Icon** located in ***EasyGridBuilder Pro > Misc Assets > Icons** to the **Object Icon*** property. To repeat the same steps with **3D Prop Vegetation Buildable Free Object Type SO** asset, add **Props Buildable Object Type Category SO** asset to the **Buildable Category SO** property. And also drag and drop **3D Large Tree Icon** located in ***EasyGridBuilder Pro > Misc Assets > Icons** to the **Object Icon*** property. Now your **3D Building Small Buildable Grid Object Type SO** asset and **3D Prop Vegetation Buildable Free 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** assets 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: Add Vertical Grids 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. In this guide, we will add 5 vertical grid levels. To do that select your **EGB Pro Grid XZ** object and change the properties in **Vertical Grid Data** section as follows. * [x] Vertical Grid Count = 5 * [x] Grid Height = 2 * [x] Change Height With Input = Enable * [x] Auto Detect Height = Disable And that's it! Press play and now you can switch between your vertical grids by pressing the "**F**" key or using the small triangle buttons in the bottom right corner of your UI screen. ***NOTE**: When you are switching between vertical grids you can see the **Canvas Visual** also changes it's height, you can change it by changing the property **Lock Canvas Grid On Height Change** in **Canvas Grid Data** section in **Easy Grid Builder Pro** component.* You can see the same process in the video down below. {% embed url="" %} ## Step 10: Setup Save & Load Adding save and load to your grid system is extremely easy. Simply select **EGB Pro Grid XZ** 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 it's 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. ## Step 11: Setup Multiple Grids Setting Up multiple grids with Easy Grid Builder Pro is simple, **right-click** on your **EGB Pro Grid XZ** object and **Duplicate** it. Now change the object's name to "**EGB Pro Grid XZ 02**". Now set the Transform Position of the new grid system object 0, 0, -250 to move it a bit away from the other grid system. Then Let's change its properties as follows. * [x] Grid Width = 30 * [x] Grid Length = 40 * [x] Cell Size = 5 This grid will have a smaller cell size. And let's also remove the added **3D Prop Vegetation Buildable Free Object Type SO** asset from the **Buildable Free Object Type SO List.** And now this grid system only has one buildable object type. Make sure to give this new grid system a **Unique Save Name** in **Save & Load** section. Otherwise, it will override saved data with other **EGB Pro Grid XZ** systems. Finally, you can see when you select both **EGB Pro Grid XZ** and **EGB Pro Grid XZ 02** objects their colliders are overlapping. This can cause unnecessary problems. To fix this go to **Grid Object Collision Data** section in each object and lower the **Collider Size Multiplier** property value to 1.05. And that's it! Press Play and now you can use your newly created grid to place objects. You can see the same process in the video down below. {% embed url="" %} ## Step 12: Add Area Blockers & Snappers You can add [**Buildable Object Area Blockers**](/easy-grid-builder-pro-documentation/secondary-components/buildable-object-area-blocker.md) to block certain areas of the grid. You can not place any buildable objects in these areas. Also, you can use [**Buildable Free Object Snappers**](/easy-grid-builder-pro-documentation/secondary-components/buildable-free-object-snapper.md) to add areas that buildable free objects will snap to. ## Step 13: Add Third/First Person Controller To make our build system more interesting let's add another controller (First person) and set up the possibility to switch between them. **This step is not required for Easy Grid Builder Pro Build System.** Save your current scene and open **Demo** **3D All In One** scene from ***EasyGridBuilder Pro > Demo Scenes*** and select [**First Person** **Camera Holder**](/easy-grid-builder-pro-documentation/controller-components/simple-first-person-camera-controller.md)**,** [**First Person Character Controller**](/easy-grid-builder-pro-documentation/controller-components/simple-first-person-character-controller.md)**, First Person Controller UI,** and [**Switch Controllers**](/easy-grid-builder-pro-documentation/controller-components/switch-controllers.md) objects and then **right-click** and select **copy**. Then go back to your **Demo 3D Tutorial** scene and **right-click** on your hierarchy and select **paste**. Now select **Switch Controllers** object and drag & drop **WASDCameraHolder** object to the two missing properties (**Starting Active Objects** property and **Main Cam Starting Active Parent** property). Press play and you can switch between controllers using the "**Backspace**" key on your keyboard. Now you can do all the Easy Grid Builder Pro functionalities when you are in first-person mode. **You can also add your own controllers**. ***NOTE**: You will encounter an issue when you are in first-person mode and you can not select UI buttons because the cursor is locked to the center of the screen. This can be fixed by disabling the **Lock Cursor** property from the **First Person*** ***Camera Holder** object.* ## Step 14: Additional Information If you want to use prepared buildable prefabs in a Grid Axis XY grid system. Enable **Rotate Object For XY** property in **Buildable Free Object** and **Buildable Grid Object** components, in previously prepared prefabs. Then create a new **EGB Pro Grid XY** grid system and add the previously created "**3D Building Small Buildable Grid Object Type SO**" asset to the "**Buildable Grid Object Type SO List**" and, "**3D Prop Vegetation Buildable Free Object Type SO**" asset to the "**Buildable Free Object Type SO List**" properties. This way you can use the same Prefabs and the same Buildable Type SO assets in both XZ and XY grids. --- # Agent Instructions: 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-3d-build-system-pro.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.