如何处理GUI元素?


12

注意:我计划制作自己的GUI系统。这对于学习,轻量级,只有我需要的部分,与游戏的联系等将非常有用。

我在考虑该怎么做。我的意思是:

  • 单选按钮
  • 在此处输入文本框
  • 纽扣
  • 滑杆
  • 选框

我还没有考虑如何制作它们。但是更多的是他们将如何发展。

理念

我希望每个州都需要东西,所以几乎所有州都有一个元素容器。每个元素都是一个GUI件。

这些都有位置,图形等。

我更坚持的是他们的逻辑。

我的想法是,允许模块化和简单性是避免使用MainMenuStartButton。一个OptionsOneBackButton等等,而不是能够做Slider slide1; 或按钮启动;

取而代之的是,每个函数都将具有boost :: function到GUI名称空间中的函数,例如Gui :: StartButtonClick或GUI :: ColourSliderHover。

我只是想知道这是否会异常缓慢。

因此,有没有简单,简单的方法来制作游戏的GUI?没有Qt,wxWidgets或其他任何东西。

Answers:


15

GUI不是一个简单或简单的问题,尤其是当您进入游戏并渴望拥有动态,有趣的菜单时。

您可以做的一件“简单”的事情就是尝试使用中间件。有一个关于这一个问题在这里

如果您要自己动手,我建议您做一些事情。

  • GUI元素通常具有一个“父”,另一个GUI元素或一个“窗口”,或类似的东西。通过向上指点或使父母指向下指您可以在所有子项上设置状态/位置/等。

  • 您可以按组成来构建GUI元素。许多小部件都有标签(几乎全部都有标签),使标签的概念成为复制或粘贴代码或尝试从基类继承的组件或其他UI元素的子元素可能很有意义。具有标签功能。

  • 许多所谓的专用窗口小部件只是伪装的按钮。复选框只是带有状态和特殊图像的按钮。单选按钮只是与其他单选按钮具有元状态(在任何给定时间只有一个处于活动状态)的复选框。利用这个优势。在我开发的一款游戏中,“复选框”是完全通过脚本编写和美工来使用常规按钮完成的。

  • 对于第一个项目,请考虑采用更直接的路线。是的,让您的可操作事件委托并分配元素创建所需的内容(即onMouseButtonDown,onMouseButtonUp,onHover等),但考虑硬编码您要发生的其他事情(例如,悬停颜色变化,按钮按下声音),直到得到一些东西为止功能。一旦达到这一点,就可以考虑制作该行为数据(即,在按钮上具有用于“按下声音”的变量),或者可以考虑拥有UI元素用来定义在创建它们时就附加到它们的行为的组件。

  • 代表并没有那么慢,您可能不会有太多的小部件来成为问题,并且菜单代码通常不会产生太大的影响。我现在不必太担心游戏的性能。一旦启动并运行代码,请不要选择幼稚的算法和配置文件。


2
对于更复杂的GUI东西,您很快就会需要某种布局管理。基本布局(例如HBox和VBox)比使用绝对坐标定位所有元素更容易使用。示例:web.archive.org/web/20100410150433/http//doc.qt.nokia.com/4.6/…这使您的GUI易于使用,但实施起来却不那么容易;)
bummzack 2010年

8

在过去的几年中,主流UI工具包已经取得了一些非常有趣的突破。游戏用户界面也在不断发展,但步伐有所放缓。这可能是因为开发功能齐全的UI子系统本身就是一项重大任务,并且很难证明资源投资的合理性。

我个人最喜欢的UI系统是Windows Presentation Foundation(WPF)。确实,UI差异化的潜力将进一步提升。以下是一些更有趣的功能:

  1. 默认情况下,控件是“无外观的”。控件的逻辑和外观通常是分离的。每个控件附带默认样式和模板,以描述其默认视觉外观。例如,按钮可以表示为带有外部笔划,纯色或渐变背景以及内容提示器(以显示标题)的圆角矩形。开发人员(或设计人员)可以创建自定义样式模板,这些模板可以更改控件的外观和(在一定程度上)行为。样式可用于覆盖控件的简单属性,例如前景色/背景色,模板等。模板会更改实际的视觉结构。

  2. 样式和模板可能包含“触发器”。触发器可以侦听某些事件或属性值(或值的组合),并有条件地更改样式或模板的各个方面。例如,当鼠标悬停在按钮上时,按钮模板通常会在“ IsMouseOver”属性上具有触发器,以更改背景颜色。

  3. UI元素有几种不同的“级别”,从功能最少的轻量级元素到功能齐全的重量级控件。这使您在构造UI方面具有一定的灵活性。最简单的UI元素类,UIElement没有样式或模板,仅支持最简单的输入事件。对于状态指示器之类的简单元素,此功能可能就是您所需要的。如果您需要更广泛的输入支持,则可以从FrameworkElement(扩展到UIElement)获得。传统的小部件通常从衍生而来Control,它扩展FrameworkElement并添加了自定义样式和模板支持(以及其他功能)。

  4. WPF使用保留的,可伸缩的,与分辨率无关的矢量图形模型。在Windows上,使用Direct3D渲染和组合WPF应用程序。

  5. WPF的引入包括称为Xaml的新的声明式编程语言。基于Xml的Xaml是用于声明UI“场景”的首选语言。它实际上很漂亮,尽管乍看起来看起来很相似,但与XUL等现有语言(功能更强大)有根本的不同。

  6. WPF具有非常高级的文本子系统。它支持大多数(如果不是全部)OpenType字体功能,双向ClearType抗锯齿,子像素定位等。

“好,太好了,这与游戏开发有什么关系?”

当WPF仍在开发中时(当时称为“ Avalon”),我在佐治亚理工学院上了视频游戏设计课程。我的最后一个项目是回合制策略游戏,我想要一个功能强大的UI。WPF / Avalon似乎是一条不错的选择,因为它具有一整套功能齐全的控件并且使我能够完全改变这些控件的外观和感觉。结果是一款具有漂亮而清晰的用户界面的游戏,其功能级别通常只在功能完善的应用程序中才能看到。

现在,在游戏中使用WPF的问题在于它的重量很大,并且在其自己的“沙盒”中进行渲染。通过这种方式,我的意思是在Direct3D或OpenGL游戏环境中没有支持WPF的托管方式。可以在WPF应用程序中托管Direct3D内容,但是您将受到WPF应用程序帧率的限制,该帧率通常低于您想要的帧率。对于某些类型的游戏,例如2D策略游戏(我当前的WPF游戏项目的屏幕截图),它仍然可以正常工作。对于其他事情,没有那么多。但是您仍然可以在开发自己的UI框架时应用WPF的一些更引人注目的架构概念。

还有一个WPF的开源,不受管理的C ++ / Direct3D实现,称为“ WPF / G(游戏的WPF)”](http://wpfg.codeplex.com/),它专门设计用于在Win32和Win32上的游戏中使用和Windows Mobile。主动开发似乎已经停止,但是上一次我检出它时,它是一个相当完整的实现。与Microsoft的WPF实施相比,文本子系统是真正缺少的一个领域,但是对于游戏来说,这并不是一个大问题。我可以想象将WPF / G与基于Direct3D的游戏引擎集成起来将相对简单。走这条路线可以为您提供功能强大,与分辨率无关的UI框架,并广泛支持UI定制。

只是为了让您了解基于WPF的游戏UI的外观,这是我的宠物项目的屏幕截图:

我正在进行的基于WPF的游戏项目的屏幕截图


NoesisGUI使用WPF。很好,但是我不了解WPF,我觉得学习起来很痛苦。我个人更喜欢使用Web Stack方法。
user441521 2015年

2

我将使用直接的GUI,例如:http : //code.google.com/p/nvidia-widgets/

nVidia窗口小部件基于MollyRocket的IMGUI(即时GUI)。

我认为这几乎与GUI所能获得的一样简单。

一切取决于您的需求。


1
很简单,是快速调试工作或原型制作的理想选择,但是UI和Instant GUI中的游戏逻辑之间的耦合量使我感到恐惧。
tenpn

2

在我正在开发的游戏中,我们有自己的自定义GUI框架。我发现它非常简单,但是仍然可以做我想做的所有事情。我不知道这是否是许多其他人使用的“模式”,但对我们来说效果很好。

基本上,所有按钮,复选框等都是Element类的子类。和元素具有事件。然后,我们有了CompoundElements(它们本身是Element的子类),其中包含其他元素。在每个循环中,将调用三种方法:processEvent(事件),tick(时间)和draw(surface)。然后,每个CompoundElement在其子元素上调用这些方法。在这些调用中(尤其是processEvent方法),我们将触发所有相关事件。

所有这些都是使用Python(比C ++慢得多的语言)编写的,并且运行得很好。


2

如果您将需要相当复杂的UI,最好的选择可能就是嵌入HTML渲染器-您将获得习惯使用的所有常见UI原语,并且可以向游戏中添加复杂的UI并按照这种方式进行操作用户期望,看起来很棒并且运行速度很快(因为此时浏览器具有相当优化的渲染管道)。

有一些库可用于将Webkit嵌入游戏中:Berkelium是我推荐的库,我听说Awesomium非常好(由EVE Online使用),而CEF也是如此(由Steam使用)。您也可以尝试嵌入Gecko-这很难做,但也有一些很酷的优点。我目前在所有游戏UI中都使用Berkelium(它替换了自定义UI元素和本机UI的组合,并大大减少了我需要编写的代码才能使事情正常运行)。


^这100%。我为缺少游戏实现的良好网络堆栈而感到难过。Web堆栈对于UI来说非常出色,并且需要开始在所有游戏中都变得更加常见。到目前为止,我尝试使用的库很难实现,或者不是100%正确的html / css / javascript。我目前正在研究Coherent Labs,它看起来很有前途,但价格昂贵,但确实有用于几个引擎的独立版本。
user441521 2015年

2

确保您确实需要游戏使用复杂的GUI系统。如果您要制作计算机RPG,那么显然这是必需的。但是对于赛车游戏来说,不要过于复杂。有时,只需渲染纹理(自定义按钮图像)并在输入函数中包含一些带有硬编码坐标的“ if”语句即可完成工作。游戏状态机(FSM)可以帮助您实现这一简单方法。或者,在中间的某个地方,忘记复杂的层次结构和场景图方法,而只是拥有一个“按钮”类,它将上述纹理和输入检查打包到简单的函数调用中,但不会做任何复杂的事情。

确定需求很重要。如果不确定,请提醒自己YAGNI


1

下面是对OpenGL内置的GUI的一个示例(源代码和全部),特别为Slick2D称为Thingle这是一个端口Thinlet

Slick2D的另一个GUI是您可能要签出的SUI

我将遵循这些示例,并使用XML驱动的GUI。尽管这些项目是过时/过时的,但您也许可以从中汲取一些想法。


1

我认为“弄清楚它”的最佳方法之一是看看高度开发的GUI框架如何工作,例如.NET中的Windows Forms。

例如,它们都是控件,具有位置,大小,子控件列表,对其父控件的引用,该控件可用于其Text用途的属性,以及各种可重写的功能和预定义的动作。

它们都含有各种各样的活动,如ClickMouseOverResizing

例如,当子控件更改时,它会沿链发送通知,通知其布局已更改,然后所有父控件都调用PerformLayout()

同样,自动调整大小和自动排列是这些GUI的常见功能,允许程序员简单地添加控件,父控件自动调整或排列它们。


1

出于利益考虑,我认为我会抛弃Scaleform。基本上,艺术家可以使用illustrator,photoshop等,然后UI设计器使用Flash来布局所有交互。然后,Scaleform将其转换为引擎的代码(这就是我对它的理解,因为我没有使用过)。孤岛危机Warhead在他们的大厅使用了这个系统。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.