详解Windows Phone XNA 4.0 3D游戏开发

移动开发 游戏开发
如果做过Zune上XNA 3.1开发的朋友可能会记得,在XNA 3.1中是不支持3D开发的,XNA 4.0中加入的3D支持类,主要包含在Microsoft.Xna.Framework.Graphics命名空间中。

微软前段时间发布基于XNA框架Windows Phone 7游戏开发实例,看到Silverlight for phone和XNA 4.0的开发文章已经有了不少,而且质量很高。而XNA 4.0的3D开发这个领域的文章还不是很多,XNA 4.0的3D类库设计的非常好,比iPhone和Android的OpenGLES类库高出一个档次。以后学习3D开发,用XNA类库也是个不错的选择,而且Windows Phone模拟器对3D的支持也非常好。唯一的遗憾是,Windows Phone不支持C++的3D开发。

51CTO推荐专题:Windows Phone应用开发详解

程序代码编译环境Visual Stuido 2010, Windows Phone 7 SDK, XNA 4.0 Game Studio, 下载链接:http://files.cnblogs.com/aawolf/XNA_aawolf_3D.rar

如果做过Zune上XNA 3.1开发的朋友可能会记得,在XNA 3.1中是不支持3D开发的,XNA 4.0中加入的3D支持类,主要包含在Microsoft.Xna.Framework.Graphics命名空间中。如果XNA 4.0中的3D概念与OpenGLES十分相似,我们可以找到很多相对应的函数、方法等,某种意义上,XNA 4.0的3D支持是对OpenGLES 2.0的封装。

一个简单的3D程序

我们就从一个简单的3D程序开始吧,这个程序的原来介绍在下面这个链接里。

http://msdn.microsoft.com/en-us/library/bb203926.aspx

不过移植到Windows Phone 7上时,还是遇到了一些小问题,有的是文档的问题,有的是接口变化。如何在Visual Studio 2010里创建XNA 4.0的工程就不多说了,大家可以参考我写的《Windows Phone开发工具初体验》,链接如下:

http://www.cnblogs.com/aawolf/archive/2010/08/28/1811438.html

XNA 4.0的程序是派生自Microsoft.Xna.Framework.Game的类,开发者需要重载Game的四个方法:Initialize(初始化)、LoadContent(加载内容)、UnloadContent(卸载内容)、Update(更新)和Draw(绘制)等方法。

首先,我们在Game1类中加入所需要的一些私有变量:

  1. Matrix worldMatrix;  
  2.  
  3. Matrix viewMatrix;  
  4.  
  5. Matrix projectionMatrix;  
  6.  
  7. VertexPositionNormalTexture[] cubeVertices;  
  8.  
  9. VertexDeclaration vertexDeclaration;  
  10.  
  11. VertexBuffer vertexBuffer;  
  12.  
  13. BasicEffect basicEffect;  
  14.  

Martrix 的中文名叫“矩阵”,还有个翻译叫“黑客帝国”……扯远了,什么是矩阵?我们就不解释了,只要知道矩阵是一切3D线性变化的基础就可以了。我们不知道矩阵是什么,却身处其中。在Game1类中用了三个矩阵:worldMatrix用来描述世界坐标系;viewMatrix用来描述摄影机坐标系;projectionMatrix用来描述投影坐标系。这些都是3D图形学的概念,不解释了。

另外两个重要的变量是vertexBuffer和basicEffect。vertexBuffer包含了一系列的向量,这些向量构成了我们要显示的正方体的各个顶点;basicEffect用来描述一个基础的渲染效果,其中描述了坐标系、颜色和灯光等基本的要素,这些要素是3D图形显示的基础。

接下来创建一个叫InitMatrices的方法,对各个坐标系进行初始化,记得,这个InitMatrices的函数是我们自己创建的,代码如下:

  1. private void InitMatrices()  
  2.  
  3. {  
  4.  
  5. // Initialize the world, view, and projection matrices.   
  6.  
  7. float tilt = MathHelper.ToRadians(0); // 0 degree angle  
  8.  
  9. // Use the world matrix to tilt the cube along x and y axes.  
  10.  
  11. worldMatrix = Matrix.CreateRotationX(tilt) * Matrix.CreateRotationY(tilt);  
  12.  
  13. viewMatrix = Matrix.CreateLookAt(new Vector3(5, 5, 5), Vector3.Zero, Vector3.Up);  
  14.  
  15. projectionMatrix = Matrix.CreatePerspectiveFieldOfView(  
  16.  
  17. MathHelper.ToRadians(45), // 45 degree angle  
  18.  
  19. (float)GraphicsDevice.Viewport.Width /  
  20.  
  21. (float)GraphicsDevice.Viewport.Height,  
  22.  
  23. 1.0f, 100.0f);  
  24.  
  25. }  

 

算了,不解释了,大家知道这段代码在干什么就好了。接下来,创建一个叫做InitEffect的函数中,对basicEffect进行初始化,代码如下:

 

  1. private void InitEffect()  
  2.  
  3. {  
  4.  
  5. // Initialize BasicEffect with transformation and light values  
  6.  
  7. basicEffect = new BasicEffect(graphics.GraphicsDevice);  
  8.  
  9. basicEffect.World = worldMatrix;  
  10.  
  11. basicEffect.View = viewMatrix;  
  12.  
  13. basicEffect.Projection = projectionMatrix;  
  14.  
  15. // primitive color  
  16.  
  17. basicEffect.AmbientLightColor = new Vector3(0.1f, 0.1f, 0.1f);  
  18.  
  19. basicEffect.DiffuseColor = new Vector3(1.0f, 1.0f, 1.0f);  
  20.  
  21. basicEffect.SpecularColor = new Vector3(0.25f, 0.25f, 0.25f);  
  22.  
  23. basicEffect.SpecularPower = 5.0f;  
  24.  
  25. basicEffect.Alpha = 1.0f;  
  26.  
  27. basicEffect.LightingEnabled = true;  
  28.  
  29. if (basicEffect.LightingEnabled)  
  30.  
  31. {  
  32.  
  33. basicEffect.DirectionalLight0.Enabled = true; // enable each light individually  
  34.  
  35. if (basicEffect.DirectionalLight0.Enabled)  
  36.  
  37. {  
  38.  
  39. // x direction  
  40.  
  41. basicEffect.DirectionalLight0.DiffuseColor = new Vector3(1, 0, 0); // range is 0 to 1  
  42.  
  43. basicEffect.DirectionalLight0.Direction = Vector3.Normalize(new Vector3(-1, 0, 0));  
  44.  
  45. // points from the light to the origin of the scene  
  46.  
  47. basicEffect.DirectionalLight0.SpecularColor = Vector3.One;  
  48.  
  49. }  
  50.  
  51. basicEffect.DirectionalLight1.Enabled = true;  
  52.  
  53. if (basicEffect.DirectionalLight1.Enabled)  
  54.  
  55. {  
  56.  
  57. // y direction  
  58.  
  59. basicEffect.DirectionalLight1.DiffuseColor = new Vector3(0, 0.75f, 0);  
  60.  
  61. basicEffect.DirectionalLight1.Direction = Vector3.Normalize(new Vector3(0, -1, 0));  
  62.  
  63. basicEffect.DirectionalLight1.SpecularColor = Vector3.One;  
  64.  
  65. }  
  66.  
  67. basicEffect.DirectionalLight2.Enabled = true;  
  68.  
  69. if (basicEffect.DirectionalLight2.Enabled)  
  70.  
  71. {  
  72.  
  73. // z direction  
  74.  
  75. basicEffect.DirectionalLight2.DiffuseColor = new Vector3(0, 0, 0.5f);  
  76.  
  77. basicEffect.DirectionalLight2.Direction = Vector3.Normalize(new Vector3(0, 0, -1));  
  78.  
  79. basicEffect.DirectionalLight2.SpecularColor = Vector3.One;  
  80.  
  81. }  
  82.  
  83. }  
  84.  
  85. }  

然后要对vertexDeclaration、cubeVertices和vertexBuffer变量进行初始化,我们将这部分代码放在InitVertexBuffer函数中:

  1. private void InitVertexBuffer()  
  2.  
  3. {  
  4.  
  5. // Create a vertex declaration for the type VertexPositionNormalTexture  
  6.  
  7. vertexDeclaration = new VertexDeclaration(new VertexElement[]  
  8.  
  9. {  
  10.  
  11. new VertexElement(0, VertexElementFormat.Vector3, VertexElementUsage.Position, 0),  
  12.  
  13. new VertexElement(12, VertexElementFormat.Vector3, VertexElementUsage.Normal, 0),  
  14.  
  15. new VertexElement(24, VertexElementFormat.Vector2, VertexElementUsage.TextureCoordinate, 0)  
  16.  
  17. }  
  18.  
  19. );  
  20.  
  21. // Create the per vertex data  
  22.  
  23. cubeVertices = new VertexPositionNormalTexture[36];  
  24.  
  25. Vector3 topLeftFront = new Vector3(-1.0f, 1.0f, 1.0f);  
  26.  
  27. Vector3 bottomLeftFront = new Vector3(-1.0f, -1.0f, 1.0f);  
  28.  
  29. Vector3 topRightFront = new Vector3(1.0f, 1.0f, 1.0f);  
  30.  
  31. Vector3 bottomRightFront = new Vector3(1.0f, -1.0f, 1.0f);  
  32.  
  33. Vector3 topLeftBack = new Vector3(-1.0f, 1.0f, -1.0f);  
  34.  
  35. Vector3 topRightBack = new Vector3(1.0f, 1.0f, -1.0f);  
  36.  
  37. Vector3 bottomLeftBack = new Vector3(-1.0f, -1.0f, -1.0f);  
  38.  
  39. Vector3 bottomRightBack = new Vector3(1.0f, -1.0f, -1.0f);  
  40.  
  41. Vector2 textureTopLeft = new Vector2(0.0f, 0.0f);  
  42.  
  43. Vector2 textureTopRight = new Vector2(1.0f, 0.0f);  
  44.  
  45. Vector2 textureBottomLeft = new Vector2(0.0f, 1.0f);  
  46.  
  47. Vector2 textureBottomRight = new Vector2(1.0f, 1.0f);  
  48.  
  49. Vector3 frontNormal = new Vector3(0.0f, 0.0f, 1.0f);  
  50.  
  51. Vector3 backNormal = new Vector3(0.0f, 0.0f, -1.0f);  
  52.  
  53. Vector3 topNormal = new Vector3(0.0f, 1.0f, 0.0f);  
  54.  
  55. Vector3 bottomNormal = new Vector3(0.0f, -1.0f, 0.0f);  
  56.  
  57. Vector3 leftNormal = new Vector3(-1.0f, 0.0f, 0.0f);  
  58.  
  59. Vector3 rightNormal = new Vector3(1.0f, 0.0f, 0.0f);  
  60.  
  61. // Front face.  
  62.  
  63. cubeVertices[0] =  
  64.  
  65. new VertexPositionNormalTexture(  
  66.  
  67. topLeftFront, frontNormal, textureTopLeft);  
  68.  
  69. cubeVertices[1] =  
  70.  
  71. new VertexPositionNormalTexture(  
  72.  
  73. bottomLeftFront, frontNormal, textureBottomLeft);  
  74.  
  75. cubeVertices[2] =  
  76.  
  77. new VertexPositionNormalTexture(  
  78.  
  79. topRightFront, frontNormal, textureTopRight);  
  80.  
  81. cubeVertices[3] =  
  82.  
  83. new VertexPositionNormalTexture(  
  84.  
  85. bottomLeftFront, frontNormal, textureBottomLeft);  
  86.  
  87. cubeVertices[4] =  
  88.  
  89. new VertexPositionNormalTexture(  
  90.  
  91. bottomRightFront, frontNormal, textureBottomRight);  
  92.  
  93. cubeVertices[5] =  
  94.  
  95. new VertexPositionNormalTexture(  
  96.  
  97. topRightFront, frontNormal, textureTopRight);  
  98.  
  99. // Back face.  
  100.  
  101. cubeVertices[6] =  
  102.  
  103. new VertexPositionNormalTexture(  
  104.  
  105. topLeftBack, backNormal, textureTopRight);  
  106.  
  107. cubeVertices[7] =  
  108.  
  109. new VertexPositionNormalTexture(  
  110.  
  111. topRightBack, backNormal, textureTopLeft);  
  112.  
  113. cubeVertices[8] =  
  114.  
  115. new VertexPositionNormalTexture(  
  116.  
  117. bottomLeftBack, backNormal, textureBottomRight);  
  118.  
  119. cubeVertices[9] =  
  120.  
  121. new VertexPositionNormalTexture(  
  122.  
  123. bottomLeftBack, backNormal, textureBottomRight);  
  124.  
  125. cubeVertices[10] =  
  126.  
  127. new VertexPositionNormalTexture(  
  128.  
  129. topRightBack, backNormal, textureTopLeft);  
  130.  
  131. cubeVertices[11] =  
  132.  
  133. new VertexPositionNormalTexture(  
  134.  
  135. bottomRightBack, backNormal, textureBottomLeft);  
  136.  
  137. // Top face.  
  138.  
  139. cubeVertices[12] =  
  140.  
  141. new VertexPositionNormalTexture(  
  142.  
  143. topLeftFront, topNormal, textureBottomLeft);  
  144.  
  145. cubeVertices[13] =  
  146.  
  147. new VertexPositionNormalTexture(  
  148.  
  149. topRightBack, topNormal, textureTopRight);  
  150.  
  151. cubeVertices[14] =  
  152.  
  153. new VertexPositionNormalTexture(  
  154.  
  155. topLeftBack, topNormal, textureTopLeft);  
  156.  
  157. cubeVertices[15] =  
  158.  
  159. new VertexPositionNormalTexture(  
  160.  
  161. topLeftFront, topNormal, textureBottomLeft);  
  162.  
  163. cubeVertices[16] =  
  164.  
  165. new VertexPositionNormalTexture(  
  166.  
  167. topRightFront, topNormal, textureBottomRight);  
  168.  
  169. cubeVertices[17] =  
  170.  
  171. new VertexPositionNormalTexture(  
  172.  
  173. topRightBack, topNormal, textureTopRight);  
  174.  
  175. // Bottom face.   
  176.  
  177. cubeVertices[18] =  
  178.  
  179. new VertexPositionNormalTexture(  
  180.  
  181. bottomLeftFront, bottomNormal, textureTopLeft);  
  182.  
  183. cubeVertices[19] =  
  184.  
  185. new VertexPositionNormalTexture(  
  186.  
  187. bottomLeftBack, bottomNormal, textureBottomLeft);  
  188.  
  189. cubeVertices[20] =  
  190.  
  191. new VertexPositionNormalTexture(  
  192.  
  193. bottomRightBack, bottomNormal, textureBottomRight);  
  194.  
  195. cubeVertices[21] =  
  196.  
  197. new VertexPositionNormalTexture(  
  198.  
  199. bottomLeftFront, bottomNormal, textureTopLeft);  
  200.  
  201. cubeVertices[22] =  
  202.  
  203. new VertexPositionNormalTexture(  
  204.  
  205. bottomRightBack, bottomNormal, textureBottomRight);  
  206.  
  207. cubeVertices[23] =  
  208.  
  209. new VertexPositionNormalTexture(  
  210.  
  211. bottomRightFront, bottomNormal, textureTopRight);  
  212.  
  213. // Left face.  
  214.  
  215. cubeVertices[24] =  
  216.  
  217. new VertexPositionNormalTexture(  
  218.  
  219. topLeftFront, leftNormal, textureTopRight);  
  220.  
  221. cubeVertices[25] =  
  222.  
  223. new VertexPositionNormalTexture(  
  224.  
  225. bottomLeftBack, leftNormal, textureBottomLeft);  
  226.  
  227. cubeVertices[26] =  
  228.  
  229. new VertexPositionNormalTexture(  
  230.  
  231. bottomLeftFront, leftNormal, textureBottomRight);  
  232.  
  233. cubeVertices[27] =  
  234.  
  235. new VertexPositionNormalTexture(  
  236.  
  237. topLeftBack, leftNormal, textureTopLeft);  
  238.  
  239. cubeVertices[28] =  
  240.  
  241. new VertexPositionNormalTexture(  
  242.  
  243. bottomLeftBack, leftNormal, textureBottomLeft);  
  244.  
  245. cubeVertices[29] =  
  246.  
  247. new VertexPositionNormalTexture(  
  248.  
  249. topLeftFront, leftNormal, textureTopRight);  
  250.  
  251. // Right face.   
  252.  
  253. cubeVertices[30] =  
  254.  
  255. new VertexPositionNormalTexture(  
  256.  
  257. topRightFront, rightNormal, textureTopLeft);  
  258.  
  259. cubeVertices[31] =  
  260.  
  261. new VertexPositionNormalTexture(  
  262.  
  263. bottomRightFront, rightNormal, textureBottomLeft);  
  264.  
  265. cubeVertices[32] =  
  266.  
  267. new VertexPositionNormalTexture(  
  268.  
  269. bottomRightBack, rightNormal, textureBottomRight);  
  270.  
  271. cubeVertices[33] =  
  272.  
  273. new VertexPositionNormalTexture(  
  274.  
  275. topRightBack, rightNormal, textureTopRight);  
  276.  
  277. cubeVertices[34] =  
  278.  
  279. new VertexPositionNormalTexture(  
  280.  
  281. topRightFront, rightNormal, textureTopLeft);  
  282.  
  283. cubeVertices[35] =  
  284.  
  285. new VertexPositionNormalTexture(  
  286.  
  287. bottomRightBack, rightNormal, textureBottomRight);  
  288.  
  289. vertexBuffer = new VertexBuffer(  
  290.  
  291. graphics.GraphicsDevice,  
  292.  
  293. typeof(VertexPositionNormalTexture),  
  294.  
  295. cubeVertices.Length,  
  296.  
  297. BufferUsage.None  
  298.  
  299. );  
  300.  
  301. vertexBuffer.SetData(cubeVertices);  
  302.  
  303. }  
  304.  

请原谅我把36个顶点的代码都贴出来了,如果不贴出来,肯定会有人不补全,然后就看不到完整的正方体了。

这里就要说到***个错误点了:文章中没有列出所有36个顶点的定义,不过示例代码UseBasicEffect中列出了;另一个问题是VertexBuffer的构造函数发生了变化,原文和示例代码中的VertexBuffer构造函数是这样的: 

  1. vertexBuffer = new VertexBuffer(  
  2.  
  3. graphics.GraphicsDevice,  
  4.  
  5. VertexPositionNormalTexture.SizeInBytes * cubeVertices.Length,  
  6.  
  7. BufferUsage.None  
  8.  
  9. );  

而正确的写法应该是:

  1. vertexBuffer = new VertexBuffer(  
  2.  
  3. graphics.GraphicsDevice,  
  4.  
  5. typeof(VertexPositionNormalTexture),  
  6.  
  7. cubeVertices.Length,  
  8.  
  9. BufferUsage.None  
  10.  
  11. );  
  12.  

VertexBuffer增加了一个Type类型的参数(第二个),我们必须传入一个IVertexType接口的派生类型,构造函数会用类型和顶点列表的长度计算VertexBuffer的size,这显然比上边的实现好了许多。

分别实现了这三个初始化函数后,我们要在真正的初始化函数Initialize里调用这三个函数,注意Initialize函数不是自己添加的,在Game1类中本来就有:

  1. protected override void Initialize()  
  2.  
  3. {  
  4.  
  5. InitMatrices();  
  6.  
  7. InitEffect();  
  8.  
  9. InitVertexBuffer();  
  10.  
  11. base.Initialize();  
  12.  
  13. }  
  14.  

好了,我们在Draw函数里增加绘制方法:

  1. protected override void Draw(GameTime gameTime)  
  2.  
  3. {  
  4.  
  5. GraphicsDevice.Clear(Color.CornflowerBlue);  
  6.  
  7. // TODO: Add your drawing code here  
  8.  
  9. RasterizerState rasterizerState1 = new RasterizerState();  
  10.  
  11. rasterizerState1.CullMode = CullMode.None;  
  12.  
  13. graphics.GraphicsDevice.RasterizerState = rasterizerState1;  
  14.  
  15. GraphicsDevice.SetVertexBuffer(vertexBuffer);  
  16.  
  17. foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)  
  18.  
  19. {  
  20.  
  21. pass.Apply();  
  22.  
  23. graphics.GraphicsDevice.DrawPrimitives(  
  24.  
  25. PrimitiveType.TriangleList,  
  26.  
  27. 0,  
  28.  
  29. 36  
  30.  
  31. );  
  32.  
  33. }  
  34.  
  35. base.Draw(gameTime);  
  36.  
  37. }  
  38.  

这里包含了第二个错误点,原文没有下面这句(上文高亮标出):

GraphicsDevice.SetVertexBuffer(vertexBuffer);

如果没有SetVertexBuffer的调用,程序在运行时会遇到下面的异常:

An unhandled exception of type 'System.InvalidOperationException' occurred in Microsoft.Xna.Framework.Graphics.dll

Additional information: A valid vertex buffer (and a valid index buffer if you are using indexed primitives) must be set on the device before any draw operations may be performed.

原文的调用方式和UseBasicEffect的实现方式完全不同,所以大家要注意一下。毕竟是Beta版,很多文档还没有***完成。

好了,到这里,其实我们编译运行该程序的话,就可以看到绘制出的立方体来了。但是,我还想再加点——让立方体旋转起来。

在Update函数中增加下面两句(高亮显示):

  1. protected override void Update(GameTime gameTime)  
  2.  
  3. {  
  4.  
  5. // Allows the game to exit  
  6.  
  7. if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)  
  8.  
  9. this.Exit();  
  10.  
  11. // TODO: Add your update logic here  
  12.  
  13. Matrix matrix = Matrix.CreateRotationX(0.1f);  
  14.  
  15. basicEffectbasicEffect.World = basicEffect.World * matrix;  
  16.  
  17. base.Update(gameTime);  
  18.  
  19. }  
  20.  

我们创建了一个沿X轴旋转0.1度的矩阵,与basicEffect中的世界坐标系相乘,就可以使我们绘制出来的立方体每次Update时,都沿着X轴旋转0.1f度。因为角度是float型,千万别忘了0.1f之后的那个f。好了,程序***的样子就是这样的。在***篇文章里,我留了很多问题,比如3D的基本概念、坐标系、灯光、材质、旋转,希望在后边能够比较从容地解释这些知识。我现在唯一的希望是,不要等到六个月后才有时间再写第二篇……

【编辑推荐】

  1. Windows Phone 7核心控件Panorama和Pivot月底发布
  2. 微软应用开发大赛曝光Windows Phone 7首批应用
  3. 微软发布Windows Phone 7游戏开发实例 基于XNA框架
  4. Windows Phone 7 平面设计师的T型台
  5. Windows Phone 7开发之Silverlight游戏编辑器

 

 

责任编辑:冰凝儿 来源: CSDN博客
相关推荐

2010-08-10 09:11:12

Windows PhoNXA

2011-03-16 10:24:22

3D开发Windows Pho

2013-06-14 09:41:59

2023-08-18 08:00:00

游戏开发3D模型

2021-12-28 10:52:10

鸿蒙HarmonyOS应用

2016-06-01 09:19:08

开发3D游戏

2011-05-25 16:07:17

2013-11-21 19:36:56

畅游游戏引擎Genesis-3D

2012-12-24 08:48:25

iOSUnity3D

2013-11-25 11:29:41

搜狐游戏引擎

2021-09-26 10:45:27

前端游戏CSS

2012-05-25 09:09:25

Windows Pho

2012-05-22 14:26:15

XNA 横竖屏设置

2012-05-28 15:55:47

XNA 重力感应

2012-12-24 09:04:04

iOSUnity3D

2017-07-12 23:08:03

白鹭引擎

2017-07-21 11:28:57

前端Threejs3D地图

2022-09-07 12:00:26

Python3D游戏

2010-08-06 15:44:28

Windows PhoWindows PhoSilverlight

2011-05-04 11:31:09

Windows PhoWindows Pho游戏开发
点赞
收藏

51CTO技术栈公众号