年度归档： 2012 年

本文使用的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的更多使用可以参考：…

本文使用的libgdx是0.92版本，和现在的最新版可能有一些不一样的地方。全文内容仅供参考。

本文紧跟上文，[android游戏开发框架libgdx的使用（十二）TiledMap地图的使用]

地图我们创建好了接下来就是主角的出现。其实上文介绍了如何TiledMap和Stage的结合，角色的处理就简单了。

可以继承Actor类创建主角类，我就偷个懒，用Image代替。

编辑我们的TMX文件，添加一个对象层。

在主角要出现的地方加个形状

取名为play1

我们的主角是：

思路是我们遍历map中的所有Object，如果名字和我们设定的play1一致，那么就实例化一个Image,位置和Object一致，添加到舞台。

关键代码：

for (TiledObjectGroup group : map.objectGroups) {
for (TiledObject object : group.objects) {
if ("play1".equals(object.name)) {
player =new Image(new TextureRegion(new Texture(Gdx.files
.internal("map/player.png")),0,0,27,40));
player.x = object.x;
player.y = tileMapRenderer.getMapHeightUnits() - object.y;//map是左上角，Stage是左下角

本文使用的libgdx是0.92版本，和现在的最新版可能有一些不一样的地方。全文内容仅供参考。

本文紧跟上文：http://www.cnblogs.com/htynkn/archive/2012/01/13/libgdx_13.html

上文说到绘制了Map，然后我们的主角也可以四处活动了，但是仍有一些不完善的地方。

1.地图的边界没有控制。Camera的位置其实是viewport的位置，不是屏幕边界，所以如果直接按照上文的做法做的话主角走到屏幕边缘的时候就有问题了。

2.没有障碍，主角的行动没有约束。

现在先来解决第一个问题。

解决方案很简单，我们时刻注意viewport的位置，根据viewport计算Screen的边界，让其不超过地图。

代码如下：

privatevoidCameraMove(Vector3 vector3, Actor mainActor) {
Vector3 viewport = stage.getCamera().position.cpy();
viewport = viewport.add(vector3);
Vector3 zbound =new Vector3(width /2, height /2,0).add(viewport);
if (zbound.x > maxCamPosition.x || zbound.y > maxCamPosition.y) {
return;
}
Vector3 

提示：本文记录的是本人的操作流程和心得，各位操作时可能由于版本和其它问题会出现点障碍，请参考本文后面的评论和回复。

虽说可以用Image什么的当个背景，但是要是做个RPG类的游戏就有点复杂了。为了追求效率一般可以使用libgdx的SpriteCache，但是如果习惯于TiledMap的话libgdx也是支持的。

相关的类是TiledMap，TileAtlas，TileMapRenderer，都在com.badlogic.gdx.graphics.g2d.tiled之中。

现在我们从头来看看TiledMap的使用。

1.制作TiledMap。

我使用的是Tile Map editor，下载地址：http://www.mapeditor.org/

先新建一个地图,大小5030，每个块的大小是3232。

然后我使用的图块资源是从网上下的，具体出处不知了，对于资源奉献者表示感谢~

添加一个新图块

块的高宽都是32.边距和间距都是1px，这些数值是取决你的图块资源本身的。效果如下：

然后发挥想象吧，画一幅地图。

保存tmx文件。然后用gdx-tiled-preprocessor处理一下。

处理完成后会多三个文件，覆盖原来的同名文件：

tilest1.png文件：

终于可以开始绘制了

map = TiledLoader.createMap(mapHandle);
atlas =new TileAtlas(map,new FileHandle("map/"));
tileMapRenderer =new TileMapRenderer(map, atlas,10,10)

最后在render用tileMapRenderer.render(cam);绘制

而在TileMapRenderer(map, atlas, 10, 10)这句中后面两个10是缓冲的块数，可以酌情调整。我是随意写的。

我个人比较喜欢舞台，其实tiledmap一样可以在舞台中使用。

我在舞台绘制一个标签作为例子。

其实原理很简单，从Stage获取Camera，然后给Render用，最后在Stage绘制。

关键代码：…

本文使用的libgdx是0.92版本，和现在的最新版可能有一些不一样的地方。全文内容仅供参考。

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

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

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

再看看List：

public ListStyle (BitmapFontfont,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,
...
},

游戏屏幕最常见的就是一个变化较少的背景加上一系列和用户交互的角色和部件。为了方便管理你还可以为背景建个Group方便管理。

但是有时候写的时候没有想到这个问题，或者是背景不是单纯的一个图片什么的，背景和角色还有一些混合逻辑分布在两个Stage里。

我重写太麻烦，想想反正都是SpritBatch绘制出来的，用双舞台大不了多个摄像头。马上试试还真行。

先看看Stage的draw方法：

/** Renders the stage */
publicvoiddraw () {
camera.update();
if (!root.visible)return;
batch.setProjectionMatrix(camera.combined);
batch.begin();
root.draw(batch,1);
batch.end();
}

batch的话两个舞台可以共用。用Stage(width, height, stretch, batch)实例化第二个舞台。

代码如下：

package com.cnblogs.htynkn.game;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.InputProcessor;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import