Android游戏引擎libgdx使用教程15:TWL布局

       TWL是一个基于OpenGL的图形化用户界面库,它提供了一套非常丰富的窗口小部件,比如标签,编辑框,表格等等。不同的布局方式配合使用可以创建出非常高级的用户界面。

       TWL我原来接触过,但是觉得配置文件太难写了,今天逛论坛发现了官方出了Theme编辑器,马上来试试。

       官网:http://twl.l33tlabs.org/

       Editor下载地址:http://twl.l33tlabs.org/themer/themer.jnlp

       双击等下就可以运行了,界面如下。

Android游戏引擎libgdx使用教程15:TWL布局

       先新建一个项目。

Android游戏引擎libgdx使用教程15:TWL布局

       来看看默认的项目有什么。

Android游戏引擎libgdx使用教程15:TWL布局

       第一项是字体,默认字体只支持英文。

       第二项是输入映射,定义了诸如全选,剪切等操作的快捷键。

       第三项是一个名为-defaults的主题样式,这个样式指明了字体使用第一项声明的那个,同时规定了文字靠左。

       第四项是一个名为label的主题样式。

       我们先让其支持中文。我们仍然可以使用hiero制作文字(注意格式上转化),然后将做好的文件拷贝到项目文件夹中。

       新建一个字体定义。

Android游戏引擎libgdx使用教程15:TWL布局

       将新定义拖到最上面,改名为normal。

Android游戏引擎libgdx使用教程15:TWL布局

       注意:保持修改要点右边的小勾。

       label其实就是为标签设计的样式。TWL Theme Editor提供了很方便的开发环境。

Android游戏引擎libgdx使用教程15:TWL布局

       选择Label,选择Theme name为label,测试效果如下:

Android游戏引擎libgdx使用教程15:TWL布局

       现在来新建一个Button的样式,先建一个Image,图片用下面那张:

Android游戏引擎libgdx使用教程15:TWL布局

       新建Image节点

Android游戏引擎libgdx使用教程15:TWL布局

       新建一个Aera节点,命名为buttonBackground。

Android游戏引擎libgdx使用教程15:TWL布局

       将no center,spilt x,spilt y选上。

Android游戏引擎libgdx使用教程15:TWL布局

       图像范围的选择可以直接用鼠标,这也是我最喜欢的地方…不用自己数像素了。

Android游戏引擎libgdx使用教程15:TWL布局

       新建一个样式,名为button。字体选成normal,background选成buttonBackground,测试一下。

Android游戏引擎libgdx使用教程15:TWL布局

       可以看出按钮有问题,新建一个button,将L和R都设成10.

       然后需要按钮有按下的效果怎么办?新建一个select节点,在其中添加两个alias节点。

       其中if(pressed)的效果设置成inset 2(就是变小一点),颜色改成黄色。

Android游戏引擎libgdx使用教程15:TWL布局

       将button样式的background指定成buttons。保存项目,将项目文件拷贝到android项目的资源文件夹中。

       TWL Theme Editor的更多使用可以参考:http://wiki.l33tlabs.org/bin/view/TWL/Using+the+Theme+Editor

       使用TWL需要gdx-twl.jar。绘制使用twlrender。

       代码如下:

Java代码
  1. package com.cnblogs.htynkn.game;  
  2.   
  3. import com.badlogic.gdx.ApplicationListener;   
  4. import com.badlogic.gdx.Gdx;   
  5. import com.badlogic.gdx.Files.FileType;   
  6. import com.badlogic.gdx.graphics.GL10;   
  7. import com.badlogic.gdx.graphics.g2d.SpriteBatch;   
  8. import com.badlogic.gdx.twl.Layout;   
  9. import com.badlogic.gdx.twl.TWL;  
  10.   
  11. import de.matthiasmann.twl.Button;  
  12.   
  13. public class TwlDemo implements ApplicationListener {  
  14.   
  15. private TWL twl;   
  16. private SpriteBatch batch;  
  17.   
  18. @Override   
  19. public void create() {   
  20. batch = new SpriteBatch();   
  21. Button button=new Button("Button");   
  22. button.setTheme("button");   
  23. Layout layout = new Layout();   
  24. layout.add(button);   
  25. twl=new TWL(batch, "data/twldemo.xml", FileType.Internal, layout);   
  26. }  
  27.   
  28. @Override   
  29. public void dispose() {   
  30. // TODO Auto-generated method stub  
  31.   
  32. }  
  33.   
  34. @Override   
  35. public void pause() {   
  36. // TODO Auto-generated method stub  
  37.   
  38. }  
  39.   
  40. @Override   
  41. public void render() {   
  42. Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);   
  43. twl.render();   
  44. }  
  45.   
  46. @Override   
  47. public void resize(int width, int height) {   
  48. // TODO Auto-generated method stub  
  49.   
  50. }  
  51.   
  52. @Override   
  53. public void resume() {   
  54. // TODO Auto-generated method stub  
  55.   
  56. }  
  57.   
  58. }  

       效果:

Android游戏引擎libgdx使用教程15:TWL布局

       写在最后:

       1.TWL真的很不错,样式的声明和CSS感觉很像,有继承有覆盖。相关工具也很完整,功能强大。

       2.TWL在android使用是比较方便的,但是在libgdx的话还是有点瑕疵的,比如汉字的处理,图片大小等,使用时请注意。


android开发学习网 » Android游戏引擎libgdx使用教程15:TWL布局