Blendering for Unity (Four)

UV Mapping

;

Posted 05/07/2014 16:18:19 in Blendering for Unity

Updated 08/20/2017 19:15:34

UV mapping is the process of telling whatever is rendering your model where to get its texture data. A simple way to look at it is to imagine taking a cardboard box and cutting and unfolding (or "unwrapping") it into a flat shape. When you have a more complex shape like we do with our character, you want to make sure it unwraps into a usable form. You can do this in Blender by marking "seams," which would be the edges that you cut in the cardboard box analogy. The Blender wiki has a good but lengthy explanation of this process, but here you'll find the simple and condensed way that I do it.

First off, you'll want to jump back into Edit Mode (Tab) and make sure that Edge Selection is enabled (Ctrl-Tab). Open up the "Shading/UVs" tab in the Tools panel on the left (press T to open the panel if you closed it earlier).

We're going to create a "UV Island" for the face of our character. A UV Island is a completely separated area of the model, and it's useful to split things up. For example, in Sail, the sail in the boat model was a separate UV island from the mast, even though they resided on the same texture. This should make more sense when you see the final UV map.

Select the edges around the face of our character, and click Mark Seams. That's all there is to it! You'll notice the edges become red, indicating that they are now marked.

Select edges and mark them as seams.
Select edges and mark them as seams.

Next we'll create a seam around the center of the character so that the round shape doesn't end up distorted too badly. Remember the edge loop concept in the modeling part of this tutorial? A useful feature in Blender is the ability to select an edge loop, which is just what we need right now! Select two of the edges along the central edge loop. Now open up the Select menu at the bottom of the viewport frame, and click "Select Edge Loop." Bam! The whole edge loop is now selected, and you just avoided manually clicking each and every edge around the model! Click Mark Seam to mark it. Note: A useful shortcut to avoid having to go through the "Select" menu is to simply Alt + Right Click on an edge.

Select an edge loop to separate the top from the bottom.
Select an edge loop to separate the top from the bottom.
Select an edge loop to separate the top from the bottom.
Select an edge loop to separate the top from the bottom.

We don't want the face UV island to be split into two, so go ahead and select the marked edges in the middle of the face and click "Clear Seams" in the Tools panel. Another way to have dealt with that problem would have been to deselect those edges before marking the edge loop.

Clear the edge loop that crosses the face.
Clear the edge loop that crosses the face.

We can create some UV islands for the legs as well. Try to visualize how it will unwrap when you mark the seams.

Select the base of the legs.
Select the base of the legs.
Select around the foot.
Select around the foot.
Create seams.
Create seams.
On both sides.
On both sides.

Now that all the seams are marked, we're ready to unwrap the model! Pull out a second frame from the left (remember, you can click the triangular icon at the bottom left of the 3D viewport and drag it to create a new frame) and make it about the same size as the viewport. You may want to use N to close the number panel in the right viewport to give yourself a bit more viewing room.

Open a second panel.
Open a second panel.
Set the panel to the UV/Image Editor.
Set the panel to the UV/Image Editor.

Click on the Window Type Selector in the bottom left of the left viewport, and change it to the Image/UV Editor. Now that we'll be able to see our UV map, select all of the edges of your model (remember that keyboard shortcuts work for the frame that your mouse is in, so hover over the 3D viewport!) and click "Unwrap" in the tools panel. Select the basic Unwrap option, and you should see a flattened version of your character in the UV frame!

Select all.
Select all.
Unwrap.
Unwrap.
See the results!
See the results!

I want to quickly mention a technique that works pretty well for more geometrically-shaped objects. Instead of manually marking seams, you can simply select all and choose the "Smart UV Unwrap" option. Blender will make its own seams based on the angles of the edges! Another thing to keep in mind is that Blender will only unwrap the faces that you have selected, so make sure you select all before unwrapping (unless you plan on using multiple textures for your object, but that's beyond the scope of this tutorial).

Now that the model is unwrapped, you can select, move, rotate, and scale the UV islands just as you can with elements in the 3D viewport. The selection mode system in the UV frame is similar to the 3D viewport, allowing you to select vertexes, edges, faces, and, additionally, entire UV islands. Set the mode to Island, and move the islands around until they're where you want them (the G, R, and S shortcuts will all work the same in this window, along with the X and Y axis lock shortcuts). Middle Click will pan the view around, and the Mouse Wheel will zoom you in and out.

I put the UV islands for the legs on top of each other, which is a pretty handy way to save space when you have parts of the model that will use the same texturing. Just make sure to scale and rotate so that the vertices are as close to the corresponding vertices on the opposite leg as possible!

Selecting an island.
Selecting an island.
Adjusting the island positions.
Adjusting the island positions.

We can check how this mapping will actually look on our model by having Blender create a test color map for us. Click on "New Image," and choose Color Grid. You'll see it pop up in the UV screen, but our model in the 3D viewport won't show it yet. In the 3D view header, you can change the display mode to Textured and it will show up.

Generating an image.
Generating an image.
Generating an image.
Generating an image.

Hooray! Our model is ready to be textured! It's useful to look around for any extreme stretching and to use the color coding and letter/number grid to figure out which UV islands correspond to where on your model. The way mine turned out, there was more stretching in the legs than I would've wanted, but that's fine for now since we're planning on making them a solid color anyway. To fix it, you could play around with the shapes of the leg islands, or even re-mark those seams and repeat the unwrapping process.

The last thing to do is to export the UV map so that we can use it in our respective image editors of choice! In the UV frame, open up the UV menu and select Export UV to save it! (I called mine characterUV.png). Typically, you'll want to make it extremely large (I did 2048*2048), since Unity will scale down your color maps based on the quality settings in your game.

Exporting the UV layout.
Exporting the UV layout.

One last note: if you want to put multiple models on the same texture (like all the pieces of a house, or several small creatures), you can accomplish this by leaving room for the other models in your UV map. The color grid makes this pretty easy; you can segment off an area (e.g. A1-C4) and put all the UV islands for a particular model there and leave that space blank when you unwrap other models. You can then layer the exported UV .png files in your image editor to create the actual texture.

Identifying the islands.
Identifying the islands.

Comments

Harry

When I have the unwrapped UV, I can't seem to move the islands independently, the whole mesh moves. Have I missed something?

05/07/2014 20:17:29

Zak

@Harry: Ah, I probably should've made it clearer that when you unwrap, it'll automatically select all the islands for you. Is the whole UV map highlighted in orange? If it is, hit "A" to deselect all, make sure that Island selection mode is active, then right click on an island to select it and you should be able to transform it from there!

05/08/2014 07:48:58

Harry

Yeah I have just one island selected but they all move together:/ Could I have done something wrong in making the seams?

05/08/2014 15:08:43

Zak

Oh! Maybe you left proportional editing on after the modeling tutorial? If the proportionality is set really high, the circle will be larger than the screen and the effect would be so great that it'd move all your islands. You can use the mouse wheel to scroll it down, but you should disable it when you're not using it. Here's a screenshot that might help if this is the problem: http://www.zakjr.com/blog/?attachment_id=208

05/08/2014 17:49:25

Harry

Yes that was the problem! Thanks :) Awesome tutorials, looking forward to the rest

05/08/2014 17:57:47

Zak

Good! Glad I could help, and thank you :)

05/08/2014 18:41:20

skape

Thanks for this detailed tutorial. Well explained in a straightforward manner!

05/08/2014 07:12:45

Charlie

First, thanks for the tutorial, it's amazing! And second, I have a problem! When I select unwrap, nothing seems to happen in the other window. Nothing at all, it just keeps being grey.

05/13/2014 10:26:03

Zak

Thanks! Hmm well make sure you have the second window set to the UV/Image Editor type, and that you can see the grid. Did you have all your edges selected in the 3D viewport before unwrapping (your model should appear orange)? Blender only unwraps what you have selected. Also, you could be super zoomed in on the UV map, so you could try hitting the Home key (with the cursor over the UV frame) to reset the view. Hope this helps! If none of that worked, post a screenshot or even your .blend file and I'll take a look at it!

05/13/2014 11:58:04

Brian

Hey great tutorials! I have one question. When exporting the UV image you recommend saving it at a resolution of 2048x2048 but when I go to export it (it seems the interface has changed in a new version?) the default size seems to be 1024x1024 and I don't see how to change it. Thanks!

05/30/2014 18:21:47

Brian

Nevermind, I realized my problem was that I did not have everything selected.

05/30/2014 18:26:47

Duncan

I decided to add my own personalizations so I may have over complicated things for myself. When i unwrap it certain parts are so small and thin that I can't even recognize what part it is or where it is from, here is a screenshot to explain. http://imgur.com/KEWHliG

06/30/2014 19:31:41

Zak

Hmm it's kind of hard to tell exactly what happened without seeing the bottom or backside of the model.. Something that can help is temporarily syncing the selection across the two frames (this picture points out where the button is -> http://www.zakjr.com/blog/?attachment_id=346#main). I have an addition to this post written up that deals with this (and I just noticed that the formatting is all messed up on this page, I'm going to work on fixing it now!).

06/30/2014 21:51:52

Travis Stewart

Thanks for the tutorial, though at this time I find I am a little stuck. I was thinking, to improve these tutorials, it might be useful to provide a little more information in the images used to demonstrate what to do at each step. I am not sure what each image is actually showing, and what section of text corresponds to each image, especially when you create the UV islands for the legs. I think I followed the images correctly, but I am not sure what each image is actually showing. In addition, I am trying to pull out a second frame, but I cannot see a triangular icon at the bottom left of the 3D viewport, so right now I am not exactly sure what to do. I think it would be really useful to explicitly indicate what is going on in each image.

10/18/2014 21:07:29

Zak

Thanks for the criticism! I tried to keep the images associated with the blocks of text, but I think you're right, and especially in this post. I'll see if I can add some captions to them as well to clarify things a little. I also should've highlighted the triangular icon; if you look at <a href="http://wiki.blender.org/index.php/File:2.5_Manual-3D-Header.png" title="this image from the Blender Wiki" target="_blank" rel="nofollow">this image from the Blender Wiki</a>, the icon I'm talking about is the tiny one (it just looks like three diagonal lines) to the left of the menu labeled "Editor Type".

10/27/2014 13:22:14

Aaron

Thanks for this tutorial, the step by step really helped me understand UV mapping!

10/17/2015 02:52:39

MV10

This was a great quick intro to the UV process. However, a side-effect of the proportional editing in the previous tutorial created some issues for me. Apparently I dragged the tip of the arm a little too far (or something) and several hidden edges/faces were created inside the model where the arm should meet the body. This meant the Edge Loop selection didn't work correctly, and I think the UV map came out a little screwy -- but it still worked well enough for learning purposes. Maybe something worth mentioning in the previous tutorial.

12/26/2015 09:45:43

MV10

Went back and started over, got the same extra geometry doing even minimal arms, so I just manually selected the loop for the seam. For some reason only one of my legs was cut out as a separate piece. The model looks clean in that area and the seam is there. The bottom of both feet cut out -- but just one leg. Not sure what's up with that...

12/26/2015 10:22:45

Zak

Hmm, can you send me a picture of what you mean? The "G" tool, even with proportional editing on, shouldn't create any extra geometry (maybe "Clipping" and/or "Merge" were unchecked in the mirror modifier?)... and if only one leg was cut out I suspect that the mirror modifier wasn't applied? You can also try hitting "Z" to toggle wireframe mode and double check the vertices in that area, and you can also try hitting the "Tools->Remove->Remove Doubles" button in edit mode. Or it could be the case that something is wrong in my tutorial (it was written a year and a half and a Blender versions ago), so I'll run through it again and update it if I find anything weird. Let me know if that helps, or if you have more issues!

12/28/2015 11:09:16
Today