Android游戲引擎libgdx使用教程11:Skin和UI配置文件
ibgdx的UI改進(jìn)很大,原來(lái)各種稀奇古怪的問(wèn)題都已經(jīng)解決了,而且UI的類型也基本上完全了。推薦大家下載最近的版本使用。
UI的使用我覺(jué)得唯一復(fù)雜的就是各種樣式的制定,比如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)
每次使用都需要實(shí)例化若干個(gè)Texture,NinePatch什么的還是有點(diǎn)麻煩,還好libgdx給出了一個(gè)解決方案:Skin。
Skin保存了UI的樣式和相關(guān)的資源,定義使用的是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,
- ...
- },
- ...
- }
- }
由兩個(gè)大塊定義:資源和樣式。先做個(gè)fnt文件以便支持中文。
保持為chinese.fnt和chinese.png。再做張圖:
全部拷貝到項(xiàng)目文件中(我是新建了一個(gè)UI文件夾)。我們先寫(xiě)個(gè)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 }
- ]
- }
再定義一個(gè)白色:
- com.badlogic.gdx.graphics.Color: {
- white: { a: 1, b: 1, g: 1, r: 1 }
- }
然后我們的字體:
- com.badlogic.gdx.graphics.g2d.BitmapFont: {
- default-font: { file: chinese.fnt }
- }
然后在樣式中聲明一個(gè)Label樣式:
- com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {
- default: { font: default-font, fontColor: white}
- }
使用時(shí):
- 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樣式
效果:
然后再來(lái)試試TextButton:
- com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
- default: { down: default-rect-red, up: default-rect-yellow,fontColor: white, font: default-font}
- }
調(diào)用:
- final TextButton textButton = new TextButton("確認(rèn)", skin.getStyle("default", TextButtonStyle.class), "okButton");
效果:
按下去的時(shí)候會(huì)變黃(沒(méi)截起圖)…
Skin真的用著很方便,特別是你大量使用了libgdx的UI的時(shí)候。
寫(xiě)在最后:
1、Skin支不支持xml?
說(shuō)實(shí)話我也很想知道,因?yàn)間dx-tests里面skin 的配置文件有兩個(gè),一個(gè)是json格式,另外一個(gè)是xml格式。但是我試了一下直接加載xml會(huì)報(bào)錯(cuò)。
其實(shí)我比較推薦用xml格式,因?yàn)镴son格式書(shū)寫(xiě)時(shí)候容易寫(xiě)錯(cuò)(少個(gè)逗號(hào)或者括號(hào)什么的),而且eclipse的自動(dòng)縮進(jìn)沒(méi)有發(fā)揮作用(難道是配置問(wèn)題?)。
2、Skin支持不一個(gè)配置文件多個(gè)圖片文件,這個(gè)情況推薦將圖片合并或者干脆用多個(gè)Skin就行了。
3、Skin的圖片定義的原點(diǎn)是左上角。