libgdx利用mesh生成2d游戏自定义地形

首先来看看效果：


原理：分为两部分，上面的是线条，下面是多边形， 所以需要两个Mesh（点的数据就是随便模拟了几个）

1.地下部分

地下部分

原理：根据顶点数据+底部的点组成一些列的点 这些点放入Mesh画出来。

points.add(new Vector2(114, 240));
//points.add(new Vector2(800, 240));
points.add(new Vector2(268, 434));
points.add(new Vector2(400, 450));
points.add(new Vector2(626, 257));
points.add(new Vector2(921, 244));

linepoints.addAll(points);
stage.addActor(new GroundActor(points));

下面来GroundActor的写法

1.定义shader

ShaderProgram shader;

shader = new ShaderProgram(Gdx.files.internal("surface_vertex.gles"), Gdx.files.internal     ("surface_fragment.gles"));

surface_vertex.gles

attribute vec4 a_position;
attribute vec4 a_color;
attribute vec2 a_texCoord0;
uniform mat4 u_worldView;

varying vec4 v_color;
varying vec2 v_texCoords;
void main()
{
 v_color = vec4(1, 1, 1, 1);
 gl_Position =  u_worldView * a_position;
 v_texCoords = a_texCoord0;
}

surface_fragment.gles

#ifdef GL_ES    
        precision mediump float;
#endif
varying vec2 v_texCoords;
uniform sampler2D u_texture;
varying vec4 v_color;

void main(){    
        gl_FragColor = v_color * texture2D(u_texture, v_texCoords);
}

2.定义mesh

Mesh mesh;
mesh = new Mesh(true, points.size * 2, points.size * 2,        
new VertexAttribute(VertexAttributes.Usage.Position, 2, "a_position"),        
new VertexAttribute(VertexAttributes.Usage.TextureCoordinates, 2, "a_texCoord0"));

3.定义Texture

private final Texture texture;
texture = new Texture("tile.png");
texture.setFilter(Texture.TextureFilter.Linear, Texture.TextureFilter.Linear);
texture.setWrap(Texture.TextureWrap.Repeat, Texture.TextureWrap.Repeat);

4.解析顶点数据

//每个顶点需要占4个位置， 点坐标2个，纹理坐标2个，根据上面的顶点生成一个相应的底部顶点
//总共需要points.size * 2个顶点， 每个顶点占4个位置
float vertexs[] = new float[2 * 2 * 2 * points.size];

int offset = 0;
for (Vector2 point : points){    
//下面的顶点 比如顶点2
 vertexs[offset + 0] = point.x;  //横坐标
 vertexs[offset + 1] = 0;    //纵坐标，顶部的点Y都是0
 vertexs[offset + 2] = point.x / texture.getWidth();    //纹理坐标，横轴
 vertexs[offset + 3] = 0;    //纹理坐标

//上面的顶点 比如1 
 vertexs[offset + 4] = point.x;    
 vertexs[offset + 5] = point.y;    
 vertexs[offset + 6] = point.x / texture.getWidth();    
 vertexs[offset + 7] = point.y / texture.getHeight();    

offset += 8;
}

//设置顶点数据到mesh中
mesh.setVertices(vertexs);
short[] indices1 = new short[points.size * 2];
for (int i = 0; i < indices1.length; i++){   
  indices1[i] = (short) i;
}
//设置索引，就是依顺序0,1,2,3,4,5,6,7,8,9...
mesh.setIndices(indices1);

5.把Mesh画出来

Gdx.gl.glEnable(GL20.GL_BLEND);
Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);

//把stage的相机绑定在mesh上
shader.begin();shader.setUniformMatrix("u_worldView", getStage().getCamera().combined);texture.bind(0);
mesh.render(shader, GL20.GL_TRIANGLE_STRIP);
shader.end();

Gdx.gl.glDisable(GL20.GL_BLEND);

至此底部的地形就画出来了，剩下的就是上面部分

Paste_Image.png

这部分原理差不多，只是生成点的方式不一样而已

Paste_Image.png

只需要生成顶点的时候上移和下移一下就好了。

int offset = 0;
Vector2 pt = new Vector2();
for (int i = 0; i < points.size; ++i){    
  pt.set(points.get(i).cpy());    
  vertexs[offset + 0] = pt.x;    
  vertexs[offset + 1] = pt.y - texture.getHeight() / 2f;    //下移一段距离
  vertexs[offset + 2] = pt.x / texture.getWidth();   
  vertexs[offset + 3] = 1;    
  vertexs[offset + 4] = pt.x;    
  vertexs[offset + 5] = pt.y + texture.getHeight() / 2f;    //上移一段距离 其他的都一样
  vertexs[offset + 6] = pt.x / texture.getWidth();    
  vertexs[offset + 7] = 0;    

  offset += 8;
}

如果有不懂的，可以和我一起交流，直接留言或者加入QQ群：
QQ群：187378034

完整代码（groundActor）：

public class GroundActor extends Actor{

    ShaderProgram shader;
    Mesh mesh;
    Array<Vector2> points;
    private final Texture texture;

    public GroundActor(Array<Vector2> points){
        this.points = points;

        texture = new Texture("tile.png");
        texture.setFilter(Texture.TextureFilter.Linear, Texture.TextureFilter.Linear);
        texture.setWrap(Texture.TextureWrap.Repeat, Texture.TextureWrap.Repeat);

        float vertexs[] = new float[2 * 2 * 2 * points.size];

        int offset = 0;
        for (Vector2 point : points){
            vertexs[offset + 0] = point.x;
            vertexs[offset + 1] = 0;
            vertexs[offset + 2] = point.x / texture.getWidth();
            vertexs[offset + 3] = 0;

            vertexs[offset + 4] = point.x;
            vertexs[offset + 5] = point.y;
            vertexs[offset + 6] = point.x / texture.getWidth();
            vertexs[offset + 7] = point.y / texture.getHeight();

            offset += 8;
        }

        shader = new ShaderProgram(Gdx.files.internal("surface_vertex.gles"), Gdx.files.internal
                ("surface_fragment.gles"));

        mesh = new Mesh(true, points.size * 2, points.size * 2,
                new VertexAttribute(VertexAttributes.Usage.Position, 2, "a_position"),
                new VertexAttribute(VertexAttributes.Usage.TextureCoordinates, 2, "a_texCoord0"));

        mesh.setVertices(vertexs);

        short[] indices1 = new short[points.size * 2];

        for (int i = 0; i < indices1.length; i++){
            indices1[i] = (short) i;
        }

        mesh.setIndices(indices1);
    }

    @Override
    public void draw(Batch batch, float parentAlpha) {
        super.draw(batch, parentAlpha);
        Gdx.gl.glEnable(GL20.GL_BLEND);
        Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);

        shader.begin();
        shader.setUniformMatrix("u_worldView", getStage().getCamera().combined);
        texture.bind(0);
        mesh.render(shader, GL20.GL_TRIANGLE_STRIP);
        shader.end();

        Gdx.gl.glDisable(GL20.GL_BLEND);
    }
}

完整的代码（LineActor）

public class LineActor extends Actor{
    ShaderProgram shader;
    Mesh mesh;
    Array<Vector2> points;
    private Texture texture;

    public LineActor(Array<Vector2> points){
        this.points = points;

        texture = new Texture("line.png");
        texture.setFilter(Texture.TextureFilter.Linear, Texture.TextureFilter.Linear);
        texture.setWrap(Texture.TextureWrap.Repeat, Texture.TextureWrap.Repeat);

        float vertexs[] = new float[2 * 2 * 2 * points.size];

        int offset = 0;
        Vector2 pt = new Vector2();
        for (int i = 0; i < points.size; ++i){
            pt.set(points.get(i).cpy());

            vertexs[offset + 0] = pt.x;
            vertexs[offset + 1] = pt.y - texture.getHeight() / 2f;
            vertexs[offset + 2] = pt.x / texture.getWidth();
            vertexs[offset + 3] = 1;

            vertexs[offset + 4] = pt.x;
            vertexs[offset + 5] = pt.y + texture.getHeight() / 2f;
            vertexs[offset + 6] = pt.x / texture.getWidth();
            vertexs[offset + 7] = 0;

            offset += 8;
        }

        shader = new ShaderProgram(Gdx.files.internal("surface_vertex.gles"), Gdx.files.internal
                ("surface_fragment.gles"));

        mesh = new Mesh(true, points.size * 2, points.size * 2,
                new VertexAttribute(VertexAttributes.Usage.Position, 2, ShaderProgram.POSITION_ATTRIBUTE),
                new VertexAttribute(VertexAttributes.Usage.TextureCoordinates, 2, ShaderProgram
                        .TEXCOORD_ATTRIBUTE + "0"));

        mesh.setVertices(vertexs);

        short[] indices1 = new short[points.size * 2];

        for (int i = 0; i < indices1.length; i++){
            indices1[i] = (short) i;
        }

        mesh.setIndices(indices1);
    }

    @Override
    public void draw(Batch batch, float parentAlpha) {
        super.draw(batch, parentAlpha);

        Gdx.gl.glEnable(GL20.GL_BLEND);
        Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);

        texture.bind();
        shader.begin();
        shader.setUniformMatrix("u_worldView", getStage().getCamera().combined);
        mesh.render(shader, GL20.GL_TRIANGLE_STRIP);
        shader.end();

        Gdx.gl.glDisable(GL20.GL_BLEND);
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,921评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,635评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,393评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,836评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,833评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,685评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,043评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,694评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,671评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,424评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,027评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2赞 351
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2赞 343

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,460评论 25赞 707
  • unity3d-高频率面试题目
    更新：【面试题含答案】http://bbs.9ria.com/thread-288394-1-1.html 高频问...
    好怕怕阅读 4,719评论 3赞 52
  • Graphic Architecture
    本篇文章是基于谷歌有关Graphic的一篇概览文章的翻译：http://source.android.com/de...
    lee_3do阅读 7,088评论 2赞 21
  • 坏女孩
    原来古代女子痴情痴心，很大一部分原因还是因为足不出户见到的男人太少，所以从小时候见到就非君不嫁了。 没有见过花花世...
    小瓶盖shy阅读 273评论 0赞 0
  • 爱是在一起说许多许多话
    飘零做归宿，爱无法解读，有些话不说因为于事无补。 08年，我在上海一家外企工作，忙得昏天暗地。有一阵工作不顺，又失...
    北梦木兮iQ阅读 257评论 0赞 2