Demystifying UV texturing in Blender

in Game Development3 years ago (edited)

This is part tutorial and part WIP post of what i've been doing lately, I've been very quiet again and it's because I have been doing some heavy learning into how UV unwrapping works and how UV's behave generally and absorbing all that information has finally paid off. I now have a workflow properly nailed down and it's going to dramatically help the look of my games and I can finally look at properly getting rid of all those grey models.

I thought that I'd do a bit of a tutorial on it as well because like with my experiments with TileMaps even though there were tutorials on these topics I feel like that they've left important details out. I will also be using the UV colour grid in Blender and this is an absolute god send I've found because I feel like it's nicer to look at than some generic generated texture but also it helps out a lot in making sure your textures are neat and uniform. With the way it also has numbers and grids on it within the grid itself it makes it very obvious if something you've done has made the textures wonky somehow or your scaling is off, the overall design of the grid is genius because of this I think.

This write up is assuming that you've got a basic model up and running, that you're not doing a standard box or sphere which so many other tutorials do so you can really get to grips with how UVs work and finishing up more complicated models you might have. An important note about your model setup, for this to work you absolutely need to have neat topology, if you have any triangles etc. the UVs that are generated will come out an absolute mess so make sure you are working in quads and have not made any silly mistakes. Having neat topology also drastically helps your rigging for animation.

First off, get your model loaded into Blender and click the UV Editing tab at the top of the screen, be sure to set the window to the left to UV Editor otherwise it will not show your UV images properly. Create a new image to the desired size and select UV color grid, in order to make it match you need to select the model in the main view and change the base colour to the material in the UV editor window. If you give it a unique name then it will be easier to find.

0.png

Once this is done if your model's scale is an odd number then if you unwrap your UVs now it will come up with an error message, press CTRL + A and then click scale to set the scale transforms to 0 on your model to avoid this. They do mention this quite a bit in other tutorials which is good but I thought I'd put it in just in case.

1.png

Now we can start unwrapping the model and get us some UV islands to play with and start the texturing process. Click on edit mode in the main view and then select all of your faces in face mode, after that click the UV tab at the bottom of the screen and then click unwrap.

3.png

If everything has gone correct at this point then you should see an absolute mess of UVs because of us selecting all of the faces. So how do we even begin making sense of all of this? Because it's shit right? Yes, that's why we select one face and start from there, since I'm working on a hand I've just decided to start with one of the fingers and neaten that up.

4.png

Now that we have one face selected the UV island that has been generated should be showing up in the UV editor , select the UV island in the UV editor and then in the UV editor again select the scale tool. We're going to scale down the UV so that we can see the writing on the colour grid more clearly. Do not try to scale or change anything in the main view because it won't do anything other than change the mesh itself and you don't want that if you just want to edit the UVs. If you want to edit anything to do with UVs, you do it in the UV editor, if you want to edit the mesh then use the main view.

5.png

With that scaled down it's already beginning to look neater, at least on one face of the mesh, as you can see we've already got a problem and the writing is upside down. This is why I've gotten so obsessed with the UV colour grid in blender, if it were some generic texture or the different colour grid at least I would have found it more difficult to tell that something was wrong. In order to fix this, we're going to rotate it, depending on the texture you're doing of course this might be fine, so that will be your decision to make I still might need to tweak things.

6.png

press the rotate tool with the UV island selected in the UV editor then hold the left mouse button and drag the UV island clockwise or counter-clockwise to rotate it.

7.png

8.png

Voila, at least from our perspective the texture is now facing the right direction on this face and is an appropriate scale. Depending on what you're doing though perhaps you want it flipped the other way around and that's something I'm thinking about right now for my game I'll have to put in a proper texture just to see how it all looks. The UV colour grid with how it's designed lets you make fine adjustments like this before wasting your time on a really detailed texture only to find out that you've fucked up the UVs. To make it even neater you can align the UV island with the grid a bit better and there's a reason for this I'll show you next.

9.png

What about though if we want to do this for another UV island? Well it's the exact same process then. Select a face that is directly one up, left, down or to the right of the previous face you were tinkering with, scale it down and rotate it as I had shown. In order to see both these UVs click them both on the main view and then they should show up in the UV editor as individual islands.

10.png

This is where it can get a bit confusing or at least where I started getting frustrated, UV islands are very strange but when you understand their quirks and break everything down it does make sense. When people talk about how UVs are unwrapped, laid out versions of a mesh like a cardboard box I just couldn't get it. When I got the UV colour grid out and started experimenting though it made total sense. In order to make the UV islands solid and build your own fancy custom UV grids for a model you have to place the individual islands as they have been in the mesh.

So in my example you can only place the second UV island above the first one if you want to make them one solid object. Blender simply doesn't allow you to do anything else because that would then mess up your textures big time as the UVs help make your images wrap around the model to give them colour and detail hence the term 'unwrapping'.

11.png

You can see this strange behaviour in action already, because I have unwrapped the entire model as individual UV islands. You can see in the main view that the colour grid isn't blending correctly as one texture on the model itself. This is obviously incorrect, but we're going to fix this in the UV editor. I just found it fascinating and it's something I wouldn't have spotted without the colour grid, the writing in particular from the letters and numbers provided makes it easier to spot.

To deal with this annoying problem, we're going to use vertex select in the UV editor and merge them so that our textures will blender correctly on the model. Select vertex edit mode in the UV editor, don't mess with anything in the main view otherwise you will deselect your UV islands.

12.png

Pick a pair of vertexes on your UV islands, there are some basic rules to follow with this, you should only pick two under normal circumstances and they must be parallel to each other somehow you can do this diagonally and so on of course depending on the model you're working with but this will help you with keeping things neat. I started off with picking the bottom right of my top island and the top right of my bottom island, you can either drag select them or press Shift + Left Click.

13.png

After this press right click, merge and then I usually just pick merge to center.

14.png

repeat this process with the other two vertexes that are left, if you have position your UV island correctly then you should see the two islands have started to merge. Just to be safe what I do is I give them a wiggle with the move tool after selecting the vertex and that will tell you if the merge has worked, again, if you have not position your island correctly. The vertex will not have merged despise snapping to each other, that's something to watch out for on the UV editor.

15.png

16.png

We can now have a look at how our model is doing and if you've done everything right, thanks to the magic of the colour grid it should look quite nice! I put my model at an angle so I could see the grid texture flowing nearly over the two faces of the model, this is how we want the whole model to look like.

17.png

There's a bit of a problem how though with what I've selected, if we want to carry on texturing other parts, how do we keep this flowing texture consistent in different directions? Well the answer is simple now that we know how the damn islands work. We're going to have to move the newly selected UV island to the correct position.

18.png

If you select your face and find that the UV island is in a completely wrong position then you need to align it correctly as we did with the previous islands. In this case, I want the texture of the face I've selected to flow correctly with the face on the left. Currently it's at the bottom and overlapping the bottom island. To align it correctly we need to place it similar to how it already is placed on the 3D mesh. In this case I want the UV island that belongs to the face I've selected to be to the right of the top most UV island we were dealing with before. The basic mechanics of where to place your islands is that you use your 3D mesh as a guide which I suspect at least partly explain the window setup here.

19.png

20.png

You will also like before need to get the rotation set up correctly, use the numbers and letters on the colour grid as a guide for this in case you run into problems, just like before use the vertex mode and merge the parallel vertexes to each other so that the UV islands connect to each other properly.

21.png

22.png

23.png

24.png

Be sure of course to give the vertexes a wiggle and make sure it's all merged correctly.

25.png

26.png

Other tutorials have gone into this before, but now that you've got your UV islands correctly connected up you can now start messing with your UV islands in other ways and make them more accurate to the mesh so the textures will fit better. To do this you use the colour coding system and move your UV islands around either with vertex mode or edge mode until they turn a dark blue. Other colours especially red or yellow means you've warped the shape far too much and fucked it up, pay attention to the helpful built in guides.

27.png

28.png

29.png

After all that, dare I say it, that texture is starting to look neat now, at least on that finger. I still haven't done the other sides yet or the rest of the hand but compared to the absolute crap I was churning out before this looks amazing. Better yet, I'm not relying on any silly automated projection so that means that when I finally put on a finished texture it should end up looking great despite it being a fairly complicated model compared to what the automated projections can handle.

There's only one problem, I've now got to do this on several models if I want to get my game anywhere closed to finished lol but I at least understand UVs now so that's something. Expect more texture posts in the future as I work through things, my game should start looking a lot more interesting now for people who aren't into code.

Sort:  

Awesome write-up.

Hi @let123, you were just shared some LUV thanks to @a1edutech. Holding at least 10 LUV in your wallet enables you to give up to 3 LUV per day, for free. See the LUV in your wallet at https://hive-engine.com or learn about LUV at https://peakd.com/@luvshares https://ipfs.io/ipfs/QmUptF5k64xBvsQ9B6MjZo1dc2JwvXTWjWJAnyMCtWZxqM