游戏GUI

在过去的8年里,我经过数次失败的GUI系统设计经历,最终找到了一种算是可以的方案。这个方案使用一种类似MVC的架构。主要有以下几个大的部分:

【sprite系统】

sprite是一个从古老的游戏中一直演化过来的概念,而在这里,它代表了屏幕上的一个次元(层)中所有可见元素。

它描述了一个屏幕上的矩形,以及和其他矩形的关系。

它具有自己的更新和绘制方法。

它具有自己的各种特性,比如可拖动,比如事件冒泡。

同时,它还有一个称为控制器的东西,这个东西会在创建或者attach的时候对sprite进行修改或者初始化。会处理sprite的输入事件,并可以接管sprite的绘图处理。

【UI元素】

UI元素是sprite的控制器接口的实现。并且会在初始化时去创建sprite,以达到显示的目的。

一个UI元素就代表一个UI控件,比如一个编辑框,或者是一个combobox。

每个UI元素上都有数个事件的插槽,应用程序可以通过向这些插槽插入事件处理来关注UI元素。

【UI脚本】

UI元素的插槽不仅可以插入一个事件处理,还可以插入一个UI脚本的方法索引。

而脚本系统和脚本方法索引,都是接口和无特定指向意义的数值类型,方便脚本扩展。

【引擎接口】

因为UI系统中会用到绘图,贴图,声音,为了通用性,这些都被抽象为接口,以便于不同引擎的支持。

但是这个里面有一点非常重要,就是一定不要依赖于某个特定引擎或者平台的特性进行接口设计,那会让你束手束脚。

【资源管理】

因为UI系统中会涉及到比较多资源,所以,所有资源都被统一管理起来。通过字符串来进行资源索引。返回的是资源的接口指针。

在资源管理内部,对每种资源都有一个缓冲池。当然只做按名字缓冲,毕竟比较深层次的资源缓冲还要依赖引擎接口来完成。

资源里主要有以下几种:图像(贴图组合动画),贴图,声音,字体。

【文字绘制】

文字绘制,由字体资源和绘图引擎接口共同来完成。


字体资源里有个中间件,用来管理字体的缓存,目前是采用256级灰度点阵来存储,在各种绘图引擎和平台中都可以方便的转化为屏幕图元,并且还有灰度来保障边缘混淆的正确显示。

【关于绘图系统】

绘图系统中,GUI的需求主要是 贴图, 绘制简单的矩形边框矩形填充, 绘制线条, 裁剪。

GDI绘图,一开始就被放弃了,因为它的整个系统的绘图特性过多,会导致关注点的分散。为了替代GDI绘图,我实现了一套内存位图的绘图库。不过最终这个库还是会把结果丢到GDI的HDC上,只是中间过程里,都是在内存中进行图像的各种混合。

DX和OGL,因为这两个都可以支持贴图,所以实现UI系统需要的接口完全没有问题。在实际GUI的编码和测试中,我使用HGE这个DX的封装接口来间接实现了UI系统所需的绘图接口。


【数据源】

UI系统里,每个UI元素都是从数据源中进行读取并创建的。

数据源是一个纯虚接口的形式,在实际编码和测试中,我使用的是XML作为数据源。

XML既有良好的可读性,又易于程序处理。非常适合在这里作为数据源。

【UI编辑器】

相应的,生成数据源的部分,就是靠UI编辑器。

UI编辑器本身也是通过UI系统实现的。

UI编辑器主要包括几个部分:布局编辑器、贴图捡取、属性编辑。其中布局编辑器这里,每个控件的绘制仍旧调用的是它自身的绘图方法,不过为了防止触发控件本身的事件,我用一个控件编辑容器树,代替了原来的控件元素树,树结构还是使用原有的结构,控件被作为空间编辑容器的子元素。


【历史】

2002年 第一版UI系统   绘图使用DIRECTDRAW,采用UI元素和UI视觉元素统一的方法,采用一棵树进行绘制和UI自身的管理。没有数据源,没有编辑器,没有脚本系统,完全试验品。失败原因:UI元素的设计问题,以及架构不完善。

2005年 第二版UI系统 绘图采用D3D,采用UI元素和UI视觉元素统一的方法,采用一棵树进行绘制和管理。无数据源,无编辑器,无脚本系统,有事件处理插槽,在客户端进行了小规模的使用。

2008年 第三版UI系统 绘图采用抽象接口,有GDI(内存位图)和D3D实现。采用UI元素和UI视觉元素统一的方法,一棵树绘制和管理。有数据源,无编辑器,无脚本系统,仅在开发和测试环境内进行了使用。失败原因:纠结在UI元素布局的管理上,后发现是UI元素的设计有问题。

2009年 第四版UI系统 绘图采用抽象接口,有GDI(内存位图)和D3D(HGE),采用UI元素和UI视觉元素统一方法,一棵树绘制和管理,有数据源,有编辑器。失败原因:UI元素和视觉元素统一的方法,给UI元素的管理和UI元素的逻辑实现带来很大限制。

2011年 第五版UI系统 绘图采用抽象接口,有GDI(内存位图)和D3D(HGE),采用UI元素和UI视觉元素分开的方法,分为一颗逻辑树,一颗视觉树。数据源仍旧用XML,用第四版的编辑器实现方式。
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Pygame是一个Python库,可以用于创建2D游戏和交互式应用程序。它提供了各种功能,例如图像处理、音频处理、用户输入处理等等,可以帮助您轻松地创建游戏和应用程序。 要创建一个Pygame小游戏GUI,您需要了解Pygame GUI库。Pygame GUI库是一个基于Pygame的GUI库,可以帮助您创建GUI元素,例如按钮、标签、输入框等等。您可以使用Pygame GUI库轻松地创建交互式应用程序和游戏。 下面是一个简单的Pygame小游戏GUI示例,其中包含两个按钮和一个标签: ``` python import pygame import pygame_gui # 初始化Pygame pygame.init() # 设置窗口大小 win_width, win_height = 640, 480 win = pygame.display.set_mode((win_width, win_height)) # 创建GUI管理器 gui_manager = pygame_gui.UIManager((win_width, win_height)) # 创建按钮 button1 = pygame_gui.elements.UIButton(relative_rect=pygame.Rect((50, 50), (100, 50)), text='Button 1', manager=gui_manager) button2 = pygame_gui.elements.UIButton(relative_rect=pygame.Rect((50, 150), (100, 50)), text='Button 2', manager=gui_manager) # 创建标签 label = pygame_gui.elements.UILabel(relative_rect=pygame.Rect((200, 100), (200, 50)), text='Hello, Pygame!', manager=gui_manager) # 游戏循环 running = True while running: # 处理事件 for event in pygame.event.get(): if event.type == pygame.QUIT: running = False gui_manager.process_events(event) # 更新GUI gui_manager.update(pygame.time.Clock().tick(60)) # 绘制GUI游戏场景 win.fill((255, 255, 255)) gui_manager.draw_ui(win) pygame.display.update() # 退出游戏 pygame.quit() ``` 在这个示例中,我们首先初始化了Pygame,然后创建了一个窗口。接下来,我们创建了一个Pygame GUI管理器和两个按钮和一个标签。游戏循环中,我们处理事件、更新GUI、绘制GUI游戏场景。最后,我们退出游戏。 这只是一个简单的示例,您可以使用Pygame GUI库创建更复杂的GUI元素和游戏

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值