关闭

Libgdx专题系列: UI篇 TWL&Skin&TableLayout

标签: Libgdx游戏移动
4251人阅读 评论(1) 收藏 举报
分类:

声明:

本系列文章使用的Libgdx版本均为0.99版本

Libgdx游戏开发交流群 323876830


游戏都少不了UI界面,现在我们来看看在Libgdx中,需要怎么做?


TWL 

TWL是一个基于Opengl的图形用户接口, 它提供Label,button,tables 等许多控件的标准, 可以编辑控件的样式,

他提供一个可以可视化编辑的工具,可以很方便的使用。

TWL Themer Editor             官网地址 http://twl.l33tlabs.org/

可参看工具的使用方法 http://wiki.l33tlabs.org/bin/view/TWL/Using+the+Theme+Editor?xpage=print

讲解的比较详细

例子截图


点击保存 , 会保存一个xml文件,一个fnt文件,一个fnt使用图片

特别提醒的是,这个生成的fnt文件,最好别用, 跟后面在程序中使用的fnt文件格式不一致, 解析不了


下面看看在程序中怎么来使用

    public TWLScreen()
    {
        super();
        batch = new SpriteBatch();
        Button button = new Button("Press me!");
        button.setTheme("button");
        button.setPosition(100, 100);
        button.setSize(200, 100);
        Layout layout = new Layout();
        layout.add(button);
        twl = new TWL(batch, "ui/box_test.xml", FileType.Internal, layout);
    }

box_test.xml就是TWL生成的文件, 包含自己编辑的样式信息,setTheme可以设置它的样式,因为咱们编辑的是button命名的, 所以这里

也是"button",不过这里使用的Button对象已经不是libgdx自带的控件对象了, 是TWL中的对象 de.matthiasmann.twl.Button;这点要注意下。


绘制的话

    public void render(float delta)
    {
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
        twl.render();
    }

就ok了。 


Skin

在我们使用TWL的时候,他的配置会很繁琐, 比较复杂, 而且代码侵入蛮厉害的, 是他自己的那一套东西, 那有没有轻量一点的东西呢?

这里Skin就有了, 他是以json格式存在的,可以定义资源与样式,然后在代码中使用。

这里咱们定义一个Lable的样式

 

{
		com.badlogic.gdx.graphics.Color: { 
        	white: { a: 1, b: 1, g: 1, r: 1 },
        	red: { a: 1, b: 0, g: 0, r: 1 },
        	black: { a: 1, b: 0, g: 0, r: 0 } 
    	},
    	com.badlogic.gdx.graphics.g2d.BitmapFont: { 
         	default-font: { file: default.fnt } 
    	},
		com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: { 
        	default: { font: default-font, fontColor: white}
		}
}
还是要注意 ,各个版本的对于skin的解析是不一样的,否则也可能解析错误

在程序中使用

    public SkinScreen()
    {
        stage = new Stage(Gdx.graphics.getWidth(), Gdx.graphics.getHeight(),
                true);

        Skin skin = new Skin(Gdx.files.internal("ui/uiskin.json"));

        Label nameLabel = new Label("name", skin, "default");
        nameLabel.setPosition(100, 100);
        Table table = new Table();
        table.add(nameLabel);
        table.setFillParent(true);

        stage.addActor(table);
    }
他就会找LabelStyle中default的样式。


TableLayout

上面是控件的样式配置定义, 下面我们来说一个控件坐标定义的,TableLayout是一个轻量级的控件, 跟我们的系统控件有了很好的集成,

上面Skin中使用的Table就是他了。 

官网也有个详细的用法介绍 https://github.com/EsotericSoftware/tablelayout

另外它还有个可视化的编辑器

TableLayout Editor
http://table-layout.googlecode.com/svn/wiki/jws/editor.jnlp

可以预览效果



项目下载地址  http://download.csdn.net/detail/wu928320442/6877809


转载请链接原文地址  http://blog.csdn.net/wu928320442/article/details/18706623




0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

LibGdx UI编辑器 OverLap2D 学习(1) 介绍

Libgdx终于有了属于自己的UI编辑器,方便了开发,UI编辑器名称为OverLap2D。传送门 http://overlap2d.com/ 有兴趣的同学,去官方下载,因为还是不稳定的版本,所以不...
  • soslinken
  • soslinken
  • 2015-05-26 15:02
  • 1954

libgdx游戏引擎教程外篇(三) 优美的自定义对话框(附源码)

转自:http://www.apkbus.com/android-59654-1-1.html   本讲源代码下载(我第一次居然忘了传,囧) edu.nju.wsj.libgdx.rar(3...
  • gf771115
  • gf771115
  • 2013-03-11 14:28
  • 4657

libgdx——UI控件

  • 2014-03-03 16:12
  • 21.64MB
  • 下载

libgdx——常见UI的使用

label package com.doodle.uitest; import com.badlogic.gdx.ApplicationListener; import com.badlogic....
  • caihongshijie6
  • caihongshijie6
  • 2014-03-03 16:12
  • 1404

[libgdx游戏开发教程]使用Libgdx进行游戏开发(7)-Screen2D屏幕布局的最佳实践

管理多个屏幕 我们的菜单屏有2个按钮,一个play一个option。option里就是一些开关的设置,比如音乐音效等。这些设置将会保存到Preferences中。 多屏幕切换是游戏的基本机制,Libg...
  • chiyingluolei
  • chiyingluolei
  • 2016-12-16 10:06
  • 344

LibGdx UI编辑器 OverLap2D 学习(2) 学习UI使用,通过Button学习

之前介绍了OverLap2D的基本界面,今天就来实际上手做一下 按钮,很常用的UI界面上的一个控件,这次用它来上手。第一步创建一个新的项目 File>>New Project 弹出这个对话框...
  • soslinken
  • soslinken
  • 2015-05-27 14:10
  • 1495

libgdx 常见UI

  • 2014-03-07 15:59
  • 37.64MB
  • 下载

Libgdx的使用(11)——Skin和UI配置文件的使用

本文使用的libgdx是0.92版本,和现在的最新版可能有一些不一样的地方。全文内容仅供参考。 libgdx的UI改进很大,原来各种稀奇古怪的问题都已经解决了,而且UI的类型也基本上完全了。...
  • linmy1211
  • linmy1211
  • 2014-08-20 13:20
  • 724

分享:libgdx调用平台原生UI提示信息

libgdx的中文支持需要开发者做一些额外的工作,所以在不追求UI风格统一的情况下(或偷懒),我会选择调用平台的原生UI。例如加载游戏完毕后,需要提示玩家“游戏加载完成,点击屏幕进入游戏”,虽然中文字...
  • u010464297
  • u010464297
  • 2016-02-29 18:03
  • 734

[libgdx游戏开发教程]使用Libgdx进行游戏开发(7)-Screen2D屏幕布局的最佳实践

管理多个屏幕 我们的菜单屏有2个按钮,一个play一个option。option里就是一些开关的设置,比如音乐音效等。这些设置将会保存到Preferences中。 多屏幕切换是游戏的基本机制,Libg...
  • chiyingluolei
  • chiyingluolei
  • 2016-12-16 10:06
  • 344
    个人资料
    • 访问:201401次
    • 积分:2274
    • 等级:
    • 排名:第19082名
    • 原创:39篇
    • 转载:0篇
    • 译文:0篇
    • 评论:122条
    Android开发交流群
    323876830
    博客专栏