Author: Mdp4life

Follow this tutorial step-by-step to create a low poly sword model that you can use in video games, graphic design and illustration projects whilst learning 3D Studio Max quickly. 

Some of the skills you’ll learn in this tutorial include creating basic 3D shapes, modelling techniques and preparing topology for texturing.

In the first part of the two-part tutorial, I showed you how to:

• Model the Handle of the Sword
• Model the Hand Guard of the Sword
• Model the Blade of the Sword

In this, the second part of the the tutorial series, I’ll show you how to:

• Unwrap the UVs
• Create a UV Map
• Create a Texture Map in Photoshop

05. UVW Remove

Step 1

In this section of the tutorial I’ll go through how to prepare the model so that I can unwrap it. Both UVW Remove and Reset Xform must be performed before attempting to unwrap any of the sword parts.

Ensure you have selected the sword part that you want to unwrap (blade, handle, hand guard etc.). The object must now be converted into an editable mesh. To do this Right Click on the object and select Convert to Editable Mesh. 

Step 2

Then go to the Utilities Tab and click on the More button. Scroll down the menu and select UVW Remove.

Step 3

Click on the UVW button that appears under Parameters to apply this to the selected object.

Step 4

Once UVW Remove has been applied, Right Click on the object and select Convert to Editable Poly.

06. Reset XForm

Step 1

Ensure that you’ve selected the sword part that you want to unwrap (blade, handle, hand guard etc.). Go to the Utilities Tab and click on the Reset XForm button and then click on the Reset Selected button.

Step 2

Click on the Modify Tab and right click on XForm > Collapse All to apply this to your object.

07. Unwrapping the Blade

Step 1

To begin unwrapping the blade, ensure you’ve selected it and ensure you’ve followed both sections five and six of this tutorial—UVW Remove and Reset XForm.

To make the next step easier ensure that you’re viewing the blade from the side view.

Step 2

Delete one half of the blade using the Vertex Selection tool.

Step 3

Make sure that the blade is an editable poly by right clicking on it and then selecting Convert to Editable Poly.

Step 4

Go to the Modifier List drop down menu and select Unwrap UVW.

Step 5

In the Modify Tab under the Edit UVs section select Open UV Editor.

Step 6

The Edit UVSs window appears. Use the Move Tool and the Scale Tool located in the top right of the window to move the object within the square. Once the object is within the square, click on the Reset Peel button.

Step 7

After clicking on the Reset Peel button, use the Move Tool to move the blade inside the border of the square.

Step 8

Use the tools on the top left of the Edit UVWs window (Move, Rotate, Scale) and place it on the right side of the square within the border.

Step 9

Close the Edit UVWs window. Ensure the blade is selected and go to the Modify tab. Right Click on the Unwrap Modifier and select Collapse All. 

If it becomes an Editable Mesh, convert it into an Editable Poly. Secondary Click > Convert to Editable Poly.

08. Duplicate the Blade UVs

Step 1

Use the Edge Selection Tool and select one of the outer most edges of the blade.

Step 2

In the Modifier List, scroll down and select Symmetry.

Step 3

Under the Parameters section, select the following:

• Mirror Axis: Y
• Flip

Step 4

Once the parameters have been selected, your blade should be whole again.

Step 5

Convert the blade back into an Editable Poly by selecting the blade with Secondary Click > Convert to Editable Poly.

Step 6

To check that the UVWs have been duplicated correctly, apply the Unwrap UVW modifier on the blade again by selecting it from the Modifier List.

Step 7

Move the UVWs in the Edit UVWs window to ensure that the blade shapes sit on top of each other nicely.

09. Unwrapping the Hand Guard

Step 1

Select the hand guard. The aim of this section is to remove half of each shape, so that they can be mirrored and so that they take up less space on the UVW Map.

Step 2

Select the middle tube shape and using the Vertex Selection tool, select and delete half of the shape.

Step 3

Select the middle shape and using the Vertex Selection tool, select and delete half of the shape.

Step 4

Repeat the same process for the horns. However I’ll only need one half as this will be duplicate four times because we only need one half for the texture map.

Step 5

Select all the hand guard shapes and select Unwrap UVW from the Modifier List.

Step 6

Using the same process as what was done for the blade, Reset Peel and arrange the shapes within the square. Ensure all the objects are attached to one another.

Step 7

Convert the shapes back into an Editable Poly by selecting the blade and going Right Click > Convert to Editable Poly. Using the same process as what was done with the blade, use the Symmetry modifier to make the hand guard whole again.

Step 8

Ensure that the symmetry modifier gives you the correct results by choosing the right parameters. You can also apply Unwrap UVW modifier again to check the UVWs are placed on top of each other like the blade.

10. Unwrapping the Handle

Step 1

Select the middle section of the handle.

Step 2

Using the Vertex Selection tool, delete half of the handle.

Step 3

Repeat the same steps as above to remove half of the handle for all the objects.

Step 4

Ensure all the objects are attached to each other and apply the Unwrap UVW modifier.

Step 5

Using the same process as what was done for the blade and the hand guard, Reset Peel and arrange the shapes within the square. 

Step 6

Convert the shapes back into an Editable Poly by selecting the blade and going Secondary Click > Convert to Editable Poly. 

Using the same process as what was done with the blade and hand guard, use the Symmetry modifier to make the handle whole again.

Step 7

Ensure the symmetry modifier gives you the correct results by choosing the right parameters. You can also apply Unwrap UVW modifier again to check the UVWs are placed on top of each other like the blade.

11. Render UVW Map

Step 1

Attach all the objects together with Secondary Click > Attach, then apply the Unwrap UVW modifier.

Step 2

Open the UV Editor and ensure all the shapes are arranged within the square and are not overlapping each other. You can still edit them at this stage using the Move, Scale or Rotate tool.

Step 3

Once you are happy with the arrangement of the UVs go to Tools > Render UVW Template.

Step 4

Select the dimensions you would like to render the UV Map to and then click the Render UV Template button.

Step 5

Once the map has been generated, save it to a location using the save button on the top left hand corner of the window. 

12. Create Texture Map

Step 1

Import the UV map into Photoshop and create a new background layer below the UVs.

Step 2

You can make the UVs easier to see by changing the colour of the lines. To do this, right click on the UV layer and select Blending Options.

Step 3

Select Colour Overlay and choose a white colour.

Step 4

Create a new layer underneath the UVs and create a colour map so that you can select the shapes efficiently.

Step 5

Using the UVs and the colour map, create a new layer and create some base colours for the blade.

Step 6

On a separate layer, create some base colours for the handle.

Step 7

You can create a new layer on top of your base colours to create some details to the sword. You can add some highlights, cracks and battle damage to make it look more interesting.

Step 8

Once you are happy with the results, save your Texture Map as an image file.

13. Apply the Texture Map

Step 1

Ensure you have the sword selected and then click on the Material Editor button on the top menu bar.

Step 2

Once the Material Editor window appears go to Mode > Compact Material Editor.

Step 3

Select one of the spheres that you want the texture map to appear on and then click on the empty box next to Diffuse.

Step 4

Scroll up to the top of the Material/Map Browser and select Bitmap.

Step 5

Select the Texture Map image that was created in Adobe Photoshop.

Step 6

Ensure the sword model is selected and then click on Assign Material to Selection and then click on Show Shaded Material in Viewport. 

Step 7

This should apply the texture map to the 3D Sword Model.

Conclusion

And with that, the 3D Low Poly Sword is complete. Feel free to share the own creations below. Explore different objects, shapes and colours to find out what works best for your model.

You can also render the model and export it to Adobe Photoshop to create an image for your portfolio.

This tutorial is different from my earlier tutorials as this one is oriented towards game jams and game prototyping, specifically card games. We are going to create a 2D playing card deck in Unity without using any art—purely with code.

1. Components of a Playing Card Deck

A playing card deck has a total of 52 cards with 13 cards each of 4 different symbols. In order to create one using code, we will need to create these 4 symbols, the rounded rectangular base for the card, and the design on the back of the card.

The design on the back of the card can be any abstract pattern, and there are numerous ways to create one. We will be creating a simple tileable pattern which will then be tiled to create the design. We won’t have any special design for the A, K, Q, and J cards.

2. Alternative Solutions

Before we start, I have to mention that there are easier solutions out there which we can use to create a deck of cards. Some of those are listed below.

1. The obvious one is to use pre-rendered art for all the designs.
2. The less obvious one is to use a font which contains all the necessary symbols. We can also turn the said font into a bitmap font to reduce draw calls and increase performance.

The font-based solution is the fastest and easiest one if you want to do quick prototypes.

3. Creating Textures During Runtime

The first step is to learn how to create a Texture2D using code which can then be used to create a Sprite in Unity. The following code shows the creation of a 256×256 blank texture.

Texture2D texture = new Texture2D(256, 256, TextureFormat.ARGB4444, false);
texture.filterMode=FilterMode.Trilinear;
texture.wrapMode=TextureWrapMode.Clamp;
texture.Apply();

The idea is to draw all the designs onto the texture before we use the Apply method. We can draw designs onto the texture pixel by pixel using the SetPixel method, as shown below.

texture.SetPixel(x, y, Color.white);

For example, if we wanted to fill out the entire texture with a color, we could use a method like this.

private void PaintRectangle(Texture2D texture, Rect rectBounds, Color color)
{ for (int i=(int)rectBounds.x;i<rectBounds.x+rectBounds.width;i++){ for (int j=(int)rectBounds.y;j<rectBounds.y+rectBounds.height;j++){ texture.SetPixel(i, j, color); } }
}
//
PaintRectangle(texture,new Rect(0,0,256,256),Color.red);

Once we have a Texture2D created, we can use it to create a Sprite to be displayed on screen.

Sprite sprite = Sprite.Create(texture, new Rect(0.0f, 0.0f, texture.width, texture.height), new Vector2(0.5f, 0.5f),1);

The complicated part in all this is the creation of the necessary designs on the texture.

4. Creating the Heart Shape

When it comes to the creation of the heart shape, there are many different approaches which we could use, among which are some complicated equations as well as simple mixing of shapes. We will use the mixing of shapes method as shown below, specifically the one with the triangle.

As you have observed, we can use two circles and a square or a triangle to create the basic heart shape. This means it would miss those extra beautiful curves but would fit our purpose perfectly.

Painting a Circle

Let’s brush up on some equations to paint a circle. For a circle with centre at origin and radius r, the equation for the point (x,y) on the circle is x2 + y2 = r2. Now if the centre of the circle is at (h,k) then the equation becomes  (x-h)2 + (y-k)2 = r2. So if we have a square bounding box rectangle then we can loop through all the points within that rectangle and determine which points fall inside the circle and which do not. We can easily create our PaintCircle method based on this understanding, as shown below.

private void PaintCircle(Texture2D texture,float radius, Vector2 midPoint, Color color){ Rect circleBounds=new Rect(); circleBounds.x=Mathf.Clamp(midPoint.x-(radius),0,resolution); circleBounds.y=Mathf.Clamp(midPoint.y-(radius),0,resolution); circleBounds.width=Mathf.Clamp(2*radius,0,resolution); circleBounds.height=Mathf.Clamp(2*radius,0,resolution); float iValue; for (int i=(int)circleBounds.x;i<circleBounds.x+circleBounds.width;i++){ for (int j=(int)circleBounds.y;j<circleBounds.y+circleBounds.height;j++){ iValue=(Mathf.Sqrt(radius*radius-((j-midPoint.y)*(j-midPoint.y)))); if(i>midPoint.x-iValue&&i<midPoint.x+iValue){ texture.SetPixel(i, j, color); } } }
}
PaintCircle(texture,radius,mid,Color.red);

Once we have the PaintCircle method, we can proceed to create our heart shape as shown below.

void PaintHearts(Texture2D texture){ //2 circles on top float radius =resolution*0.26f; Vector2 mid=new Vector2(radius,resolution-radius); PaintCircle(texture,radius,mid,Color.red); mid=new Vector2(resolution-radius,resolution-radius); PaintCircle(texture,radius,mid,Color.red); //triangle at bottom float width=resolution*0.58f; int endJ=(int)(resolution*0.65f); int startJ=(int)(resolution*0.1f); float delta=(width/endJ); float midI=resolution*0.5f; for (int i=0;i<resolution;i++){ for (int j=startJ;j<endJ;j++){ if(i>(midI-(delta*(j-startJ)))&&i<(midI+(delta*(j-startJ)))){ texture.SetPixel(i, j, Color.red); } } }
}

The variable resolution is the width and height of the texture.

5. Creating the Diamond Shape

We will discuss two ways to draw the diamond shape.

Painting a Simple Diamond

The easiest one is to extend the code used for the triangle and add an inverted triangle on the top to create the necessary shape, as shown below.

 void PaintDiamond(Texture2D texture){ float width=resolution*0.35f; for (int i=0;i<resolution;i++){ for (int j=0;j<resolution;j++){ if(ValidDiamondPosition(i,j,width)){ texture.SetPixel(i, j, Color.red); } } }
} private bool ValidDiamondPosition(int i, int j, float width)
{ //i =col j = row bool isValid=false; float midI=(resolution/2.0f); float midJ=(resolution/2.0f); float delta=(width/midJ); if(j>midJ){ j=resolution-j; if(i>(midI-(delta*j))&&i<(midI+(delta*j))){ isValid=true; } }else{ if(i>(midI-(delta*j))&&i<(midI+(delta*j))){ isValid=true; } } return isValid;
}
PaintDiamond(texture);

Painting a Curvy Diamond

The second one is to use another equation to create a better, curvy version of our diamond shape. We will be using this one to create the tiling design for the back side of our card. The equation for a circle derives from the original equation of an ellipse, which is (x/a)2 + (y/b)2 = r2.

This equation is the same as that of the circle when the variables a and b are both 1. The ellipse equation can then be extended into a superellipse equation for similar shapes just by changing the power, (x/a)n + (y/b)n = rn. So when n is 2 we have the ellipse, and for other values of n we will have different shapes, one of which is our diamond. We can use the approach used to arrive at the PaintCircle method to arrive at our new PaintDiamond method.

private void PaintDiamond(Texture2D texture, Rect rectBounds, Vector2 midPoint, Color color, float n=0.8f)
{ float iValue; int a=(int)(rectBounds.width/2); int b=(int)(rectBounds.height/2); float nRoot=1/n; float delta; float partialOne; rectBounds.width=Mathf.Clamp(rectBounds.x+rectBounds.width,0,resolution); rectBounds.height=Mathf.Clamp(rectBounds.y+rectBounds.height,0,resolution); rectBounds.x=Mathf.Clamp(rectBounds.x,0,resolution); rectBounds.y=Mathf.Clamp(rectBounds.y,0,resolution); for (int i=(int)rectBounds.x;i<rectBounds.width;i++){ for (int j=(int)rectBounds.y;j<rectBounds.height;j++){ delta=Mathf.Abs(j-midPoint.y); partialOne=Mathf.Pow(b,n)-Mathf.Pow(delta,n); iValue=((a/b)*Mathf.Pow(partialOne,nRoot));//+mid.x if(i>midPoint.x-iValue && i<midPoint.x+iValue){ texture.SetPixel(i, j, color); } } }
}

Painting a Rounded Rectangle

The same equation can be used to create our rounded rectangle card base shape by varying the value of n.

private void PaintRoundedRectangle(Texture2D texture)
{ for (int i=0;i<resolution;i++){ for (int j=0;j<resolution;j++){ if(ValidRRPosition(i,j)){ texture.SetPixel(i, j, Color.white); }else{ texture.SetPixel(i, j, Color.clear); } } }
} private bool ValidRRPosition(int i, float j)
{ bool isValid=false; float iValue; Vector2 mid; mid=new Vector2(resolution/2,resolution/2); int radius=(int)(resolution/2); int a=radius; int b=radius; float n=16; float nRoot=1/n; float delta=j-mid.y; float partialOne=Mathf.Pow(b,n)-Mathf.Pow(delta,n); iValue=((a/b)*Mathf.Pow(partialOne,nRoot));//+mid.x if(i>mid.x-iValue && i<mid.x+iValue){ isValid=true; } return isValid;
}

Painting a Tiling Design

Using this PaintDiamond method, we can draw five diamonds to create the tiling texture for the design on the back of our card.

The code for drawing the tiling design is as below.

 private void PaintTilingDesign(Texture2D texture, int tileResolution) { Vector2 mid=new Vector2(tileResolution/2,tileResolution/2); float size=0.6f*tileResolution; PaintDiamond(texture,new Rect(mid.x-size/2,mid.y-size/2,size,size),mid,Color.red); mid=new Vector2(0,0); PaintDiamond(texture,new Rect(mid.x-size/2,mid.y-size/2,size,size),mid,Color.red); mid=new Vector2(tileResolution,0); PaintDiamond(texture,new Rect(mid.x-size/2,mid.y-size/2,size,size),mid,Color.red); mid=new Vector2(tileResolution,tileResolution); PaintDiamond(texture,new Rect(mid.x-size/2,mid.y-size/2,size,size),mid,Color.red); mid=new Vector2(0,tileResolution); PaintDiamond(texture,new Rect(mid.x-size/2,mid.y-size/2,size,size),mid,Color.red);
}

6. Creating the Spades Shape

The spades shape is just the vertical flip of our heart shape along with a base shape. This base shape will be the same for the clubs shape as well. The below figure illustrates how we can use two circles to create this base shape.

The PaintSpades method will be as shown below.

void PaintSpades(Texture2D texture){ //2 circles on middle float radius =resolution*0.26f; Vector2 mid=new Vector2(radius,resolution-2.2f*radius); PaintCircle(texture,radius,mid,Color.black); mid=new Vector2(resolution-radius,resolution-2.2f*radius); PaintCircle(texture,radius,mid,Color.black); //triangle at top float width=resolution*0.49f; int startJ=(int)(resolution*0.52f); float delta=(width/(resolution-startJ)); float midI=resolution*0.5f; int alteredJ; radius=resolution*0.5f; float midJ=resolution*0.42f; float iValue; for (int i=0;i<resolution;i++){ //top triangle for (int j=startJ;j<resolution;j++){ alteredJ=resolution-j; if(i>(midI-(delta*alteredJ))&&i<(midI+(delta*alteredJ))){ texture.SetPixel(i, j, Color.black); } } //bottom stalk for (int k=0;k<resolution*0.5f;k++){ mid=new Vector2(0,midJ); iValue=(Mathf.Sqrt(radius*radius-((k-mid.y)*(k-mid.y))));//+mid.x; if(i>mid.x+iValue){ mid=new Vector2(resolution,midJ); iValue=(Mathf.Sqrt(radius*radius-((k-mid.y)*(k-mid.y))));//+mid.x; if(i<mid.x-iValue){ texture.SetPixel(i, k, Color.black); } } } }
}

7. Creating the Clubs Shape

At this point, I am sure that you can figure out how easy it has become to create the clubs shape. All we need are two circles and the base shape we created for the spades shape.

The PaintClubs method will be as shown below.

 void PaintClubs(Texture2D texture){ int radius=(int)(resolution*0.24f); //3 circles Vector2 mid=new Vector2(resolution*0.5f,resolution-radius); PaintCircle(texture,radius,mid,Color.black); mid=new Vector2(resolution*0.25f,resolution-(2.5f*radius)); PaintCircle(texture,radius,mid,Color.black); mid=new Vector2(resolution*0.75f,resolution-(2.5f*radius)); PaintCircle(texture,radius,mid,Color.black); //base stalk radius=(int)(resolution*0.5f); float midY=resolution*0.42f; int stalkHeightJ=(int)(resolution*0.65f); float iValue; for (int i=0;i<resolution;i++){ for (int j=0;j<stalkHeightJ;j++){ mid=new Vector2(resolution*-0.035f,midY); iValue=(Mathf.Sqrt(radius*radius-((j-mid.y)*(j-mid.y))));//+mid.x; if(i>mid.x+iValue){ mid=new Vector2(resolution*1.035f,midY); iValue=(Mathf.Sqrt(radius*radius-((j-mid.y)*(j-mid.y))));//+mid.x; if(i<mid.x-iValue){ texture.SetPixel(i, j, Color.black); } } } }
}

8. Packing Textures

If you explore the Unity source files for this project, you’ll find a TextureManager class which does all the heavy lifting. Once we have created all the necessary textures, the TextureManager class uses the PackTextures method to combine them into a single texture, thereby reducing the number of draw calls required when we use these shapes.

Rect[] packedAssets=packedTexture.PackTextures(allGraphics,1);

Using the packedAssets array, we can retrieve the bounding boxes of individual textures from the master texture named packedTexture.

public Rect GetTextureRectByName(string textureName){ textureName=textureName.ToLower(); int textureIndex; Rect textureRect=new Rect(0,0,0,0); if(textureDict.TryGetValue(textureName, out textureIndex)){ textureRect=ConvertUVToTextureCoordinates(packedAssets[textureIndex]); }else{ Debug.Log("no such texture "+textureName); } return textureRect;
}
private Rect ConvertUVToTextureCoordinates(Rect rect)
{ return new Rect(rect.x*packedTexture.width, rect.y*packedTexture.height, rect.width*packedTexture.width, rect.height*packedTexture.height );
}

Conclusion

With all the necessary components created, we can proceed to create our deck of cards as it is just a matter of properly laying out the shapes. We can either use the Unity UI to composite cards or we can create the cards as individual textures. You can explore the sample code to understand how I have used the first method to create card layouts.

We can follow the same method for creating any kind of dynamic art at runtime in Unity. Creating art at runtime is a performance-hungry operation, but it only needs to be done once if we save and reuse those textures efficiently. By packing the dynamically created assets into a single texture, we also gain the advantages of using a texture atlas.

Now that we have our playing card deck, let me know what games you are planning to create with it.