android游戏开发框架libgdx的使用（五）--舞台和常用UI类

最新推荐文章于 2015-12-06 02:18:15 发布
最新推荐文章于 2015-12-06 02:18:15 发布
阅读量1k 收藏 1
点赞数
分类专栏： libgdx

转自：http://www.apkbus.com/forum.php?mod=viewthread&tid=19751&extra=page%3D1%26filter%3Dauthor%26orderby%3Ddateline%26orderby%3Ddateline

 

常用的UI类包括标签，按钮，勾选框，下拉框，图片，输入框，列表，滑动面板，滑条，分割面板。它们都在com.badlogic.gdx.scenes.scene2d.ui包中，都属于Actor，可以方便的纳入舞台的管理中。

其实仔细看看UI类的实现代码不难发现其实它们都是大部分继承自Widget或者Table，如果需要自定义UI可以继承以上两个类（它们继承自Actor），这里要说明一下libgdx的布局部分使用了TWL，有兴趣的朋友可以去看看。

在介绍每个控件之前我们先来看一下NinePatch，这是最近的一个比较重大的更新。

何为NinePatch？其实android原生即有NinePatch类，常在按钮中使用。

1.jpg

 

2012-1-17 11:57 上传
下载附件(11.45 KB)

如图，将图片分成九份。中间部分可以根据需要扩大，使按钮的大小内容变动不受图片的限制。

而在libgdx的NinePatch其实就是九个TextureRegion对象。

常用的实例化方法有两个：


 

  1. public NinePatch (Texture texture, int left, int right, int top, int bottom)

  3. public NinePatch (TextureRegion region, int left, int right, int top, int bottom)
复制代码

关于其中的四个int型参数如何取值我们可以参考一下源码：

  1. public NinePatch (TextureRegion region, int left, int right, int top, int bottom) {
  2. int middleWidth = region.getRegionWidth() - left - right;
  3. int middleHeight = region.getRegionHeight() - top - bottom;
  4. this.patches = new TextureRegion[] {new TextureRegion(region, 0, 0, left, top),
  5. new TextureRegion(region, left, 0, middleWidth, top), new TextureRegion(region, left + middleWidth, 0, right, top),
  6. new TextureRegion(region, 0, top, left, middleHeight), new TextureRegion(region, left, top, middleWidth, middleHeight),
  7. new TextureRegion(region, left + middleWidth, top, right, middleHeight),
  8. new TextureRegion(region, 0, top + middleHeight, left, bottom),
  9. new TextureRegion(region, left, top + middleHeight, middleWidth, bottom),
  10. new TextureRegion(region, left + middleWidth, top + middleHeight, right, bottom)};
  11. }
复制代码
先计算中间部分的宽度和高度。然后开始切图，首先取顶部的最左边的那个，即图中编号1的那块，然后去它右边的，然后再右边的。
取完最上边的那行，然后取中间的那行，然后取最后一行的。
由上自下，由左自右。
而在绘制时又是如何处理的呢？看源码：
  1. public void draw (SpriteBatch batch, float x, float y, float width, float height) {
  2. float centerColumnX = x;
  3. if (patches[BOTTOM_LEFT] != null)
  4. centerColumnX += patches[BOTTOM_LEFT].getRegionWidth();
  5. else if (patches[MIDDLE_LEFT] != null)
  6. centerColumnX += patches[MIDDLE_LEFT].getRegionWidth();
  7. else if (patches[TOP_LEFT] != null) //
  8. centerColumnX += patches[TOP_LEFT].getRegionWidth();

  10. float rightColumnX = x + width;
  11. if (patches[BOTTOM_RIGHT] != null)
  12. rightColumnX -= patches[BOTTOM_RIGHT].getRegionWidth();
  13. else if (patches[MIDDLE_RIGHT] != null)
  14. rightColumnX += patches[MIDDLE_RIGHT].getRegionWidth();
  15. else if (patches[TOP_RIGHT] != null) //
  16. rightColumnX += patches[TOP_RIGHT].getRegionWidth();

  18. float middleRowY = y;
  19. if (patches[TOP_LEFT] != null)
  20. middleRowY += patches[TOP_LEFT].getRegionHeight();
  21. else if (patches[TOP_CENTER] != null)
  22. middleRowY += patches[TOP_CENTER].getRegionHeight();
  23. else if (patches[TOP_RIGHT] != null) //
  24. middleRowY += patches[TOP_RIGHT].getRegionHeight();

  26. float topRowY = y + height;
  27. if (patches[TOP_LEFT] != null)
  28. topRowY -= patches[TOP_LEFT].getRegionHeight();
  29. else if (patches[TOP_CENTER] != null)
  30. topRowY -= patches[TOP_CENTER].getRegionHeight();
  31. else if (patches[TOP_RIGHT] != null) //
  32. topRowY -= patches[TOP_RIGHT].getRegionHeight();

  34. // Bottom row
  35. if (patches[BOTTOM_LEFT] != null) batch.draw(patches[BOTTOM_LEFT], x, y, centerColumnX - x, middleRowY - y);
  36. if (patches[BOTTOM_CENTER] != null)
  37. batch.draw(patches[BOTTOM_CENTER], centerColumnX, y, rightColumnX - centerColumnX, middleRowY - y);
  38. if (patches[BOTTOM_RIGHT] != null)
  39. batch.draw(patches[BOTTOM_RIGHT], rightColumnX, y, x + width - rightColumnX, middleRowY - y);

  41. // Middle row
  42. if (patches[MIDDLE_LEFT] != null) batch.draw(patches[MIDDLE_LEFT], x, middleRowY, centerColumnX - x, topRowY - middleRowY);
  43. if (patches[MIDDLE_CENTER] != null)
  44. batch.draw(patches[MIDDLE_CENTER], centerColumnX, middleRowY, rightColumnX - centerColumnX, topRowY - middleRowY);
  45. if (patches[MIDDLE_RIGHT] != null)
  46. batch.draw(patches[MIDDLE_RIGHT], rightColumnX, middleRowY, x + width - rightColumnX, topRowY - middleRowY);

  48. // Top row
  49. if (patches[TOP_LEFT] != null) batch.draw(patches[TOP_LEFT], x, topRowY, centerColumnX - x, y + height - topRowY);
  50. if (patches[TOP_CENTER] != null)
  51. batch.draw(patches[TOP_CENTER], centerColumnX, topRowY, rightColumnX - centerColumnX, y + height - topRowY);
  52. if (patches[TOP_RIGHT] != null)
  53. batch.draw(patches[TOP_RIGHT], rightColumnX, topRowY, x + width - rightColumnX, y + height - topRowY);
  54. }
复制代码
先计算左右栏的宽度，在计算中间和顶部的高度。然后从下自上的绘制。说实话我觉得这段代码看着很好玩的。
现在来说说几个常用的控件的使用吧。先构建一个舞台。
先来试试Label吧，label是有缓存的，所以替换显示内容不是用setText方法，而是使用setWrappedText方法。
代码如下：


 

  1. package com.cnblogs.htynkn.listener;

  3. import com.badlogic.gdx.ApplicationListener;
  4. import com.badlogic.gdx.Gdx;
  5. import com.badlogic.gdx.graphics.GL10;
  6. import com.badlogic.gdx.graphics.g2d.BitmapFont;
  7. import com.badlogic.gdx.graphics.g2d.BitmapFont.HAlignment;
  8. import com.badlogic.gdx.scenes.scene2d.Stage;
  9. import com.badlogic.gdx.scenes.scene2d.actors.Label;

  11. public class FirstGame implements ApplicationListener {

  13. private Stage stage;
  14. Label label;

  16. @Override
  17. public void create() {
  18. stage = new Stage(Gdx.graphics.getWidth(), Gdx.graphics.getHeight(),
  19. true);
  20. label = new Label("fpsLabel", new BitmapFont(Gdx.files.internal("cf.fnt"),Gdx.files.internal("cf.png"),false), "label1");
  21. label.x=5;
  22. label.y=Gdx.graphics.getHeight()-label.height-5;
  23. stage.addActor(label);
  24. Gdx.input.setInputProcessor(stage);
  25. }

  27. @Override
  28. public void dispose() {
  29. stage.dispose();
  30. }

  32. @Override
  33. public void pause() {
  34. // TODO Auto-generated method stub

  36. }

  38. @Override
  39. public void render() {
  40. Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
  41. label.setWrappedText("FPS： "+Gdx.graphics.getFramesPerSecond(),
  42. HAlignment.CENTER);
  43. stage.act(Gdx.graphics.getDeltaTime());
  44. stage.draw();
  45. }

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

  51. }

  53. @Override
  54. public void resume() {
  55. // TODO Auto-generated method stub

  57. }
  58. }
复制代码

效果：
2.jpg

2012-1-17 11:57 上传
下载附件(14.04 KB)



然后再看看Button吧，实例化需要一个ButtonStyle，定义了按钮三种状态对应的图片样式，按下和松开时的X,Y偏移还有Button中文字绘制所需的BitmapFont和Color。按钮的三种状态的图片我就省了，只用一张图片。

3.png

2012-1-17 12:02 上传
下载附件(23.81 KB)



修改代码如下：

  1. package com.cnblogs.htynkn.listener;

  3. import com.badlogic.gdx.ApplicationListener;
  4. import com.badlogic.gdx.Gdx;
  5. import com.badlogic.gdx.graphics.Color;
  6. import com.badlogic.gdx.graphics.GL10;
  7. import com.badlogic.gdx.graphics.Texture;
  8. import com.badlogic.gdx.graphics.g2d.BitmapFont;
  9. import com.badlogic.gdx.graphics.g2d.NinePatch;
  10. import com.badlogic.gdx.graphics.g2d.BitmapFont.HAlignment;
  11. import com.badlogic.gdx.scenes.scene2d.Stage;
  12. import com.badlogic.gdx.scenes.scene2d.actors.Label;
  13. import com.badlogic.gdx.scenes.scene2d.ui.Button;
  14. import com.badlogic.gdx.scenes.scene2d.ui.Button.ButtonStyle;

  16. public class FirstGame implements ApplicationListener {

  18. private Stage stage;
  19. Label label;
  20. Texture texture;
  21. Button button;

  23. @Override
  24. public void create() {
  25. stage = new Stage(Gdx.graphics.getWidth(), Gdx.graphics.getHeight(),
  26. true);
  27. texture = new Texture(Gdx.files.internal("06.png"));
  28. NinePatch n1 = new NinePatch(texture, 7, 7, 9, 9);
  29. BitmapFont bitmapFont = new BitmapFont(Gdx.files.internal("cf.fnt"),
  30. Gdx.files.internal("cf.png"), false);
  31. label = new Label("fpsLabel", bitmapFont, "label1");
  32. label.x = 5;
  33. label.y = Gdx.graphics.getHeight() - label.height - 5;
  34. stage.addActor(label);
  35. button = new Button("button", new ButtonStyle(n1, n1, n1, 0f, 0f, 0f,
  36. 0f, bitmapFont, new Color(1, 1, 0, 0.5f)), "button");
  37. button.x=10;
  38. button.y=10;
  39. button.width=100f;
  40. button.height=32f;
  41. stage.addActor(button);
  42. Gdx.input.setInputProcessor(stage);
  43. }

  45. @Override
  46. public void dispose() {
  47. stage.dispose();
  48. }

  50. @Override
  51. public void pause() {
  52. // TODO Auto-generated method stub

  54. }

  56. @Override
  57. public void render() {
  58. Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
  59. label.setWrappedText("FPS： " + Gdx.graphics.getFramesPerSecond(),
  60. HAlignment.CENTER);
  61. stage.act(Gdx.graphics.getDeltaTime());
  62. stage.draw();
  63. }

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

  69. }

  71. @Override
  72. public void resume() {
  73. // TODO Auto-generated method stub

  75. }
  76. }
复制代码

效果：

4.jpg

2012-1-17 12:02 上传
下载附件(13.01 KB)



按钮自然应该有点击事件，通过setClickListener来设置

  1. button.setClickListener(new ClickListener() {
  2. @Override
  3. public void click(Actor actor) {
  4. Gdx.app.log("Info", "点击事件触发了");
  5. }
  6. });
复制代码

然后再看看CheckBox。CheckBox的样式定义在CheckBoxStyle中，需要4个参数，两种状态的各一张图片，一个BitmapFont和Color。这里我再添加一张图片

5.png

2012-1-17 12:02 上传
下载附件(7.78 KB)



原理差不多，直接贴代码了。

  1. package com.cnblogs.htynkn.listener;

  3. import android.graphics.Paint.Align;

  5. import com.badlogic.gdx.ApplicationListener;
  6. import com.badlogic.gdx.Gdx;
  7. import com.badlogic.gdx.graphics.Color;
  8. import com.badlogic.gdx.graphics.GL10;
  9. import com.badlogic.gdx.graphics.Texture;
  10. import com.badlogic.gdx.graphics.g2d.BitmapFont;
  11. import com.badlogic.gdx.graphics.g2d.NinePatch;
  12. import com.badlogic.gdx.graphics.g2d.TextureRegion;
  13. import com.badlogic.gdx.graphics.g2d.BitmapFont.HAlignment;
  14. import com.badlogic.gdx.scenes.scene2d.Actor;
  15. import com.badlogic.gdx.scenes.scene2d.Stage;
  16. import com.badlogic.gdx.scenes.scene2d.actors.Label;
  17. import com.badlogic.gdx.scenes.scene2d.ui.Button;
  18. import com.badlogic.gdx.scenes.scene2d.ui.CheckBox;
  19. import com.badlogic.gdx.scenes.scene2d.ui.ClickListener;
  20. import com.badlogic.gdx.scenes.scene2d.ui.Button.ButtonStyle;
  21. import com.badlogic.gdx.scenes.scene2d.ui.CheckBox.CheckBoxStyle;

  23. public class FirstGame implements ApplicationListener {

  25. private Stage stage;
  26. Label label;
  27. Texture texture1;
  28. Texture texture2;
  29. CheckBox checkBox;

  31. @Override
  32. public void create() {
  33. stage = new Stage(Gdx.graphics.getWidth(), Gdx.graphics.getHeight(),
  34. true);
  35. texture1 = new Texture(Gdx.files.internal("06.png"));
  36. texture2 = new Texture(Gdx.files.internal("07.png"));
  37. NinePatch n1 = new NinePatch(texture1, 7, 7, 9, 9);
  38. BitmapFont bitmapFont = new BitmapFont(Gdx.files.internal("cf.fnt"),
  39. Gdx.files.internal("cf.png"), false);
  40. label = new Label("fpsLabel", bitmapFont, "label1");
  41. label.x = 5;
  42. label.y = Gdx.graphics.getHeight() - label.height - 5;
  43. CheckBoxStyle style = new CheckBoxStyle(new TextureRegion(texture1),
  44. new TextureRegion(texture2), bitmapFont, new Color(1, 1, 1,
  45. 0.5f));

  47. checkBox = new CheckBox("checkbox", style, "checkbox");
  48. checkBox.x = 100;
  49. checkBox.y = 100;
  50. checkBox.width = 158f;
  51. checkBox.height = 32f;
  52. checkBox.setText("Yes");
  53. checkBox.setClickListener(new ClickListener() {

  55. @Override
  56. public void click(Actor actor) {
  57. if (checkBox.isChecked) {
  58. checkBox.setText("Yes");
  59. } else {
  60. checkBox.setText("NO");
  61. }
  62. }
  63. });
  64. stage.addActor(checkBox);
  65. stage.addActor(label);
  66. Gdx.input.setInputProcessor(stage);
  67. }

  69. @Override
  70. public void dispose() {
  71. stage.dispose();
  72. }

  74. @Override
  75. public void pause() {
  76. // TODO Auto-generated method stub

  78. }

  80. @Override
  81. public void render() {
  82. Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
  83. label.setWrappedText("FPS： " + Gdx.graphics.getFramesPerSecond(),
  84. HAlignment.CENTER);
  85. stage.act(Gdx.graphics.getDeltaTime());
  86. stage.draw();
  87. }

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

  93. }

  95. @Override
  96. public void resume() {
  97. // TODO Auto-generated method stub

  99. }
  100. }
复制代码

效果：

6.jpg

2012-1-17 11:58 上传
下载附件(4.04 KB)

7.jpg

2012-1-17 11:57 上传
下载附件(5.17 KB)



其他的UI大致用法差不多，显示的样式在对应的Style或者Skin中定义。但是要注意有些UI类需要手动设置width和height，不然有些显示会很奇怪的。最后说一下Slider的用法。SliderStyle需要一个NinePath和Texture，我最初没有想通为什么不是两个NinePath，仔细看一下源码才了解到，NinePath是作为背景，而Texture那个是中间的那个滑动的方块。关于用配置文件设置Style的问题，google code的wiki上似乎没有写，但是在libgdx的论坛里面有，比如

somePatch1: [
{ height: 13, width: 9, x: 761, y: 78 },
{ height: 13, width: 1, x: 770, y: 78 },
{ height: 13, width: 9, x: 771, y: 78 },
{ height: 1, width: 9, x: 761, y: 91 },
{ height: 1, width: 1, x: 770, y: 91 },
{ height: 1, width: 9, x: 771, y: 91 },
{ height: 13, width: 9, x: 761, y: 92 },
{ height: 13, width: 1, x: 770, y: 92 },
{ height: 13, width: 9, x: 771, y: 92 }
]


或者

somePatch2: [
{ height: 13, width: 9, x: 761, y: 78 },
]

 

gf771115
关注
专栏目录
libgdx中的舞台与演员
03-01
libgdx中的舞台与演员
基于Java开发的libGDX游戏框架开发的2D横版Android跑酷游戏..zip
最新发布
09-10
本项目“基于Java开发的libGDX游戏框架开发的2D横版Android跑酷游戏”就是利用这一强大的工具来实现的。 libGDX是一个开源的游戏开发框架，它为开发者提供了从桌面到移动设备的一致性开发体验。其核心特性包括： 1...
Android游戏开发框架Libgdx的使用（五）--优美字体的使用
ddgctoq0215的博客
04-17 228
本文使用的libgdx是0.98版本，可能和最新版有一些不同地方。全文内容仅供参考。 原文地址：http://blog.sina.com.cn/weyingkj 做Android开的同学经常会纠结怎么能使用一些漂亮的字体获取用户的芳心，如果你想实现这个目的，那么TTF字库就是必不可少的了。什么是TTF字库呢？可能许多不熟悉TTF字库的同学一看这么生疏的名字就被吓到了，不要担心...
libGDX——舞台类的使用
Kent的专栏
02-07 1944
1.Stage类 API定义：包含拥有层次结构的一个二维场景，场景中有许多演员。期处理视图和分配的输入事件。舞台负责操作视角，和处理分配输入事件。 功能作用：一个Stage可以充满整个屏幕。设置视角（一般是浮点型和布尔类型），同时设置阶段内使用的相机，调配 Actor、Group 与 Screen 之间的关系转换（包括坐标）。一个Stage必须负责接收输入事件，
Android游戏开发框架Libgdx的使用（九）--舞台类的使用
ddgctoq0215的博客
04-20 183
本文使用的libgdx是0.98版本，可能和最新版有一些不同地方。全文内容仅供参考。 原文地址：http://blog.sina.com.cn/weyingkj 上一次我们讲解了关于演员类的使用，其实大家都发现了上个程序中我使用了多次的Stage，熟悉libgdx的朋友可能都知道这就是libgdx第二个必须掌握的基本元素------舞台类。舞台类相比于演员类来说，更容...
android-libgdx:测试 android-libgdx
07-09
5. **AssetManager**: 资产管理器，负责加载和管理游戏资源，如图像、音频、字体等，确保资源的高效使用和内存管理。 6. **InputProcessor**: 提供了一种处理用户输入的方式，例如触摸屏点击、键盘按键等，让开发者...
使用LibGDX开发一个完整游戏 教程全集
06-23
LibGDX是一个强大的开源游戏开发框架，专为创建跨平台的游戏而设计，支持Windows、Linux、Mac OS X、Android、iOS以及HTML5等平台。这个教程全集将带你逐步了解如何利用LibGDX来开发一个完整的游戏。 首先，让我们...
Tetris-Evolution:Java - Android - LibGDX - 游戏
07-12
总之，"Tetris Evolution"项目是一个融合了Java编程、Android开发和LibGDX框架的实践案例，涵盖了游戏开发的多个重要领域。通过深入学习和实践，开发者不仅可以掌握开发一款跨平台游戏的基本技能，还能提升自己在...
libgdx,桌面/ Android /HTML5/IOS Java游戏开发框架.zip
09-26
7. **场景管理**：通过Stage和Actor类，LibGDX提供了简单的舞台管理和用户界面组件，便于构建复杂的场景和交互式UI。 8. **多线程支持**：允许开发者在游戏运行时执行后台任务，提高性能和响应速度。 9. **扩展库*...
Libgdx专题系列 UI篇
01-23
Libgdx专题系列 UI篇 项目代码 包含TWL Skin 和 TableLayout的用法及使用
android游戏开发框架libgdx的使用（四）--舞台和演员
紫叶枫林
11-05 443
我们先看几个游戏截图再来理解何为舞台。 请仔细观察图片中的元素，有些东西是不能动，有些可以动，有些有特效，有些没有。有些是按钮，有些是图片，但是其实它们都可以统一称为演员（Actor）。 而整个游戏界面就是我们的舞台。 再看一个射击类游戏 而其中的演员是 演员是游戏设计中常用的一个对象，它接受舞台的统一管理，拥有一些公共的事件，比如触摸，点击，但是同时还有自身的响应和属性
LibGDX_4.3: 舞台（Stage）
谢TS的博客
12-06 7453
舞台（Stage）是众多演员（Actor）“表演”的地方，可以看做是一个包含不同层次演员的 2D 场景，能够处理视口（整体缩放显示 / 屏幕适配）和 接收输入事件（触屏，鼠标点击，按键按下等）自己处理以及将事件分发给演员。
libGDX视频教程（十一） -- 舞台类（二）
奋斗小土豆丶
07-04 312
舞台类（二） 下载地址：
android游戏开发框架libgdx的使用（二）--图形绘制
weixin_34067102的博客
11-10 134
本文使用的libgdx是0.92版本，和现在的最新版可能有一些不一样的地方。全文内容仅供参考。 首先了解一下何为texture。按照英文解释来理解：一个图片从原始格式解码并上传到GPU就被称为纹理。（说实话我不是很清楚这个的定义哈，求指点） 为了绘制texture，常常使用几何来描述，通过几何对应的顶点来描述纹理。比如要描述一个矩形，可以通过描述每个顶点来描述矩形。   要绘图时，首先要绑...
【Android LibGDX游戏引擎开发教程】第04期：各个模块的详细介绍
我是一条寻水的鱼
06-15 6169
博主思来想去，觉得还是想把这个教程写的再细一点，让读者能够更清楚的了解LibGDX这个游戏引擎整体的架 构，所以也就总结出了这样一篇文章。      一、模块概述   作为游戏开发人员，我们需要一系列的系统组件是我们能够制作是我们想要的游戏： 应用程序框架，处理我们应用程序的主循环和生命周期（创建,暂停,恢复,销毁）； 图形模块,它提供了一种方法让我们在屏幕上画一些东西；
com.badlogic.gdx.utils.SerializationException: Error parsing XML on line 1 near
02-23 1355
出错提示： com.badlogic.gdx.utils.SerializationException: Error parsing XML on line 1 near: puzzle/puz.xml     错误代码如下：   XmlReader xmlReader = new XmlReader();  m_element = xmlReader.parse("puzzle/pu
libgdx游戏开发入门：创建简单游戏
"这篇文章主要介绍了如何使用libgdx框架来编写一个简单的游戏，涉及游戏的基本元素如角色、怪物和投掷物的显示。作者建议从libgdx官方网站下载合适版本的库，可以选择setup-ui工具来简化项目创建过程，避免ADT升级后...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值