Low Poly Game Plants

Transcription

1 Low Poly Game Plants In this tutorial we are going to create some very simple low poly plants like the kind you find in video games all over the place. If you don t need to know the photoshop steps, or simply need to learn the 3D portion of this tutorial you can download my final textures for this part here: and just skip to page 10 of the tutorial. If you would like to know the photoshop steps please continue on from here without downloading the finished textures. So we use textures to create the illusion of a plant that has many leaves and stems and branches. You will need to download a photograph which we will use to create several maps using Photoshop. You may download the initial image here: You can take a photo of a plant yourself if you like but you will have to be very knowledgeable about photoshop in order to separate out a single leaf like this photographer already has. You can usually find a plethora of wonderful stock images (some of them free some not) on the internet. Just do an internet search for the type of leaf you are looking for. We will use a simple royalty free fern leaf. Yours will be straight up and down but I am saving room on the page so I turned it sideways! 1

2 Open the image you downloaded in Photoshop, I am certain other programs such as Gimp can do the same things we will do, probably with different names and locations for the tools but it is doable. I do all my tutorials using industry standard software however for the simple reason that they are probably what you will encounter in the real world work place over most other software. Currently the image is far too large for a game texture, but we always want to work large and then save smaller. So we will create our separate textures at this size and then shrink them when we are finished. With the leaf image open, go up to the menu at the top of the program, and open the Select Menu to find the Color Range Selection tool. 2

3 It will open a select via color range menu. Simply move your cursor over the black background portion of the image, it should become a color picker icon. Click anywhere on the color black. The program will attempt to select anything in the scene that is black and nothing else. After you have clicked on the black background just hit OK. A Selection will be made and a moving dashed line will run around your image wherever the black borders another color. Like this 3

4 We have selected the background, but what we really want is the leaf. So we can go back to the Select Menu, and from there we can simply click on Inverse. The dashed line around the edges of the image switch and only your leaf is selected now. Hit Control+C to copy it to the clip board. In most cases simply pasting the image again will create a new layer for you. Depending on your version of Photoshop and/or how you have the program configured, try to simply Control+V to paste the leaf image right in the same file. Look at your Layers window to see if it pasted a leaf on a new layer, it should look like this if it did. If you don t see the layers window anywhere, you can turn it on by going to the Window menu at the top of the program, and clicking on the word layers or hitting F7 on the keyboard which is the default hotkey to turn the window on or off. 4

5 If you don t see a second layer after you have pasted, then you will have to create one yourself to paste it to. The easiest way to do this is the hotkey Shift+Ctrl+N. You can also go up to the menu button in the layers window and find New Layer there. Then simply control V to paste your copied leaf on the newly created layer. Perfect, we now have a copy of the leaf without anything else. You can click on each layer to select them and do work on the specified layer. Now that we have the leaf separated out from the background it will be easier to create the image for a Mask to use in 3D Studio Max later on. Hold Control and click on the thumbnail image of the new leaf layer. This is a quick and easy way to select only the pixels on a specific layer, since we cut out leaf out of any background area we can now quickly and easily select just the leaf again and again without fuss and a lot of extra work. Next, click on the eyeball icon next to the Background layer to hide it from view just for a moment. 5

6 You will see that while the color range selection method overall does a great job, that it does leave an outline of sorts around our leaves a little. This is why I prefer leaves with a dark background. The outline when inside a game doesn t show up near as much as a white one would. White stands out to the eye and black recedes from it so this probably will not bother our little experiment at all. Of course a true texture artist would be a master of photoshop and would spend the time to get rid of this black, green, or white or whatever the background color was originally completely. There are many tips and tricks to accomplish the removal of these outlines but for this tutorial I think it is unnecessary. If you are fairly good at photoshop you can try to zoon in and do another color range select of the black and delete whatever gets selected this will be the quickest way but not as accurate. You can Ctrl+Click the thumbnail of the leaf we extracted to select the entire leaf, do a Select-> Inverse, then a Select-> Modify->Expand and expand the selection by 1 pixel and delete whatever it selects as well. This will get rid of everything but the last bits of black in the corners between the leaves. Those are just a couple of ideas if you truly did want to go in and get rid of this outline. I am not going to bother for the purpose of this tutorial as I think it will simply waste time and not make a huge difference in the end anyhow. I just wanted to hide the background layer and show you the outlines existence before moving on so you are aware of it in the future, especially if you are forced to extract a leaf from a white background. So go ahead and click the icon where the eyeball was to turn the background layer back on. 6

7 Just to be on the safe side we will keep our separated leaf as is and create a new layer to make the mask. Either go to the Layers window menu in the upper right corner of the layers panel like I showed you earlier, or simply hit Ctrl+Shift+N on your keyboard to make a new layer. A Dialogue box will appear, Give your new layer a name like I did above and hit the ok button. Now that we have 3 layers to work with, the original background image, the leaf cutout, and a new layer with nothing on it we can easily create a solid white mask for use in 3D studio and any other program that uses masks to create cutouts. Make sure your new layer is highlighted / selected. Then Ctrl+Click the thumbnail image in layer 1 to load the leaf selection area just like we talked about earlier. This loads the selection in the exact shape of our leaf only we are still manipulating only the new layer with nothing else on it. With the Mask layer highlighted the selection remains for us to fill in with whatever we like. In this case we are creating a mask so it has to be solid white. Use the hotkey Shift+F5, or go to the Edit menu at the top of your screen and find Fill. Make sure you change the Use: dropdown menu to White and then hit the OK button. 7

8 The selection will fill in completely white, on top of a black background this will be used to cut the leaf out inside the 3D software and works much easier than dealing with alpha channels and all that. Now we can shrink our image to a game engine manageable size and go on from there. Go up to the Image menu at the top of the program window and then find the Image Size 8

9 Most games use a standard size of 1024x1024 maximum for their textures these days. For things like plants and other small objects they can go smaller to save memory and computing power. So we will make our leaves a little smaller but remember there is wiggle room here nowadays with computers and consoles constantly getting more and more powerful. Change the Height dimension to 512 pixels. This was the old maximum size and still works well for small decorative objects found in a game world, especially since they are usually duplicated many times to give the illusion of crowded foliage etc. Then click ok. Now we are ready to save this mask image out, go up to File-> Save As and save a.jpg in a location of your choosing with a name that works for you. I will not illustrate how to save a file here as I am operating under the assumption that everyone has done this before and it works the same way in every program I have used. Now that we have our mask image, we need to save our leaf image at this size. Simply hide the Mask layer by clicking on the eyeball icon next to it, and save a new.jpg file of the leaf in full color. I recommend something standard for your filenames like Fern_Color.jpg and Fern_Mask.jpg, which tells you and anyone else working on the project exactly what they need to know to use your textures. 9

10 Now we are ready to go into 3DS Max and create the model for our plant. So open a new scene in 3DS Max and we will continue there. If you don t need to know the photoshop steps, or simply need to learn the 3D portion of this tutorial you can download my final textures for this part here: Once inside 3DS Max we are going to create a simple low poly surface to apply our textures to. We will start with a simple standard primitive, so go to your Create Panel on the right hand side of the screen select the geometry button, make sure the standard primitives is in the dropdown menu, and then click the button that says Plane. With the Plane button toggled on, you can click and drag out a plane in your Top viewport. Make sure it is in the TOP viewport, default for this viewport is in the upper left corner. It doesn t matter what size you make it as we will adjust all this in the modify panel momentarily. 10

11 Next click on the Modify tab to move over and manipulate the settings of our plane. I have chosen the Length and Width settings based on the size of our image we created. Which were 384x512 pixels. If we keep the same aspect ratio and shrink it down we get 45x60. So I have just plugged those values in. We are going to want 6 length segments so we have enough to curve the plane like a leaf might bend to gravity, but we don t want any segments in the other direction as they will add more polygons which we don t need. Sometimes an artist will add a few segments in the width so they can simultaneously curve the leaf in the other direction as well however, but for the purpose of this tutorial we will keep things simple. Now we have our leaf! Well, we have a surface to paint our leaf onto so to speak anyhow. Which is what we will go ahead and do next. 11

12 Open up the material editor in 3DS Max by hitting M on your keyboard. Choose any of the texture slots by clicking on a blank grey sphere pictured above the settings, and then find the Diffuse color swatch and click on the empty box next to it, we call this a Channel Box. In newer versions of 3DS Max you will have access to a new Slate Material Editor, same premise but now in a handy flowchart. I am using the Compact mode so if yours doesn t look like mine, you can change it by simply going to the Modes menu at the top of the material editor and changing it to Compact Material Editor Diffuse is the main color of our object, it can be changed by simply adjusting the color of the swatch, or we can put a map in the Channel Box. In our case and in most cases we have made our texture as a photo image in Photoshop for the main color of our object. So we will load it in the Diffuse Channel box manually. Once you click the diffuse channel box a list will open, select Bitmap from the list and navigate to the Fern_Color.jpg that we saved during the Photoshop step. Notice that your blank sphere changes to a sphere with a picture of our leaf wrapped around it, changing the default color to the image we created. It also moves you into a new settings menu that we don t have to do any changes to, so you can click the Go to parent button to return to the top of our texture stack. 12

13 We can now apply this to our plane and see the results of this step. To apply a material simply drag and drop from the sphere in the material editor to the plane. Or make sure the plane is selected and press the Assign Material to Selection button below the texture slots. It will look as though nothing has changed on your plane, and that is because we need to turn viewable textures on for our viewports. Simply click the Show Shaded Material in Viewport button a little further down from where we just clicked. Now your plane should be itself, only with a bright green leaf on it. 13

14 This of course will not do us at all, all the black background is clearly visible and if you saw this in a video game you d shut it off and walk away! so we will use an Opacity map to get rid of any unwanted visible areas on our leaf image and make it appear as though it is not a plane, but an intricate model full of tiny leaves and stems etc Go back to your material and find the Opacity Channel Box. We can simply adjust the visibility of this textured item by adjusting the value between 0 and 100% this comes in handy when you want to make or animate something disappearing completely but we can also use an image. Like most of the maps in 3DS Max this property functions on a grey scale value. Meaning, that whatever is white in the image will be fully visible (or opaque) and whatever is black in the image will be full invisible (or transparent). Anything in the greys will be visible in between depending on how dark the shade of grey is. This is why we made a white leaf with a black background mask. We want the leaves fully visible and the background to go away. So click the Opacity channel box, select Bitmap once again from the list and find the Fern_Mask.jpg that we created during the Photoshop step. Loading in this image in the Opacity channel immediately erases all visible traces of the background on our silly little plane. 14

15 No fuss, no advanced modeling necessary, and low poly as can be! Next step we will curve the leaf a bit, and duplicate it into an entire plant. First step is still right here on the modify tab where we changed the settings to our plane. The Modify List is a drop down at the top of the Modify panel. Click to open it and in the list of available modifiers find and select Bend. This will add the modifier to the top of the stack, above your plane which is now the bottom or base of our stack. Next we will have some new settings, note that you can always get back to the original settings of your plane by simply clicking Plane in the modifier stack window. (The light grey area above the settings) First change the axis on which the bend will take place to Y we do this because our plane is lying flat on the ground and we want it to bend around the y Axis. Then increase the value in the Angle: field to about 45 to start, you will notice that our plane bends but in the wrong direction. Adjusting the Direction: value until you see it bending in the correct fashion is our next task, the value that works best is at about 270, or 90 degrees times 3. Always be taking a look at what happens in your viewport as you make changes to settings so you can get a good idea of what they all really do for you. These settings give me a nice casual bend to my plane, making the leaf have the illusion of gravity. 15

16 The only issue now is that gravity doesn t start pulling on both ends from the middle. It begins at the stem or branch and pulls down more the farther it gets from that point. Currently our leaf is pulling from the center. This is a fairly easy fix, look at your Modifier Stack. (the light grey box with the plane, and Bend in it stacked on top of each other.) Click the Plus sign to open up the sub-object list for the Bend modifier. When it opens you have two sub-objects in this modifier, a Gizmo which is the entire orange wireframe cage around the plane, and a center which is the little crosshair at the center of the bend. Select the Center and simply Move it back to where the stem starts with the Move tool. You should notice that the bend now starts at the beginning of the leaf at the stem now just like it should. 16

17 Unclick the Center to deselect it. We are looking good, we can tip this up a bit using the rotate tool but before we do notice that the pivot point, or center for the leaf itself where the move tool actually shows up when the leaf is selected is still back in the middle. We are going to end up making copies of this leaf all the way around each other and this will be much easier if this pivot point was also at the beginning of the stem. 17

18 We take care of this by clicking on the Hierarchy tab, the next tab over in our command panel on the right side of your screens. The affect pivot only toggle switch will let you move the pivot point without moving the rest of the leaf. Turn it on. Then with your move tool simply move it to the end of the stems location. When you have moved it to the end of the leaf and away from the center of the leaf, simply turn the Affect Pivot Only toggle button off. 18

19 Then activate your Rotation tool and rotate your leaf up a little. A stem would normally be pointing the leaf out and up slightly towards the sun, rather than pointing directly out from the side which makes our plants look a little flat. Perfect! We are now ready to duplicate the leaves of our plant and we have already set ourselves up to do this by moving the pivot point. We can simply hold down shit and rotate the leaves one at a time making copies, but there is an easier way called an Array. Activate your Top viewport by clicking in it so you see the upper left quadrant encircled in a yellow line. Where we do the array from makes a big difference. And our plant needs to go around the Z-axis spreading our leaves out, rather than around themselves making a total mess so we choose to rotate and duplicate from the view looking down on them. Then go up to your Tools menu at the top of the program, and find Array. 19

20 Selecting Array from the tools menu will open up the array dialogue box. We will always use the Pivot Point Center when working with an array so if we had left it in the middle of our leaf, they would copy and rotate from there making a rats nest of a mess. Since we were smart enough to move it to the stem, where a plants leaves would begin and form an array outwards from all sides we are ahead of the game. 20

21 When you are working with array the first thing you want to do is turn on the preview toggle switch in the lower right corner of the dialogue window. This lets you see the changes before you make them official and is always handy. Then give the Count a setting of 6 (six new leaves in our case) in the Array Dimensions settings. Then along the Z axis rotation increase the value until they are all the way around pointing in all directions. Note that you can change this from increment to degrees by clicking the arrow next to the word rotate pointing at one or the other. In your viewport you should be seeing this happen, when you are satisfied hit OK to close the array dialogue. 21

22 That is it! Now just copy one of the leaves shrink it a little, move it up and do another array until your plant has filled in, maybe rotate your leaves a bit so they aren t all perfectly straight etc. I will leave the rest up to you since it is all rinse and repeat from here! I hope you enjoyed this one and learned a few new things! Go now, and populate your virtual worlds with foliage! 22