android遊戲開發架構libgdx的使用（十五）—TWL布局

本文使用的libgdx是0.92版本，和現在的最新版可能有一些不一樣的地方。全文內容僅供參考。

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。

代碼如下：

package com.cnblogs.htynkn.game;

import com.badlogic.gdx.ApplicationListener; 
import com.badlogic.gdx.Gdx; 
import com.badlogic.gdx.Files.FileType; 
import com.badlogic.gdx.graphics.GL10; 
import com.badlogic.gdx.graphics.g2d.SpriteBatch; 
import com.badlogic.gdx.twl.Layout; 
import com.badlogic.gdx.twl.TWL;

import de.matthiasmann.twl.Button;

public class TwlDemo implements ApplicationListener {

private TWL twl; 
private SpriteBatch batch;

    @Override 
public void create() { 
        batch = new SpriteBatch(); 
        Button button=new Button("Button"); 
        button.setTheme("button"); 
        Layout layout = new Layout(); 
        layout.add(button); 
        twl=new TWL(batch, "data/twldemo.xml", FileType.Internal, layout); 
    }

    @Override 
public void dispose() { 
// TODO Auto-generated method stub

    }

    @Override 
public void pause() { 
// TODO Auto-generated method stub

    }

    @Override 
public void render() { 
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT); 
        twl.render(); 
    }

    @Override 
public void resize(int width, int height) { 
// TODO Auto-generated method stub

    }

    @Override 
public void resume() { 
// TODO Auto-generated method stub

    }

} 

 

效果：

 

寫在最後：

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

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