Android游戏引擎libgdx使用教程11:如何使用Skin和UI配置文件

       libgdx的UI改进很大,原来各种稀奇古怪的问题都已经解决了,而且UI的类型也基本上完全了。推荐大家下载最近的版本使用。

       UI的使用我觉得唯一复杂的就是各种样式的制定,比如TextButton:

Java代码
  1. 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

       先看看基本格式:

Java代码
  1. {    
  2. resources: {    
  3. className: {    
  4. name: value,    
  5. …    
  6. },    
  7. …    
  8. },    
  9. styles: {    
  10. className: {    
  11. name: value,    
  12. …    
  13. },    
  14. …    
  15. }    
  16. }    

       由两个大块定义:资源和样式。先做个fnt文件以便支持中文。

Android游戏引擎libgdx使用教程11:如何使用Skin和UI配置文件

       保持为chinese.fnt和chinese.png。再做张图:Android游戏引擎libgdx使用教程11:如何使用Skin和UI配置文件全部拷贝到项目文件中(我是新建了一个UI文件夹)。我们先写个Label试试。定义需要的NinePath:

Java代码
  1. com.badlogic.gdx.graphics.g2d.NinePatch: {   
  2. default-rect-red: [   
  3. { width: 2, height: 1, x: 1, y: 43 },   
  4. { width: 1, height: 1, x: 2, y: 43 },   
  5. { width: 2, height: 1, x: 3, y: 43 },   
  6. { width: 2, height: 1, x: 1, y: 45 },   
  7. { width: 1, height: 1, x: 2, y: 45 },   
  8. { width: 2, height: 1, x: 3, y: 45 },   
  9. { width: 2, height: 1, x: 1, y: 43 },   
  10. { width: 1, height: 1, x: 2, y: 43 },   
  11. { width: 2, height: 1, x: 3, y: 43 }   
  12. ],   
  13. default-rect-yellow: [   
  14. { width: 2, height: 1, x: 1, y: 54 },   
  15. { width: 1, height: 1, x: 2, y: 54 },   
  16. { width: 2, height: 1, x: 3, y: 54 },   
  17. { width: 2, height: 1, x: 1, y: 55 },   
  18. { width: 1, height: 1, x: 2, y: 55 },   
  19. { width: 2, height: 1, x: 3, y: 55 },   
  20. { width: 2, height: 1, x: 1, y: 54 },   
  21. { width: 1, height: 1, x: 2, y: 54 },   
  22. { width: 2, height: 1, x: 3, y: 54 }   
  23. ]   
  24. }  

       再定义一个白色:

Java代码
  1. com.badlogic.gdx.graphics.Color: {   
  2. white: { a: 1, b: 1, g: 1, r: 1 }   
  3. }  

       然后我们的字体:

Java代码
  1. com.badlogic.gdx.graphics.g2d.BitmapFont: {   
  2. default-font: { file: chinese.fnt }   
  3. }  

       然后在样式中声明一个Label样式:

Java代码
  1. com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {   
  2. default: { font: default-font, fontColor: white}   
  3. }  

       使用时:

Java代码
  1. Skin skin = new Skin(Gdx.files.internal("ui/uiskin.json"), Gdx.files.internal("ui/ui.jpg")); //加载样式  
  2.   
  3. final Label label = new Label("FPS:", skin.getStyle("default",LabelStyle.class), "fpsLabel"); //获取Label样式  

       效果:

Android游戏引擎libgdx使用教程11:如何使用Skin和UI配置文件

       然后再来试试TextButton:

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

       调用:

Java代码
  1. final TextButton textButton = new TextButton("确认", skin.getStyle("default", TextButtonStyle.class), "okButton");  

       效果:

Android游戏引擎libgdx使用教程11:如何使用Skin和UI配置文件

 

       按下去的时候会变黄(没截起图)…

       Skin真的用着很方便,特别是你大量使用了libgdx的UI的时候。

       写在最后

       1、Skin支不支持xml?

       说实话我也很想知道,因为gdx-tests里面skin 的配置文件有两个,一个是json格式,另外一个是xml格式。但是我试了一下直接加载xml会报错。

       其实我比较推荐用xml格式,因为Json格式书写时候容易写错(少个逗号或者括号什么的),而且eclipse的自动缩进没有发挥作用(难道是配置问题?)。

       2、Skin支持不一个配置文件多个图片文件,这个情况推荐将图片合并或者干脆用多个Skin就行了。

       3、Skin的图片定义的原点是左上角。

 


android开发学习网 » Android游戏引擎libgdx使用教程11:如何使用Skin和UI配置文件