How mapping works & how to map & bake a cube: Part 1
Jan 12, 2016 14:35:47 GMT -5
midnightpearl, mehrlicht, and 2 more like this
Post by orangemittens on Jan 12, 2016 14:35:47 GMT -5
Introduction
This tutorial will show you how to map a basic mesh that is based on cubes and then make a template for your map that can be used to create a diffuse texture and recolor textures. It will also go over the fundamentals of how maps work and show you how to bake your mapped mesh.
This tutorial is meant to augment my start to finish painting mesh tutorial and it will not go over the steps needed to make a basic cube object. Instead it starts with a very simple mesh that consists of basic cubes resized to match EA's single tile table scale and re positioned to form a table. To get started you should first clone a single tile EA table and use that to size your table after adding cubes to the scene in Blender. If you aren't sure how to do these steps please see my start to finish painting tutorial first. Again, this tutorial was written to focus more closely on mapping, provide another example and method of how to map, and to more fully explain how a mesh map works and how it relates to the textures you put on a mesh when you create a diffuse image or recolor images for it.
Once you complete this tutorial you can move to the second part HERE.
What you will need
Sims 4 Studio
Blender 2.70
A 2D editor (Paint.Net, Photoshop, GIMP, etc.)
A table mesh made of basic Blender cubes
Instructions
1. Open the .blend you exported from Studio and create your table top using the EA table as your sizing reference. Next create a leg for the table. There is no need to create all 4 at this time as we will map and bake one and then duplicate it for the other legs later. Once you have a single legged table similar to the one below hide or delete EA's mesh. Select your table top.
2. Switch into Edit Mode.
3. Click the a key on your keyboard to select the entire mesh.
4. Click the Shading/UV's tab.
5. Click the Unwrap button to get the unwrap drop down menu and select Cube Projection.
6. You will see your table top map parts show up in the UV/Image editor.
When you look at your mesh you will notice that the top and bottom of it are roughly square while each of the 4 sides is rectangular. Your map parts will match this and it will have 4 rectangular pieces and two square pieces. Blender will create the map differently based on mesh size/Blender settings. With the default settings Studio exports .blends with and a table the size of an EA table Blender will create the map as it appears below. The square faces are located in the same place on the map and the rectangular faces are located in a second place on the map stacked on top of each other.
7. Click the word Image in the menu bar below the UV/Image editor window.
8. Select New Image from the pop up menu.
9. Select the size you want your map to be. Remember, the game requires images that are sized in powers of 2 (2n). The range of numbers that are powers of two that work well in the game include 128, 256, 512, and 1024. You can make your map square or rectangular. I am choosing 512 x 512 because this size will give me plenty of space for a detailed image without being overly large.
10. Select UV Grid.
11. Click OK.
12. In order to see the image showing in the UV/Image editor window on your mesh in the 3D view put your cursor in the 3D view box and click the n key on your keyboard to bring up the side bar menu. Scroll it if you need to until you come to the Shading section.
13. Select Multitexture instead of GLSL. If you do not immediately see the checkerboard texture on your mesh make sure you have Texture selected in the Viewport Shading box.
14. Click 1 on your keyboard number pad to get the Front Ortho view of your mesh.
15. Place your mouse cursor in the UV/Image editor box so that it is lying over the small rectangle. Click the l (lowercase L) key on your keyboard. This will cause the top rectangle to be selected and it will turn orange.
16. Click the g key on your keyboard to grab the top rectangle and slide it off the grid as shown. It should be in the solid grey work space that surrounds the checkerboard map space. As you move it you will note that the texture on the front of your table top mesh is moving. This is because the small rectangle represents the front face of your mesh. As you move this small rectangle the texture it lies over is changing and this change is reflected in the texture that is shown on that part of your mesh.
17. Place your cursor in the 3D view box again and click the 3 key on your keyboard number pad to get the Right Ortho view.
18. Place your cursor in the UV/Image editor over the unselected small rectangles. Click the a key on your keyboard to deselect the previously selected rectangle and click the l (lowercase L) key to select the next rectangle. Press the g key to grab it once it turns orange. Move it off to the right side of the checkerboard map space so it is lying on the solid grey workspace which surrounds the map.
Repeat this for each of the small rectangles. The next one you move will represent the back face of the table top. Move that one below the checkerboard map space. The last one you move will be the left side face. Move that one to the left of the checkerboard work space.When you're done you should have something that looks like this:
19. Once all the small rectangles are off the mapping space move the first square the same way that you moved the rectangles. As you move it you will see the checkerboard texture moving over the top of the tabletop mesh. This square represents the top of the mesh.
20. Move the last remaining map piece off of the mapping space. This piece represents the underside of the table top.
21. Once all the pieces are off the map space select all but the last square that you moved by clicking the b key on your keyboard and drawing a square around each piece. If you cannot get them all with one box selection click the b key again and select the ones that remain unselected. Using the b key is cumulative in that it will not de-select selected items as it selects additional ones. When you're finished all but the square that represents the underside of the tabletop should be orange.
22. Click the s key on your keyboard to initiate Blender's scaling function. When the double headed arrow appears type in the number 1.5. This will cause each selected piece to increase in size so that it is one and a half times bigger than it was. If scaling causes a selected map piece to overlap the unselected map piece click the g key on your keyboard and move the whole group over so there is no overlap.
Scaling the map pieces so they're larger will make images placed on your item crisper because the texture placed over the map piece is placed on the mesh face it represents. If the map piece covers a small area only a small portion of your image will appear on the mesh face and it will be scaled up to cover the face. As images are scaled up they lose quality and start to look blurry if scaled up too much. To see this more clearly compare the appearance of the checkerboard image before you scale with the appearance of it after you have scaled. Before you scaled the squares are larger than they are after you scale. If this were an image instead of checkerboard the same thing would happen...the image would be enlarged to fit the faces of your mesh. This causes the same thing to happen that you see if you enlarge an image in your 2D editor...once you begin to enlarge it too much it will become blurry and/or pixellated.
23. Click the a key to deselect the map pieces.
24. Place your cursor over the square map piece that you enlarged (the piece that corresponds to the table top) and click the l (lowercase L) key to select it.
25. Click the g key to grab it and slide it onto the map space.
You can place any given map piece anywhere on the map that you want as long as it does not overlap some other map piece. The key to placing things on a map is to give them a small amount of separation from other pieces (which makes it easier to recolor) and to waste as little space on the map as you can. Efficient use of map space will allow you to use smaller image sizes and smaller image sizes are easier for the game to render on your mesh in the game. The ideal map has every part of it covered with a map piece with all map pieces a small distance apart. Once you've placed a map piece you can always move it to another location on the map if you spot a better way to organize things. I usually place the largest most important map pieces first and fit the smaller ones in around them but you can place the map pieces on the map in any order that works for you.
26. Repeat steps 23-25 for the top and bottom map pieces. These are the ones above and below the map space. Then click the a key on your keyboard to deselect the last selected piece and select one of the two side pieces. As you can see from the picture below this piece will not fit on the map without overlapping some other piece. For this reason we will rotate it so that it will fit. To do that click the r key on your keyboard followed by 90. This will rotate it clockwise by 90 degrees.
27. Click the g key to grab the rotated piece and slide it onto the map as shown below.
28. Repeat the above steps for the other side piece and place it next to the other side piece.
29. Deselect that piece and select the last map piece that is not on the map.
30. This last piece represents the bottom surface of your table top. Since players cannot really see this face we will shrink this map piece a bit to make more space available on the map for parts of the mesh that they see very clearly. To do that click the s key to initiate Blender's scaling feature. When the double headed arrow appears slide your mouse cursor toward the map piece so that it becomes smaller as shown below.
When it is smaller click g to grab it and slide it onto the map. When you're done your map should look something like this:
You're done working on the table top map in Blender for now. Export the UV map image by clicking the a key on your keyboard twice to first deselect the last piece you moved and to select all the pieces. Then click UV in the menu bar below the UV/Image Editor and select Export UV Layout. Name and save the image in your project folder as a .png. Minimize Blender or save your .blend and close Blender.
Open the UV map image you just saved in your 2D editor. It will look something like this:
31. Add a new layer and, using your select function, select the area covered by the largest square. Bucket fill it a solid color. You can pick any color you want.
Repeat this for each of the rectangles and the second square. When you're done you should have something like this:
Save the image as a .png.
32. Bring Blender back up or open your saved .blend. Click Image in the menu bar below the UV/Image editor.
33. Select Open Image from the menu. Navigate to where you saved your colored UV map image and select it.
34. Blender will open your new colored UV map and place it on your mesh. It should look something like this:
Now you can clearly see the various map pieces and how they correspond to the faces of your tabletop mesh. Whatever color you chose for the large square is displayed on the top of your mesh. Any image you paste on top of the large square portion of your UV map will show up on the top. The same is true of the side pieces and the square that represents the underside of the table.
35. Because the front and back of your table cannot be seen at the same time in the game and because they have the same amount of light hitting them during the baking step (more on that later) they can share a place on the map. Click the l (lowercase L) key on your keyboard with your cursor over either the front or back map pieces and then slide it so it lies directly over the other piece. Similarly the left and right sides of your table cannot be seen at the same time in the game and they have the same amount of light hitting them during the baking step. Select one of them and slide it so it lies directly on top of the other. When you're done you will have something like this:
Moving these pieces has freed up a good amount of space on the map which will allow us to fit the leg pieces on it. Save your .blend. The next part of this tutorial will go over mapping the leg, getting the two different mesh groups onto the same map, baking the final map, and using the bake image along with the UV template to make an image for the mesh.
Part 2 of this tutorial is HERE.
This tutorial will show you how to map a basic mesh that is based on cubes and then make a template for your map that can be used to create a diffuse texture and recolor textures. It will also go over the fundamentals of how maps work and show you how to bake your mapped mesh.
This tutorial is meant to augment my start to finish painting mesh tutorial and it will not go over the steps needed to make a basic cube object. Instead it starts with a very simple mesh that consists of basic cubes resized to match EA's single tile table scale and re positioned to form a table. To get started you should first clone a single tile EA table and use that to size your table after adding cubes to the scene in Blender. If you aren't sure how to do these steps please see my start to finish painting tutorial first. Again, this tutorial was written to focus more closely on mapping, provide another example and method of how to map, and to more fully explain how a mesh map works and how it relates to the textures you put on a mesh when you create a diffuse image or recolor images for it.
Once you complete this tutorial you can move to the second part HERE.
What you will need
Sims 4 Studio
Blender 2.70
A 2D editor (Paint.Net, Photoshop, GIMP, etc.)
A table mesh made of basic Blender cubes
Instructions
1. Open the .blend you exported from Studio and create your table top using the EA table as your sizing reference. Next create a leg for the table. There is no need to create all 4 at this time as we will map and bake one and then duplicate it for the other legs later. Once you have a single legged table similar to the one below hide or delete EA's mesh. Select your table top.
2. Switch into Edit Mode.
3. Click the a key on your keyboard to select the entire mesh.
4. Click the Shading/UV's tab.
5. Click the Unwrap button to get the unwrap drop down menu and select Cube Projection.
6. You will see your table top map parts show up in the UV/Image editor.
When you look at your mesh you will notice that the top and bottom of it are roughly square while each of the 4 sides is rectangular. Your map parts will match this and it will have 4 rectangular pieces and two square pieces. Blender will create the map differently based on mesh size/Blender settings. With the default settings Studio exports .blends with and a table the size of an EA table Blender will create the map as it appears below. The square faces are located in the same place on the map and the rectangular faces are located in a second place on the map stacked on top of each other.
7. Click the word Image in the menu bar below the UV/Image editor window.
8. Select New Image from the pop up menu.
9. Select the size you want your map to be. Remember, the game requires images that are sized in powers of 2 (2n). The range of numbers that are powers of two that work well in the game include 128, 256, 512, and 1024. You can make your map square or rectangular. I am choosing 512 x 512 because this size will give me plenty of space for a detailed image without being overly large.
10. Select UV Grid.
11. Click OK.
12. In order to see the image showing in the UV/Image editor window on your mesh in the 3D view put your cursor in the 3D view box and click the n key on your keyboard to bring up the side bar menu. Scroll it if you need to until you come to the Shading section.
13. Select Multitexture instead of GLSL. If you do not immediately see the checkerboard texture on your mesh make sure you have Texture selected in the Viewport Shading box.
14. Click 1 on your keyboard number pad to get the Front Ortho view of your mesh.
15. Place your mouse cursor in the UV/Image editor box so that it is lying over the small rectangle. Click the l (lowercase L) key on your keyboard. This will cause the top rectangle to be selected and it will turn orange.
16. Click the g key on your keyboard to grab the top rectangle and slide it off the grid as shown. It should be in the solid grey work space that surrounds the checkerboard map space. As you move it you will note that the texture on the front of your table top mesh is moving. This is because the small rectangle represents the front face of your mesh. As you move this small rectangle the texture it lies over is changing and this change is reflected in the texture that is shown on that part of your mesh.
17. Place your cursor in the 3D view box again and click the 3 key on your keyboard number pad to get the Right Ortho view.
18. Place your cursor in the UV/Image editor over the unselected small rectangles. Click the a key on your keyboard to deselect the previously selected rectangle and click the l (lowercase L) key to select the next rectangle. Press the g key to grab it once it turns orange. Move it off to the right side of the checkerboard map space so it is lying on the solid grey workspace which surrounds the map.
Repeat this for each of the small rectangles. The next one you move will represent the back face of the table top. Move that one below the checkerboard map space. The last one you move will be the left side face. Move that one to the left of the checkerboard work space.When you're done you should have something that looks like this:
19. Once all the small rectangles are off the mapping space move the first square the same way that you moved the rectangles. As you move it you will see the checkerboard texture moving over the top of the tabletop mesh. This square represents the top of the mesh.
20. Move the last remaining map piece off of the mapping space. This piece represents the underside of the table top.
21. Once all the pieces are off the map space select all but the last square that you moved by clicking the b key on your keyboard and drawing a square around each piece. If you cannot get them all with one box selection click the b key again and select the ones that remain unselected. Using the b key is cumulative in that it will not de-select selected items as it selects additional ones. When you're finished all but the square that represents the underside of the tabletop should be orange.
22. Click the s key on your keyboard to initiate Blender's scaling function. When the double headed arrow appears type in the number 1.5. This will cause each selected piece to increase in size so that it is one and a half times bigger than it was. If scaling causes a selected map piece to overlap the unselected map piece click the g key on your keyboard and move the whole group over so there is no overlap.
Scaling the map pieces so they're larger will make images placed on your item crisper because the texture placed over the map piece is placed on the mesh face it represents. If the map piece covers a small area only a small portion of your image will appear on the mesh face and it will be scaled up to cover the face. As images are scaled up they lose quality and start to look blurry if scaled up too much. To see this more clearly compare the appearance of the checkerboard image before you scale with the appearance of it after you have scaled. Before you scaled the squares are larger than they are after you scale. If this were an image instead of checkerboard the same thing would happen...the image would be enlarged to fit the faces of your mesh. This causes the same thing to happen that you see if you enlarge an image in your 2D editor...once you begin to enlarge it too much it will become blurry and/or pixellated.
23. Click the a key to deselect the map pieces.
24. Place your cursor over the square map piece that you enlarged (the piece that corresponds to the table top) and click the l (lowercase L) key to select it.
25. Click the g key to grab it and slide it onto the map space.
You can place any given map piece anywhere on the map that you want as long as it does not overlap some other map piece. The key to placing things on a map is to give them a small amount of separation from other pieces (which makes it easier to recolor) and to waste as little space on the map as you can. Efficient use of map space will allow you to use smaller image sizes and smaller image sizes are easier for the game to render on your mesh in the game. The ideal map has every part of it covered with a map piece with all map pieces a small distance apart. Once you've placed a map piece you can always move it to another location on the map if you spot a better way to organize things. I usually place the largest most important map pieces first and fit the smaller ones in around them but you can place the map pieces on the map in any order that works for you.
26. Repeat steps 23-25 for the top and bottom map pieces. These are the ones above and below the map space. Then click the a key on your keyboard to deselect the last selected piece and select one of the two side pieces. As you can see from the picture below this piece will not fit on the map without overlapping some other piece. For this reason we will rotate it so that it will fit. To do that click the r key on your keyboard followed by 90. This will rotate it clockwise by 90 degrees.
27. Click the g key to grab the rotated piece and slide it onto the map as shown below.
28. Repeat the above steps for the other side piece and place it next to the other side piece.
29. Deselect that piece and select the last map piece that is not on the map.
30. This last piece represents the bottom surface of your table top. Since players cannot really see this face we will shrink this map piece a bit to make more space available on the map for parts of the mesh that they see very clearly. To do that click the s key to initiate Blender's scaling feature. When the double headed arrow appears slide your mouse cursor toward the map piece so that it becomes smaller as shown below.
When it is smaller click g to grab it and slide it onto the map. When you're done your map should look something like this:
You're done working on the table top map in Blender for now. Export the UV map image by clicking the a key on your keyboard twice to first deselect the last piece you moved and to select all the pieces. Then click UV in the menu bar below the UV/Image Editor and select Export UV Layout. Name and save the image in your project folder as a .png. Minimize Blender or save your .blend and close Blender.
Open the UV map image you just saved in your 2D editor. It will look something like this:
31. Add a new layer and, using your select function, select the area covered by the largest square. Bucket fill it a solid color. You can pick any color you want.
Repeat this for each of the rectangles and the second square. When you're done you should have something like this:
Save the image as a .png.
32. Bring Blender back up or open your saved .blend. Click Image in the menu bar below the UV/Image editor.
33. Select Open Image from the menu. Navigate to where you saved your colored UV map image and select it.
34. Blender will open your new colored UV map and place it on your mesh. It should look something like this:
Now you can clearly see the various map pieces and how they correspond to the faces of your tabletop mesh. Whatever color you chose for the large square is displayed on the top of your mesh. Any image you paste on top of the large square portion of your UV map will show up on the top. The same is true of the side pieces and the square that represents the underside of the table.
35. Because the front and back of your table cannot be seen at the same time in the game and because they have the same amount of light hitting them during the baking step (more on that later) they can share a place on the map. Click the l (lowercase L) key on your keyboard with your cursor over either the front or back map pieces and then slide it so it lies directly over the other piece. Similarly the left and right sides of your table cannot be seen at the same time in the game and they have the same amount of light hitting them during the baking step. Select one of them and slide it so it lies directly on top of the other. When you're done you will have something like this:
Moving these pieces has freed up a good amount of space on the map which will allow us to fit the leg pieces on it. Save your .blend. The next part of this tutorial will go over mapping the leg, getting the two different mesh groups onto the same map, baking the final map, and using the bake image along with the UV template to make an image for the mesh.
Part 2 of this tutorial is HERE.
