XNA L05–Texturing

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?!

XNA is Perfect at Texturingtextures can be colored, filtered, blended,

and transformed at run time!

Texturing

• What’s it?!

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

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

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()

Texturing

• LoadContent()

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()

effect.View = view;

pass.Apply();

0,0 1,0

0,1 1,1

Texturing

• Draw()

effect.View = view;

pass.Apply();

Texturing

• Draw()

effect.View = view;

pass.Apply();

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)

effect.World = world; effect.View = view; effect.Projection = projection;

BlendState originalState = GraphicsDevice.BlendState;

GraphicsDevice.BlendState = BlendState.AlphaBlend;

pass.Apply();

GraphicsDevice.BlendState = originalState;

base.Draw(gameTime);

Texturing

pass.Apply();

Texturing

pass.Apply();

Texturing

pass.Apply();

Texturing

pass.Apply();

Texturing

pass.Apply();

Texturing

pass.Apply();

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

new Vector3(1, 1, 0), new Vector2(1, 0));

// Right Bottom

new Vector3(-1, -1, 0), new Vector2(10, 10));

// Left Bottom

new Vector3(1, -1, 0), new Vector2(1, 10));

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

RasterizerState currentRasterizerState = GraphicsDevice.RasterizerState;

GraphicsDevice.RasterizerState = RasterizerState.CullNone;

// … our code

GraphicsDevice.RasterizerState = currentRasterizerState;

Texture Tiling

• Fixing the culling

RasterizerState currentRasterizerState = GraphicsDevice.RasterizerState;

GraphicsDevice.RasterizerState = RasterizerState.CullNone;

// … our code

GraphicsDevice.RasterizerState = currentRasterizerState;

Billboarding

• Billboarding “Microsoft Book – Page 129”

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

rotationY = Matrix.CreateRotationY(GetViewerAngle());

Billboarding

rotationY = Matrix.CreateRotationY(GetViewerAngle());

XNA L05–Texturing

Technology

Transcript of XNA L05–Texturing