C++游戏引擎开发指南：深入理解UIMask实现原理与应用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00264/article/details/148602136

C++游戏引擎开发指南：深入理解UIMask实现原理与应用

cpp-game-engine-book 从零编写游戏引擎教程 Writing a game engine tutorial from scratch 项目地址: https://gitcode.com/gh_mirrors/cp/cpp-game-engine-book

前言

在现代游戏开发中，用户界面(UI)系统是游戏引擎不可或缺的重要组成部分。本文将基于一个C++游戏引擎项目，深入探讨UIMask的实现原理及其在游戏UI开发中的应用。UIMask作为UI系统中的核心功能之一，能够实现UI元素的区域裁剪效果，是制作复杂UI界面的基础工具。

UIMask概述

UIMask（UI遮罩）是一种用于限定UI元素显示范围的技术。简单来说，它允许开发者指定一个区域，只有在这个区域内的UI内容才会显示，区域外的内容将被裁剪掉。这种技术在游戏开发中应用广泛，例如：

滚动视图(ScrollView)的内容裁剪
圆形头像的显示
特殊形状的UI元素
对话框的渐隐效果

技术原理：模板测试

UIMask的核心实现依赖于图形渲染中的模板测试(Stencil Test)机制。模板测试是OpenGL提供的几种片段测试之一，与深度测试(Depth Test)类似，但用途不同。

模板缓冲区

模板测试使用一个称为模板缓冲区的特殊缓冲区，它是一个与屏幕尺寸相同的二维数组，每个像素对应一个模板值。在渲染过程中，GPU会根据设定的规则比较当前片段的模板值与缓冲区中的值，决定是否丢弃该片段。

UIMask工作流程

遮罩渲染阶段：
- 开启模板测试
- 设置模板测试规则：所有片段测试失败
- 设置模板操作：测试失败时递增模板值
- 渲染遮罩图形，将指定区域的模板值设为1
UI元素渲染阶段：
- 设置模板测试规则：仅模板值为1的片段通过
- 渲染UI元素，只有遮罩区域内的部分会显示

这种两阶段渲染过程确保了UI元素只在遮罩定义的区域内可见。

实现详解

UIMask类实现

在C++游戏引擎项目中，UIMask类继承自Component基类，主要实现以下功能：

void UIMask::OnPreRender() {
    Component::OnPreRender();
    // 开启模板测试
    RenderDevice::instance()->Enable(RenderDevice::STENCIL_TEST);
    // 设置默认模板值为0
    glClearStencil(0);
    // 设置所有片段测试失败
    glStencilFunc(GL_NEVER, 0x0, 0xFF);
    // 测试失败时递增模板值
    glStencilOp(GL_INCR, GL_INCR, GL_INCR);
}

这段代码完成了模板测试的初始设置，确保只有遮罩图形渲染的区域会获得模板值1。

UIImage适配

为了使UI元素能够响应遮罩效果，需要对UIImage类进行修改：

void UIImage::OnPreRender() {
    Component::OnPreRender();
    // 仅当模板值为1时通过测试
    glStencilFunc(GL_EQUAL, 0x1, 0xFF);
    // 保持模板值不变
    glStencilOp(GL_KEEP, GL_KEEP, GL_KEEP);
}

这样设置后，UIImage将只在模板值为1的区域（即遮罩覆盖的区域）显示。

实际应用示例

让我们看一个实际的UIMask应用场景：创建一个圆形裁剪的背包界面。

创建UI结构

void LoginScene::CreateUI() {
    // 创建UIImage对象
    auto go_ui_image = new GameObject("image_mod_bag");
    go_ui_image->set_layer(0x02);
    go_ui_image->AddComponent("Transform");
    auto ui_image_mod_bag = dynamic_cast<UIImage*>(go_ui_image->AddComponent("UIImage"));
    ui_image_mod_bag->set_texture(Texture2D::LoadFromFile("images/mod_bag.cpt"));

    // 创建UIMask对象并设为UIImage的子对象
    auto go_ui_mask = new GameObject("mask_mod_bag");
    go_ui_mask->set_layer(0x02);
    go_ui_mask->SetParent(go_ui_image);
    auto transform_ui_mask = dynamic_cast<Transform*>(go_ui_mask->AddComponent("Transform"));
    auto ui_mask_mod_bag = dynamic_cast<UIMask*>(go_ui_mask->AddComponent("UIMask"));
    ui_mask_mod_bag->set_texture(Texture2D::LoadFromFile("images/mod_bag_mask.cpt"));
}

运行时控制

可以通过代码动态控制遮罩的启用与禁用：

void LoginScene::Update() {
    if(Input::GetKeyUp(KEY_CODE_A)){
        auto go_ui_mask = GameObject::Find("mask_mod_bag");
        go_ui_mask->set_active(!go_ui_mask->active());
    }
}