这是一个关于在游戏中使用 Clay 和 NanoVG 实现自定义 UI 的系列文章的第二部分。主要内容如下：

• 核心内容：集成实际库以设计游戏 UI，主要涉及 Clay 和 NanoVG，NanoVG 虽未积极维护但仍可用，使用时需注意可能存在的 bug。

• 初始化与销毁：

  • Clay 是头文件库，需在项目中包含其实现；NanoVG 不是头文件库，但其后端（OpenGL）是。创建 C 文件包含相关库的头文件。
  • 定义结构体context来存储 NanoVG 上下文和 Clay 竞技场等，使用std::unique_ptr管理 NanoVG 上下文的销毁。在游戏循环中初始化和销毁 UI 上下文。

• 输入管理：

  • 每帧向 Clay 提供帧缓冲区大小、鼠标位置和状态、鼠标滚轮状态等输入。通过设置输入控制来获取这些值，在初始化时设置输入控制。
  • 实现begin_render()和end_render()方法，在游戏循环中调用，将输入传递给 Clay 并准备渲染 UI 代码。

• 实现渲染器：

  • Clay 函数在其竞技场中创建元素，Clay_EndLayout()将元素编译为渲染命令数组。
  • 为每种渲染命令实现静态函数，如绘制填充矩形、边框、文本、纹理等，还实现了测量文本的函数并提供给 Clay。
  • 编写渲染循环，遍历渲染命令数组并调用相应的渲染函数，同时处理 OpenGL 上下文状态的保存和恢复。

• 解决冲突输入：

  • 由于渲染 UI 后处理输入会导致输入穿透到游戏场景，需要在渲染 UI 前处理输入。添加begin_prerender()和end_prerender()方法，在游戏循环中更新处理输入的逻辑。

• 布局构建器 API 和按钮：

  • 抽象 Clay API 为“布局构建器”类layout_builder，提供更简单的 API 来创建通用元素、文本元素和按钮。
  • 实现capture_mouse()方法用于捕获鼠标，begin_element()和end_element()方法用于创建元素，text()方法用于创建文本元素，button()方法用于创建按钮，并处理按钮的点击状态。
• 展示：在show_gui()函数中使用布局构建器 API 展示 UI 布局，包含根容器、侧边栏和按钮等元素，按钮在不同状态下有不同的样式。

总结：这部分内容详细介绍了在游戏中使用 Clay 和 NanoVG 实现 UI 的各个方面，包括初始化、输入管理、渲染和布局构建等，为后续实现文本输入组件做准备。