libgdx 学习笔记五 MeshColorTexture

Introduction(序言)

MyFirstTriangle 教程教我们怎样创建一个新的工程和使用Mesh类来渲染一个简单的三角形。本节教程将解释Mesh类方法的更多细节，也将指出怎样添加颜色和一个纹理到mesh对象上

Setting up a Project

按照指示在MyFirstTriangle教程中创建一个新的libgdx桌面工程。我们吧桌面工程命名为 mesh-color-texture并直到后来推迟创建android工程。记住包含libgdx 库JAR文件。在工程中

创建一个名字为com.test.meshcolortexture的包。在包中创建一个名为MeshColorTexture的类并实现ApplicationListener接口。 在类里面，我们复制从MyFirstTriangle 教程中创建的

大部分内容：

package com.test.meshcolortexture;

import com.badlogic.gdx.ApplicationListener;
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 MeshColorTexture implements ApplicationListener {
    private Mesh mesh;

    @Override
    public void create() {
        if (mesh == null) {
            mesh = new Mesh(true, 3, 3, new VertexAttribute(Usage.Position, 3,
                    "a_position"));
            mesh.setVertices(new float[] { -0.5f, -0.5f, 0, 0.5f, -0.5f, 0, 0,
                    0.5f, 0 });
            mesh.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);
        mesh.render(GL10.GL_TRIANGLES, 0, 3);
    }

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

    @Override
    public void resume() {
    }
}

创建一个类叫MeshColorTextureDesktop ，创建一个JoglApplication 使用一个MeshColorTexture类的实例。类似于MyFirstTriangle 教程：

package com.test.meshcolortexture;
import com.badlogic.gdx.backends.jogl.JoglApplication;

public class MeshColorTextureDesktop {
    public static void main(String[] argv) {
        new JoglApplication(new MeshColorTexture(),
                "Mesh with Color and Texture", 480, 320, false);
    }
}

Mesh

让我们往下看更多的细节，看这些方法做什么，在MeshColorTexture类的Create()中我们看到

mesh = new Mesh(true, 3, 3, new VertexAttribute(Usage.Position, 3, "a_position"));

Mesh类的构造函数有几个参数。第一个指定mesh是否为static。设置为真对于mesh这并没有太多改变，它将打开OpenGL优化。第二，三个参数指定mesh 拥有的顶点和索引的数量。

上节mesh表示一个三角形，它有三个顶点。在三角形的渲染中每个顶点被使用一次，所以这个Mesh需要三个索引。

最后，我们将为这个mesh设置一个通过在VertexAttribute 对象中指定信息的类型。这是一个很简单的mesh，我们仅设置它的position。在VertexAttribute 构造函数中，我们

通过使用表示位置信息的常数。然后通过一个int来为每个position表示需要的components 数量。因此一个position的表示由3个值（x,y,z），所以这里写3.最后我们给VertexAttribute

一个别名叫 a_position，或者任意词。

        mesh.setVertices(new float[] { -0.5f, -0.5f,   0, 0.5f, -0.5f, 0, 0,
                0.5f, 0 });
        mesh.setIndices(new short[] { 0, 1, 2 });

创建一个mesh后，我们用一个float数组来指定它的顶点。数组中第一组3个floats为x,y,z构成的顶点0，第二组为顶点1，第三组为顶点2。我们按顺序遍历创建三角形的顶点来设置索引。

顶点1位于0.5(x), -0.5(y), 0(z). 在屏幕上这个点是可视化的，想象屏幕中心位置为0(x), 0(y), 0(z). 屏幕左边距在-1（X），右边距为1（X）。底部为-1（Y），顶部为1（Y）。

下面是一个概念图片

        public void render() {      
            Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);      
            mesh.render(GL10.GL_TRIANGLES, 0, 3);  
            }

render()方法是mesh在应用程序中绘制的地方。我们调用glClear(int)来清空buffer，转向黑色场景。然后mesh调用render(int primitiveType,int offset,int type)。第一个参数指定原始形状组成的类型，如果mesh表示一个顶点buffer,第二个参数使用一个偏移量。顶点buffers将在后面的教程中涉及。现在我们使用0.

最后一个参数指定mesh使用索引(index)的数量。

COLOR

 如果我们想要给mesh着色，我们仅需要添加另一个VertexAttribute我们然后给顶点指定颜色信息。根据以下内容修改代码（需要import com.badlogic.gdx.graphics.Color ）

        mesh = new Mesh(true, 3, 3, new VertexAttribute(Usage.Position, 3,
                "a_position"), new VertexAttribute(Usage.ColorPacked, 4,
                "a_color"));
        mesh.setVertices(new float[] { -0.5f, -0.5f, 0,
                Color.toFloatBits(255, 0, 0, 255), 0.5f, -0.5f, 0,
                Color.toFloatBits(0, 255, 0, 255), 0, 0.5f, 0,
                Color.toFloatBits(0, 0, 255, 255) });
        mesh.setIndices(new short[] { 0, 1, 2 });

在mesh构造函数中，我们为颜色添加一个VertexAttribute 。它包含4个元素（R,G,B,Alpha）我们给他取个别名叫 a_color。然后添加颜色信息到float数组。运行后的效果如下:

Texture

在mesh中put一个texture ，我们需要在工作区中put一个image文件。在代码中创建texture对象并引用image，然后添加一个texture VertexAttribute到我们的mesh中。

开始在mesh-color-texture 工程中，创建一个名为data的文件夹和src，libs文件夹同一目录。复制图像到文件夹中，作为例子，我们使用badlogic.jpg。

注意：用texture创建的任何一个图像必须有宽度和高度为2的n次方。

在MeshColorTexture类中，我们需要添加一个texture对象，然后修改create()和render()方法。代码如下:

private Mesh mesh;
        private Texture texture;

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

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

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

        @Override
        public void render() {
            Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
            Gdx.graphics.getGL10().glEnable(GL10.GL_TEXTURE_2D);
            texture.bind();
            mesh.render(GL10.GL_TRIANGLES, 0, 3);
        }

导入必要的类运行MeshColorTextureDesktop 应用程序。效果如下:

new VertexAttribute(Usage.TextureCoordinates, 2, "a_texCoords"));

类似的当添加颜色时，在mesh的构造函数中我们使用另一个VertexAttribute。指定mesh使用一个texture，添加2个元素到每个顶点（一个是Color(R,G,B),一个是Color后面的2个

代表texture坐标的数据）。

        mesh.setVertices(new float[] { -0.5f, -0.5f, 0,
                Color.toFloatBits(255, 0, 0, 255), 0, 1, 0.5f, -0.5f, 0,
                Color.toFloatBits(0, 255, 0, 255), 1, 1, 0, 0.5f, 0,
                Color.toFloatBits(0, 0, 255, 255), 0.5f, 0 });

上面代码在颜色数据的右边，我们添加texture坐标元素到VertexAttribute 的float数组。（注意上方代码的texture坐标在2D坐标系中其实是个倒三角）为了更好的解释数据，想象texture映射到2D坐标系统。texture的左上角位于（0,0），右上角（1,0），左下角（0,1），右下角（1,1）。看起来我们修改了顶点元素的三行，顶点指定三角形的左下角映射到texture的左下角。右下角映射到texture的右下角。中上方映射到texture的中上方。

        FileHandle imageFileHandle = Gdx.files.internal("data/badlogic.jpg");
        texture = new Texture(imageFileHandle);

我们需要先吧文件添加到工作区中，然后创建FileHandle载入本地图像，这之后再创建texture对象。然后通过传FileHandle对象到texture类的构造函数中来给texture对象赋值。

        public void render() {
            Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
            Gdx.graphics.getGL10().glEnable(GL10.GL_TEXTURE_2D);
            texture.bind();
            mesh.render(GL10.GL_TRIANGLES, 0, 3);
        }

Finally, when rendering, we enable textures, set the texture we created as the active texture, and render the mesh.

最后，我们打开textures，设置激活我们创建的texture ， 然后渲染mesh。

Running in Android

To run this example on an Android device or simulator, we just need to follow steps similiar to those in the MyFirstTriangle tutorial. Here's a quick summary:

在android设备或模拟器中运行这个例子，我们必须按以下步骤进行，类似于 MyFirstTriangle 教程，

1. 创建一个android工程
2.  赋值libgdx库到工作区中 在工程设置中引用这些库
3. 参考桌面工程设置
4. 修改main Activity让它继承 AndoirdApplication而不是Activity
5. 在onCreate()内部，用一个MeshColorTexture类的新实例初始化应用程序

最后我们需要添加图像文件到android 工作区。在你的android工程下，如果没有叫assets的文件夹就创建它。然后再assets旁边再创建一个data文件夹，吧图片放到这里面。

运行效果如下

Conclusion（结论）

关于mesh,color和texture有几个资源学习。在Downloads page，你能获得game Invaders源代码，更广泛的熟悉这些原理。javadoc很齐全，在不同的类和方法需求环境下提供了更多细节。关于文件访问内部libgdx，可以通过这个article 获取更多信息。如果有更多问题，登录apisutdios.com。访问我们的论坛或者进入我们在线聊天频道 #badlogic hosted。在Downloads page，你能找到MeshColorTexture.zip，它包含本教程的源代码。

Change Log

Feb 22 2011

• fixed rendering on Mac OS X   
• added screen shots
• moved badlogic.jpginto the wiki
• use the new Texture constructor instead of old factory method