使用 XNA 建立遊戲/2D 開發/紋理

紋理

紋理有許多格式，一些眾所周知，如 bmp、gif、jpg 或 png，一些鮮為人知，如 dds、dib 或 hdr 格式。你需要了解 UV 座標以及它們是如何對映的。此外，還應該討論紋理貼圖、透明紋理以及在著色器中訪問和使用紋理等主題。

介紹

在 3D 建模的背景下，紋理貼圖是一個應用於模型表面的點陣圖。結合著色器，可以顯示幾乎任何材料的幾乎所有可能的表面和屬性。紋理化過程類似於將圖案紙應用於盒子。多紋理化是在一個模型上同時使用多個紋理。

紋理座標/UVW 座標

每個頂點都有一個 xyz 位置，此外還有一個 uvw 空間中的紋理座標（也稱為 uvw 座標）。
uvw 座標用於如何將紋理投影到多邊形上。對於像計算機遊戲中通常使用的二維點陣圖紋理，只需要 u 和 v 座標。

對於數學紋理（例如 3D 噪聲），通常需要 uwv 座標。

uv 座標 (0,0) 是點陣圖的左下角
uv 座標 (1,1) 是點陣圖的右上角
如果 uv 座標 <0 或 >1：紋理的貼圖

一個頂點可以有多個紋理座標：因此，使用多個對映通道來顯示重疊的紋理，以表示更復雜的結構。

貼圖

貼圖是指紋理的重複和排列，以及紋理彼此相鄰的重複，沒有重疊。如果 uv 座標 <0，則紋理將縮小並重復。如果 uv 座標 >1，則紋理將放大。

遊戲

在遊戲中，通常整個 3D 模型只有一個紋理，因此每個頂點只有一個紋理座標，因此只有一個對映通道。

如何在 Photoshop 中構建紋理

為什麼？

Photoshop 在這種情況下通常用於建立和編輯 3D 模型的紋理。經常使用照片來傳達逼真的印象。例如：蜥蜴的皮膚 -> 龍的紋理。

如何？

透明紋理和顏色混合

顏色混合將兩種顏色混合在一起，產生第三種顏色。

第一種顏色稱為源顏色，它是正在新增的新顏色。第二種顏色稱為目標顏色，它是在渲染目標中已經存在的顏色。每種顏色都有一個單獨的混合因子，它決定了每種顏色被組合到最終產品中的比例。一旦源顏色和目標顏色乘以它們的混合因子，結果將根據指定的混合函式進行組合。通常的混合函式是簡單的加法。（...） http://msdn.microsoft.com

如何建立？

看看這裡：教程

Alpha 混合

透明物體需要根據它們在檢視空間或裁剪空間中的 z 值進行排序
將 z 緩衝區寫入關閉，但將 z 緩衝區讀取開啟
在繪製預先排序的透明物體時，選擇順序：BackToFront

[1]

無縫紋理

大多數紋理必須是可貼圖的。因此，如果影像重複，則不應該看到邊緣。
一個很棒、非常有用的助手是 Photshop 濾鏡->其他濾鏡->位移效果。
它對於建立無邊緣模式非常有用。

建立無縫紋理的示例（在 Photoshop CS 4 中）

1) 將影像邊框放到中間。使用濾鏡•其他濾鏡•位移效果。值應為邊框的一半長度。不要忘記選項“用偏移部分替換”！！現在你必須修補生成的邊緣。

修補的典型工具
複製和貼上某些點陣圖部分以及使用蒙版

圖章和畫筆

2) 你必須再次這樣做，因為影像的側面有邊緣。標記側面的中點，然後再次使用濾鏡“位移效果”。將影像移動邊框長度的三分之一或四分之一。
現在標記和邊緣位於影像的中心。在這裡，你必須進行最後的修補。

然後它看起來像這樣

高度資訊/凹凸貼圖
從影像中獲取高度資訊有點複雜，並不是所有照片都適合獲取其高度資訊並獲得凹凸貼圖。您可以在此處找到一個關於如何執行此操作的教程：在 2) 從影像中獲取浮雕資訊 Galileodesign

XNA 中的紋理

您可以在此處找到以下關於如何執行此操作的不錯的教程： http://www.riemers.net/ Tutorials

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

此行將我們剛剛在專案中載入的資產繫結到紋理變數！

現在我們必須定義 3 個頂點並將它們儲存在陣列中。我們需要能夠儲存 3D 位置和紋理座標。頂點格式為 VertexPositionTexture。我們必須在頂部宣告此變數。

 VertexPositionTexture[] vertices;

現在我們在我們建立的 SetUpVertices 方法中定義三角形的 3 個頂點

 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);
 }

對於每個頂點，我們都以順時針方式定義它在 3D 空間中的位置。

接下來，我們定義紋理中的哪個 UV 座標對應於頂點。請記住：(0,0) 紋理座標位於紋理影像的左上角，(1,0) 位於右上角，(1,1) 位於右下角。

不要忘記從你的 LoadContent 方法呼叫 SetUpVertices 方法

 SetUpVertices ();

現在我們的頂點已設定好，我們的紋理影像已載入，現在我們繪製三角形
在 Draw 方法中，在呼叫 Clear 方法之後新增此程式碼

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

我們需要指示我們的顯示卡從紋理影像中取樣每個畫素的顏色。這正是我的效果檔案中的 TexturedNoShading 技術所做的，因此我們將其設定為活動技術。由於我們沒有為我們的向量指定任何法線，因此我們無法期望效果進行任何有意義的陰影計算。

如系列 1 中所述，我們需要將世界矩陣設定為單位矩陣，以便三角形在定義的位置進行渲染，並將檢視矩陣和投影矩陣設定為顯示卡可以將 3D 位置對映到 2D 螢幕座標。

最後，我們將紋理傳遞給技術。然後我們實際上從頂點陣列中繪製三角形，如第一系列中所做的那樣。

執行此操作應該已經為您提供了一個紋理三角形，顯示了紋理影像的一半！要顯示整個影像，我們只需要透過新增第二個三角形來擴充套件我們的 SetUpVertices 方法

 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;
 }

我們只是為第二個三角形添加了另外 3 個頂點，以完成紋理影像。不要忘記調整您的 Draw 方法，以便您渲染 2 個三角形而不是僅 1 個三角形

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

現在執行此程式碼，您應該會看到整個紋理影像，由 2 個三角形顯示！

資源： http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series2/Textures.php

資源

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