官方文档

关键词

控件按钮文本框用户名界面像素图形界面背景图片图文教程文本框节点

文字记录

大家好，下边我们再来介绍另外一种节点就是 UI 节点。 UI ，user interface 就是用来实现用户输入的那些节点。如果大家之前学过图形界面开发或者是学过网页的话，应该知道，当我们进行图形界面开发的时候，需要用户输入的时候，就需要有一些按钮、文本框等等。那么这些也可以在我们的这个游戏界面里边添加进来。
image.png
下边我们就来演示一下，比如说我们添加一个按钮 button ，那么我们可以先把上节课的这个 label 节点往上放一点，然后在左边的节点管理器里边添加一个叫做创建 UI 节点。在这下边就可以选择 button 这种类型。可以看到他给我们添加了一个 button，我把他的大小改一下，宽度改成200，高度改成100。
image.png
你看在这里边得到了一个按钮，得到一个节点，它显示为一个按钮。但是说节点的话其实添加了三个节点，你在左边的这个层级管理器里边展开来可以看到

  • 首先添加了一个 new button 这样的一个节点
  • 然后在这个节点下边又创建了一个子节点 background ，这个节点是用来负责绘制它这个背景的
  • 然后又添加了一个节点 label， label 是用来在这个位置绘制一个文字的，也就是说这是一个层次化的关系。

image.png
下边我们来设置一下它显示的文字。它现在显示的是 button 那我想把它改成其他的文字，点一下，然后找到下边的这个这个节点， label 这个节点才是用来修显示这个文字的。在这里边你可以改一下，比如说就改成我的名字，然后它的大小也可以在这里面改一下，比如说改成 40 像素就可以看得比较更清楚一些。
image.png
背景也可以改，背景是由 background 这个节点来控制。我们点一下 background 然后右边就可以看到属性栏，background这里边它其实是一个 sprite 组件，在这里边你就可以来修改它的背景了，比如说你想把一个图片给弄过来的话也是可以的。
image.png
总之，如果你想用指定一个背景图片的话，那么就在这里边先让你的美工准备好一个图片素材，然后再拖到这个里边来，也就是说有 background 这个节点来负责绘制背景，label负责显示文本。

new button 也是有功能的，在 new button 里边，右边你可以看到它可以设定这种按钮的几个状态

  • 比如说正常 normal 的时候显示什么
  • pressed 的显示什么
  • hover 鼠标移上来的时候显示什么

image.png
在这个上面还有一个类型，可以用颜色，也可以用图片都是可以的。比如把它改成颜色，然后把 normal 的时候颜色改成这种颜色。然后按下回车，这时就修改了它的颜色。
image.png
我们再来试一下，再添加一个文本框还是创建 UI 节点，在下边我们找到这个 edit box 这一项
image.png
可以看到这里边就有一个 edit box ，那其实它也添加了好几个节点，首先是一个 new editbox 就是一个文本框节点，在它下边又添加了三个子节点。
image.png
我们可以把它名字改一下，比如说叫用户名，在用户名这个节点下面有三个节点，BACKGROUND_SPRITE是定义它的背景图片的，TEXT_LABEL是显示文本的，PLACEHOLDER LABEL是用来显示这个 placeholder，这个是用来定义提示文字的，我们改成，请输入用户名，然后字体改成30，那现在就是这个样子了。
image.png
然后运行一下这个程序，如果是网页发布的话，就会在网页里边打开。然后这里边你就可以来输入了。那大家说这个不就变成图形界面开发了吗？你也可以这么样认为。

好的，那么在我们的游戏界面里边，其实 UI 控件用的并不多，大家可以思考一下，那什么时候才能用到这个 UI 控件呢？有时候是能够用到的，比如说你让一个用户打开你的游戏的时候，先登录一下游戏，比如说你这里边要保存用户数据的，那显然要配备一个后台，然后你就要提供一个界面，让用户在界面里边输入玩家的用户名，然后登录。所以这时候是需要这种 UI 控件的，只是说这个并不是我们的重点，用的也不太多。

好的，我们这节课就给大家大致展示了这两个控件，大家不要去花太多的时间把所有的控件都玩一遍。我相信很多同学也并没有这个兴趣，因为我们之前已经学得够多了。比如说如果学习 swing 的话，那 swing 里面全部都是这种窗口控件的使用。所以我们现在应该是没有太大的兴趣的。我们在这里边重点见识一下他这种三层的设计。

我相信我刚才讲了之后，大家并不明白这是什么意思，为什么说一个这个节点下边又挂了三个控件，每个控件各自承担不同的功能，那它整体上合起来就呈现出一种文本框的一种用处。这个看起来大家应该是不太明白的，没有关系，你就来大致的看一下就可以。我们以后会进一步的深入的再讲这个东西。总之，目前来说它并不是我们的重点，你只要稍微操作一下就可以了。好，我们这节课就讲到这里，谢谢。