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

Introduction（介绍）

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

Creating a Square(创建一个正方形)

创建一个新的libgdx桌面工程叫projection-viewport-camera。创建一个名叫ProjectionViewportCamera的类 继承ApplicationListener，然后包名 为 com.example.projectionviewportcamera。

详细说明怎么建立一个libgdx桌面或者android工程，请看学习笔记4 MyFirstTriangle 教程。不同于学习笔记4，我们准备显示一个正方形。以下是ProjectionViewportCamera中的代码

    package com.example.projectionviewportcamera;

    import com.badlogic.gdx.ApplicationListener;
    import com.badlogic.gdx.Gdx;
    import com.badlogic.gdx.graphics.Color;
    import com.badlogic.gdx.graphics.GL10;
    import com.badlogic.gdx.graphics.Mesh;
    import com.badlogic.gdx.graphics.VertexAttribute;
    import com.badlogic.gdx.graphics.VertexAttributes.Usage;

    public class ProjectionViewportCamera implements ApplicationListener {
        private Mesh squarePartOne;
        private Mesh squarePartTwo;

        @Override
        public void create() {
            if (squarePartOne == null) {
                squarePartOne = new Mesh(true, 3, 3, 
                        new VertexAttribute(Usage.Position, 3, "a_position"),
                        new VertexAttribute(Usage.ColorPacked, 4, "a_color"));

                squarePartOne.setVertices(new float[] {
                        -0.5f, -0.5f, 0, Color.toFloatBits(128, 0, 0, 255),
                        0.5f, -0.5f, 0, Color.toFloatBits(192, 0, 0, 255),
                        -0.5f, 0.5f, 0, Color.toFloatBits(192, 0, 0, 255) });   
                squarePartOne.setIndices(new short[] { 0, 1, 2});
            }

            if (squarePartTwo == null) {
                squarePartTwo = new Mesh(true, 3, 3, 
                        new VertexAttribute(Usage.Position, 3, "a_position"),
                        new VertexAttribute(Usage.ColorPacked, 4, "a_color"));

                squarePartTwo.setVertices(new float[] {
                        0.5f, -0.5f, 0, Color.toFloatBits(192, 0, 0, 255),
                        -0.5f, 0.5f, 0, Color.toFloatBits(192, 0, 0, 255),
                        0.5f, 0.5f, 0, Color.toFloatBits(255, 0, 0, 255) });   
                squarePartTwo.setIndices(new short[] { 0, 1, 2});
            }
        }

        @Override
        public void dispose() { }

        @Override
        public void pause() { }

        @Override
        public void render() {
            Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
            squarePartOne.render(GL10.GL_TRIANGLES, 0, 3);
            squarePartTwo.render(GL10.GL_TRIANGLES, 0, 3);
        }

        @Override
        public void resize(int width, int height) { }

        @Override
        public void resume() { }
    }

上面代码和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 有更好的说明）。下面是改后的代码：

package com.example.projectionviewportcamera;

    import com.badlogic.gdx.ApplicationListener;
    import com.badlogic.gdx.Gdx;
    import com.badlogic.gdx.graphics.Color;
    import com.badlogic.gdx.graphics.GL10;
    import com.badlogic.gdx.graphics.Mesh;
    import com.badlogic.gdx.graphics.VertexAttribute;
    import com.badlogic.gdx.graphics.VertexAttributes.Usage;

    public class ProjectionViewportCamera implements ApplicationListener {
        private Mesh squareMesh;

        @Override
        public void create() {
            if (squareMesh == null) {
                squareMesh = new Mesh(true, 4, 4, 
                        new VertexAttribute(Usage.Position, 3, "a_position"),
                        new VertexAttribute(Usage.ColorPacked, 4, "a_color"));

                squareMesh.setVertices(new float[] {
                        -0.5f, -0.5f, 0, Color.toFloatBits(128, 0, 0, 255),
                        0.5f, -0.5f, 0, Color.toFloatBits(192, 0, 0, 255),
                        -0.5f, 0.5f, 0, Color.toFloatBits(192, 0, 0, 255),
                        0.5f, 0.5f, 0, Color.toFloatBits(255, 0, 0, 255) });   
                squareMesh.setIndices(new short[] { 0, 1, 2, 3});16
            }

        }

        @Override
        public void dispose() { }

        @Override
        public void pause() { }

        @Override
        public void render() {
            Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
            squareMesh.render(GL10.GL_TRIANGLE_STRIP, 0, 4);
        }

        @Override
        public void resize(int width, int height) { }

        @Override
        public void resume() { }
    }

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

Viewport

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

 

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

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

 

Camera

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

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

package com.example.projectionviewportcamera;

        import com.badlogic.gdx.ApplicationListener;
        import com.badlogic.gdx.Gdx;
        import com.badlogic.gdx.graphics.Color;
        import com.badlogic.gdx.graphics.GL10;
        import com.badlogic.gdx.graphics.Mesh;
        import com.badlogic.gdx.graphics.OrthographicCamera;
        import com.badlogic.gdx.graphics.VertexAttribute;
        import com.badlogic.gdx.graphics.VertexAttributes.Usage;

        public class ProjectionViewportCamera implements ApplicationListener {
            private Mesh squareMesh;
            private OrthographicCamera camera;

            @Override
            public void create() {
                if (squareMesh == null) {
                    squareMesh = new Mesh(true, 4, 4, 
                            new VertexAttribute(Usage.Position, 3, "a_position"),
                            new VertexAttribute(Usage.ColorPacked, 4, "a_color"));

                    squareMesh.setVertices(new float[] {
                            -0.5f, -0.5f, 0, Color.toFloatBits(128, 0, 0, 255),
                            0.5f, -0.5f, 0, Color.toFloatBits(192, 0, 0, 255),
                            -0.5f, 0.5f, 0, Color.toFloatBits(192, 0, 0, 255),
                            0.5f, 0.5f, 0, Color.toFloatBits(255, 0, 0, 255) });   
                    squareMesh.setIndices(new short[] { 0, 1, 2, 3});
                }
            }

            @Override
            public void dispose() { }

            @Override
            public void pause() { }

            @Override
            public void render() {
                camera.update();
                camera.apply(Gdx.gl10);

                Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
                squareMesh.render(GL10.GL_TRIANGLE_STRIP, 0, 4);
            }

            @Override
            public void resize(int width, int height) {
                float aspectRatio = (float) width / (float) height;
                camera = new OrthographicCamera(2f * aspectRatio, 2f);
            }

            @Override
            public void resume() { }
        }

在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。)

package com.example.projectionviewportcamera;

        import com.badlogic.gdx.ApplicationListener;
        import com.badlogic.gdx.Gdx;
        import com.badlogic.gdx.graphics.Color;
        import com.badlogic.gdx.graphics.GL10;
        import com.badlogic.gdx.graphics.Mesh;
        import com.badlogic.gdx.graphics.OrthographicCamera;
        import com.badlogic.gdx.graphics.Texture;
        import com.badlogic.gdx.graphics.VertexAttribute;
        import com.badlogic.gdx.graphics.VertexAttributes.Usage;
        import com.badlogic.gdx.graphics.g2d.SpriteBatch;

        public class ProjectionViewportCamera implements ApplicationListener {
            private Mesh squareMesh;
            private OrthographicCamera camera;
            private Texture texture;
            private SpriteBatch spriteBatch;

            @Override
            public void create() {
                if (squareMesh == null) {
                    squareMesh = new Mesh(true, 4, 4, 
                            new VertexAttribute(Usage.Position, 3, "a_position"),
                            new VertexAttribute(Usage.ColorPacked, 4, "a_color"));

                    squareMesh.setVertices(new float[] {
                            -0.5f, -0.5f, 0, Color.toFloatBits(128, 0, 0, 255),
                            0.5f, -0.5f, 0, Color.toFloatBits(192, 0, 0, 255),
                            -0.5f, 0.5f, 0, Color.toFloatBits(192, 0, 0, 255),
                            0.5f, 0.5f, 0, Color.toFloatBits(255, 0, 0, 255) });   
                    squareMesh.setIndices(new short[] { 0, 1, 2, 3});
                }

                texture = new Texture(Gdx.files.internal("data/badlogic.jpg"));
                spriteBatch = new SpriteBatch();
            }

            @Override
            public void dispose() { }

            @Override
            public void pause() { }

            @Override
            public void render() {
                camera.update();
                camera.apply(Gdx.gl10);
                spriteBatch.setProjectionMatrix(camera.combined);

                Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
                squareMesh.render(GL10.GL_TRIANGLE_STRIP, 0, 4);

                spriteBatch.begin();
                spriteBatch.draw(texture, 0, 0, 1, 1, 0, 0,
                        texture.getWidth(), texture.getHeight(), false, false);
                spriteBatch.end();
            }

            @Override
            public void resize(int width, int height) {
                float aspectRatio = (float) width / (float) height;
                camera = new OrthographicCamera(2f * aspectRatio, 2f);
            }

            @Override
            public void resume() { }
        }
    

在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，代码如下:

package com.example.projectionviewportcamera;

    import com.badlogic.gdx.ApplicationListener;
    import com.badlogic.gdx.Gdx;
    import com.badlogic.gdx.graphics.Camera;
    import com.badlogic.gdx.graphics.Color;
    import com.badlogic.gdx.graphics.GL10;
    import com.badlogic.gdx.graphics.Mesh;
    import com.badlogic.gdx.graphics.OrthographicCamera;
    import com.badlogic.gdx.graphics.VertexAttribute;
    import com.badlogic.gdx.graphics.VertexAttributes.Usage;

    public class ProjectionViewportCamera implements ApplicationListener {
        private Mesh squareMesh;
        private Mesh nearSquare;
        private Camera camera;

        @Override
        public void create() {
            if (squareMesh == null) {
                squareMesh = new Mesh(true, 4, 4, 
                        new VertexAttribute(Usage.Position, 3, "a_position"),
                        new VertexAttribute(Usage.ColorPacked, 4, "a_color"));

                squareMesh.setVertices(new float[] {
                        0, -0.5f, -4, Color.toFloatBits(128, 0, 0, 255),
                        1, -0.5f, -4, Color.toFloatBits(192, 0, 0, 255),
                        0, 0.5f, -4, Color.toFloatBits(192, 0, 0, 255),
                        1, 0.5f, -4, Color.toFloatBits(255, 0, 0, 255) });   
                squareMesh.setIndices(new short[] { 0, 1, 2, 3});
            }

            if (nearSquare == null) {
                nearSquare = new Mesh(true, 4, 4, 
                        new VertexAttribute(Usage.Position, 3, "a_position"),
                        new VertexAttribute(Usage.ColorPacked, 4, "a_color"));

                nearSquare.setVertices(new float[] {
                        -1, -0.5f, -1.1f, Color.toFloatBits(0, 0, 128, 255),
                        0, -0.5f, -1.1f, Color.toFloatBits(0, 0, 192, 255),
                        -1, 0.5f, -1.1f, Color.toFloatBits(0, 0, 192, 255),
                        0, 0.5f, -1.1f, Color.toFloatBits(0, 0, 255, 255) });   
                nearSquare.setIndices(new short[] { 0, 1, 2, 3});
            }
        }

        @Override
        public void dispose() { }

        @Override
        public void pause() { }


        @Override
        public void render() {
            camera.update();
            camera.apply(Gdx.gl10);
            Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
            squareMesh.render(GL10.GL_TRIANGLE_STRIP, 0, 4);
            nearSquare.render(GL10.GL_TRIANGLE_STRIP, 0, 4);
        }

        @Override
        public void resize(int width, int height) {
            float aspectRatio = (float) width / (float) height;
            camera = new OrthographicCamera(2f * aspectRatio, 2f);

        }

        @Override
        public void resume() { }
    }

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

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

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

    public void resize(int width, int height) {
        float aspectRatio = (float) width / (float) height;
        camera = new PerspectiveCamera(67, 2f * aspectRatio, 2f);
    }

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

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

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

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

    private int total = 0;
    private float movementIncrement = 0.0006f;

    @Override
    public void render() {
        total += 1;
        if (total > 500) {
            movementIncrement = -movementIncrement;
            total = -200;
        }

        camera.rotate(movementIncrement * 20, 0, 1, 0);
        camera.translate(movementIncrement, 0, movementIncrement);
        camera.update();
        camera.apply(Gdx.gl10);
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
        squareMesh.render(GL10.GL_TRIANGLE_STRIP, 0, 4);
        nearSquare.render(GL10.GL_TRIANGLE_STRIP, 0, 4);
    }

我们使用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" ，代码如下：

<activity android:name=".ProjectionViewportCameraAndroid"
    android:label="@string/app_name" android:screenOrientation="landscape">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

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

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

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

Conclusion（结论）

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