android遊戲開發架構libgdx的使用（十一）—Skin和UI設定檔的使用

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

libgdx的UI改進很大，原來各種稀奇古怪的問題都已經解決了，而且UI的類型也基本上完全了。推薦大家下載最近的版本使用。

UI的使用我覺得唯一複雜的就是各種樣式的制定，比如TextButton：

public TextButtonStyle (NinePatch down, NinePatch up, NinePatch checked, float pressedOffsetX, float pressedOffsetY,float unpressedOffsetX, float unpressedOffsetY, BitmapFont font, Color fontColor, Color downFontColor,Color checkedFontColor)

再看看List：

public ListStyle (BitmapFont font, Color fontColorSelected, Color fontColorUnselected, NinePatch selectedPatch)

每次使用都需要執行個體化若干個Texture，NinePatch什麼的還是有點麻煩，還好libgdx給出了一個解決方案：Skin。

 

Skin儲存了UI的樣式和相關的資源，定義使用的是Json或者Json-like。API地址：http://libgdx.l33tlabs.org/docs/api/com/badlogic/gdx/scenes/scene2d/ui/Skin.html

先看看基本格式：

{
        resources: {
                className: {
                        name: value,
                        ...
                },
                ...
        },
        styles: {
                className: {
                        name: value,
                        ...
                },
                ...
        }
 }

由兩個大塊定義：資源和樣式。

先做個fnt檔案以便支援中文

保持為chinese.fnt和chinese.png。再做張圖：

全部拷貝到專案檔中（我是建立了一個UI檔案夾）。

我們先寫個Label試試。

定義需要的NinePath：

com.badlogic.gdx.graphics.g2d.NinePatch: { 
    default-rect-red: [ 
                        { width: 2, height: 1, x: 1, y: 43 }, 
                        { width: 1, height: 1, x: 2, y: 43 }, 
                        { width: 2, height: 1, x: 3, y: 43 }, 
                        { width: 2, height: 1, x: 1, y: 45 }, 
                        { width: 1, height: 1, x: 2, y: 45 }, 
                        { width: 2, height: 1, x: 3, y: 45 }, 
                        { width: 2, height: 1, x: 1, y: 43 }, 
                        { width: 1, height: 1, x: 2, y: 43 }, 
                        { width: 2, height: 1, x: 3, y: 43 } 
                ], 
                 default-rect-yellow: [ 
                        { width: 2, height: 1, x: 1, y: 54 }, 
                        { width: 1, height: 1, x: 2, y: 54 }, 
                        { width: 2, height: 1, x: 3, y: 54 }, 
                        { width: 2, height: 1, x: 1, y: 55 }, 
                        { width: 1, height: 1, x: 2, y: 55 }, 
                        { width: 2, height: 1, x: 3, y: 55 }, 
                        { width: 2, height: 1, x: 1, y: 54 }, 
                        { width: 1, height: 1, x: 2, y: 54 }, 
                        { width: 2, height: 1, x: 3, y: 54 } 
                ] 
    }

再定義一個白色：

com.badlogic.gdx.graphics.Color: { 
        white: { a: 1, b: 1, g: 1, r: 1 } 
    }

然後我們的字型：（提示：如果提示沒有file欄位，請直接使用default-font: default.fnt試試，這是版本問題而已。感謝陽光遊子的提醒）

    com.badlogic.gdx.graphics.g2d.BitmapFont: { 
         default-font: { file: chinese.fnt } 
    }

然後在樣式中聲明一個Label樣式：

com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: { 
        default: { font: default-font, fontColor: white} 
}

使用時

Skin skin = new Skin(Gdx.files.internal("ui/uiskin.json"), Gdx.files.internal("ui/ui.jpg")); //載入樣式

final Label label = new Label("FPS:", skin.getStyle("default",LabelStyle.class), "fpsLabel"); //擷取Label樣式

效果：

然後再來試試TextButton:

com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: { 
                default: { down: default-rect-red, up: default-rect-yellow,fontColor: white, font: default-font} 
  }

調用：

final TextButton textButton = new TextButton("確認", skin.getStyle("default", TextButtonStyle.class), "okButton");

效果：

按下去的時候會變黃（沒截起圖）…

 

Skin真的用著很方便，特別是你大量使用了libgdx的UI的時候。

 

寫在最後：

1.Skin支不支援xml？

說實話我也很想知道，因為gdx-tests裡面skin 的設定檔有兩個，一個是json格式，另外一個是xml格式。但是我試了一下直接載入xml會報錯。

其實我比較推薦用xml格式，因為Json格式書寫時候容易寫錯（少個逗號或者括弧什麼的），而且eclipse的自動縮排沒有發揮作用（難道是配置問題？）。

2.Skin支援不一個設定檔多個圖片檔案，這個情況推薦將圖片合并或者乾脆用多個Skin就行了。

3.Skin的圖片定義的原點是左上方。

 

寫在最最後：

我對網路上的一些網站和"站長"實在無語了，你轉載註明個出處是起碼的尊重吧。我遇到有些二貨實在無語：

1.轉載沒出處，只有一句本文系轉載...

2.直接易主...那網站還用的新雲2.0系統...

還有實在不想表明出處的話至少轉載完整吧，有些網站轉載的四分五裂的，這個爛的偽原創程式就不要再用了吧，我送你一份。