用Godot制作高级GUI应用程序

2020-08-04 05:54:46

我最近一直在试用戈多游戏引擎,我看到的东西给我留下了深刻的印象。

虽然它是为制作游戏而设计的,但它有一个非常复杂的图形用户界面制作系统。我认为这是高级GUI应用程序的未来。不相信?

请看下图。这是来自戈多编辑器的。它看起来相当精致,对吧?您需要:

可视化编程系统中使用的连接节点的节点画布(以及其他几个受支持的编程系统)。

平铺地图编辑器、动画编辑器和大量其他音频编辑器,还有很多其他我甚至没有时间去探索的东西。

你认为他们是如何制作出如此复杂的图形用户界面的?是QT吗?电子?要可可吗?

不,这都是用戈多游戏引擎本身制作的。他们真的是在吃自己的狗粮。因此,您在这里看到的所有内容都可以使用Godot在您自己的应用程序中完成。

当然,您可以通过其他工具找到类似这样的复杂GUI。一些竞争对手的引擎使用Qt来制作它们的编辑器。

带有Engine End Editor的所有Godot只需下载31.1MB。一键安装,编辑器立即启动。

当我解包并安装时,它仍然只有70MB左右。与您获得的功能数量相比,这是一个绝对微不足道的安装。让我们来看一看这件事。仅下载Qt5,就需要5 GB的可用空间!

考虑一下Qt Creator IDE,它非常简约,没有运行所需的Qt,需要超过200MB。

Xcode怎么样?下载量超过5 GB。安装后,它在我的硬盘上大约需要10 GB。这是一个完全不同的联赛。Android Studio为500MB,Android SDK为1.5G。这些东西都很大,尽管还不清楚它们是否提供了比Godot多得多的功能。

仅用于演示内容的Keynote有433.5 MB的大小。这可能不包括共享框架,它使用。

让我们来看看Godot在大小上与哪些应用程序相比较。1安装管理密码的密码为55.5MB。离戈多很近。邮件的大小约为30MB,照片的大小约为50MB。

换句话说,Godot的大小非常接近于功能非常有限的应用程序。

与我以前习惯的设计相比,Godot GUI设计的速度快得让人抓狂。在构建UI时,他们确实仔细考虑了这么多常见问题。

你可以用键盘在这棵树上上下移动。因此,例如,我可以使用箭头键移动到我想要添加GUI组件的容器或面板。然后我可以点击Cmd+A(在Mac上)打开一个对话框来选择GUI组件。

现在,您可以使用鼠标展开显示大量节点的大树。但非常有效的是,当对话框打开时,您会立即进入搜索栏。我可以开始键入“Button”来查看存在哪些类似节点的按钮。当我键入时,列表被过滤。

在此过程中,我可以同时使用箭头键在列表中移动以进行选择。即使我那样做了,我也不会错过对搜索栏的关注。

因此,我只需选择我想要的节点,然后按Enter键即可。它将作为子节点添加到我之前选择的节点。

这样,我完全使用键盘上的箭头键、Cmd+A和Enter来构建GUI。如果我在组件上按Enter键,我可以更改其名称。如果我按Cmd+D,我会复制它。因此,我不需要打开和搜索,比方说标签多次。如果我知道我需要10个标签。我可以只做一个标签,然后复制10次。

在各种UI设计工具中,最让我沮丧的事情之一是选择由多个其他组件组成的UI组件。例如,在Qt Creator中,我经常尝试选择包含子组件的布局,结果却意外地选择了一个子组件并将其从布局中拉出。

在Godot中,意外选择子组件不是问题。请注意我在下面的MarginContainer旁边用粉红色圈出的小图标。这个图标被切换是因为我之前点击了用黄色圈出的工具栏中的图标。这样就不能在画布上选择子对象。我仍然可以在树中选择它们,但是如果在布局时单击组件,我将获得父组件。

这真的很实用,因为它使处理布局变得容易。在其他编辑器中,选择布局可能很棘手。另一个对戈多有利的重要细节。您不能在画布上更改父关系,只能在节点树中更改。因此,您不会意外地从层次结构中拉出组件。在这种情况下,您要做的就是将子组件的相对位置更改为其父组件。

在任何高级GUI中,您都需要以特定的方式配置大量特殊的自定义GUI组件,以适合您的应用程序。

这对传统的GUI设计者来说从来都不是件好事。您可以子类化一个组件,但通常它在GUI编辑器中只会显示为一个灰色矩形。

如果它确实出现了,您就无法对其进行过多配置。通常情况下,所有事情都必须用代码来完成。戈多就不是这样了。

在下图中,您可以看到我们已经将一个脚本附加到名为ColorPicker的节点上,该节点的类型为OptionButton。将脚本附加到Godot中的节点相当于将该节点子类化。这就是为什么您可以看到脚本代码说扩展OptionButton的原因。

OptionButton是一个下拉菜单。开箱即用的Godot在GUI中没有任何机制来指定它应该包含哪些元素。

但是,我们可以将自己的属性添加到任何场景节点对象的Godot编辑器的检查器中。您可以在高亮显示中看到我编写了以下代码行:

这告诉Godot成员变量itemvalue应该在Godot编辑器中可见。我还告诉它它是一个包含字符串元素的Array。使用的语言GDScript是动态类型的,所以这些更像是提示。

这样做的结果是,当选择ColorPicker时,Inspector会显示一个itemvalue条目,我可以在其中修改元素。您可以看到,在本例中,我将最后一个值从";蓝色";更改为";青色&34;

当组件已加载到场景中并准备好使用时,将调用_Ready函数。在本例中,我们利用这个机会阅读用户设置的项目值,并将每个条目添加到下拉菜单框中。

聪明并没有止步于此。如果我复制此组件并在其他地方使用它,将使用相同的附加脚本。如果我更改一个组件上的代码,它将更改所有其他组件上的代码。因此,它们不容易失去同步。如果我真的想要自定义行为,我可以分离特定组件上的脚本。或者我可以用一个子类来扩展它以改进行为。

我可以继续讲几十个其他的小细节,这使得GUI编辑在戈多变得轻而易举。但我希望我已经明白了这一点,他们真的考虑到了人体工程学。

我过去遇到的许多问题阻碍了我高效地使用GUI,这似乎是他们预料到的。

但也许真正的杀手级功能是,您可以运行应用程序并在运行时修改其GUI布局和附加脚本的代码,这些更改会立即反映在运行的应用程序中。

当然,这种您可以在运行时编辑代码的功能以某种形式存在于许多地方。但是,如果您的经验与我类似,您知道,如果您处理编译语言,这些东西往往非常脆弱和有限。

Godot使用一种带有Python语法的动态语言,称为GDScript,它是专门为与编辑器集成而定制的。这意味着它是为处理重载和同步而设计的。你可以看出它工作得很好。

这是一门超级容易学的语言。我基本上一天就学会了。它与发动机非常好地结合在一起。

您可以命令单击任何内容以跳转到其定义文档。你会得到很好的命令完成。尽管它不是一种真正的静态类型语言,但它在识别类型方面非常出色。就像现代Python一样,您可以在任何想要改进猜测的地方添加类型提示。

它不仅完成了类型名称和函数名称。当您将路径写入场景图中的节点时,它甚至会完成字符串。

当然,另一种选择是使用像Electron、Qt widgets、Qt QML或Cocoa这样的工具。替代方案的第一个问题是,它们是巨大的、臃肿的、笨拙的野兽。

想想看,如果有人想要查看您正在处理的某个GUI,您可以将Godot项目文件发送给他们,而这些文件只需下载31MB即可查看。哦,我有没有告诉过你,Godot是完全免费的,开源的,并且在麻省理工学院的许可下?

没错,任何人都可以免费下载它,并使用Godot做任何他们想做的事情。

试着让人看看你做的Qt设计。“哎呀,对不起,你需要5 GB的下载空间才能做到这一点。哦,顺便说一句,你需要在网站上注册一个账户,登录并努力搜索才能找到免费版本。“。

更不用说,如果您使用Qt小部件,它应该用于大型专业GUI应用程序(这是我在这里讨论的主题),那么您必须使用GUI设计器,这非常糟糕。事实上,这就是我制作自己的标记语言ERML的原因,只是为了允许对Qt Creator的GUI以外的QtUI文件进行更合理的编辑。

你问为什么Qt Creator很烂?这篇文章中提到的许多事情。选择和使用组件的嵌套布局几乎是不可能的。而且对象树结构不允许您执行任何有用的操作。

它基本上是一个“只写”系统。您可以很好地制作一个复杂的GUI,但祝您稍后回到它并进行重大修改时好运。你会弄坏布局,你不会记得怎么把它放回原来的样子。

而且没有一种合理的方法来定义您想要在编辑器中使用的自定义组件。在戈多,这是微不足道的。您可以制作由其他组件组成的任意复杂组件,并轻松重用它们。当然,您可以在Qt Creator中复制粘贴一组GUI组件,但是如果您决定要进行修改,那么您就完蛋了。

相比之下,在Godot中,您可以使用您制作的GUI组件集合作为模板。更改模板以及基于该模板更改的所有其他GUI组件。

更不用说你不能改变你的用户界面。Qt C++项目很容易获得非常慢的周转时间,这在制作GUI时会完全扼杀生产力。

那么QML呢?它解决了许多问题,并利用动态语言使动态类型的更改变得更容易。

老实说,关于QML是如何工作的,我不记得太多细节。我只记得这并不像我希望的那样直观。编辑花了我相当长的时间才把我的头脑弄清楚,真的一点也不光鲜。

很多东西都感觉很慢。我做的图形用户界面效果不是很好。当我调整窗口大小时,即使是相当简单的东西在重新绘制时也是非常糟糕的。也许是因为它是为移动设备设计的,所以它没有针对改变大小的窗口进行优化?我不知道。

尽管考了很多次,我的绘画还是没有拿到像样的成绩。但最大的杀手可能是没有一套全面的高级小部件来构建高级GUI应用程序。

当我使用SWIFT在Xcode中处理iOS应用程序时,我使用过基于约束系统的布局管理器。这是一个非常强大和先进的系统。

起初,我认为这真的是前进的方向。然而,根据我的经验,它太复杂了,无法处理。即使对于简单的屏幕,我有时也会遇到非常复杂的约束,这可能很难调试。

虽然我在Xcode和Swift上花了很多时间,但也许检验它是否有效的最终测试是,在离开它一段时间后,你花了多少时间再次投入其中。

这对我来说不太管用。我无法理解我过去做过的很多事情。斯威夫特变得太复杂了。这是一种很好的语言,但讽刺的是,它正在开发一些与C++和Haskell相同的问题。类型系统的复杂性和严格性有点太频繁了。

这是一把双刃剑。当我开始使用SWIFT时,我喜欢强大的打字能力捕捉到了许多错误。但它总是带着一种复杂的感觉,因为与类型系统的斗争是经常发生的。现在,情况似乎变得更糟了,尤其是在处理闭包时。

整个设置很容易让你精神超负荷。我无法有效地使用该系统,因为我无法将您需要了解的所有内容都保存在我的脑海中。

SwiftUI似乎是一个很有前途的选择。它在某种程度上遵循与QML相同的方法。我认为这是一个很有前途的模式。我不反对QML,因为我认为它是个坏主意,只是因为我认为它执行得不好。

我只短暂地使用过SwiftUI。对我来说,这看起来是一个明显的进步,但我觉得它仍然没有戈多那么好。虽然您获得了GUI组件的GUI检查器面板,但您仍然被迫在很大程度上用代码编写GUI。我认为GUI编辑应该同时支持两者。GUI设计是一个非常直观的过程,IMHO。

也许更重要的是,人们仍然没有能力对正在运行的应用程序进行实时更改和修改。对于包含大型项目的复杂GUI应用程序来说,必须在进行测试之前加载这些项目,这是一个杀手锏。

我对Web技术的讨论需要一些免责声明。我几乎没有使用Web技术的经验,我也不太喜欢Web技术。我是一个老派的GUI工具包爱好者,他在一台旧的Amiga1000上使用直觉工具包做了他的第一个GUI东西。

不过,我必须承认,我喜欢网络技术的很多地方。在浏览器中,您可以实时编辑和更改属性,并查看对GUI的即时更改。

这真的很复杂。我学习现代HTML5、CSS和JavaScript框架的个人经验需要相当长的时间。我试图概述不同的网络技术以及它们之间的关系,这可能会让我对此有所了解。

它是为网页制作的,而不是应用程序。当我试图为一个应用程序制作GUI时,我发现我经常遇到假设我们在某个可滚动的网页上的假设所带来的限制。

后者需要一些解释。创建可重用组件的Web方式是通过某种模板。基本上,您只需复制粘贴一大块HTML,多次表示新的自定义组件即可。

这意味着您通常通过模板引擎工作,您正在编写的内容和Web浏览器中正在进行的操作之间没有一对一的映射。

这与Godot形成对比,例如,从开发的角度来看,我可以创建一个自定义组件并实例化它。当我在我的应用程序运行时进行实时修改时,这些事情是相同的。我在实时应用程序中获得了与我编码时相同的节点。这在整个往返过程中都有帮助,并降低了操作过程中的心理复杂性。

现在,使用游戏引擎来制作应用程序似乎很疯狂,因为由于需要不断渲染,它确实窃取了更多的CPU周期。然而,在许多方面,这与基于Web的应用程序相比就相形见绌了。

像VSCode和Atom这样的编辑器表明,您可以使用Web技术制作一些很棒的东西。然而,我们也有像失眠游戏这样的公司,他们尝试用网络工具制作他们的游戏引擎编辑器。

那基本上是一次失败的实验。他们所看到的问题是,它在制作复杂的自定义GUI组件方面工作得太差了。今天大多数Web技术的使用都没有问题,因为他们不使用自定义组件。例如,Atom没有带色轮的颜色选择功能。

使用游戏引擎来制作GUI应用程序似乎很疯狂。人们可能会本能地觉得这样做是错误的。

但我认为,世界可能会以这种方式结束,这是有很好的理由的。这一切都是关于钱在哪里,有什么激励措施在发挥作用。

博彩业规模巨大。今天的游戏具有巨大的复杂性,可以与大多数实际应用程序相媲美。游戏开发面临着一些相当残酷的生存条件。

它们必须允许开发非常高性能的代码,这样才能从您的计算机中榨取每一分性能。他们必须在迭代的同时做到这一点,在制作游戏时,实验必须非常快速和简单。游戏几乎是被定义的,而不是你可以预先明确定义的。要想让游戏变得正确,需要进行大量的调整、实验和游戏。

这使得游戏引擎解决了我们这些从事大型复杂GUI应用程序开发的人所面临的问题。实时修改运行代码在游戏引擎世界中是很正常的事情。它必须是。你不能在每次你想要调整某个你正在尝试的特定级别的东西时重新加载整个该死的东西。

把这一点与投入到这个问题上的巨额资金结合起来。大型复杂的GUI应用程序是一个很小的利基市场,而游戏则不是。

这就是为什么为机器人制造模拟器的人最终改用游戏引擎的原因。引擎市场意味着游戏引擎在质量、性能和易用性上远远超过机器人模拟器。

由于规模经济的原因,这种利用看似无关的奇怪东西的方式并不是什么新鲜事。例如,特斯拉的理念是,他们没有使用定制的汽车电池制造汽车,而是选择了一个看似疯狂的想法,使用7000个笔记本电脑电池为他们的汽车提供动力。

这看起来像是一个荒谬的解决方案,但它奏效了,因为标有标签的笔记本电脑太大了,这使得笔记本电脑的电池真的很好很便宜。

这将发生在传统的GUI工具包中:它们将落后于竞争激烈的游戏引擎世界中正在发生的事情。

使用游戏引擎的主要缺点是经常渲染,这会导致更高的恒定GPU和CPU使用率。尽管许多读过本文的人都反复向我指出,Godot实际上有一个低CPU使用率模式。显然,这仅在需要重新渲染对象时才会渲染。也许我们可以既吃蛋糕又吃蛋糕?

我写这篇报道时认为戈多是解决制作大型复杂GUI的人所面临的挑战的答案。但也许这实际上是每个人的解决方案。据我所知,Godot引擎给解决方案增加了20-30MB的开销。对于相当中等规模的应用程序,这可能是可以接受的。它似乎与我的日常编辑器TextMate有很大关系,TextMate的大小为30MB。然而,与Atom编辑器相比,它的容量高达500-600MB,这是非常划算的。

那么为什么要跳到Web技术来获得跨平台GUI应用程序呢?我们有一个工具,Godot,它可以在所有主要平台上运行,使用最少的资源,任何人都可以快速上手。

谦虚地说,现实是网络技术更为人所知,这将使它们继续占据主导地位。然而,我认为对于大型、复杂的GUI应用程序,我们一直缺乏选择,而Web技术根本不能满足我们的需求。如果戈多想要打入应用程序开发市场,他们可能不得不像特斯拉一样,从高性能跑车开始,然后一路向下发展到日常用车。

百闻不如一见。不确定你是否可以用戈多做真正的应用程序?看看这些家伙中的一些人。我们请到了阿尔弗雷德·雷诺德·鲍迪希,他很友好地分享了他使用戈多制作特雷洛克隆人的经验。

我们有安德鲁·伍尔德里奇,他在戈多制作了这本内容广泛的RSS阅读器指南。

也有一些相当壮观的例子,比如用来制作奇幻世界地图的WonderDraft。

而我。

.