Android游戲引擎libgdx使用教程15：TWL布局

       TWL是一個基於OpenGL的圖形化用戶界面庫，它提供了一套非常豐富的窗口小部件，比如標簽，編輯框，表格等等。不同的布局方式配合使用可以創建出非常高級的用戶界面。

       TWL我原來接觸過，但是覺得配置文件太難寫了，今天逛論壇發現了官方出了Theme編輯器，馬上來試試。

       官網：http://twl.l33tlabs.org/

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

       雙擊等下就可以運行了，界面如下。

       先新建一個項目。

       來看看默認的項目有什麼。

       第一項是字體，默認字體只支持英文。

       第二項是輸入映射，定義了諸如全選，剪切等操作的快捷鍵。

       第三項是一個名為-defaults的主題樣式，這個樣式指明了字體使用第一項聲明的那個，同時規定了文字靠左。

       第四項是一個名為label的主題樣式。

       我們先讓其支持中文。我們仍然可以使用hiero制作文字（注意格式上轉化），然後將做好的文件拷貝到項目文件夾中。

       新建一個字體定義。

       將新定義拖到最上面，改名為normal。

       注意：保持修改要點右邊的小勾。

       label其實就是為標簽設計的樣式。TWL Theme Editor提供了很方便的開發環境。

       選擇Label，選擇Theme name為label，測試效果如下：

       現在來新建一個Button的樣式，先建一個Image，圖片用下面那張：

       新建Image節點

       新建一個Aera節點，命名為buttonBackground。

       將no center,spilt x,spilt y選上。

       圖像范圍的選擇可以直接用鼠標，這也是我最喜歡的地方…不用自己數像素了。

       新建一個樣式，名為button。字體選成normal，background選成buttonBackground，測試一下。

       可以看出按鈕有問題，新建一個button，將L和R都設成10.

       然後需要按鈕有按下的效果怎麼辦？新建一個select節點，在其中添加兩個alias節點。

       其中if（pressed）的效果設置成inset 2（就是變小一點），顏色改成黃色。

       將button樣式的background指定成buttons。保存項目，將項目文件拷貝到android項目的資源文件夾中。

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

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

       代碼如下：

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. }  

       效果：

       寫在最後：

       1.TWL真的很不錯，樣式的聲明和CSS感覺很像，有繼承有覆蓋。相關工具也很完整，功能強大。

       2.TWL在android使用是比較方便的，但是在libgdx的話還是有點瑕疵的，比如漢字的處理，圖片大小等，使用時請注意。