This document discusses texturing in XNA game development. It explains that textures are images applied to surfaces to make objects look more realistic. The document covers UV coordinates, vertex types for textures, loading and applying textures, texture tiling, transparency, and billboarding. It provides code examples for creating and drawing a textured quad and handling transparency using alpha blending.

1. Mohammad Shaker
mohammadshaker.com
@ZGTRShaker
2011, 2012, 2013, 2014
XNA Game Development
L05 – Texturing

2. that appears in a video game needs to be textured; this includes everything from plants
to people. If things aren’t textured well, your game just won’t look right.

3. Texturing
• What’s it?!
Textures are images applied to surfaces that are created using primitive objects

4. Texturing
• What’s it?!
Textures are images applied to surfaces that are created using primitive objects
XNA is Perfect at Texturing
textures can be colored, filtered, blended,
and transformed at run time!

5. Texturing
• What’s it?!
Textures are images applied to surfaces that are created using primitive objects
textures can be colored, filtered, blended,
and transformed at run time!
XNA is Perfect at Texturing
XNA supports:
.bmp, .dds, .dib, .hdr, .jpg, .pfm, .png, .ppm, and .tga image formats for textures

6. Texturing
• UV Coordinates
– 2D World
• a texture is a two-dimensional object that is mapped onto a 2D polygon
– 3D World
• a texture is a two-dimensional object that is mapped onto a 3D polygon

7. Texturing
• UV Coordinates

8. Texturing
• Vertex Types for Textures

9. Texturing
• Vertex Types for Textures
– VertexPositionColorTexture
– VertexPositionNormalTexture
– VertexPositionTexture

10. Texturing
• VertexPositionColorTexture
– This format allows you to apply image textures to your primitive shapes, and you can even
shade your images with color.
– For example, with this vertex type you could draw a rectangle with an image texture and then
you could show it again with a different shade of color!
VertexPositionColorTexture vertex = new
VertexPositionColorTexture(Vector3 position, Color color, Vector2 uv);

11. Texturing
• VertexPositionNormalTexture
– This format allows you to add textures to your primitive objects. The normal data enables
lighting for this textured format.
VertexPositionNormalTexture vertex = new
VertexPositionNormalTexture(Vector3 position, Vector3 normal, Vector2 uv);

12. Texturing
• VertexPositionTexture
– This format only permits storage of position and texture data.
– It may be useful if you don’t need lighting and were concerned about saving space or
improving performance for large amounts of vertices.
VertexPositionTexture vertex = new
VertexPositionTexture(Vector3 position, Vector2 uv);

13. Texturing
• TRANSPARENT TEXTURES

14. Texturing
• TRANSPARENT TEXTURES

15. Texturing
• TRANSPARENT TEXTURES

16. Texturing
• TRANSPARENT TEXTURES

17. Texturing
• TRANSPARENT TEXTURES
An alpha channel can be used to “mask” all pixels of a specific color in an image. Alpha
data is stored in the last color byte of a pixel after the red, green, and blue bytes.
When alpha blending is enabled in your XNA code and the alpha channel is active,
transparency is achieved for the pixels where the alpha setting is set to 0.
New “Alpha” Channel!

18. Texturing
• TRANSPARENT TEXTURES
An alpha channel can be used to “mask” all pixels of a specific color in an image. Alpha
data is stored in the last color byte of a pixel after the red, green, and blue bytes.
When alpha blending is enabled in your XNA code and the alpha channel is active,
transparency is achieved for the pixels where the alpha setting is set to 0.
New “Alpha” Channel!

19. Texturing
• Texture Coloring “Shaders”
– Microsoft Book, Chapter 9, Page 119
• Texture Example (Learning XNA 3.0 “O’Riley” , P:205)

20. A Simple Texture Sample

21. Texturing
• Loading Textures through content manager
Texture2D texture = Content.Load<Texture2D>("ImagesimageName");

22. Texturing
• Let’s make a texture in a 3D world!
VertexPositionTexture[] verts;

23. Texturing
• LoadContent()
verts[0] = new VertexPositionTexture(new Vector3(-1, 1, 0), new Vector2(0, 0));
verts[1] = new VertexPositionTexture(new Vector3(1, 1, 0), new Vector2(1, 0));
verts[2] = new VertexPositionTexture(new Vector3(-1, -1, 0), new Vector2(0, 1));
verts[3] = new VertexPositionTexture(new Vector3(1, -1, 0), new Vector2(1, 1));

24. Texturing
• LoadContent()
verts[0] = new VertexPositionTexture(new Vector3(-1, 1, 0), new Vector2(0, 0));
verts[1] = new VertexPositionTexture(new Vector3(1, 1, 0), new Vector2(1, 0));
verts[2] = new VertexPositionTexture(new Vector3(-1, -1, 0), new Vector2(0, 1));
verts[3] = new VertexPositionTexture(new Vector3(1, -1, 0), new Vector2(1, 1));

25. Texturing
• LoadContent()
verts[0] = new VertexPositionTexture(new Vector3(-1, 1, 0), new Vector2(0, 0));
verts[1] = new VertexPositionTexture(new Vector3(1, 1, 0), new Vector2(1, 0));
verts[2] = new VertexPositionTexture(new Vector3(-1, -1, 0), new Vector2(0, 1));
verts[3] = new VertexPositionTexture(new Vector3(1, -1, 0), new Vector2(1, 1));
0,0 1,0
0,1 1,1
texture = Content.Load<Texture2D>(@"arrow");

26. Texturing
• Draw()
GraphicsDevice.Clear(Color.CornflowerBlue);
BasicEffect effect = new BasicEffect(GraphicsDevice);
effect.World = world;
effect.View = view;
effect.Projection = projection;
effect.Texture = texture;
effect.TextureEnabled = true;
foreach (EffectPass pass in effect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.DrawUserPrimitives<VertexPositionTexture>
(PrimitiveType.TriangleStrip, verts, 0, 2);
}
0,0 1,0
0,1 1,1

27. Texturing
• Draw()
GraphicsDevice.Clear(Color.CornflowerBlue);
BasicEffect effect = new BasicEffect(GraphicsDevice);
effect.World = world;
effect.View = view;
effect.Projection = projection;
effect.Texture = texture;
effect.TextureEnabled = true;
foreach (EffectPass pass in effect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.DrawUserPrimitives<VertexPositionTexture>
(PrimitiveType.TriangleStrip, verts, 0, 2);
}
0,0 1,0
0,1 1,1

29. Texturing
• Draw()
GraphicsDevice.Clear(Color.CornflowerBlue);
BasicEffect effect = new BasicEffect(GraphicsDevice);
effect.World = world;
effect.View = view;
effect.Projection = projection;
effect.Texture = texture;
effect.TextureEnabled = true;
foreach (EffectPass pass in effect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.DrawUserPrimitives<VertexPositionTexture>
(PrimitiveType.TriangleStrip, verts, 0, 2);
}

30. Texturing

31. Texturing
• Draw()
GraphicsDevice.Clear(Color.CornflowerBlue);
BasicEffect effect = new BasicEffect(GraphicsDevice);
effect.World = world;
effect.View = view;
effect.Projection = projection;
effect.Texture = texture;
effect.TextureEnabled = true;
foreach (EffectPass pass in effect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.DrawUserPrimitives<VertexPositionTexture>
(PrimitiveType.TriangleStrip, verts, 0, 1);
}

32. Texturing

33. Texturing
• Now, How can we fix the black area?!

34. Texturing
• Now, How can we fix the black area?!

35. Texturing
• Now, How can we fix the black area?!

36. Texturing
• 1st , Make sure that the image supports transperancy “.png”

37. Texturing
• 2nd, We should tell the GraphicsDevice to blend the image for us

38. Texturing
• Alpha Channel!

39. Texturing
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
BasicEffect effect = new BasicEffect(GraphicsDevice);
effect.World = world; effect.View = view; effect.Projection = projection;
effect.Texture = texture;
effect.TextureEnabled = true;
BlendState originalState = GraphicsDevice.BlendState;
GraphicsDevice.BlendState = BlendState.AlphaBlend;
foreach (EffectPass pass in effect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.DrawUserPrimitives<VertexPositionTexture>
(PrimitiveType.TriangleStrip, verts, 0, 2);
}
GraphicsDevice.BlendState = originalState;
base.Draw(gameTime);
}

40. Texturing
• Cool!
• “App1-Texturing”

41. Texturing
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
BasicEffect effect = new BasicEffect(GraphicsDevice);
effect.World = world; effect.View = view; effect.Projection = projection;
effect.Texture = texture;
effect.TextureEnabled = true;
BlendState originalState = GraphicsDevice.BlendState;
GraphicsDevice.BlendState = BlendState.AlphaBlend;
foreach (EffectPass pass in effect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.DrawUserPrimitives<VertexPositionTexture>
(PrimitiveType.TriangleStrip, verts, 0, 2);
}
GraphicsDevice.BlendState = originalState;
base.Draw(gameTime);
}

42. Texturing
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
BasicEffect effect = new BasicEffect(GraphicsDevice);
effect.World = world; effect.View = view; effect.Projection = projection;
effect.Texture = texture;
effect.TextureEnabled = true;
BlendState originalState = GraphicsDevice.BlendState;
GraphicsDevice.BlendState = BlendState.AlphaBlend;
foreach (EffectPass pass in effect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.DrawUserPrimitives<VertexPositionTexture>
(PrimitiveType.TriangleStrip, verts, 0, 2);
}
GraphicsDevice.BlendState = originalState;
base.Draw(gameTime);
}

43. Texturing
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
BasicEffect effect = new BasicEffect(GraphicsDevice);
effect.World = world; effect.View = view; effect.Projection = projection;
effect.Texture = texture;
effect.TextureEnabled = true;
BlendState originalState = GraphicsDevice.BlendState;
GraphicsDevice.BlendState = BlendState.AlphaBlend;
foreach (EffectPass pass in effect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.DrawUserPrimitives<VertexPositionTexture>
(PrimitiveType.TriangleStrip, verts, 0, 2);
}
GraphicsDevice.BlendState = originalState;
base.Draw(gameTime);
}

44. Texturing
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
BasicEffect effect = new BasicEffect(GraphicsDevice);
effect.World = world; effect.View = view; effect.Projection = projection;
effect.Texture = texture;
effect.TextureEnabled = true;
BlendState originalState = GraphicsDevice.BlendState;
GraphicsDevice.BlendState = BlendState.AlphaBlend;
foreach (EffectPass pass in effect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.DrawUserPrimitives<VertexPositionTexture>
(PrimitiveType.TriangleStrip, verts, 0, 2);
}
GraphicsDevice.BlendState = originalState;
base.Draw(gameTime);
}

45. Texturing
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
BasicEffect effect = new BasicEffect(GraphicsDevice);
effect.World = world; effect.View = view; effect.Projection = projection;
effect.Texture = texture;
effect.TextureEnabled = true;
BlendState originalState = GraphicsDevice.BlendState;
GraphicsDevice.BlendState = BlendState.AlphaBlend;
foreach (EffectPass pass in effect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.DrawUserPrimitives<VertexPositionTexture>
(PrimitiveType.TriangleStrip, verts, 0, 2);
}
GraphicsDevice.BlendState = originalState;
base.Draw(gameTime);
}

46. Texturing
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
BasicEffect effect = new BasicEffect(GraphicsDevice);
effect.World = world; effect.View = view; effect.Projection = projection;
effect.Texture = texture;
effect.TextureEnabled = true;
BlendState originalState = GraphicsDevice.BlendState;
GraphicsDevice.BlendState = BlendState.AlphaBlend;
foreach (EffectPass pass in effect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.DrawUserPrimitives<VertexPositionTexture>
(PrimitiveType.TriangleStrip, verts, 0, 2);
}
GraphicsDevice.BlendState = originalState;
base.Draw(gameTime);
}

47. Texturing
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
BasicEffect effect = new BasicEffect(GraphicsDevice);
effect.World = world; effect.View = view; effect.Projection = projection;
effect.Texture = texture;
effect.TextureEnabled = true;
BlendState originalState = GraphicsDevice.BlendState;
GraphicsDevice.BlendState = BlendState.AlphaBlend;
foreach (EffectPass pass in effect.CurrentTechnique.Passes)
{
pass.Apply();
GraphicsDevice.DrawUserPrimitives<VertexPositionTexture>
(PrimitiveType.TriangleStrip, verts, 0, 2);
}
GraphicsDevice.BlendState = originalState;
base.Draw(gameTime);
}

48. Texture Tiling

49. Texturing
• TEXTURE TILING

50. Texturing
Tiling is a very simple effect that creates a
repeating pattern of an image on the
surface of a primitive object.

51. Texturing
• TEXTURE TILING

52. Texturing
• TEXTURE TILING
Using a small image to cover a large surface makes tiling a useful way
to increase the performance of your textures and decrease the size of
your image files.

53. Texture Tiling
• In Load Content
// Right Top
verts[0] = new VertexPositionTexture(
new Vector3(-1, 1, 0), new Vector2(10, 0));
// Left Top
verts[1] = new VertexPositionTexture(
new Vector3(1, 1, 0), new Vector2(1, 0));
// Right Bottom
verts[2] = new VertexPositionTexture(
new Vector3(-1, -1, 0), new Vector2(10, 10));
// Left Bottom
verts[3] = new VertexPositionTexture(
new Vector3(1, -1, 0), new Vector2(1, 10));

54. Texture Tiling

55. Texture Tiling
Still something wrong!
If the texture rotates, the back of the texture is not drawn!
Why?! And how to fix this?

56. Texture Tiling
• Fixing the culling
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
RasterizerState currentRasterizerState =
GraphicsDevice.RasterizerState;
GraphicsDevice.RasterizerState = RasterizerState.CullNone;
// … our code
GraphicsDevice.RasterizerState = currentRasterizerState;
base.Draw(gameTime);
}

57. Texture Tiling
• Fixing the culling
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
RasterizerState currentRasterizerState =
GraphicsDevice.RasterizerState;
GraphicsDevice.RasterizerState = RasterizerState.CullNone;
// … our code
GraphicsDevice.RasterizerState = currentRasterizerState;
base.Draw(gameTime);
}

58. Billboarding

59. Billboarding
• Billboarding “Microsoft Book – Page 129”

60. Billboarding

61. Billboarding
float GetViewerAngle()
{
// use camera look direction to get
// rotation angle about Y
float x = cam.view.X - cam.position.X;
float z = cam.view.Z - cam.position.Z;
return (float)Math.Atan2(x, z) + MathHelper.Pi;
}

62. Billboarding
float GetViewerAngle()
{
// use camera look direction to get
// rotation angle about Y
float x = cam.view.X - cam.position.X;
float z = cam.view.Z - cam.position.Z;
return (float)Math.Atan2(x, z) + MathHelper.Pi;
}

63. Billboarding
float GetViewerAngle()
{
// use camera look direction to get
// rotation angle about Y
float x = cam.view.X - cam.position.X;
float z = cam.view.Z - cam.position.Z;
return (float)Math.Atan2(x, z) + MathHelper.Pi;
}

64. Billboarding
float GetViewerAngle()
{
// use camera look direction to get
// rotation angle about Y
float x = cam.view.X - cam.position.X;
float z = cam.view.Z - cam.position.Z;
return (float)Math.Atan2(x, z) + MathHelper.Pi;
}

65. Billboarding
float GetViewerAngle()
{
// use camera look direction to get
// rotation angle about Y
float x = cam.view.X - cam.position.X;
float z = cam.view.Z - cam.position.Z;
return (float)Math.Atan2(x, z) + MathHelper.Pi;
}

66. Billboarding
• The math

67. Billboarding
• Atan2(y,x) Vs Atan(y/x)

68. Billboarding
• Atan2(y,x) Vs Atan(y/x)
Read more at http://en.wikipedia.org/wiki/Atan2/

69. Billboarding
float GetViewerAngle()
{
// use camera look direction to get
// rotation angle about Y
float x = cam.view.X - cam.position.X;
float z = cam.view.Z - cam.position.Z;
return (float)Math.Atan2(x, z) + MathHelper.Pi;
}
rotationY = Matrix.CreateRotationY(GetViewerAngle());

70. Billboarding
float GetViewerAngle()
{
// use camera look direction to get
// rotation angle about Y
float x = cam.view.X - cam.position.X;
float z = cam.view.Z - cam.position.Z;
return (float)Math.Atan2(x, z) + MathHelper.Pi;
}
rotationY = Matrix.CreateRotationY(GetViewerAngle());