学习笔记--VSC++DX UI的创建管理

一、UI的管理创建

** **UI其实也是一张一张图片来实现完成，例如说按钮和进度条，按钮是两张或者三张图片，按下、悬浮、未使用几种状态分别对应一张图片，然后根据鼠标的选择，来选择需要在精灵中渲染出来的图片是那一张。进度条就是两张图片，一张进度条的底图，一张进度条的进度图，在渲染时，不停的增加进度图渲染的图片RC值，使RC.Right值不断增加，进而实现进度条不断增加的效果。

1、UI的管理类创建

    由于UI包含很多种类，包括进度条，按钮，勾选框，文字框等等等，并且一个游戏也不可能只有一两个UI内容。UI内容增加后，如果全部在窗口的管理类WinManager里面添加，则会有许多杂乱的内容，难以管理，所以需要一个同意的管理类来进行管理。

    之前的笔记中，我们创建了一个单例，所以此UI管理类同样可以仿照WinManager，继承一下单例进行管理，然后在WinManager中调用此UIManager即可。

（1）UI管理类创建

    UI同图片一样，也需要初始化更新渲染的函数，在UIManager类中，实现此三个函数。

    初始化函数主要完成的工作：1、初始化各个UI控件的对象，2、将创建的各个UI控件加入到创建的UI列表中，在此我使用map，原因是map列表的存储方便，可以利用key值进行快速的查找，方便调用后续各个UI控件中的函数。

    更新函数完成工作：1、遍历UI控件列表，然后调用所有UI控件中的更新函数。2、执行单个特定UI控件的功能函数。

    渲染函数：1、渲染函数主要功能就是遍历UI控件列表，渲染所有的控件。

（2）单个UI控件的父类创建

    UI控件会有一些共有的功能，比如是否启用，位置信息等，这些共有的功能放在一个UI控件的父类CUIObject中，后续的各个特定功能的UI控件由这个父类继承而成。

    同样，UI对象中也有初始化，更新，渲染三个函数，因为父类我们并不需要创建对象，所以直接写为纯虚函数即可。

    ![](https://i-blog.csdnimg.cn/direct/8e7a399d4d414f64b742fae497fd43f8.png)

    bEnable变量就是控制UI是否启用的bool值，SetPos函数则是设置UI锚点在窗口中的位置，SetUiRect则是设置在UI在屏幕中的作用范围RC值。

    ![](https://i-blog.csdnimg.cn/direct/e0aebe4ad3b749e59db9a8f70696a5de.png)

2、UI实例--进度条

    进度条中，需要的变量有背景图、进度图两张图，以及进度条当前的进度百分比。创建时继承父类CUIObject，重写父类中的初始化更新渲染函数。

继承CUIObject创建进度条类

（1）进度条初始化

    在初始化中，创建背景图，创建更新图，设置两张图片的位置，设置进度条初始进度。

进度条初始化

    这里我设置了两张图的锚点为图片的中心点，图片位置放在了屏幕中心下方，初始进度为0，初始可用bool值为false。

（2）进度条更新函数

    进度的主要功能，就是增加进度条的百分比，然后根据百分比，设置进度图的显示RC，因为精灵绘制图片时，RC值就是控制原图中需要绘制的区域，所以只需要增加RC.right值就可以实现进度条的增加。

更新函数

    更新函数中，if语句是控制是否进入更新函数，如果UI启用变量bEnable为false时，就不进入更新函数，此方法在渲染函数中也会使用。

（3）进度条渲染函数

    渲染函数的实现就简单很多，直接调用两张图片的渲染函数就可。不过需要注意的是，在DX中，先调用的渲染图片，会被后渲染的图片覆盖，所以在写渲染时，背景图的渲染需要写在上面。

3、UI实例--按钮

    同样的，按钮类也继承父类CUIObject，重写初始化，更新，渲染函数，不同的是，按钮可能有的是只需要一张图，有的需要三张图，所以创建图片这里不在初始化函数中创建，这里重载三个构造函数，在构造函数中创建按钮所需要的图片。

    除了需要图片，按钮也需要两个bool值，判断是否按钮被按下，以及按钮是否在悬浮状态。

按钮类的具体结构

（1）按钮的构造及初始化函数

    按钮的构造函数创建按钮需要的几张图片，在初始化中设置按钮是否启用的bEnable值，及按钮的屏幕作用RC。

按钮构造函数

按钮的初始化函数

（2）按钮的更新函数

    按钮的更新函数主要功能，是改变按钮几个状态的bool值，改变状态的方法是通过拿到鼠标的位置，然后判断鼠标的位置是否在当前按钮的作用范围m_uiRC中，在范围内，再判断是否鼠标按下，按下后再改变状态为按下的状态。

按钮的更新函数

（3）按钮的渲染函数

    按钮的渲染，不同于进度条，按钮需要根据当前按钮的状态，选择需要渲染的图片，只渲染这一张图片即可。

按钮渲染函数

    注意，渲染当前图片时，需要先将当前图片的位置设置到按钮位置。

4、在UI管理类使用

（1）管理类初始化

    前面已经介绍，管理类初始化需要初始化各个UI控件，然后加入UI列表中。

初始化中创建UI

（2）管理类的更新

    UI管理类的更新函数实现每个控件的一些功能，比如这里写了按P键才显示进度条，进度条100%后，隐藏进度条。按钮写了按钮按下后，执行窗口管理类的test（）函数，这个函数我写的是改变一张飞机图片的颜色。

管理类的更新函数

（3）管理类的渲染

    渲染函数直接遍历列表，渲染所有的控件。

（4）UI管理类在窗口管理类中的使用

    同样是单例继承下来的类，同窗口管理类一样，定义一个宏UI，后续使用UI->就可以调用UI管理类中的函数。

    在窗口管理的初始化中调用UI的初始化函数

    在窗口管理的更新函数调用UI的更新函数

    在窗口管理的渲染函数调用UI的渲染函数，同样，由于UI是显示在最上层的界面图片，所以UI的渲染写在最后。

    最后看一下程序的执行效果：