OBS键盘插件自定义diy

最新推荐文章于 2024-09-25 08:33:56 发布

Tgmmmmmmmm

最新推荐文章于 2024-09-25 08:33:56 发布

阅读量3k

点赞数

文章标签：交互 ui photoshop

本文链接：https://blog.csdn.net/tgmmmmmmmm/article/details/126011982

版权

制作自己的OBS键盘插件

参考文档：OBS 插件 input overlay 自定义键盘按键以及界面 - 哔哩哔哩 (bilibili.com)

目前使用的方案是两个input overlay一个负责键盘，一个负责鼠标，预计依旧使用本模式。

一、键盘input overlay配置学习

1.1 本次参考插件的最终效果图

qwerty-arrows-preview

1.2 素材图片

qwerty-arrows

1.3 素材配置

# Input Overlay config v.4
#
# 所有按键的个数，本成品14*5+7=77个按键
0_key_count=77
# 成品类型，1是鼠标，2是键盘，3是控制(controller)，确保这个在所有详细前
# 本成品中是键盘类型
0_layout_type=2
# 按键行数量，本成品有6行
0_key_rows=6
# 案件列数量，本成品有14列
0_key_cols=14
# 全局按键大小，本成品高是128，宽也是128（暂时推测是像素px）
0_key_abs_w=128
0_key_abs_h=128
# Space vertically and horizontally (Negative numbers for left/up offset)
0_key_space_v=5
0_key_space_h=5
# 在素材中每行有多少个按键
0_texture_w=13
# 在两行之间的高度，通常是按钮高度的两倍，如果按钮按下
0_texture_v_space=256
# 按键依次的命令，从左到右，从上到下
1_key_order=0x0001,0x003B,0x003C,0x003D,0x003E,0x003F,0x0040,0x0041,0x0042,0x0043,0x0044,0x0057,0x0058,0x0029,0x0002,0x0003,0x0004,0x0005,0x0006,0x0007,0x0008,0x0009,0x000A,0x000B,0x000C,0x000D,0x000E,0x000F,0x0010,0x0011,0x0012,0x0013,0x0014,0x0015,0x0016,0x0017,0x0018,0x0019,0x001A,0x001B,0x002B,0x003A,0x001E,0x001F,0x0020,0x0021,0x0022,0x0023,0x0024,0x0025,0x0026,0x0027,0x0028,0x001C,0x002A,0x002C,0x002D,0x002E,0x002F,0x0030,0x0031,0x0032,0x0033,0x0034,0x0035,0x0036,0x001D,0x0E5B,0x0038,0x0039,0x0E38,0x0E5C,0x0E1D,0xEE48,0xEE50,0xEE4B,0xEE4D
# 宽高笔 1意味着一样高，2意味着宽度2，高度1，基数是前面设定的0_key_abs_w等
1_key_width=1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,8,1,1,1,1,1,1,1
1_key_height=1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
# 基于像素图片的偏移，也就是原素材上的偏移，对应成品的每一个键
1_key_row=0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,2,2,2,2,2,2,2,2,2,2,2,2,2,1,3,3,3,3,3,3,3,3,3,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,3,5,5,5,5,5,5,5,3,4,4,4
1_key_col=0,1,2,3,4,5,6,7,8,9,10,11,12,0,1,2,3,4,5,6,7,8,9,10,11,12,13,0,1,2,3,4,5,6,7,8,9,10,11,12,13,0,1,2,3,4,5,6,7,8,9,10,11,13,0,1,2,3,4,5,6,7,8,9,10,13,0,1,2,3,11,12,13,12,12,11,13

二、鼠标input overlay配置学习

2.1 效果图

mouse-2-preview

2.2 素材图片

mouse-2

2.3 素材配置

# Input Overlay config v.4
#
# 有8个按键数量
0_key_count=8
# 1是鼠标
0_layout_type=1
# 设置布局宽高
1_mouse_layout_w_h=285,420
#
# *_u_v:
# 素材位置，绝对像素
# *_w_h:
# 素材宽高
# *_x_y:
# 成品布局
#
# lmb: 左键
# rmb: 右键
# mmb: 中间
# mwu: 滚轮上
# mwd: 滚轮下
# smb1: 边按钮1
# smb2: 边按钮2
1_mouse_lmb_u_v=1,1
1_mouse_lmb_w_h=139,174
1_mouse_lmb_x_y=2,0
#
1_mouse_rmb_u_v=143,1
1_mouse_rmb_w_h=139,174
1_mouse_rmb_x_y=145,0
#
1_mouse_mmb_u_v=285,1
1_mouse_mmb_w_h=48,95
1_mouse_mmb_x_y=119,78
#
1_mouse_mwu_u_v=336,1
1_mouse_mwu_w_h=48,95
1_mouse_mwu_x_y=119,78
#
1_mouse_mwd_u_v=387,1
1_mouse_mwd_w_h=48,95
1_mouse_mwd_x_y=119,78
#
#Right
1_mouse_smb1_u_v=840,1
1_mouse_smb1_w_h=50,120
1_mouse_smb1_x_y=234,213
#
#Left
1_mouse_smb2_u_v=780,1
1_mouse_smb2_w_h=50,120
1_mouse_smb2_x_y=1,213
#
#1_mouse_smb1_u_v=437,1
#1_mouse_smb1_w_h=40,62
#1_mouse_smb1_x_y=12,274
#
#1_mouse_smb0_u_v=438,1
#1_mouse_smb0_w_h=40,62
#1_mouse_smb0_x_y=0,210
#
# 整体素材body布局，让他看起来有鼠标样子不会单独只有按键
1_mouse_body_u_v=481,1
1_mouse_body_w_h=283,242
1_mouse_body_x_y=2,179

三、制作我的键盘 input overlay

3.1 设计我的键盘

TgM_keyboard-布局设计

3.2 制作原素材

TgM_keyboard-true

3.3 配置映射关系ini文件

# Input Overlay config v.4
#
# 所有按键的个数，本成品12*4+7=55个按键
0_key_count=55
# 成品类型，1是鼠标，2是键盘，3是控制(controller)，确保这个在所有详细前
# 本成品中是键盘类型
0_layout_type=2
# 按键行数量，本成品有5行
0_key_rows=5
# 按键列数量，本成品有12列
0_key_cols=12
# 全局按键大小，本成品高是126px，宽也是126px
0_key_abs_w=126
0_key_abs_h=126
# 成品横纵空余，每个按键之间8px间隔
0_key_space_v=8
0_key_space_h=8
# 在素材中每行有多少个按键
0_texture_w=12
# 在两行之间的高度，通常是按钮高度的两倍，如果按钮按下便于切换上下两个对应关系
0_texture_v_space=252
# 按键依次的命令，从左到右，从上到下
1_key_order=0x0001,0x0002,0x0003,0x0004,0x0005,0x0006,0x0007,0x0008,0x0009,0x000A,0x000B,0x000E,0x000F,0x0010,0x0011,0x0012,0x0013,0x0014,0x0015,0x0016,0x0017,0x0018,0x0019,0x002B,0x002A,0x001E,0x001F,0x0020,0x0021,0x0022,0x0023,0x0024,0x0025,0x0026,0x0028,0x001C,0x0E5B,0x002C,0x002D,0x002E,0x002F,0x0030,0x0031,0x0032,0x0033,0x0034,0x0027,0x0035,0x001D,0x0038,0x0039,0x001A,0x001B,0x0E38,0x0E1D
# 宽高比 1意味着一样高，2意味着宽度2，高度1，基数是前面设定的0_key_abs_w等
# 宽高比 1意味着一样高，2意味着宽度2，高度1，基数是前面设定的0_key_abs_w等
1_key_width= 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,6,1,1,1,1
1_key_height=1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
# 基于像素图片的偏移，也就是原素材上的偏移，对应成品的每一个键
1_key_row=0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4
1_key_col=0,1,2,3,4,5,6,7,8,9,10,11,0,1,2,3,4,5,6,7,8,9,10,11,0,1,2,3,4,5,6,7,8,9,10,11,0,1,2,3,4,5,6,7,8,9,10,11,0,1,2,8,9,10,11

3.4 成果展示

效果预览

四、制作我的鼠标 input overlay

4.1 设计我的鼠标

TgM_mouse

4.2 制作原素材

TgM_mouse-true

4.3 配置映射ini文件

# Input Overlay config v.4
#
# 有8个按键数量
0_key_count=7
# 1是鼠标
0_layout_type=1
# 设置布局宽高
1_mouse_layout_w_h=330,330
# *_u_v:
# 素材位置，绝对像素
# *_w_h:
# 素材宽高
# *_x_y:
# 成品布局
#
# lmb: 左键
# rmb: 右键
# mmb: 中间
# mwu: 滚轮上
# mwd: 滚轮下
# smb1: 边按钮1
# smb2: 边按钮2
1_mouse_lmb_u_v=0,0
1_mouse_lmb_w_h=160,320
1_mouse_lmb_x_y=0,0

1_mouse_rmb_u_v=170,0
1_mouse_rmb_w_h=160,320
1_mouse_rmb_x_y=170,0

1_mouse_mmb_u_v=340,0
1_mouse_mmb_w_h=160,178
1_mouse_mmb_x_y=85,80

1_mouse_mwu_u_v=510,0
1_mouse_mwu_w_h=160,178
1_mouse_mwu_x_y=85,80

1_mouse_mwd_u_v=680,0
1_mouse_mwd_w_h=160,178
1_mouse_mwd_x_y=85,80