程序博客网 > 加工中心编程

libgdx 学习笔记六 Projection，Viewport，Camera （投影，视口，相机）

来源：互联网 发布：加工中心编程 编辑：程序博客网 时间：2024/05/21 01:42

Introduction（介绍）
在学习笔记4 MyFirstTriangle 和学习笔记5 ColorMeshTexture 中, 我们学习了建立和渲染mesh的基础。你注意到没,三角形出现了拉伸 。让我们开始用一个例子来解决这个问题

Creating a Square(创建一个正方形)
创建一个新的libgdx桌面工程叫projection-viewport-camera。创建一个名叫ProjectionViewportCamera的类 继承ApplicationListener，然后包名 为 com.example.projectionviewportcamera。详细说明怎么建立一个libgdx桌面或者android工程，请看学习笔记4 MyFirstTriangle 教程。不同于学习笔记4，我们准备显示一个正方形。以下是ProjectionViewportCamera中的代码

[java] view plaincopyprint?
  1. package com.example.projectionviewportcamera;
  3. import com.badlogic.gdx.ApplicationListener;
  4. import com.badlogic.gdx.Gdx;
  5. import com.badlogic.gdx.graphics.Color;
  6. import com.badlogic.gdx.graphics.GL10;
  7. import com.badlogic.gdx.graphics.Mesh;
  8. import com.badlogic.gdx.graphics.VertexAttribute;
  9. import com.badlogic.gdx.graphics.VertexAttributes.Usage;
  11. public class ProjectionViewportCameraimplements ApplicationListener {
  12. private Mesh squarePartOne;
  13. private Mesh squarePartTwo;
  14. @Override
  15. public void create() {
  16. if (squarePartOne == null) {
  17. squarePartOne = new Mesh(true,3, 3,
  18. new VertexAttribute(Usage.Position,3, "a_position"),
  19. new VertexAttribute(Usage.ColorPacked,4, "a_color"));
  21. squarePartOne.setVertices(newfloat[] {
  22. -0.5f, -0.5f,0, Color.toFloatBits(128,0, 0,255),
  23. 0.5f, -0.5f,0, Color.toFloatBits(192,0, 0,255),
  24. -0.5f, 0.5f,0, Color.toFloatBits(192,0, 0,255) });
  25. squarePartOne.setIndices(newshort[] { 0,1, 2});
  26. }
  27. if (squarePartTwo ==null) {
  28. squarePartTwo = new Mesh(true,3, 3,
  29. new VertexAttribute(Usage.Position,3, "a_position"),
  30. new VertexAttribute(Usage.ColorPacked,4, "a_color"));
  31. squarePartTwo.setVertices(newfloat[] {
  32. 0.5f, -0.5f,0, Color.toFloatBits(192,0, 0,255),
  33. -0.5f, 0.5f,0, Color.toFloatBits(192,0, 0,255),
  34. 0.5f, 0.5f,0, Color.toFloatBits(255,0, 0,255) });
  35. squarePartTwo.setIndices(newshort[] { 0,1, 2});
  36. }
  37. }
  38. @Override
  39. public void dispose() { }
  40. @Override
  41. public void pause() { }
  42. @Override
  43. public void render() {
  44. Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
  45. squarePartOne.render(GL10.GL_TRIANGLES, 0,3);
  46. squarePartTwo.render(GL10.GL_TRIANGLES, 0,3);
  47. }
  48. @Override
  49. public void resize(int width,int height) { }
  50. @Override
  51. public void resume() { }
  52. }


上面代码和MyFirstTriangle教程中用了很相似的内容除了他用2个三角形代替了1个。把2个三角形放在的位置形成一个正方形，用二维坐标(-0.5,-0.5),(0.5,-0.5),(0.5,0.5)(-0.5,0.5)。
运行程序效果如下：

明显的，虽然我们指定正方形的坐标， 但结果却变成一个长方形。在讨论这个问题之前，我将偏离主题一会，为这个正方形优化一下渲染。2个三角形有1个顶点在(0.5,-0.5)还有一个在(-0.5,0.5)。在相同坐标中，我们排除顶点的副本 ，用三角带（TRIANGLE_STRIP）实现的正方形。用三角带（TRIANGLE_STRIP）允许2个三角形共享顶点所以更节约内存。
（看看Jeff LaMarche's tutorial 有更好的说明）。下面是改后的代码：

[java] view plaincopyprint?
  1. <SPAN style="FONT-SIZE: 16px">package com.example.projectionviewportcamera;
  3. import com.badlogic.gdx.ApplicationListener;
  4. import com.badlogic.gdx.Gdx;
  5. import com.badlogic.gdx.graphics.Color;
  6. import com.badlogic.gdx.graphics.GL10;
  7. import com.badlogic.gdx.graphics.Mesh;
  8. import com.badlogic.gdx.graphics.VertexAttribute;
  9. import com.badlogic.gdx.graphics.VertexAttributes.Usage;
  11. public class ProjectionViewportCameraimplements ApplicationListener {
  12. private Mesh squareMesh;
  13. @Override
  14. public void create() {
  15. if (squareMesh ==null) {
  16. squareMesh = new Mesh(true,4, 4,
  17. new VertexAttribute(Usage.Position,3, "a_position"),
  18. new VertexAttribute(Usage.ColorPacked,4, "a_color"));
  19. squareMesh.setVertices(newfloat[] {
  20. -0.5f, -0.5f,0, Color.toFloatBits(128,0, 0,255),
  21. 0.5f, -0.5f,0, Color.toFloatBits(192,0, 0,255),
  22. -0.5f, 0.5f,0, Color.toFloatBits(192,0, 0,255),
  23. 0.5f, 0.5f,0, Color.toFloatBits(255,0, 0,255) });
  24. squareMesh.setIndices(new short[] { 0,1, 2,3});16
  25. }
  26. }
  27. @Override
  28. public void dispose() { }
  29. @Override
  30. public void pause() { }
  31. @Override
  32. public void render() {
  33. Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
  34. squareMesh.render(GL10.GL_TRIANGLE_STRIP, 0,4);
  35. }
  36. @Override
  37. public void resize(int width,int height) { }
  38. @Override
  39. public void resume() { }
  40. }
  41. </SPAN>

2个三角形在单个mesh中用四个顶点和4个索引被连到一起了。在render()中，我们指定正方形用triangle strips来定义。顶点越少越好而且代码也比较简单

Viewport

回到正方形拉伸的问题上来。默认viewport 用左边距 x=-1,右边距x=1,顶部边距 y=1,底部边距y=-1展现了一个矩形区域。如果我们创建一个原型看起来像空白区域的图片：

当我们红色的正方形在那个区域时，结果看起来是这样：

然而，viewport 它自己比正方形更大。为了填满边上额外的空间，这个区域被延伸。想象一个画家 延伸一个正方形画布变成一个矩形框。结果如下：

Camera

修正这个效果，我们允许viewport渲染一个代替正方形的矩形区域 。这个区域的形状将匹配viewport的形状，有那么点像一个画家选择一个基于图片框尺寸的画布尺寸。完成这个，

我们用Camera类，在本例中一个子类叫OrthographicCamera。Camera类允许我们根据viewport改变显示区域。以下是代码：

[java] view plaincopyprint?
  1. <SPAN style="FONT-SIZE: 16px">package com.example.projectionviewportcamera;
  3. import com.badlogic.gdx.ApplicationListener;
  4. import com.badlogic.gdx.Gdx;
  5. import com.badlogic.gdx.graphics.Color;
  6. import com.badlogic.gdx.graphics.GL10;
  7. import com.badlogic.gdx.graphics.Mesh;
  8. import com.badlogic.gdx.graphics.OrthographicCamera;
  9. import com.badlogic.gdx.graphics.VertexAttribute;
  10. import com.badlogic.gdx.graphics.VertexAttributes.Usage;
  12. public class ProjectionViewportCameraimplements ApplicationListener {
  13. private Mesh squareMesh;
  14. private OrthographicCamera camera;
  15. @Override
  16. public void create() {
  17. if (squareMesh ==null) {
  18. squareMesh = new Mesh(true,4, 4,
  19. new VertexAttribute(Usage.Position,3, "a_position"),
  20. new VertexAttribute(Usage.ColorPacked,4, "a_color"));
  21. squareMesh.setVertices(newfloat[] {
  22. -0.5f, -0.5f,0, Color.toFloatBits(128,0, 0,255),
  23. 0.5f, -0.5f,0, Color.toFloatBits(192,0, 0,255),
  24. -0.5f, 0.5f,0, Color.toFloatBits(192,0, 0,255),
  25. 0.5f, 0.5f,0, Color.toFloatBits(255,0, 0,255) });
  26. squareMesh.setIndices(new short[] { 0,1, 2,3});
  27. }
  28. }
  29. @Override
  30. public void dispose() { }
  31. @Override
  32. public void pause() { }
  33. @Override
  34. public void render() {
  35. camera.update();
  36. camera.apply(Gdx.gl10);
  37. Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
  38. squareMesh.render(GL10.GL_TRIANGLE_STRIP, 0,4);
  39. }
  40. @Override
  41. public void resize(int width,int height) {
  42. float aspectRatio = (float) width / (float) height;
  43. camera = new OrthographicCamera(2f * aspectRatio, 2f);
  44. }
  45. @Override
  46. public void resume() { }
  47. }
  48. </SPAN>


在resize()中，我们构造一个OrthographicCamera的实例。指定我们想要显示的区域。本例中，我们告诉Camera显示viewport的形状，用2*宽度/高度比值单位的区域

在render()中（这里就是表示屏幕相对宽度值=3 后面会说明），我们通过Camera实例调用update()和apply()。以下是运行效果：

桌面viewport 在我们的教程中分辨率为480X320。 当app启动和旋转时通过resize()传入的数字。屏幕宽度用来和数字的比例计算。例如 width=2 *480 / 320=3.下面就是坐标图

正方形的顶点仍然位于(x,y)坐标系。现在我们使用Camera改正它的先前的变形。

Camera and Sprites

在HelloWorld之后我们没有处理sprites。但值得注意的是SpriteBatch类真的有一个内部的camera ，它不同于我们前面构造的那个。例如在坐标(0,0)中绘制一个sprite，

我们创建一个在sprite覆盖正方形不必要的。在绘制的开始阶段同步2个cameras即可搞定这个问题。代码如下(包含MeshColorTexture教程，提醒注意载入assets。)

[java] view plaincopyprint?
  1. <SPAN style="FONT-SIZE: 16px">package com.example.projectionviewportcamera;
  3. import com.badlogic.gdx.ApplicationListener;
  4. import com.badlogic.gdx.Gdx;
  5. import com.badlogic.gdx.graphics.Color;
  6. import com.badlogic.gdx.graphics.GL10;
  7. import com.badlogic.gdx.graphics.Mesh;
  8. import com.badlogic.gdx.graphics.OrthographicCamera;
  9. import com.badlogic.gdx.graphics.Texture;
  10. import com.badlogic.gdx.graphics.VertexAttribute;
  11. import com.badlogic.gdx.graphics.VertexAttributes.Usage;
  12. import com.badlogic.gdx.graphics.g2d.SpriteBatch;
  14. public class ProjectionViewportCameraimplements ApplicationListener {
  15. private Mesh squareMesh;
  16. private OrthographicCamera camera;
  17. private Texture texture;
  18. private SpriteBatch spriteBatch;
  19. @Override
  20. public void create() {
  21. if (squareMesh ==null) {
  22. squareMesh = new Mesh(true,4, 4,
  23. new VertexAttribute(Usage.Position,3, "a_position"),
  24. new VertexAttribute(Usage.ColorPacked,4, "a_color"));
  25. squareMesh.setVertices(newfloat[] {
  26. -0.5f, -0.5f,0, Color.toFloatBits(128,0, 0,255),
  27. 0.5f, -0.5f,0, Color.toFloatBits(192,0, 0,255),
  28. -0.5f, 0.5f,0, Color.toFloatBits(192,0, 0,255),
  29. 0.5f, 0.5f,0, Color.toFloatBits(255,0, 0,255) });
  30. squareMesh.setIndices(new short[] { 0,1, 2,3});
  31. }
  32. texture = new Texture(Gdx.files.internal("data/badlogic.jpg"));
  33. spriteBatch = new SpriteBatch();
  34. }
  35. @Override
  36. public void dispose() { }
  37. @Override
  38. public void pause() { }
  39. @Override
  40. public void render() {
  41. camera.update();
  42. camera.apply(Gdx.gl10);
  43. spriteBatch.setProjectionMatrix(camera.combined);
  44. Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
  45. squareMesh.render(GL10.GL_TRIANGLE_STRIP, 0,4);
  46. spriteBatch.begin();
  47. spriteBatch.draw(texture, 0,0, 1,1, 0,0,
  48. texture.getWidth(), texture.getHeight(), false,false);
  49. spriteBatch.end();
  50. }
  51. @Override
  52. public void resize(int width,int height) {
  53. float aspectRatio = (float) width / (float) height;
  54. camera = new OrthographicCamera(2f * aspectRatio, 2f);
  55. }
  56. @Override
  57. public void resume() { }
  58. }
  59. </SPAN>


在render()中， 我们更新我们的相机，提供相机的投影信息到SpriteBatch实例中，我们用来绘制我们的sprite。效果如下:

需要注意绘制一个sprite会改变整个场景的投影到sprite的投影。如果你没有设置sprite的投影到同其余的场景。sprite也许改变其余的场景看起来像简单的画法。理想的效果，你的SpriteBatch实例，在这种情况下可能清空创建的第二个camera。

Projection(投影)

在这一点上，我们已经布局mesh和sprite如果他们在一个平坦的表面上。没有深度，面积，距离的概念。OrthographicCamera已经使用提供一个我们的场景的orthographic 投影。

这个投影类型仅仅意味着提供一个空间的2D概念，像奇特的马里奥或者吃豆子。为了显示深度和3D空间，我们需要用到透视投影。关于投影的学习，可以看看Mario's blog post on the Camera class或者Jeff LaMarche's article on the subject

在libgdx中使用透视投影的方法，让我们介绍另一个正方形mesh，代码如下:

[java] view plaincopyprint?
  1. <SPAN style="FONT-SIZE: 16px">package com.example.projectionviewportcamera;
  3. import com.badlogic.gdx.ApplicationListener;
  4. import com.badlogic.gdx.Gdx;
  5. import com.badlogic.gdx.graphics.Camera;
  6. import com.badlogic.gdx.graphics.Color;
  7. import com.badlogic.gdx.graphics.GL10;
  8. import com.badlogic.gdx.graphics.Mesh;
  9. import com.badlogic.gdx.graphics.OrthographicCamera;
  10. import com.badlogic.gdx.graphics.VertexAttribute;
  11. import com.badlogic.gdx.graphics.VertexAttributes.Usage;
  13. public class ProjectionViewportCameraimplements ApplicationListener {
  14. private Mesh squareMesh;
  15. private Mesh nearSquare;
  16. private Camera camera;
  17. @Override
  18. public void create() {
  19. if (squareMesh ==null) {
  20. squareMesh = new Mesh(true,4, 4,
  21. new VertexAttribute(Usage.Position,3, "a_position"),
  22. new VertexAttribute(Usage.ColorPacked,4, "a_color"));
  23. squareMesh.setVertices(newfloat[] {
  24. 0, -0.5f, -4, Color.toFloatBits(128,0, 0,255),
  25. 1, -0.5f, -4, Color.toFloatBits(192,0, 0,255),
  26. 0, 0.5f, -4, Color.toFloatBits(192,0, 0,255),
  27. 1, 0.5f, -4, Color.toFloatBits(255,0, 0,255) });
  28. squareMesh.setIndices(new short[] { 0,1, 2,3});
  29. if (nearSquare ==null) {
  30. nearSquare = new Mesh(true,4, 4,
  31. new VertexAttribute(Usage.Position,3, "a_position"),
  32. new VertexAttribute(Usage.ColorPacked,4, "a_color"));
  33. nearSquare.setVertices(newfloat[] { -
  34. 1, -0.5f, -1.1f, Color.toFloatBits(0,0, 128,255),
  35. 0, -0.5f, -1.1f, Color.toFloatBits(0,0, 192,255),
  36. -1, 0.5f, -1.1f, Color.toFloatBits(0,0, 192,255),
  37. 0, 0.5f, -1.1f, Color.toFloatBits(0,0, 255,255) });
  38. nearSquare.setIndices(new short[] { 0,1, 2,3});
  39. }
  40. }
  41. @Override
  42. public void dispose() { }
  43. @Override
  44. public void pause() { }
  45. @Override
  46. public void render() {
  47. camera.update();
  48. camera.apply(Gdx.gl10);
  49. Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
  50. squareMesh.render(GL10.GL_TRIANGLE_STRIP, 0,4);
  51. nearSquare.render(GL10.GL_TRIANGLE_STRIP, 0,4);
  52. }
  53. @Override
  54. public void resize(int width,int height) {
  55. float aspectRatio = (float) width / (float) height;
  56. camera = new OrthographicCamera(2f * aspectRatio, 2f);
  57. }
  58. @Override
  59. public void resume() { }
  60. }
  61. </SPAN>


这个新的正方形像第一个正方形的副本 但颜色不同。红色的正方形在X的正方向远离。新的正方形在它的左边。效果如下:

另一件事就是我们改变正方形的z 位置。注意红色正方形的的位置远离Z的负方向，蓝色正方形在红色正方形和viewer之间坐着。看截图很难看出来，因为我们用orthographic camera

基本忽略了Z坐标。改变resize()方法使用透视相机（PerspectiveCamera）：

[java] view plaincopyprint?
  1. <SPAN style="FONT-SIZE: 16px">publicvoid resize(int width,int height) {
  2. float aspectRatio= (float) width/ (float) height;
  3. camera= new PerspectiveCamera(67, 2f* aspectRatio, 2f);
  4. }</SPAN>

现在2个正方形区别就大了：

在PerspectiveCamera 构造函数和OrthographicCamera 构造函数不同，前者多了一个view参数。我们传的67。人类可视透视区域大约是60-70度左右。所以67提供一个正常的视角。

注意默认值， PerspectiveCamera 裁剪任何一个比远离它的一个单位还近的对象。如果你放置一个太靠近camera的对象，它将消失。它也默认从远处裁剪在它前方100个单位，所以对象太远也不能被渲染

当我们移动相机透视感会变得更加明显。修改render()方法：

[java] view plaincopyprint?
  1. <SPAN style="FONT-SIZE: 16px">privateint total = 0;
  2. private float movementIncrement =0.0006f;
  3. @Override public void render() {
  4. total += 1;
  5. if (total > 500) {
  6. movementIncrement = -movementIncrement;
  7. total = -200;
  8. }
  9. camera.rotate(movementIncrement * 20,0, 1,0);
  10. camera.translate(movementIncrement, 0, movementIncrement);
  11. camera.update();
  12. camera.apply(Gdx.gl10);
  13. Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
  14. squareMesh.render(GL10.GL_TRIANGLE_STRIP, 0,4);
  15. nearSquare.render(GL10.GL_TRIANGLE_STRIP, 0,4);
  16. }</SPAN>

我们使用camera的rotate()和tranlate()方法来移动场景周围的camera。如上所述，当相机移动到很靠近蓝色正方形时，你看见他开始裁剪和消失。在OrthographicCamera上调用translate()将在没有提供3D空间的一个sense周围移动camera。看Mario's post 其他使用方法并测试。

Running it on Android

按照MyFirstTriangle教程设置android。记得引用必要的库文件，参考桌面工作，添加assets。运行后效果好像很大：

这个结果是我们锁定了顶点可视区域到2个单位高。默认，android模拟器高度大于宽度，我们的水平可视范围比3个单位宽度更小，这个APP与桌面的很不同。最简单的方法就是使

android和桌面相似，方法是让android app横向显示。修改你的manifest 然后设置android:screenOrientation="landscape" ，代码如下：

[html] view plaincopyprint?
  1. <SPANstyle="FONT-SIZE: 16px"><activityandroid:nameactivityandroid:name=".ProjectionViewportCameraAndroid"android:label="@string/app_name"android:screenOrientation="landscape">
  2. <intent-filter>
  3. <actionandroid:name="android.intent.action.MAIN"/>
  4. <categoryandroid:namecategoryandroid:name="android.intent.category.LAUNCHER"/>
  5. </intent-filter>
  6. </activity></SPAN>


下面是锁定横屏后的截图。你能改变模拟器的方向涌ctrl+F11 或ctrl+F12

因为android设备有这么多不同的屏幕尺寸，锁屏还不够，你必须在不同的分辨率下测试你的游戏。最简单的方法就是通过桌面项目。在桌面工程启动的类中，创建一个480X320分辨率

的viewport。你的游戏在不同的设备上获得一个sense来测试长宽比。

Conclusion（结论）

现在关于mesh,sprite和camera你拥有足够的知识，开始构建一个你想要的scene。更多例子，可以看看libgdxdemosandtests。在downloads page你能抓取关于这个工程的源文件

原文地址：http://www.cnblogs.com/tianjian/archive/2011/09/01/2162281.html

加工中心编程 加工中心编程
原创粉丝点击
热门IT博客
软件的售后服务承诺软件的售后服务承诺
one是js的事件吗one是js的事件吗
公司数据分析报告范文
linux 修改目录权限
创新软件
网络安全法的重要性
做好淘宝网的免费流量
mac上steam游戏装在哪
手机视频特效软件
sql建立数据库用户
网络信息安全的英文
淘宝查询订单号
阿里云 淘宝
手机宽带测速软件
周清扬的淘宝店铺名
js 字符转日期
淘宝会员打折怎么设置
软件系统穿透
臭苋菜 知乎
手机版工程预算软件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 47路公交路线 4.7 47号杀手 47sisi 郑州47路公交线路 合肥47路公交路线 47影视 47影院 49 49vv 49日 49. +49 49天 49中 k49 莫格利男孩 洪欣迎49岁生日 陆战王 莫格利 惠奈酱 在末日带49位女明星 四十九日 4.9 www.49 49天韩剧 韩剧49天 49日剧 四十九中 四十九 小欢喜1到49全集免费观看 都挺好1到49全集免费观看 a4纸 a4 a4l 红米a ma al a4纸长宽 4开纸等于多少张a4 a4纸大小

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里