tutorial_gui - seraph526/godot-se GitHub Wiki

GUI教程

介绍

如果说程序员非常讨厌的事，就是编写GUIs。无聊，沉闷，没挑战性。一些方面使得事情很糟糕，如：
*通过像素方式布局UI元素是件很困难的事（但设计师们喜欢这么做）
*在测试过程中，UIs会因为设计和可用性的原因不断的修改
*解决不同的分辨率下，重定义尺寸问题
*使屏幕上的元件动起来，使它看起来更有趣

GUI编程是件会让程序员发狂的事。在开发Godot时(包括之前的引擎iterations)，针对UI开发的一些技术和哲学就已经实践了，如immediate节点，containers,anchors,scripting等等。做这些的主要目的是为了减少程序员编写UI的压力。

最终，Goodt中的UI子系统可以高效的解决这些问题，它的方法是将一些不同的功能实现整合到一起。和其他工具相比，学习曲线有些陡峭。开发者可以将复杂的用户界面很方便的，而且使用的是和设计和动画师相同的工具。　

控制

UI元件的根节点是Control(在其他的一些工具中有时候叫做Widget或者Box)。每个节点都提供遗传自它的接口函数。

当Control在节点树中作为其他Control节点的子节点存在时，它的坐标（位置position和尺寸size)是相对于其父节点的。这使得快速和可视化编辑复杂用户界面成为可能。

输入和绘制

Control接受输入事件_input_event()调用。只有一个控制获得焦点，它接收keyboard/joypad事件（查看set_focus_mode()和grab_focus()）。

Control直接通过鼠标指针接收鼠标行为事件。当Control接收到鼠标按键事件，所有的后续行为点击Control的事件都会被接收，直到释放鼠标按键，甚至是鼠标指针在Control区域之外。

像其他从 CanvasItem (也是Control)的继承一样。一个_draw()回调会在开始时被接收，每次Control需要被重绘时(程序员需要调用update()来排队CanvasItem以便重绘)。如果Control不可见（这是另一个CanvasItem属性），Control不再接收输入。

虽然通常情况下，当创建UIS时，程序员不需要直接处理绘制和输入事件，（当你要创建自定义的Control时非常有用）。相反，当行为发生时，Controls根据上下文发射不同种类的信号。如，点击时按扭Button发射点击信号，拖动时滑动条Slider发射值改变信号等等。

自定义Control小教程

在进一步深入之前，创建一个自定义的Control会是个了解Control如何工作的好方法，因为它们并不像看上去那么复杂。 此外，虽然Godot有很多为了不同目的而创建的Control,但经常需要为了特定的目的而要创建一个新的，这非常简单。

一开始，创建一个只有一个节点的场景，节点类型是Control,在2D编辑器的屏幕上有一定的大小，如下：

使用下面的代码为节点填加script： 
extends Control

var tapped=false

func _draw():

	var r = Rect2( Vector2(), get_size() )
	if (tapped):
		draw_rect(r, Color(1,0,0) )
	else:
		draw_rect(r, Color(0,0,1) )

func _input_event(ev):

	if (ev.type==InputEvent.MOUSE_BUTTON and ev.pressed):
		tapped=true
		update()

然后，运行场景。当点击矩形时，它会从蓝色变成红色。在Control的内部，事件和绘制的协作非常多。

UI复杂度

如之前提到的，Godot已经准备好了很多用户界面组件。这些组件分为两类，第一种是创建大部分游戏使用的小组件，另一部分（大部分Control是这个类型）是用来创建复杂的用户界面的，通过样式统一设置外观。下面提供一个说明，在什么情况下该用哪些组件。

简单UI Controls

这些组件足够大部分游戏使用，复杂的交互方式或阵述信息不太够用。这些可以很方便的通过设置常的textures改变外观设定。

  • Label : Label标签，用于显示文字.
  • TextureFrame : 显示一张纹理，可以缩放或固定大小。
  • TextureButton : 显示图片按扭，有pressed,hover,disabled,等状态可以设定。
  • TextureProgress : 显示图片的进度条。 另外，使用锚点重定位Controls非常高效(查看 Size and Anchors教程)

在任何情况下，都会经常出现一个简单的游戏也需要很复杂的UI的情况。如游戏物品列表（排行榜等），这就需要 ScrollContainer 和VBoxContainer。这些更高级的Control可以和常规的Control无缝对接（因为它们都是Control).

复杂UI Controls

剩下的Controls（有很多这种类型）是为了另外一种情景准备的，通常有：

  • 游戏需要复杂的UIs,如PC RPGs, MMOs, strategy, sims等等。
  • 创建自定义的开发工具以提升开发速度。
  • 创建Gogot编辑器插件，扩展游戏引擎。 重定位这些Controls的界面通常是使用Containers(查看Size and Anchors](tutorial_gui_repositioning)学习更多相关知识)
⚠️ **GitHub.com Fallback** ⚠️