Game Character Creation Series: Kila Chapter 3 – UV Mapping

Unless it’s destined to be a sculpture, a model without color will always be just a flat, lifeless collection of polygons and vertices. Adding color, even at the most basic level, can bring your character to life and share a glimpse into its history and personality.

Before you add detailed textures however you must take your time to lay out the road map of UVs which will guide where your painted pixels fall onto the surface of your model.

In part three of the Game Character Creation Series you will shift your focus from polygon modeling, to UV mapping. Preparing the low polygon version of Kila you created in Part Two so you can confidently bake and create detailed textures.

Additional Files:

1. Texture Rules & Restrictions

If you have followed along with the earlier parts of this series the idea of working within restrictions will be nothing new. So far you have worked within a polygon budget and kept your mesh topology economical and clean. Now it’s time to discuss the next restriction, and that’s the texture budget.

Ideally your allotted texture budget will be outlined for you by your lead artist, and may be something as simple as a single 1k (1024x1024) texture page. This phrase of a "single" page is however a little misleading as in reality it could involve more than just the one.

You will have your Diffuse page holding the main color information, but in addition to this you would also be expected to provide a Normal Map. So that’s double the space you initially began with. You may also end up going further if the game requires a Specular, Emissive or even an Alpha Map.

Obviously all this depends on the target platform, but as you can see the texture space for your character could spiral out of control. It’s your job to be as economical as possible to try and rein in those precious pixels and make the most of each polygon.

Texture Considerations

Once you know your texture page limit its then time to think about how the model will be textured, and also judge if you can afford to be a little sneaky. Duplicating or even mirroring areas so they use the same texture space can be a good way to quickly claw back some much needed room, but it’s a technique that does come with its risks.

Looking from a design perspective, a symmetrical model isn't always an attractive one as people or even creatures aren't naturally identical on both sides.

Mirrored UV shells occupying the same texture space could also cause technical issues. As an example, problems may arise when generating your normal maps, especially on older platforms where they may not be supported, so the mirrored side will appear inverted in game.

In short there are lots of variables to consider before you begin work, but a good lead artist will help to guide you and have all the information you will need.

Our Budget

Let’s look back at the initial Kila concept and discuss how you can approach your UV layout.

We know she won`t need a change of clothing or require other variations so you will be safe sticking to a single texture page for both her body and clothing. You can however add an additional, smaller page for her hair and eyelashes. These will require an alpha channel so they can be transparent so it’s safer and more economical to keep these on their own page.

Initially you would assume that you could mirror her upper body as her arms, head, chest and stomach are all symmetrical. Yes the topology is identical, but she also has a large tattoo which is different on each side.

There are ways to tackle this, possibly using a second set of UV`s but for now let’s keep this tutorial simple and look at more advanced techniques another time.

OK, decision time.

Let’s work to a single 2k (2048x2048) texture page, plus a smaller page for her hair, maybe even a 512x512, but we don`t need to worry about actual sizes just yet. All we need to know is how the model will be divided, and between how many pages.

2. Separate Your Model

With the restrictions and texture pages defined you can now begin working, and the first step is to separate and divide your character. Breaking up your model will make working on each element quicker and much easier.

What you are looking for initially are areas of the model which are repeated or mirrored. We covered this previously, but even if you don`t plan to mirror the textures remember that if the topology is the same you can UV one side and then duplicate the geometry for the opposite side.

Yes, both sides will then have the exact same UVs, but if you decide to make the textures unique you can always move one UV shell to a different UV space so it can be textured separately.
Following this approach will essentially half the amount of work you have to do in these areas.

Looking at Kila you can see that her arms are exactly the same, so delete one side for now.
Her trainers are also identical, so remove one of these.
Her hair is constructed from a series of repeated strips, but leave this area for now as we will focus on it later.

Move each section so you can see them clearly, and if needed split some further so they will be even easier to map.

Detach the hand from the arm so you can focus on the two areas independently before recombining them later.

At present it would be difficult to UV the head and chest together, not without creating a seam at her cleavage. Ideally it would be good to keep them attached, but then this will cause issues when you try to unfold the head.

You have two options –

Keep the head and chest whole, but create a seam running from her chin, down between her breasts.
Split the head and chest above the clavicle.

It’s up to you which you try, but for this tutorial we will go with option 2.

The final area to physically separate would be her jeans. Divide these down the center, again to make applying and unfolding the UVs much easier.

3. Maya`s UV Tools

Now Kila has been divided you are almost ready to begin defining her UVs, but before you do let’s take a look at the main tools you will be using throughout this tutorial.

First go to Create UVs > Planar Mapping and open the options.

There are many ways to generate your initial set of UVs in Maya, like cylindrical mapping, automatic mapping or any of the usual suspects. You won`t be using any of those, instead you will be going back to basics and letting planar projections start you off.

All this option will do is project the UV`s across either the X, Y or Z axis, giving you a clean layout to then work onto.

Next open the UV Texture Editor which you will find under the Window menu.

This is Maya`s main UV editing window and where you will head once the initial projection has been created. You can see all the main tools across the top but don`t let them intimidate you as for this tutorial we will only be using a handful.

Focus on the Unfold Selected UVs button now, (just under the Textures menu) and right click on it to open the options.

Although Maya has a host of other UV editing tools, including lattice deformers, soft selection and UV smudging, you will be spending most of your time in here. The Unfold UVs Tool will attempt to do just as the name suggests and take a UV shell and unfold, or unwrap it, peeling it open to expose the back and side UVs on the object, making them easier to paint onto.

The main options you will be working with will be the Unfold Constraints. This will force the UV`s to only unfold along the Horizontal or Vertical axis, which is an ideal way to work in a controlled manner.

Setting the constraint to None can give great results, but can also be a little unpredictable as you will see.

Below is a very brief overview of the main workflow you will be following, which will be covered in more depth throughout the tutorial.

Create your initial UV projection.
Define the main seams on your models surface and cut them.
Unfold along the prominent direction first, usually the opposing direction to your main seam.
Next Unfold along the opposite direction.
Finally, unfold key areas without constraints to relax them further.

Once this technique has been mastered you will hopefully see its simplicity, and how it can easily be applied to any other object.

4. The Importance of a Checker Map

Don`t worry, you will start to UV Kila soon I promise, but I think now is a good time to talk about the Checker Map and the role it will play.

It’s all well and good working around the model, adjusting and unfolding UV`s but you won`t be able to visualize what’s happening. How will you know if an area is stretched, or perhaps inverted or worse still, deformed?

By the time you come to paint your textures it’s too late to quickly fix these issues, so it’s good to stay ahead and fix them as you work.

Applying a simple texture map to the model is all you need to do. This texture ideally needs to be grid based so you can see the squares, plus including colors and numbers will help to highlight reversed or stretched areas.

This is the map you will be working with, and you will see just how important it is as you start to apply your initial projections.

5. Head & Chest Unwrapping

With all that information fresh in your mind you are fully prepared to begin work, so first lets unfold Kila's head and chest, both of which you separated earlier.

Note: Don`t be afraid to continue adjusting the models topology as you work on the UVs. There will no doubt be minor areas to optimize or rework which you missed previously.

Begin by defining your initial projection which will focus on the most important axis. As this is a face the Z axis will be most important as the majority of the textures focus will be on the front of the head.

Select the head model and go to Create UVs > Planar Projection.
Set the projection axis to Z and click Apply.
Apply the checker map texture to the head so you can visualize the current UV layout.

This will give you your initial projection, and if you look from the front the UVs will look good. The problem is as you move around the head you will see that the checker map is stretched at the side of the head, and reversed on the back.

Time to unfold.

Select the edges running over the top of her head, and also down from her chin to the base of her neck.

These edges will mark the main seam, and where the UV shell will be peeled open. We are creating the seam here as the back of her head will be hidden, and as a general rule it’s important to place UV seams in areas where they will rarely or never be seen.

In the UV Texture Editor go to Edit > Cut UVs.

Now the edges have been cut, and your seams defined you can begin to unfold the UV shells.

First select all the UVs of the head in the UV Texture Editor.
Right-click on the Unfold Selected UVs button to open its options.

Because the seam runs vertically down the front and the back of the head we know that the first direction you need to unfold will be horizontally. This is so the back of the model can be unfolded and spread to each side.

Set the Unfold Constraints to Horizontal and then click Apply.
Next set the Unfold Constraints to Vertical and click Apply again.

What you may notice at this stage are the UVs around open areas like the eye sockets, or mouth may have collapsed. This is due to the lack of any geometry in these areas, so Maya has nothing to essentially unfold.

Select an edge around one of the eye sockets and go to Mesh > Fill Hole. This will temporarily fill the hole for you.
Repeat this for the other eye, and also the mouth.

If you now repeat the Unfold operations, first Horizontally and then Vertically, you will find that the eyes and mouth UVs are now open, and have been relaxed in a much friendlier way.

It’s at this stage, with the main layout complete, that you can start to experiment with some of the other UV tools Maya has to offer, just to tweak and adjust the UV`s a little more. You can also select key areas, like her neck, and this time use the Unfold Constraint set to None and see what happens. Experiment a little!

TIP: It’s a good idea to close the eye lids on your UV shell if the character is to blink, or have her eyes closed during the game. This is so the texture on her actual eyelids won`t be stretched when they are closed.

Note: The ear is an area to look out for, and on this layout it’s not currently given much space at all. Scale the UVs for the ear if needed, or even detach them from the head UV shell and give them their own, larger UV shell.

6. Arm & Hand Unwrapping

Now you have gone through the process of unfolding one area you can see how easy it can be, and almost the same steps can be taken forward and applied to the other areas of Kila.

Let’s look at the arm and the hand next, and remember we are focusing on one arm initially as the model can be flipped later to create her other arm.

Just as before you need to create an initial projection to get you started. This time create a Planar Projection along the Y axis over both objects.

The most dominant areas of the arm and hand will be viewed from the side, (when at rest), or in this pose above, so we use that as our projection axis.

Arm UVs

Let’s focus on the arm first as it’s a little easier to work with.

Select the edges under the arm running all the way from the wrist to the armpit. Again, when the arms are lowered the inside will be the side which is seen the least, so is ideal for hiding your seams.
With the edges selected go to Edit > Cut UVs to cut and define the seam.
This time unfold Vertically initially, the opposite direction to the new seam, and then unfold Horizontally.
At this stage the arm UV`s look pretty good but as a final step try selecting the UV`s at either end and unfold them without constraints.

Tip: Leaving some key UV`s unselected when unfolding will treat them as an anchor, and make your unconstrained unfold a little more predictable. In some cases this works well at unfolding the UVs a little more, giving an improved result.

Hand UVs

Let’s now move onto the hand which can be a trickier area to work with. You have the initial projection, so skip that step and move on to defining your seams.

For the hand its best to create your seams around the outside, almost cutting the upper hand from the lower hand.
Once selected use the Cut UVs Tool to split your shell into two.
Use the Unfold UVs Tool, just as you did previously, to initially spread out the hand UVs. This will also automatically flip the UVs on the underneath of the hand for you.

At this stage it’s a good idea to turn these two UV shells back into one. This will reduce the amount of open seams you have, so sewing clean edges helps to retain the flow of your textures.

The obvious place to reconnect the hand UVs would be along the outer hand, so down the pinkie finger.

Select the edges down the outer edge of the pinkie finger, and follow this down to the palm.
Once those are highlighted go to Polygons > Move and Sew UV Edges which will move one shell, and connect it to the other.

You may now notice that the finger UVs are overlapping slightly, plus the thumb is way too small. Unfortunately to fix these areas you are going to have to get your hands dirty and physically go in and adjust the UVs to tidy these areas.

Recombine the Hand and Arm

You now have two UV shells, one for the arm and another for the hand. Again, it’s a good idea to combine these to reduce the amount of UV shells and seams you have, and looking at the UV layout you have a nice, obvious place to do this at the wrist.

Before you attempt to sew the hand and arm UVs you must recombine the models, so do that first and ensure the vertices are properly welded, and normal softened.
Next, go back to the UV Texture Editor and select the edges around the wrist, but be careful you only select the ones which align directly with the ones on the arm. The upper and lower edges may be misaligned, so skip those for now.
With those selected go to Polygons > Move and Sew UV Edges to connect the two shells.

Note: If when using Move and Sew your hand or arm UV shells turn slightly then perhaps opt to use just the Sew option. This won`t move your UV shells, so first bring them as close as possible to each other to prevent distortion.

Finally work around the entire UV shell to clean up the UVs and ensure the layout flows nicely across the model.

7. Shirt & Stomach Unwrapping

We are going to speed things up a little now, and focus less on the individual steps and more on the overall process for each element. As mentioned, the techniques are pretty much the same as you have done previously so you should be able to fly though these next areas without any issues.

For Kila's Shirt and Stomach, you can begin with a new Z axis Planar Projection, like we did with her head.

The stomach is a nice cylindrical shape, so create a seam down the back and then Unfold the UVs Horizontally, and then Vertically.

The Shirt is a trickier shape, but your initial seams should be defined and cut down either side. These will be hidden when her arms are lowered, plus there should be natural fabric seams here which will eventually be transferred from the high resolution model.

Note: If you have trouble unfolding the shirt, remember to temporarily fill the large hole where her chest should be, to help retain the shape.

Finally adjust and tweak the UV`s to tidy up the shapes.

8. Jeans Unwrapping

The final large area to look at is her jeans. You earlier divided the model into two, essentially leaving you with two cylinders, which makes them much easier to UV map.

Again, create an initial projection following the Z axis to give you your main UV layout.
This time create the seams for each leg, inside each leg. A place which will be hidden most of the time.
Use the Unfold UV Tools to unwrap the shells Horizontally, and then Vertically.

To make UV`s more intuitive to work on its sometimes important to remove the uneven borders and instead move all the UVs into a straight line. The top of the jeans is a good example as we will eventually need to paint onto this area, and at present it wouldn't be that easy to work with.

To quickly align the top row of UVs, first select them and then use the Align tools in the UV Texture Editor to move them. They will all shift to align with the furthest UV.

Now those have been straightened, repeat you’re unfolding to relax the remaining UVs.
As a final step, recombine the two shells, sewing the edges at the very front of the model.

9. Trainers Unwrapping

On to the final piece of clothing now, her trainers, and the shape of these could present a few problems so let’s see how best to unfold them.

If you ignore the sides for now and focus on the upper, and lower trainer, the initial projection is obvious. Using a projection along the Y axis will give you a good initial layout of UVs for top of the shoe, and also the underneath, with little more work to do on these areas.

Begin with a Planar Projection following the Y axis.

The problem now is you have overlapping UVs and the sides are stretched, but with the nature of this particular model you can treat the sides as a separate element.

Cut the UVs, creating two seams around the middle of the shoe. Essentially splitting the UV`s into three layers so you have the upper, middle band, and sole.
Separate the three UV shells so you can see and work on them individually.
Select the middle bands faces and apply a new projection, this time following the Z axis.
Next, create a new seam at the back of the newly mapped middle band.
Finally Unfold the UVs on each UV shell, and adjust to tidy up the new layouts.

Note: You may want to use the Align tools to ensure the middle bands UVs are straight.

That’s the trainer pretty much completed.

You have now successfully applied, unfolded, tweaked and adjusted your UV layout on each major part of Kila – Well done!

I think it’s time for a well-earned break.

10. Hair Mapping & UV Transfer

The final area we are going to look at is Kila's hair. This is built from basic strips so won`t be too difficult to map, but if approached correctly can be completed quickly and neatly.

Rather than map each strip individually, which would take forever, you can use the Transfer Attributes Tool to quickly copy the UVs from one strip to another.

Go to the Mesh menu now and open the Transfer Attributes options.

As you can see, you can transfer much more than UVs with this tool, but for now let’s keep focused on the task at hand.

The important options to look at are the Sample Space settings. If your models have identical topology, as much of Kila's hair does, then setting this to Component with give you the best results as it will transfer the UV information on a component to component basis.

The main areas to work on will be the back of Kila's hair and the strips you placed beneath.

First work on one strip from each section. These are basic shapes, so a quick Planar Projection and some Unfolding should give you a good UV layout.

Note: To keep the UVs extra clean why not Align them, keeping the edges straight.

Once you have one strip`s UVs defined, it’s a simple case of selecting the source model. Then add the destination to the selection.
In the Transfer Attributes Tool make sure your UV Sets are set to All and Sample Space is set to Component and click Apply.
You can continue this process for the remaining strips until they all have the same UV layout.

Tip: Pressing G will repeat the last command, so in this case it will quickly apply the Transfer Attributes tool again.

Now the majority of the hair has been mapped, go in and apply UV`s to the more individually shaped strips.

11. UV Map Layout

At this stage you should be able to quickly UV the remaining pieces of Kila. Her wrist band, belt and phone should be easy enough to complete without instruction.

Once done you will be looking at a fully UV`d version of Kila. Each element unwrapped, unfolded, sewn and tweaked to get the best possible UV shells.

The issue now is if you select her and look in the UV Texture Editor you will see that the shells will be all over the place, and most will overlap.

To make things worse they may also be of varying scales, something you can clearly see through the checker map on the model. Her face has hardly any texture space, whereas her stomach has far too much.

The first task is to balance everything out. Work around each UV shell, scaling them so the grids on each model are more in proportion to each other. You are doing this to ensure each shell has its appropriate amount of space on the texture page, relative to everywhere else.
Once you are happy with the scales it’s then a case of working on the layout of your texture page. This is a process of moving everything around so they fit into the 0 to 1 grid space, making sure nothing is overlapping, much like a virtual jigsaw puzzle.
When you are happy with your UV layout it’s then a simple case of making Kila whole again.

Note: It’s always worth leaving a little space on the page, just in case. For Kila, we will need space for her inner mouth and teeth plus any other small extras which may crop up once we begin texturing.

Conclusion

There we have it. Part Three of the Game Character Creation Series is complete and your game friendly model of Kila is now fully UV`d and ready to be textured, which is what we will be looking into in Part Four.

As always, use the time between now and then to check and double check your UVs and the final UV layout. While you’re at it also make any final tweaks and adjustments to the models topology so she is ready to go.