一、前言與軟體環境#
在直播的時候，一些場景往往需要用到模糊以及鍵位展示的功能，但是搜索發現國外的教程大都推薦付費的具有更多功能的 streamFX，而國內的教程都十分粗糙，故打算自己寫一篇簡單的教程，如有問題還請見諒 ——
本次使用的軟體是：
- blur-filter 1.1.0
- input-overlay 5.0.4
- OBS Studio 29.1.3 Steam 版本
2023/8/29 更新：blur-filter 疑似被版權投訴下架，這裡是兩個插件的 Onedrive 連結 。
二、安裝及配置 blur-filter#
-
從 Github Release 頁面下載 blur-filter-1.1.0-win.zip ，解壓出來的
obs-plugins和data文件夾直接覆蓋到 OBS Studio 的根目錄。
-
首先在來源中添加一個遊戲採集，然後新建一個分組，在遊戲採集上單擊右鍵選擇
複製，選中分組後右鍵選擇粘貼（引用），再將引用源拖入分組。最終效果如圖所示：
-
選中分組單擊右鍵，選擇濾鏡，選擇 Blur 濾鏡，添加模糊效果。
我比較喜歡高斯模糊，模糊程度拉到 6~8 即可。 -
關閉濾鏡窗口後選中分組，按住 ALT 鍵用鼠標調整窗口大小，來改變模糊的區域，完成。
三、安裝及配置 input-overlay#
-
從 Github Release 頁面下載 input-overlay-5.0.4-windows-x64.zip 和 input-overlay-5.0.4-presets.zip ，主體解壓出來的
obs-plugins，io_client和data文件夾直接覆蓋到 OBS Studio 的根目錄，presets 壓縮包整個文件夾解壓到 OBS 根目錄。 -
需要注意的是，很多教程都提到在添加源中找到
Input Overlay項，實際上由於版本更新漢化，正確的源名字為輸入疊加，會讓很多人以為安裝失敗了。 -
添加來源，選擇輸入疊加，先配置一塊鍵盤。選擇 OBS Studio\input-overlay-5.0.4-presets\wasd-extended-numeric 中的 wasd-extended-numeric.png 作為鍵盤貼圖，選擇同路徑下的 wasd-extended-numeric.json 作為配置文件。
- 按同樣的方式添加一塊鼠標。選擇
OBS Studio\input-overlay-5.0.4-presets\mouse中的mouse.png作為貼圖，選擇同目錄下的mouse-arrow.json作為配置文件。鼠標靈敏度看個人喜好調整，使用屏幕中心打勾，中心水平偏移和中心垂直偏移為你顯示器長 / 寬像素的二分之一。
- 簡單的調整大小位置，放入一個分組等，基本的輸入疊加就創建完成了。
四、Input Overlay 的 BUG 修改以及簡單的自定義#
在使用過程中，發現我用的這個版本的 Input Overlay 其實有很多小問題，小小更改一下～
- 按下鼠標側鍵 1，Input Overlay 無顯示。
其實很簡單，將 mouse-arrow.json 中的側鍵 1 代碼塊更改一下就好。
{
"code": 5,
"id": "smb1",
"mapping": [
285,
1,
40,
62
],
"pos": [
0,
210
],
"type": 3, #3改成1即可
"z_level": 1
},
wasd-extended-numeric.json鍵位設置不合理
可以參考我改進的鍵位：
{
"default_height": 129,
"default_width": 157,
"elements": [
{
"code": 16,
"id": "q",
"mapping": [
1,
1,
157,
129
],
"pos": [
137,
133
],
"type": 1,
"z_level": 1
},
{
"code": 17,
"id": "w",
"mapping": [
161,
1,
157,
129
],
"pos": [
274,
133
],
"type": 1,
"z_level": 1
},
{
"code": 18,
"id": "e",
"mapping": [
321,
1,
157,
129
],
"pos": [
411,
133
],
"type": 1,
"z_level": 1
},
{
"code": 42,
"id": "shift",
"mapping": [
481,
1,
157,
129
],
"pos": [
0,
399
],
"type": 1,
"z_level": 1
},
{
"code": 30,
"id": "a",
"mapping": [
641,
1,
157,
129
],
"pos": [
137,
266
],
"type": 1,
"z_level": 1
},
{
"code": 31,
"id": "s",
"mapping": [
801,
1,
157,
129
],
"pos": [
274,
266
],
"type": 1,
"z_level": 1
},
{
"code": 32,
"id": "d",
"mapping": [
961,
1,
157,
129
],
"pos": [
411,
266
],
"type": 1,
"z_level": 1
},
{
"code": 56,
"id": "alt",
"mapping": [
961,
525,
157,
129
],
"pos": [
137,
532
],
"type": 1,
"z_level": 1
},
{
"code": 57,
"id": "space",
"mapping": [
1280,
1,
421,
129
],
"pos": [
271,
532
],
"type": 1,
"z_level": 1
},
{
"code": 15,
"id": "tab",
"mapping": [
1,
263,
157,
129
],
"pos": [
0,
133
],
"type": 1,
"z_level": 1
},
{
"code": 19,
"id": "r",
"mapping": [
161,
263,
157,
129
],
"pos": [
548,
133
],
"type": 1,
"z_level": 1
},
{
"code": 33,
"id": "f",
"mapping": [
321,
263,
157,
129
],
"pos": [
548,
266
],
"type": 1,
"z_level": 1
},
{
"code": 44,
"id": "z",
"mapping": [
481,
263,
157,
129
],
"pos": [
137,
399
],
"type": 1,
"z_level": 1
},
{
"code": 45,
"id": "x",
"mapping": [
641,
263,
157,
129
],
"pos": [
271,
399
],
"type": 1,
"z_level": 1
},
{
"code": 46,
"id": "c",
"mapping": [
801,
263,
157,
129
],
"pos": [
406,
399
],
"type": 1,
"z_level": 1
},
{
"code": 47,
"id": "v",
"mapping": [
961,
263,
157,
129
],
"pos": [
541,
399
],
"type": 1,
"z_level": 1
},
{
"code": 20,
"id": "t",
"mapping": [
1121,
263,
157,
129
],
"pos": [
688,
133
],
"type": 1,
"z_level": 1
},
{
"code": 34,
"id": "g",
"mapping": [
1281,
263,
157,
129
],
"pos": [
683,
266
],
"type": 1,
"z_level": 1
},
{
"code": 48,
"id": "b",
"mapping": [
1,
525,
157,
129
],
"pos": [
675,
399
],
"type": 1,
"z_level": 1
},
{
"code": 29,
"id": "ctrl",
"mapping": [
1121,
1,
157,
129
],
"pos": [
0,
532
],
"type": 1,
"z_level": 1
}
],
"flags": 0,
"overlay_height": 666,
"overlay_width": 865,
"space_h": -20,
"space_v": 5
}
唯一的問題就是貼圖本身不帶 Caps 鍵，所以也沒有辦法添加。最終的效果如圖：
mouse-arrow.json鼠標配置箭頭不居中，觀感差。
還是同樣，更改mouse-arrow.json的 arrow 代碼塊：
{
"id": "arrow",
"mapping": [
614,
1,
100,
100
],
"mouse_type": 1,
"pos": [
210 , #210改為195
235
],
"type": 9,
"z_level": 1
}
需要注意的是，所有更改保存完畢後，需要刪除原來的輸入疊加重新添加，才能看到變動。