Your SlideShare is downloading. ×
0
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
XNA L05–Texturing
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

XNA L05–Texturing

274

Published on

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
274
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 28. 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); }
  • 29. Texturing
  • 30. 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); }
  • 31. Texturing
  • 32. Texturing • Now, How can we fix the black area?!
  • 33. Texturing • Now, How can we fix the black area?!
  • 34. Texturing • Now, How can we fix the black area?!
  • 35. Texturing • 1st , Make sure that the image supports transperancy “.png”
  • 36. Texturing • 2nd, We should tell the GraphicsDevice to blend the image for us
  • 37. Texturing • Alpha Channel!
  • 38. 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); }
  • 39. Texturing • Cool! • “App1-Texturing”
  • 40. 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); }
  • 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. Texture Tiling
  • 48. Texturing • TEXTURE TILING
  • 49. Texturing Tiling is a very simple effect that creates a repeating pattern of an image on the surface of a primitive object.
  • 50. Texturing • TEXTURE TILING
  • 51. 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.
  • 52. 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));
  • 53. Texture Tiling
  • 54. Texture Tiling Still something wrong! If the texture rotates, the back of the texture is not drawn! Why?! And how to fix this?
  • 55. 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); }
  • 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. Billboarding
  • 58. Billboarding • Billboarding “Microsoft Book – Page 129”
  • 59. Billboarding
  • 60. 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; }
  • 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 • The math
  • 66. Billboarding • Atan2(y,x) Vs Atan(y/x)
  • 67. Billboarding • Atan2(y,x) Vs Atan(y/x) Read more at http://en.wikipedia.org/wiki/Atan2/
  • 68. 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());
  • 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());

×