Game Creation with XNA/2D Development/Texture

Texture

Textures come in many formats, some well known such as bmp, gif, jpg or png, some less known like dds, dib oder hdr formats. You need to know about UV coordinates and how they get mapped. Also topics such as texture tiling, transparent textures, and textures are accessed and used in the shader should be discussed.

Introduction

In the context of 3D modeling a texture map is a bitmap that is applied to a models surface. In combination with shaders it is possible to display nearly every possible face and attribute of nearly any material. The process of texturing is comparable to applying patterned paper to a box. Multitexturing is the use of more than one texture at a time on one model.

Texture Coordinates/ UVW Coordinates

Every vertex has got a xyz-position and additionally a texture coordinate in the uvw-space (also called uvw-coordinate).
The uvw-coordinates are used to how to project a texture to a polygon. In case of a 2d- bitmaptexture like they are normally used in computer games there are just the u and v coordinates needed.

In case of mathematical textures (3d noise e.g.) normally the uwv coordinates are needed.

The uv coordinate (0,0) is the bitmaps left bottom corner
The uv coordinate (1,1) is the bitmaps right top corner
If uv coordinates <0 or >1: tiling of a texture

One Vertex could have more than one texturecoordinate: So there is more than one mapping channel used for displaying overlapping textures to represent more complicated structures.

Tiling

Tiling is the repetition and the arrangement of the repetition of a texture next to each other, free of overlaps. If the uv coordinate is <0, the texture will be scaled down and repeated. If the uv coordinate is >1, the texture will be scaled up.

Games

In games there is often just one texture for the whole 3d-model, so there is just one texturecoordinate for one vertex, therefore there is just one mapping channel.

How to build textures in Photoshop

Why?

Photoshop is in this context generally used for the creation and editing of textures for 3d-models. Frequently photographs are used to convey a realistic impression. Example: Lizard's skin -> Dragon texture.

How?

Transparent Textures and Color Blending

Color blending mixes two colors together to produce a third color.

The first color is called the source color which is the new color being added. The second color is called the destination color which is the color that already exists (in a render target, for example). Each color has a separate blend factor that determines how much of each color is combined into the final product. Once the source and destination colors have been multiplied by their blend factors, the results are combined according to the specified blend function. The normal blend function is simple addition. (...) http://msdn.microsoft.com

How to create?

Look here: Tutorial

Alpha Blending

Die transparenten Objekte sind zu sortieren nach ihrem z-Wert im View-Space oder ClipSpace
z-Buffer-Schreiben auf off stellen aber z-Buffer-Lesen auf on
Bei Zeichnen der vorsortierten transparenten Objekte wähle dann die Reihenfolge: BackToFront

[1]

Seamless Textures

Mostly textures have to be tile able. Therefore no edges should be visible if the image is repeated.
A great, very useful helper is the Photshop filter->sonstige Filter-> Verschiebungseffekt.
It is very useful to create edge free patterns.

example how to create seamless textures (in Photoshop CS 4)

1) Get the picture border in the middle. Use the Filter • Sonstige Filter • Verschiebungseffekt. The value should be the half length of the edge. Do not forget the option "Durch verschobenen Teil ersetzen"!! Now you have to retouch the resulting edges.

Typical tools for retouching
Copy and Paste of certain bitmap sections and mask-using

Stamp and Brush

2) You have to do this a second time, because there are edges at the sides of the picture. Mark the mid-points of the sides and use the filter "Verschiebungseffekt" a second time. Move the picture by a third or a quarter of the edge length.
Now the marks and edges are somewhere in the pictures center. Here you have to do the last retouching.

Then it looks like this:

Height information/Bump maps
It is a little complicated to get height information from a picture, also not every photo is suitable to get its height-information and to get a bump map. Here you find a tutorial how to do it: unter 2) Relief-Information aus dem Bild gewinnen Galileodesign

Textures in XNA

The following nice tutorial how to do it you can find here : http://www.riemers.net/ Tutorials

texture = Content.Load<Texture2D> ("riemerstexture");

This line binds the asset we just loaded in our project to the texture variable!

Now we have to define 3 vertices and to store them in an array. We will need to be able to store a 3d Position and a texture coordinate. The vertex format is VertexPositionTexture. We have to declare this variable at the top.

 VertexPositionTexture[] vertices;

Now we define the 3 vertices of our triangle in our SetUpVertices method we create:

 private void SetUpVertices()
 {
     vertices = new VertexPositionTexture[3];
 
     vertices[0].Position = new Vector3(-10f, 10f, 0f);
     vertices[0].TextureCoordinate.X = 0;
     vertices[0].TextureCoordinate.Y = 0;
 
     vertices[1].Position = new Vector3(10f, -10f, 0f);
     vertices[1].TextureCoordinate.X = 1;
     vertices[1].TextureCoordinate.Y = 1;
 
     vertices[2].Position = new Vector3(-10f, -10f, 0f);
     vertices[2].TextureCoordinate.X = 0;
     vertices[2].TextureCoordinate.Y = 1;
 
      texturedVertexDeclaration = new VertexDeclaration(device, VertexPositionTexture.VertexElements);
 }

For every vertex we define it is position in 3D space in a clockwise way.

Next we define which UV-Coordinate in our texture corresponds with the vertex. Remember: the (0,0)texture coordinate us at the top let point of our texture image, the (1,0) at the top right and the (1,1) at the bottom right.

Don’t forget to call the SetUpVertices method from your LoadContent method:

 SetUpVertices ();

Now our vertice is set up and our texture image load, now we draw the triangle:
In the Draw method add this code after our call to the Clear method:

 Matrix worldMatrix = Matrix.Identity;
 effect.CurrentTechnique = effect.Techniques["TexturedNoShading
 "];
 effect.Parameters["xWorld"].SetValue(worldMatrix);
 effect.Parameters["xView"].SetValue(viewMatrix);
 effect.Parameters["xProjection"].SetValue(projectionMatrix);
 effect.Parameters["xTexture"].SetValue(texture);
 effect.Begin();
 foreach (EffectPass pass in effect.CurrentTechnique.Passes)
 {
     pass.Begin();
 
      device.VertexDeclaration = texturedVertexDeclaration;
     device.DrawUserPrimitives(PrimitiveType.TriangleList, vertices, 0, 1);
 
     pass.End();
 }
 effect.End();

We need to instruct our graphics card to sample the color of every pixel from the texture image. This is exactly what the TexturedNoShading technique of my effect file does, so we set it as active technique. As we didn’t specify any normals for our vectors, we cannot expect the effect to do any meaningful shading calculations.

As explained in Series 1, we need to set the World matrix to identity so the triangles will be rendered where we defined them, and View and Projection matrices so the graphics card can map the 3D positions to 2D screen coordinates.

Finally, we pass our texture to the technique. Then we actually draw our triangle from our vertices array, as done before in the first series.

Running this should already give you a textured triangle, displaying half of the texture image! To display the whole image, we simply have to expand our SetUpVertices method by adding the second triangle:

 private void SetUpVertices()
 {
      vertices = new VertexPositionTexture[6];
 
      vertices[0].Position = new Vector3(-10f, 10f, 0f);
      vertices[0].TextureCoordinate.X = 0;
      vertices[0].TextureCoordinate.Y = 0;
 
      vertices[1].Position = new Vector3(10f, -10f, 0f);
      vertices[1].TextureCoordinate.X = 1;
      vertices[1].TextureCoordinate.Y = 1;
 
      vertices[2].Position = new Vector3(-10f, -10f, 0f);
      vertices[2].TextureCoordinate.X = 0;
      vertices[2].TextureCoordinate.Y = 1;
 
      vertices[3].Position = new Vector3(10.1f, -9.9f, 0f);
      vertices[3].TextureCoordinate.X = 1;
      vertices[3].TextureCoordinate.Y = 1;
 
      vertices[4].Position = new Vector3(-9.9f, 10.1f, 0f);
      vertices[4].TextureCoordinate.X = 0;
      vertices[4].TextureCoordinate.Y = 0;
 
      vertices[5].Position = new Vector3(10.1f, 10.1f, 0f);
      vertices[5].TextureCoordinate.X = 1;
      vertices[5].TextureCoordinate.Y = 0;
 }

We simply added another set of 3 vertices for a second triangle, to complete the texture image. Don’t forget to adjust your Draw method so you render 2 triangles instead of only 1:

 device.DrawUserPrimitives(PrimitiveType.TriangleList, vertices, 0, 2, VertexPositionTexture.VertexDeclaration);

Now run this code, and you should see the whole texture image, displayed by 2 triangles!

Resource: http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series2/Textures.php

Resources:

http://help.adobe.com/de_DE/Photoshop/11.0/WS0BA787A7-E4AC-4183-8AB7-55440C51F95B.html
http://openbook.galileodesign.de/photoshop_cs4/photoshop_cs4_16_3d_003.htm#mj2240859ba9be43f9c3ad8c93d649ad05
http://de.wikipedia.org/wiki/UV-Koordinaten
http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series2/Textures.php