Customizing Snaps Prototype assets with ProBuilder
We recently introduced Snaps, asset packs designed to help bring your projects to life. Read on to learn how you can benefit from using Snaps to lay out your levels quickly and easily and how to modify the assets to use them in your game.
What are Snaps Prototype assets?
Snaps Prototypes are modular prototyping assets created entirely with Unity’s ProBuilder 3D modeling package. They are designed to snap to a grid using the ProGrids system. Built to real-world scale, they make it easy for both novice and intermediate-level designers to lay out game environments. You can substitute the prototype assets with high-detail art assets later.
Several Snaps asset packs, with different themes, are currently available on the Asset Store. Check back for more soon. We want you to be able to prototype anything.
These low-polygon assets are designed to simplify level prototyping by making it modular. You have full control over how you use them. This can save you a lot of time as you no longer need to create your own 3D assets or use external digital content-creation tools to modify them.
The assets are lightweight and do not contain any textures. Instead, parts of the meshes have different materials assigned to the topology. However, they are UV unwrapped, making it easy for you to texture them if you wish to do so. Alternatively, after getting your level layout in place, you can replace Snaps Prototype assets with highly detailed meshes of your own.
Snaps package structure
Before we begin working with our assets, let’s take a brief look at how everything is organized within a typical Snaps package.
Each Snaps asset pack comes with a script that will automatically download the ProBuilder and ProGrids packages if they are not already included in your project.
All of the prototyping assets are within the AssetStoreOriginals folder, under _SNAPS_PrototypingAssets. Here, you will find an About folder containing some necessary information about Snaps, as well as all of your assets. Your assets are categorized according to their respective package names (e.g., ModernOfficeInterior or SciFi_Industrial).
Each Snaps Prototype package contains a Prefabs folder, which has all of the 3D meshes with their assigned materials ready for you to place around the scene. There is a Materials folder with material files assigned to different areas of each model, as well as a SampleScenes folder. The SampleScenes folder contains examples of how the assets can be laid out in an environment.
Without further ado, let’s see how we can quickly put something together from scratch.
Prototyping with Snaps
It’s time to create a new scene and see how we can arrange some Snaps assets into a level!
We’ll use two of the Snaps packs currently available on the Asset Store – the Sci-Fi/Industrial and Office packs – to prototype some futuristic living quarters. This will also serve as inspiration to develop our own prototyping props down the line.
Once you have imported Snaps into a project, along with ProGrids and ProBuilder, you will notice some new UI elements appear in the top left corner of your Scene view. This set of icons is part of the ProGrids package – it contains all the tools you need to start snapping your models together quickly. Using the Grid Visibility icon in the toolbar, you can turn on the grid display. Also, with the X, Y, Z, and 3D icons below, you’re able to choose the axis on which you want to render the grid. Just below it is the button that controls grid snapping. With it enabled, if you try to move objects in your scene, they will move within the specified snapping interval. You can optionally enable scale and angle snapping too. Check out the ProGrids documentation if you want to learn more.
Let’s put our grid to use. To do that, we can grab one of the floor tiles from the Sci-Fi/Industrial pack and drag it into the scene. Then use the Push to Grid button to match our new tile to our grid, with the corresponding snapping increment (1 by default). Make sure that Snapping is turned on. Now, if we attempt to move our tile around the scene, it will always snap in increments of one unit. You will also notice that the tile’s pivot is set to one of its corners, making sure it will always snap with other tiles. Let’s add some more tiles, laying out the base floor of our level.
In much the same manner, we can place walls, doors, and stairs. Once we get to positioning our props, we might need to change the snapping increment from 1 to something smaller, to give us more freedom over their placement. Alternatively, we could go ahead and place the props by hand, using Unity’s default snapping tools to snap them to surfaces where needed.
And that’s how simple it is to start using Snaps. Have fun laying out your new game environments! Next, we’ll learn about editing Snaps assets and creating new ones using ProBuilder.
Once you have your level layout in place, you might want to replace the low-poly meshes with some high-resolution ones, or vice versa, for faster iteration. You can do so very easily with this downloadable tool.
You can access the script under Snaps → Snaps Swap Tool.
In the script options, you can pass in a Prefabs folder containing your Snaps Prototype assets. In the case of this script, the Prefab filenames need to match the filenames of the Snaps assets. Once you point the script to the Prefabs, you can simply replace the objects you selected, or all the objects in the scene, with a single click.
You can also create customized Nested Prefabs, using Snaps Prototype assets. The script can help you automatically generate high-resolution Prefabs that correspond to them.
Editing Snaps assets with ProBuilder
So, what happens if we want to alter one of the props inside the pack slightly? Perhaps give it a different material, or change the topology? Typically, you’d need experience with an external 3D modeling package to do that. However, since Snaps assets are made with ProBuilder, we can use it to edit any of our existing props – or create new ones – without leaving the Editor.
What is ProBuilder?
ProBuilder is a completely free 3D modeling and level editing package, available directly within the Unity Editor. The installation steps for ProBuilder can be found at the beginning of this blog post. ProBuilder offers a vast array of 3D modeling tools and is especially useful for prototyping. It is also compatible with ProGrids, making it easy to create precisely positioned geometry.
We won’t be covering the entirety of the ProBuilder toolkit here, but you can explore detailed documentation and many tutorial videos on the topic. If you want to get into 3D modeling or find an easier way to create level layouts in Unity, that’s the perfect place to start.
To edit any of our existing meshes, we will need to convert it back to the ProBuilder editable format first. To do so, we need to select our mesh in the scene while we are in Object mode.
Then, go to Tools → ProBuilder → Object → ProBuilderize. This will open a new ProBuilder toolbar at the top of the Scene view and will enable us to edit the mesh.
We will also need to open the ProBuilder window to access the rest of the 3D modeling toolkit. To do so, go to Tools → ProBuilder → ProBuilder Window, and dock it somewhere handy.
Assigning new materials
One of the features of ProBuilder is the Material Editor. This is separate from the main ProBuilder toolkit; you can find it under Tools → ProBuilder → Editors → Open Material Editor. ProBuilder has many other useful editors, such as the UV and smoothing editors, which you would typically find in a 3D modeling package. For now, let’s focus on changing the materials for our object.
Since we’re going for a futuristic look, the color scheme of the assets from the office pack doesn’t fit very well. Let’s change it. First, ProBuilderize one of the props – I chose the desk. Now, let’s take a look at our Material Editor. Here, we can select an existing material and assign it to either the entire object or only the selected polygons. We can also assign some materials to hotkeys.
Let’s quickly create a matte white material for the desk and a black metallic material for the legs. I can now assign both of these to different hotkeys. After this, let’s go into ProBuilder’s face mode by selecting the corresponding icon in the top toolbar of our Scene view.
Let’s select all faces of the desk by going around the desk and selecting with Shift. After that, press either Assign Material or your designated key combination. You can then do the same with your metallic material for all the faces of the desk’s feet.
You can also add some emissive materials for the computer screens, or just change the materials initially assigned to the computer screens.
So now we know it’s super easy to reassign materials for Snaps with ProBuilder. You can also learn from other Unity users; this video shows you how to use the existing UVs and the UV editor to map a texture to your mesh, walking you through the complete creation process for two simple game props – a crate and a barrel.
Editing the mesh
What if we want to change the geometry of one of the meshes in the level? There is currently an office chair in my level, but it’s not very futuristic. Let’s see how we can turn it into a glorious gaming chair instead.
After looking at some references of what those look like, we get an idea of the general shape of our object. Let’s start simple: the back of our chair needs to be a lot taller, as it will have a rounded headrest. There will also be two holes in the backrest, near where the headrest pillow would be. The sides of the backrest are wing-shaped, and the bottom of the back needs to go down all the way to the seat.
Let’s start by working on bigger shapes by going into face mode and selecting the top and bottom polygons of the backrest. Then, we can switch to the scale tool and scale-up on the y-axis. This will pull our top and bottom polygons further apart from each other. After that, we can use the move tool to do some micro-adjustments on the faces individually.
Tip: The axis in which your scale, move, and rotate tools operate in the context of ProBuilder depends on whether you are in Local or Global transform mode, and whether your handle is at the Center of your selection or the Pivot of the last selected element, like a face or an edge. Generally, it is best to stay in Local transform mode, so that the axes are local to the normals of your selected objects, and to use the Center of your selection as your tool handle placement, to ensure that all of your selected objects are affected by the tool symmetrically.
One thing that we can notice is that we don’t have enough detail on the top part of the chair to shape our headrest properly. To fix that, we can go into Edge mode, and use the Insert Edge Loop tool to add two new edge loops along the top of our chair. We can then grab the two new edges at the top of the back and move them up, which gives us a more rounded shape.
Let’s get to work on the sides of the chair. We can grab two of our outside edges and scale them apart; however, we will need to add some new edge loops to round off our chair. We should also pull the wings slightly forward.
Now it’s time to make the holes in the back. For this, we will need a few new tools. We can split some of our existing quad geometry into triangles, then delete those triangulated faces, and bridge the formed gap outline with new polygons.
To begin, we will need to pull some of the geometry in the middle of our backrest upwards. After that, select four diagonally placed faces on both the front and the back of the chair, and press Triangulate Faces in our ProBuilder panel to see the result.
As you can see, some of our new triangles are facing the wrong way. We can fix this by undoing our division and deselecting the faces which end up forming improperly oriented triangles. Then we triangulate again, on only one side of the mesh. After that, we can use the Flip Face Edge tool on the other set of polygons, and if we triangulate those faces now, you will see the edge has been flipped correctly.
Now, select our new triangles and use Delete Faces to form a gap. Once complete, we can go around the newly formed mesh hole in edge mode, selecting pairs of faces from the front and the back and using the Bridge Edges tool.
Using the Smoothing Editor
Earlier, we talked about ProBuilder’s smoothing editor. We can use it to make the corner edges of our chair appear slightly more rounded. Let’s bring up the Smoothing Editor by going to Tools → ProBuilder → Editors → Open Smoothing Editor.
We can get rid of any existing smoothing groups on our chair by dragging a selection box around the object in Face mode (make sure Select Hidden is set to On) and pressing the Clear Smoothing Groups button in the Smoothing Editor window.
Let’s start smoothing the parts of our chair that we wish to round off. First, we can select all the faces of our backrest, and add it to the same smoothing group by pressing on any of the numbers in our editor. There are no hard edges on the back of our chair, so we can safely do this, but make sure not to select the metal part of the chair base at the back.
We can also do the same for the seat, and we can use the same smoothing group since the faces of the back and the seat are not adjacent.
It also makes sense to add smoothing groups to other parts of the model that should appear rounded, like the hydraulic cylinder and the feet. Be sure to not assign the same smoothing groups in places where you want to keep a hard edge while smoothing both sides.
And there we have it. Here’s the office chair we started with, next to the glorious gaming chair that we have in the end.
Custom assets with ProBuilder
You now have a good knowledge of using Snaps and editing them with ProBuilder. You might also want to explore how you can make your own props using these packages.
Let’s do so by making a small alien-looking prop, which would function as a sort of control panel for our doors.
We can begin by making a primitive in ProBuilder. To do so, let’s select the New Shape tool and open its configuration window by pressing the plus icon next to the tool’s name. This will open a dialogue box that lets us set dimensions and specify the type of our new shape.
When deciding this, remember that all Snaps assets are made with real-world scale in mind. That means it can be helpful to think about how an object’s size will be relevant to, for example, the height of an average person. Here are the dimensions we went with.
Now, the first thing we can do is make this object snappable. To do so, we will plant our pivot point at the base of the object and in the middle. This will mean that it always snaps to our grid. Alternatively, if you were making a floor or wall tile, you might want to put your pivot in the location of one of the corner vertices.
For doing this, ProBuilder includes a handy Set Pivot tool, which will place the pivot at the center point of our current selection. Knowing this, we can select the bottom face of our new mesh, which will place our selection handle in the middle of it, and press Set Pivot to place it at the center-base of our object.
We can start shaping our object. For now, let’s assign it a material and start working by scaling the top face of the mesh inwards since our prop will converge towards the top. We can then use the Extrude Faces tool to add some new geometry at the top and scale it inwards again.
Tip: Did you know you can still use ProGrids snapping functionality when modeling? We can turn it on to place our newly extruded faces on the same height level as the top of our base mesh.
After that, we can select the outer top edge loop of our base, and lower it slightly with the Move tool.
Let’s extrude the top once more, and we will have the base shape of our object.
It would be nice to add a glowing inlay to our prop. Let’s do that now. First, begin by adding two edge loops around either side of our mesh. Then add four more, one on each side of both of our new loops, as shown below.
We can now select the two outer edge loops and scale them inwards to bring them towards the center; then do the same on the other side. Now, select all of the faces on the inner side of our edge loop, and in the Extrude menu, we can set them to extrude by Face Normal with a thickness of -0.01. This will give us a nice inlay on our mesh. Let’s make a new emissive material, and assign it to the inlay, for the result below.
Currently, the top part of our prop is a bit boring, so let’s fix that. We can lower the outer vertices of the top surface. Before then, we can add some support edges with the Connect Vertices tool to ensure that the quads triangulate properly when we lower the vertices. After that, select the four outer vertices, and bring them down with the Move tool.
Neat! One other thing we can do is add a floating element above our mesh. Let’s choose the four triangular faces currently at the top of our mesh, and press Detach Faces. This will give us a new ProBuilder mesh but will form a hole in our old one. To fix that, go back to the old mesh and use the Fill Hole tool by selecting the edges around our missing faces.
Next, we can move our new detached mesh upwards and rotate it 90 degrees. Even though this element is floating, we want to keep it as part of the same mesh. To do so, we can merge our meshes by selecting them with Shift and using the Merge Objects tool.
Let’s add some final touches by extruding from our new mesh twice more, and assigning an emissive material to it as well.
And there we have the result, next to our door.
Keep on creating
We hope you found this guide useful.
Learn more about Snaps Prototype and the other Snaps packs.