Before we get started, it's a good idea to see how the object looks to us, so let's add in a temporary controller to give us an idea of what it looks like. Therefore, let's follow the these steps:
- Now, in the upper-right corner of the scene view is the scene gizmo. This will display our current camera orientation, allow us to quickly modify the viewing angle, and switch from the Perspective to Isometric mode easily, which will help us when placing objects in the world. (Note that in 2D mode, this gizmo won't be shown, so untoggle the 2D button on the Scene toolbar if that is the case.)
- Click on the Y axis on the scene gizmo to switch our camera to an overhead view. Once there, go to the Modular Pieces folder and then drag and drop the Floor 01 object into our world, and change Position to (
0,0,0) from the Transform section. Then, you can double-click on the object in the Hierarchy tab to zoom to its position.
You'll note that instead of the floor tile being in the center of the world when the position is reset, the pivot is off on the Z axis. This is because the art files that the artist provided to us placed the pivot there, which you will see if the Gizmo Display Toggles are set to Pivot (the button to the right of the Transform widgets in the toolbar). Now, since we're going to be placing these objects as tiles, we want them to snap together as easily as possible. In general, we want to place these pivots along one of the edges of the object. Some people prefer to place it on the center of the mesh, which you can easily do by changing the pivot toggle to Center by clicking on the button that currently says Pivot to change it to the Center move, but I don't like it, as it makes rotations and scaling more of a pain. For more information on the Gizmo Display Toggles, check out http://docs.unity3d.com/410/Documentation/Manual/PositioningGameObjects.html.
- After this, open the Floor 01 object to see the
Floor_01_Modular_pieces_grpobject and select it. This is the actual mesh we want to work with. With it selected, go to the Mesh Renderer component and expand the Materials section. Then, change Element 0 to our house material either by dragging and dropping or clicking on the right-hand side circle button and then selecting it from the list shown. Finally, let's add in a box collider by going to Component | Physics | Box Collider.This collider is what the player will collide with in the world, so what you see will be what they will be walking into.
- Now that we have created the revised version created, rename the Floor_01_Modular_pieces_grp game object to
Floor, and from the Project tab, create a new folder namedPrefabs. Drag and drop just theFloorobject as a prefab in thePrefabsfolder; optionally, you can place the object in a new folder namedModular Pieces. - Now repeat steps 3 to 5 for the Wall Plain object:
As you can see if we move the camera, the two pieces together are already starting to look like a room. Not too hard, right?
- Delete those two prefabs, and now do the same steps for the other models in the
Modular Piecesfolders, thereby deleting them as they go on, using Mesh Colliders on the Door Wall and Stairs objects. - Now that we have the models for our environment fixed, let's assemble them into some tiles that we can place in the world. Create an empty game object, name it
Hallwayand reset its position.The pivot of an object is extremely important when doing modular level design. We want to make it extremely easy for us to duplicate objects and snap them together, so picking a part of the object that will tile well can save you a lot of time in the future.
Note
For those interested in learning more about creating good modular game art, check out http://www.gamasutra.com/view/feature/130885/creating_modular_game_art_for_fast_.php.
- Add a Floor, Ceiling, and Wall prefab to the object as children.
- Duplicate the wall by pressing Ctrl + D, and then change Position of Z axis to
3.2and Rotation of Y axis to180. Take a look at the following screenshot:
This will act as our first building block, which we can use to create hallways by merely duplicating these Hallway objects.
- Now, inside the project, add a folder to the
Prefabsfolder namedTiles. Make Hallway a prefab by dragging and dropping it in theTilesfolder. Take a look at the following screenshot:
- Delete one of the wall objects, (click on Continue at the notification) and you'll note that the object is no longer a prefab, as it's no longer colored blue. This is fine because now we're going to create a doorway. Rename Hallway to
Hall Door. Then, add a Door object and a Door Wall object as children to the new Hall Door on the side that your wall object was previously at. Then, add Hall Door as a prefab in theTilesfolder.You can make these doors functional later on, but for now, we are just building the environment.
- Apart from these very simple tiles that we have just made, we also want to create some rooms that are larger than one big tile, so next, we need to create nine additional prefab tiles that will look like the following screenshot:
To name the objects, I went with the following convention:
- Room Top-Left
- Room Top-Middle
- Room Top-Right
- Room Middle-Left
- Room Middle
- Room Middle-Right
- Room Bottom-Left
- Room Bottom-Middle
- Room Bottom-Right
- With these pieces, we can make rooms of whatever size we want! Delete the newly created prefabs from the hierarchy.
- Finally, let's get the staircase built! Create an empty game object and give it a name of
Left Stairs. Go back to our Modular Pieces prefabs and then place two floors next to each other, one at Position (0,0,0) and the other at (-3.2,0,0). Next, add Stairs 1, Stairs Floor 1, and objects together, all at Position (0,0,0). Add Stairs Floor 2 at Position (-3.2,0,0). Finally, add two walls on the first floor (one with0.0on X and one with-3.2) and two on the second floor (Y at4). Once completed, you should have a staircase built, as shown in the following screenshot:
- Then, make our Left Stairs object a prefab inside of the
PrefabsTilesfolder. Be sure to reset the position of GameObject by right-clicking on its Transform component and by selecting Reset Position. - Afterwards, go ahead and delete the Left Stairs prefab. And with this, we now have our tiles all set!