Tutorial: How to create a transparent skirt
May 10, 2015 9:22:26 GMT -5
orangemittens, Asyli, and 12 more like this
Post by untraditionalnerd on May 10, 2015 9:22:26 GMT -5
Today I will explain how to create a transparent skirt.
This is my second Tutorial ever and English is not my first language so I hope you will be able to follow me and understand.
This method can be used for any CAS part. You need to adjust what I’m going to show you for your project.
Tools used in this tutorial:
Sim 4 Studio 2.4.1.6 +
Any 2D editor that can work with DDS and alpha layer.
Blender 2.70 or 2.76
The Sims 4
Thank you Andrew for showing me how to add a geometry to a CAS Pacakage.
This is going to be a long tutorial. I hope that you have a basic knowledge of blender,recoloring and S4S. I will try to explain why we are doing something instead of showing only what you guys have to do. I’m sorry if I talk to much :/
To do list:
A: Merge the legs to the skirt
B_Fix the package to read the new mesh
C_Optional: Create the inner part of the skirt and a border
D_Fix the UV map 0 and 1 - Vertex paint - Shader
E_LOD1-2-3
Keyboard shortcuts in blender:
G= move
S=scale
R= rotate
Tab= to switch between object mode and edit mode. I may not always say it.
Magnet on the bottom tool bar in edit mode= Snap tool.
Let’s start!
A: Merge the legs to the skirt
1_Export the naked bottom (F) and the skirt.

2_Export the LOD 0 mesh. To do so simply open the packages you just created and click on the meshes tab, LOD 0 will be already selected and click on export.
3_Open the skirt blend file.
4_ As you open it press shift+F1. We will append the legs mesh to the skirt blender file.
5_If you exported both meshes in to the same folder you should see the legs blender file already. If not go trough your folders till you find it and click on naked legs, click on objects and then double click on s4studio_mesh_1. The mesh will be added as s4studio_mesh_1.001

6_Select s4studio_mesh_1 and select the scene tab on the right and change the cut number to 0003. Rename s4studio_mesh_4
7_Select s4studio_mesh_1.001 change its cut number to 0002 and change the name of the mesh to s4studio_mesh_1. You can rename the meshes in any way you want. What it matter is the cut number you assign to them. I like to be organized :3
8_Select s4studio_mesh_4 and press tab to go in to edit mode. Select the legs and the bottom part of the skirt and press X and then faces. Press tab again to exit edit mode.

9_Select s4studio_mesh_1 and enter edit mode.We need to delete the part of the legs that we have already in the other cuts. Select as shown in the picture and press X then faces. Save

Note: You could avoid this step, delete the other 2 parts and change the cut number accordingly. There are many ways to compose the mesh and the package. I prefer to keep the base package as close to the original as possible.
We could keep going working on the mesh but I want you to test it to see what we we have to fix.
B_Fix the package to read the new mesh
1_ Open your skirt package and go to the warehouse tab. I only have a swatch to speed up the process. IF you are planing to have more than one add them later
2_Select the skirt geometry LOD 0 which should be the same as mine or simply the first one with a skirt that you encounter from the top of the list. If you’r not sure check its weight. It should be the biggest. Press duplicate and change the last number to 1. You can change to any number. Be careful to not name it as another element in the package.


3_Select Region map and then Edit Items on the entries line. Select Region Type:0 and then edit items.
4_You should see the code number referring to the geometry you duplicated. Select it, click on copy and change the group number to reflect the one you gave to the geometry you duplicated.

5_Save twice and you should be on S4S warehouse again.
6_Click on the only CAS PART you have and scroll down till you find the lods line. Click on edit items.

7_ Select Level:0 and then Edit Items on Lodmodels line. Repeat the same process you did in the region map. Select the line that has the same group number of the geometry that you duplicated, copy it and the change its group number.
8_Save twice and you should be back to the S4S.
9_Click on the Studio tab and then meshes tab.
10_Import the blend file and it should look like this. Save and test it in game
As you can see in your game there is going to a clipping problem and a texture problem.
The clipping problem will happen when your sim will walk, sit or dancing.
If you test it in game you well see that when your sim will sit the inside of the skirt will be invisible. I’m going to show you how to fix that, It is optional. You can either do it or not.

Optional: Create the inner part of the skirt, a border and fix the clipping problem
Clipping
You can either change the weight or edit the mesh.
The easiest method is to edit the mesh
1_In this case I selected the skirt and scaled it to be a bit bigger. You can do it by pressing S.
2_I reshaped the waist to match the body.

3_ You will notice that the legs still clip with the skirt. Select the part that clips and try to flatten it. Select the vertices that appear clipping in game, press G and then move them towards the body.
Check in game. If there are clipping problems you will have to go back and keep working on the mesh.
You can choose what to edit and how to edit it. In this case I decided to edit the legs because the legs will be blurred by the skirt.
Inner part
I will show you how to create a thick skirt. You can create a thinner one. It’s all about your personal choice. I chose this way so it was easier to show.
We are going to duplicate the skirt, scale it and flip it’s layer direction so it will not be invisible when our sim will sit or the camera goes under her/his skirt ;P
1_ In edit mode select the skirt and press shift+D. Do not move. Press ESC
2_Do not deselect. Press S, write 0.90 and then press Enter.
You can either write 0.90( or any value ) or simply scale with the mouse. It’s a personal choice.
Optional : Do not deselect and assign a new material to the inner part. This way you can select it really fast if you need to edit it.
4_The inner skirt needs to be selected. On your left you should have a tool bar. If not press T. Click the shading/UV tab and and then click on flip directions.

3_ We need to connect the 2 parts. We can connect them by merging the bottoms or create a border. You could avoid connecting them but that depends on your design.
If you create a border you will have to edit the uv_0 and uv_1
4_In case you want to create a border you have to select 4 vertices and press F to create a face. Keep doing it till the border is complete. Once it is created, select it and then assign a new material to it so the selection process is easier and faster


C_Fix the UV map 0 and 1
We need to fix the UV map. As you know EA had an amazing idea when designing TS4 CAS parts. They made it that each item share the same texture field. It’s all about the placement inside the rectangle. Each spot is for a CAS part. As you can understand the legs and the skirt technically share the same spot. We want the legs to have their own texture which means we have to move the skirt UV map somewhere else. Till now (April/May 2015) we can’t append an external DDS to the package to use in cases like this. The only thing we can do is to find a spot that is not used for anything and hope that none else uses it.
UV_0
In this project the inner skirt and the outer skirt share the same texture.
1_Select the skirt, change to edit mode and then press A. You may have to press A twice to get the mesh highlighted. On your left you should have the UV map editor. IF not open a new window and switch the view to UV map editor.
2_You should be able to see the UV map of the skirt. You will see only one island but there actually 2. We cloned the skirt to create the inner skirt which means that its uv map is the same of the outer skirt.
3: Press A to select all and then G to move the islands. Switch between the diffuse map and the body texture so you can find the proper spot where to place. I usually try to place over the part that was used for the bottom of the skirt.

For this tutorial I simply scaled the islands ( S on the keyboard to scale ) and moved them. The texture is simple and the shirt should not lose to many details. In case I had to release it with a detailed pattern or decoration I would re create the UV map from scratch. To avoid texture overlapping you have to test in game and be sure that it works with any EA base CAS parts. There are maps on line of the UV map standard positions. Use that as guide.
4_ Export the uv map layout by clicking on UVs and then export UV layout. This picture is really important because it will help you place the texture on the DDS.
5_Open the DDS and the uv map with your 2D editor. Copy and paste in place the uv map in to the DDS. It’s going to be your guide. I scaled the texture to make it match the UV map and then I created a gradient black to white and used it as alpha.

Remember: White is mat and black is clear. Plan accordingly to this rule.
IF you merged the bottoms your are done, you can test it game and fix any overlapping texture, work on details and create the skirt you want :D. Once you are done jump to the next step. You still need to fix LOD 1-2-3 ;P
IF you created a border we still have some work to do.
Since we created new faces we have to fix them in uv_1 and uv_0
The UV_0 zero is really simple. On the right side of the skirt there is the EA texture seam which means that the front and the back are connected on the left side of the mesh. We want the border texture to match the skirt. It will help when working on UV_1 and recoloring it.
1_Select the vertices as shown in the picture and click mark seam in the shading/Uvs on the tool bar on your left.
This will cut the uv map in that point when unwrapping.

2_Select the border. If you assigned a material to it you can select one of its faces, press shift+G and then material. To do so you will need to switch from vertex selection mode to faces selection mode.
3a_Unwrap the uv map and, fix it’s distortions and then place it. You can either place it close to the skirt texture or somewhere else. It’s all about you and your project.
3b_ If you don’t know how to unwrap the uv map I will try to quickly explain it. On your left tool bar, shading/UV map tab, click unwrap. In this particular case I rotated because I know that the top part is the front. I rotated it, and then roughly selected the extremities and rotated them again.


Selected the bottom line of vertices, pressed W and then align to Y. I did the same thing for the top line. Select all and scale it, rotate it if needed and position it.

UV_1
If you are going to create new meshes or change an EA mesh so much that doesn't resemble its base you always have to edit the UV_1. The UV_1 is not used for rendering purpose. It tells to the game which sliders to use on that part and how to distort it.
We connected 2 meshes by creating new faces but not new vertices. This is the reason why we don’t have to play with the weight :D

Skirt, edit mode
Go to the object data tab and select UV_1

1_Repeat step 3b
2_ Once the island is straightened we need to split in 3 parts and place it accordingly to the uv_1 set up. If you select the whole skirt you see how it is split in 3 parts.
3_Select the border as shown in the picture and the skirt. Move the island of the border and attach it to the center part of the skirt.

4_ Select the border as shown in the picture, repeat step 3 and place the strip of uv map to match the right part of the skirt.

5_ Last part of the border goes in to the left part of the skirt.
It should look something like this. You can see that there is one more line of vertices at the bottom of the skirt. This is not a perfect way to place it. We should scale the inner skirt island and connect the outer skirt with the inner skirt with the border uv map. Since we don’t have many details we don’t have to be to precise. The important thing is that the islands are in the correct position.

Vertex Paint
The vertex paint is important because it will say to the game if that part will need sliders and if so how it should stretch it. The waist part is green because fits the body. The skirt is yellow because is soft and loose .
Switch to Vertex paint, pick yellow color and paint the bottom.

Save and import it.
Let’s make it transparent.
The meshes and the texture are done. We need to change the shader so the skirt will actually be transparent.

1_Select the skirt geometry. The one you cloned and click the Data Tab.
Scroll down till you see the shader line and change it to Simglass.
Save and test it
LOD 0 is completed :D
E_LOD1-2-3
At this point we have LOD 0 ready. We need to get LOD1-2-3 ready as well.
To do list for each LOD:
I suggest you to work on 1 LOD at a time.
Add a geometry ( Step B)
We need to fix the package to read one more cut for each LOD. Do you remember that I told you to select the first skirt you found in the warehouse?
For LOD1 you have to pick the second skirt. LOD 2 is the third and LOD 3 is the forth skirt.
Region map part: Repeat the same steps, check the one to clone and give the same group number that you gave to the geometry you duplicated. Do it on region map 0 as I said on step B. The region numbers are not linked to LODs.
CAS PART: Cas part is the same as step B. We have to work per LODS which means that instead adding the geometry to level 0 you will select the correct LOD line. If you are working for LOD 1 you pick level 1 and so on.
Change the shader for each new geometry
Reduce the poly count of the mesh. I usually use Decimate tool and I reduce it by 25 %. Do not worry if LOD 2 and LOD 3 meshes look like poo. None will ever notice since the game will use them when you are really really far.

This is the result. The process is a bit long and a lil complicated if you never did anything like this. That’s why I chose a basic project.
Let me know if you have any doubts or questions. Let me know if I’m not clear when explaining something.
UN
This is my second Tutorial ever and English is not my first language so I hope you will be able to follow me and understand.
This method can be used for any CAS part. You need to adjust what I’m going to show you for your project.
Tools used in this tutorial:
Sim 4 Studio 2.4.1.6 +
Any 2D editor that can work with DDS and alpha layer.
Blender 2.70 or 2.76
The Sims 4
Thank you Andrew for showing me how to add a geometry to a CAS Pacakage.
This is going to be a long tutorial. I hope that you have a basic knowledge of blender,recoloring and S4S. I will try to explain why we are doing something instead of showing only what you guys have to do. I’m sorry if I talk to much :/
To do list:
A: Merge the legs to the skirt
B_Fix the package to read the new mesh
C_Optional: Create the inner part of the skirt and a border
D_Fix the UV map 0 and 1 - Vertex paint - Shader
E_LOD1-2-3
Keyboard shortcuts in blender:
G= move
S=scale
R= rotate
Tab= to switch between object mode and edit mode. I may not always say it.
Magnet on the bottom tool bar in edit mode= Snap tool.
Let’s start!
A: Merge the legs to the skirt
1_Export the naked bottom (F) and the skirt.

2_Export the LOD 0 mesh. To do so simply open the packages you just created and click on the meshes tab, LOD 0 will be already selected and click on export.
3_Open the skirt blend file.
4_ As you open it press shift+F1. We will append the legs mesh to the skirt blender file.
5_If you exported both meshes in to the same folder you should see the legs blender file already. If not go trough your folders till you find it and click on naked legs, click on objects and then double click on s4studio_mesh_1. The mesh will be added as s4studio_mesh_1.001

6_Select s4studio_mesh_1 and select the scene tab on the right and change the cut number to 0003. Rename s4studio_mesh_4
7_Select s4studio_mesh_1.001 change its cut number to 0002 and change the name of the mesh to s4studio_mesh_1. You can rename the meshes in any way you want. What it matter is the cut number you assign to them. I like to be organized :3
8_Select s4studio_mesh_4 and press tab to go in to edit mode. Select the legs and the bottom part of the skirt and press X and then faces. Press tab again to exit edit mode.

9_Select s4studio_mesh_1 and enter edit mode.We need to delete the part of the legs that we have already in the other cuts. Select as shown in the picture and press X then faces. Save

Note: You could avoid this step, delete the other 2 parts and change the cut number accordingly. There are many ways to compose the mesh and the package. I prefer to keep the base package as close to the original as possible.
We could keep going working on the mesh but I want you to test it to see what we we have to fix.
B_Fix the package to read the new mesh
1_ Open your skirt package and go to the warehouse tab. I only have a swatch to speed up the process. IF you are planing to have more than one add them later
2_Select the skirt geometry LOD 0 which should be the same as mine or simply the first one with a skirt that you encounter from the top of the list. If you’r not sure check its weight. It should be the biggest. Press duplicate and change the last number to 1. You can change to any number. Be careful to not name it as another element in the package.


3_Select Region map and then Edit Items on the entries line. Select Region Type:0 and then edit items.
4_You should see the code number referring to the geometry you duplicated. Select it, click on copy and change the group number to reflect the one you gave to the geometry you duplicated.

5_Save twice and you should be on S4S warehouse again.
6_Click on the only CAS PART you have and scroll down till you find the lods line. Click on edit items.

7_ Select Level:0 and then Edit Items on Lodmodels line. Repeat the same process you did in the region map. Select the line that has the same group number of the geometry that you duplicated, copy it and the change its group number.
8_Save twice and you should be back to the S4S.
9_Click on the Studio tab and then meshes tab.
10_Import the blend file and it should look like this. Save and test it in game
As you can see in your game there is going to a clipping problem and a texture problem.
The clipping problem will happen when your sim will walk, sit or dancing.
If you test it in game you well see that when your sim will sit the inside of the skirt will be invisible. I’m going to show you how to fix that, It is optional. You can either do it or not.

Optional: Create the inner part of the skirt, a border and fix the clipping problem
Clipping
You can either change the weight or edit the mesh.
The easiest method is to edit the mesh
1_In this case I selected the skirt and scaled it to be a bit bigger. You can do it by pressing S.
2_I reshaped the waist to match the body.

3_ You will notice that the legs still clip with the skirt. Select the part that clips and try to flatten it. Select the vertices that appear clipping in game, press G and then move them towards the body.
Check in game. If there are clipping problems you will have to go back and keep working on the mesh.
You can choose what to edit and how to edit it. In this case I decided to edit the legs because the legs will be blurred by the skirt.
Inner part
I will show you how to create a thick skirt. You can create a thinner one. It’s all about your personal choice. I chose this way so it was easier to show.
We are going to duplicate the skirt, scale it and flip it’s layer direction so it will not be invisible when our sim will sit or the camera goes under her/his skirt ;P
1_ In edit mode select the skirt and press shift+D. Do not move. Press ESC
2_Do not deselect. Press S, write 0.90 and then press Enter.
You can either write 0.90( or any value ) or simply scale with the mouse. It’s a personal choice.
Optional : Do not deselect and assign a new material to the inner part. This way you can select it really fast if you need to edit it.
4_The inner skirt needs to be selected. On your left you should have a tool bar. If not press T. Click the shading/UV tab and and then click on flip directions.

3_ We need to connect the 2 parts. We can connect them by merging the bottoms or create a border. You could avoid connecting them but that depends on your design.
If you create a border you will have to edit the uv_0 and uv_1
4_In case you want to create a border you have to select 4 vertices and press F to create a face. Keep doing it till the border is complete. Once it is created, select it and then assign a new material to it so the selection process is easier and faster


C_Fix the UV map 0 and 1
We need to fix the UV map. As you know EA had an amazing idea when designing TS4 CAS parts. They made it that each item share the same texture field. It’s all about the placement inside the rectangle. Each spot is for a CAS part. As you can understand the legs and the skirt technically share the same spot. We want the legs to have their own texture which means we have to move the skirt UV map somewhere else. Till now (April/May 2015) we can’t append an external DDS to the package to use in cases like this. The only thing we can do is to find a spot that is not used for anything and hope that none else uses it.
UV_0
In this project the inner skirt and the outer skirt share the same texture.
1_Select the skirt, change to edit mode and then press A. You may have to press A twice to get the mesh highlighted. On your left you should have the UV map editor. IF not open a new window and switch the view to UV map editor.
2_You should be able to see the UV map of the skirt. You will see only one island but there actually 2. We cloned the skirt to create the inner skirt which means that its uv map is the same of the outer skirt.
3: Press A to select all and then G to move the islands. Switch between the diffuse map and the body texture so you can find the proper spot where to place. I usually try to place over the part that was used for the bottom of the skirt.

For this tutorial I simply scaled the islands ( S on the keyboard to scale ) and moved them. The texture is simple and the shirt should not lose to many details. In case I had to release it with a detailed pattern or decoration I would re create the UV map from scratch. To avoid texture overlapping you have to test in game and be sure that it works with any EA base CAS parts. There are maps on line of the UV map standard positions. Use that as guide.
4_ Export the uv map layout by clicking on UVs and then export UV layout. This picture is really important because it will help you place the texture on the DDS.
5_Open the DDS and the uv map with your 2D editor. Copy and paste in place the uv map in to the DDS. It’s going to be your guide. I scaled the texture to make it match the UV map and then I created a gradient black to white and used it as alpha.

Remember: White is mat and black is clear. Plan accordingly to this rule.
IF you merged the bottoms your are done, you can test it game and fix any overlapping texture, work on details and create the skirt you want :D. Once you are done jump to the next step. You still need to fix LOD 1-2-3 ;P
IF you created a border we still have some work to do.
Since we created new faces we have to fix them in uv_1 and uv_0
The UV_0 zero is really simple. On the right side of the skirt there is the EA texture seam which means that the front and the back are connected on the left side of the mesh. We want the border texture to match the skirt. It will help when working on UV_1 and recoloring it.
1_Select the vertices as shown in the picture and click mark seam in the shading/Uvs on the tool bar on your left.
This will cut the uv map in that point when unwrapping.

2_Select the border. If you assigned a material to it you can select one of its faces, press shift+G and then material. To do so you will need to switch from vertex selection mode to faces selection mode.
3a_Unwrap the uv map and, fix it’s distortions and then place it. You can either place it close to the skirt texture or somewhere else. It’s all about you and your project.
3b_ If you don’t know how to unwrap the uv map I will try to quickly explain it. On your left tool bar, shading/UV map tab, click unwrap. In this particular case I rotated because I know that the top part is the front. I rotated it, and then roughly selected the extremities and rotated them again.


Selected the bottom line of vertices, pressed W and then align to Y. I did the same thing for the top line. Select all and scale it, rotate it if needed and position it.

UV_1
If you are going to create new meshes or change an EA mesh so much that doesn't resemble its base you always have to edit the UV_1. The UV_1 is not used for rendering purpose. It tells to the game which sliders to use on that part and how to distort it.
We connected 2 meshes by creating new faces but not new vertices. This is the reason why we don’t have to play with the weight :D

Skirt, edit mode
Go to the object data tab and select UV_1

1_Repeat step 3b
2_ Once the island is straightened we need to split in 3 parts and place it accordingly to the uv_1 set up. If you select the whole skirt you see how it is split in 3 parts.
3_Select the border as shown in the picture and the skirt. Move the island of the border and attach it to the center part of the skirt.

4_ Select the border as shown in the picture, repeat step 3 and place the strip of uv map to match the right part of the skirt.

5_ Last part of the border goes in to the left part of the skirt.
It should look something like this. You can see that there is one more line of vertices at the bottom of the skirt. This is not a perfect way to place it. We should scale the inner skirt island and connect the outer skirt with the inner skirt with the border uv map. Since we don’t have many details we don’t have to be to precise. The important thing is that the islands are in the correct position.

Vertex Paint
The vertex paint is important because it will say to the game if that part will need sliders and if so how it should stretch it. The waist part is green because fits the body. The skirt is yellow because is soft and loose .
Switch to Vertex paint, pick yellow color and paint the bottom.

Save and import it.
Let’s make it transparent.
The meshes and the texture are done. We need to change the shader so the skirt will actually be transparent.

1_Select the skirt geometry. The one you cloned and click the Data Tab.
Scroll down till you see the shader line and change it to Simglass.
Save and test it
LOD 0 is completed :D
E_LOD1-2-3
At this point we have LOD 0 ready. We need to get LOD1-2-3 ready as well.
To do list for each LOD:
I suggest you to work on 1 LOD at a time.
Add a geometry ( Step B)
We need to fix the package to read one more cut for each LOD. Do you remember that I told you to select the first skirt you found in the warehouse?
For LOD1 you have to pick the second skirt. LOD 2 is the third and LOD 3 is the forth skirt.
Region map part: Repeat the same steps, check the one to clone and give the same group number that you gave to the geometry you duplicated. Do it on region map 0 as I said on step B. The region numbers are not linked to LODs.
CAS PART: Cas part is the same as step B. We have to work per LODS which means that instead adding the geometry to level 0 you will select the correct LOD line. If you are working for LOD 1 you pick level 1 and so on.
Change the shader for each new geometry
Reduce the poly count of the mesh. I usually use Decimate tool and I reduce it by 25 %. Do not worry if LOD 2 and LOD 3 meshes look like poo. None will ever notice since the game will use them when you are really really far.

This is the result. The process is a bit long and a lil complicated if you never did anything like this. That’s why I chose a basic project.
Let me know if you have any doubts or questions. Let me know if I’m not clear when explaining something.
UN