企业官网建设流程全解析

• 直播
• 音视频

导读：本文围绕开源 OBS 插件 input-overlay 仓库中的 GameSir G7 Pro 官方预设（presets/gamesir-g7-pro/README.md）展开，系统讲解如何在 OBS 中为 GameSir G7 Pro 手柄配置键盘、手柄与鼠标输入可视化叠加层，覆盖五种官方配色、三种十字键（D-pad）纹理的选配逻辑、统一 JSON 配置文件的字段含义，并结合仓库源码（element_button.cpp、element_analog_stick.cpp、element_trigger.cpp 等）解释按钮点亮、摇杆位移、扳机填充等动态效果的底层渲染原理。读完本文，你可以独立完成该预设的安装配置、纹理切换与参数调优，并理解 input-overlay 手柄 overlay 的工作原理。

预设概览：一套布局，五种配色，三种十字键

GameSir G7 Pro 是采用 Xbox 布局的第三方手柄。本预设由社区创作者 Mobrin（借助 Claude AI）制作，是一个非官方粉丝自制 overlay，与 GameSir 或微软无任何隶属或背书关系（见 CREDITS.md）。

该预设的核心设计理念是：

• 覆盖手柄的五种标准配色：Shadow Ember（红黑）、Mech White、Amber Flame（橙）、Plum Purple、Metallic Silver；
• 每种配色都提供控制器随附的三种十字键样式（圆盘四圆点、圆盘凸起十字、传统十字键）；
• 所有纹理共用同一个布局配置——全系列仅有一个配置文件gamesir-g7-pro.json（位于 presets/gamesir-g7-pro/gamesir-g7-pro.json）。

这意味着：无论你选择哪个颜色、哪种十字键，OBS 源中加载的 JSON 配置都不变，只需切换纹理图片即可完成外观更换，配置零改动。

在 OBS 中安装与配置（4 步上手）

安装前提是已经安装 input-overlay 插件（插件注册的 OBS 源类型为input-overlay，见 src/sources/input_source.cpp）。随后按以下步骤操作：

1. 在 OBS 中添加Input Overlay源（来源 → 添加 → Input Overlay）。
2. Overlay image file（叠加图片文件）：根据你的手柄配色与十字键样式，从下方纹理表选择对应的 PNG 文件（示例：gamesir-g7-pro-shadow-ember-cross.png）。
3. Overlay config file（叠加配置文件）：选择仓库中的gamesir-g7-pro.json，即 presets/gamesir-g7-pro/gamesir-g7-pro.json。
4. 点击Reload gamepads（重新加载手柄），并在Gamepad id（手柄 ID）下拉框中选中当前连接的手柄。

配置完成后，如果之后想更换配色或十字键，只需在图片文件一项换一张纹理，配置文件保持不变。

属性面板背后：源码中的联动逻辑

以上操作步骤与插件源码的 OBS 属性面板实现一一对应。在 src/sources/input_source.cpp 的get_properties_for_overlay中：

• 纹理与配置文件分别通过S_OVERLAY_FILE和S_LAYOUT_FILE两个路径属性选择，并注册了file_changed回调：当两者任一变化时重新加载纹理或布局（input_source.cpp）；
• 手柄 ID 下拉框（S_CONTROLLER_ID）与Reload pads按钮（S_RELOAD_PAD_DEVICES）的可见性由配置文件的flags字段控制。当 flags 包含手柄/摇杆相关标志时，插件才会显示手柄选择与死区调节选项；
• 加载配置文件后，file_changed会自动调用reload_pads刷新手柄列表（input_source.cpp），这正是“点击 Reload gamepads 并选择手柄”背后的机制。

纹理选择表：命名规则与 15 种组合

纹理文件的命名模式为：

gamesir-g7-pro-<colour>-<d-pad>.png

配色（5 种）

十字键样式（3 种）

因此共5 × 3 = 15 个纹理文件，均位于 presets/gamesir-g7-pro/ 目录。例如：

• Shadow Ember + 传统十字键 →gamesir-g7-pro-shadow-ember-cross.png
• Mech White + 圆盘四圆点 →gamesir-g7-pro-mech-white-disc.png
• Plum Purple + 圆盘凸起十字 →gamesir-g7-pro-plum-purple-disc-cross.png

统一配置文件深度解析

虽然 README 只要求你直接选择 gamesir-g7-pro.json，但理解其字段有助于后续自定义布局。该文件定义了一个1280 × 960 画布（overlay_width/overlay_height），内部通过elements数组描述每一个可动部件。

顶层字段

其中flags对应 deps/common/layout_constants.h 中的overlay_flag枚举：OF_LEFT_STICK = 1、OF_RIGHT_STICK = 2、OF_GAMEPAD = 4、OF_MOUSE = 8。本文件取值为6，即OF_RIGHT_STICK | OF_GAMEPAD，因此属性面板会显示手柄 ID 选择、Reload pads 按钮以及摇杆死区（S_CONTROLLER_L_DEAD_ZONE/S_CONTROLLER_R_DEAD_ZONE）等选项，而鼠标相关选项被隐藏（可见性判断见 input_source.cpp）。

元素（elements）通用字段

每个元素对象包含：

• id：元素名称（如a、b、dpad_up、left_analog_stick）；
• type：元素类型，对应 layout_constants.h 中的element_type枚举——0为静态纹理（ET_TEXTURE）、2为手柄按键（ET_GAMEPAD_BUTTON）、5为摇杆（ET_ANALOG_STICK）、6为扳机（ET_TRIGGER）；
• mapping：[x, y, cx, cy]，纹理图集中该元素的裁剪区域（未按下状态）；
• pos：[x, y]，该元素在 1280×960 画布上的绘制位置；
• z_level：绘制层级，数值大者绘制在上层；
• 类型专属字段：按键的code（SDL 手柄按键码）、摇杆的side与stick_radius、扳机的side/direction/trigger_mode。

这些字段的解析逻辑集中在 src/util/element/element.cpp（read_mapping读取裁剪矩形、read_pos读取位置），以及各元素子类的load()中。

本预设的元素清单

code字段对应 SDL3 的手柄按键枚举（与 Xbox/XInput 布局一致）：SOUTH=0（A）、EAST=1（B）、WEST=2（X）、NORTH=3（Y）、BACK=4、GUIDE=5、START=6、LEFT_SHOULDER=9、RIGHT_SHOULDER=10、DPAD_UP=11、DPAD_DOWN=12、DPAD_LEFT=13、DPAD_RIGHT=14。

功能特性与底层渲染原理

README 声明的四项核心特性，在源码中都有对应的实现路径：

1. 按键按下时点亮

A/B/X/Y、LB/RB、View、Menu、Guide 在按下时点亮。每个按键元素在纹理图集中定义了两个相邻的裁剪区：未按下区（m_mapping）与按下区（m_pressed），按下区位于未按下区下方 3 像素处（m_pressed.y = m_mapping.y + m_mapping.cy + CFG_INNER_BORDER，其中CFG_INNER_BORDER = 3，见 layout_constants.h）。

绘制时，element_gamepad_button::draw 通过settings->is_pad_button_pressed(m_keycode)查询手柄按键状态（input_source.hpp 中按gamepad_name索引按键位图），按下时裁剪按下区纹理，否则裁剪未按下区。

2. 十字键四方向独立点亮

与许多使用单一ET_DPAD_STICK元素的预设不同，本预设将十字键拆分为4 个独立的手柄按键元素（code 11–14），每个方向对应一个独立的纹理裁剪区：

• 圆盘十字键上，点亮的是对应方向的扇区；
• 传统十字键上，点亮的是对应方向的按键臂。

这样“方向独立点亮”的效果无需方向组合判断即可实现，也使得纹理图集中每个方向的按下区可以单独绘制。

3. 摇杆移动与 L3/R3 按压高亮

element_analog_stick.cpp 的draw()展示了摇杆位移公式：

pos.x += pad_axis(SDL_GAMEPAD_AXIS_LEFTX) * stick_radius pos.y += pad_axis(SDL_GAMEPAD_AXIS_LEFTY) * stick_radius

即：摇杆帽的绘制位置 = 基准位置 + 归一化轴值（-1.0 ~ 1.0）× 半径（本预设stick_radius = 38像素）。同时通过SDL_GAMEPAD_BUTTON_LEFT_STICK / RIGHT_STICK检测按压状态，按下时切换到高亮裁剪区（element_analog_stick.cpp）。

4. 扳机从底部向上填充

element_trigger.cpp 读取SDL_GAMEPAD_AXIS_LEFT_TRIGGER / RIGHT_TRIGGER轴值得到 0~1 的progress，在非按钮模式下调用calculate_mapping按比例裁剪纹理高度：

• direction = 1（即DIR_UP，见 layout_constants.h）时，pressed->cy = mapping.cy * progress，同时将裁剪区下边界固定、绘制位置上移，视觉上即为“从底部向上填充”（element_trigger.cpp）；
• 先绘制未按下底纹，再叠加按比例裁剪的填充层，实现平滑的模拟量渐变效果（element_trigger.cpp）。

side字段（0= 左、1= 右，见 layout_constants.h）用于区分左右扳机与左右摇杆；摇杆与扳机的轴/按键常量在 deps/common/keycodes.h 中也有VC_STICK_DATA、VC_TRIGGER_DATA、VC_DPAD_DATA等虚拟码定义，用于区分输入数据类型。

注意事项与常见问题

手柄被识别为普通 Xbox（XInput）手柄

README 明确说明：GameSir G7 Pro 在系统中被识别为标准的 Xbox（XInput）手柄。因此：

• 插件侧无需任何手柄专用驱动或特殊配置，走的是通用手柄钩子（enable_gamepad_hook，见 src/util/config.hpp）与 SDL3 手柄层；
• 所有标准按键、摇杆、扳机、十字键均按 Xbox 布局映射，overlay 的code字段即可直接对应。

额外按键是装饰性的

手柄背部的 L4/R4、迷你肩键 L5/R5，以及 M 键、Share 键，不会作为独立输入发送到 Windows（XInput 协议不传输这些扩展按钮），因此它们在 overlay 中仅起到装饰作用。需要注意：

• 背键（L4/R4）按下时会表现为其所映射到的那个标准按键（例如映射到 A/B，则 overlay 上亮起的是 A/B）；
• 如果你希望 overlay 上显示这些按键的独立反馈，仅靠本预设无法实现——这是输入协议层面的限制，而非配置问题。

纹理更换不破坏布局

由于 15 张纹理共用同一套裁剪坐标，任意切换配色或十字键图片都不会引起布局错位；前提是保持图片与配置文件的配对关系（即始终使用本预设目录下的纹理与 gamesir-g7-pro.json）。

延伸阅读

• 预设说明原文：presets/gamesir-g7-pro/README.md
• 统一配置文件：presets/gamesir-g7-pro/gamesir-g7-pro.json
• 元素类型与标志位定义：deps/common/layout_constants.h
• 手柄按键/摇杆/扳机绘制实现：src/util/element/element_button.cpp、src/util/element/element_analog_stick.cpp、src/util/element/element_trigger.cpp、src/util/element/element_dpad.cpp
• OBS 源属性与手柄选择逻辑：src/sources/input_source.cpp
• 仓库内其他手柄预设（如 Xbox、DualSense、Switch Pro、GameCube 等）位于 presets/ 目录，可参考其 README 与 JSON 学习不同布局的组织方式。

• 直播
• 音视频