Post on 14-May-2015
Mohammad Shakermohammadshaker.com
@ZGTRShaker2011, 2012, 2013, 2014
XNA Game DevelopmentL05 – Texturing
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.
Texturing
• What’s it?!
Textures are images applied to surfaces that are created using primitive objects
Texturing
• What’s it?!
Textures are images applied to surfaces that are created using primitive objects
XNA is Perfect at Texturingtextures can be colored, filtered, blended,
and transformed at run time!
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
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
Texturing
• UV Coordinates
Texturing
• Vertex Types for Textures
Texturing
• Vertex Types for Textures
– VertexPositionColorTexture
– VertexPositionNormalTexture
– VertexPositionTexture
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);
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);
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);
Texturing
• TRANSPARENT TEXTURES
Texturing
• TRANSPARENT TEXTURES
Texturing
• TRANSPARENT TEXTURES
Texturing
• TRANSPARENT TEXTURES
Texturing
• TRANSPARENT TEXTURES
An alpha channel can be used to “mask” all pixels of a specific color in an image. Alphadata 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!
Texturing
• TRANSPARENT TEXTURES
An alpha channel can be used to “mask” all pixels of a specific color in an image. Alphadata 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!
Texturing
• Texture Coloring “Shaders”
– Microsoft Book, Chapter 9, Page 119
• Texture Example (Learning XNA 3.0 “O’Riley” , P:205)
A Simple Texture Sample
Texturing
• Loading Textures through content manager
Texture2D texture = Content.Load<Texture2D>("Images\\imageName");
Texturing
• Let’s make a texture in a 3D world!
VertexPositionTexture[] verts;
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));
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));
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");
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
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
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);
}
Texturing
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);
}
Texturing
Texturing
• Now, How can we fix the black area?!
Texturing
• Now, How can we fix the black area?!
Texturing
• Now, How can we fix the black area?!
Texturing
• 1st , Make sure that the image supports transperancy “.png”
Texturing
• 2nd, We should tell the GraphicsDevice to blend the image for us
Texturing
• Alpha Channel!
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);
}
Texturing
• Cool!
• “App1-Texturing”
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);
}
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);
}
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);
}
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);
}
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);
}
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);
}
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);
}
Texture Tiling
Texturing
• TEXTURE TILING
Texturing
Tiling is a very simple effect that creates a repeating pattern of an image on the
surface of a primitive object.
Texturing
• TEXTURE TILING
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.
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));
Texture Tiling
Texture Tiling
Still something wrong!
If the texture rotates, the back of the texture is not drawn!
Why?! And how to fix this?
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);
}
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);
}
Billboarding
Billboarding
• Billboarding “Microsoft Book – Page 129”
Billboarding
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;
}
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;
}
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;
}
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;
}
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;
}
Billboarding
• The math
Billboarding
• Atan2(y,x) Vs Atan(y/x)
Billboarding
• Atan2(y,x) Vs Atan(y/x)
Read more at http://en.wikipedia.org/wiki/Atan2/
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());
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());