Usage
This new source type takes an image and a config file to visualize the current state of different input devices. First grab yourself a preset from the presets zip archive, which is provided on the release page.
There's a couple of pre-made and community made ones, so just use whichever you like and extract it to any location or create your own preset. For this test I'll use the WASD preset.
Now create a new input-overlay source by clicking on the '+' icon in the source dock and selecting "Input Overlay", and provide the source with both the texture (.png file) and the config (.json file) of your chosen preset. In this case "wasd.png" and "wasd-minimal.json" which results in this overlay:
That's it. Unless you chose a mouse or gamepad overlay, there's no further configuration needed. If you did here's some information on how to configure them:
Can be enabled when recording in HDR. Same option as the one in the image source.
The gamepad overlay requires the selection of a gamepad. After connecting a supported gamepad, click on "Reload gamepads" and then pick the device in "Gamepad id" combobox. Enabled the gamepad hook in the configuration dialog:
If you use a mouse overlay with movement enabled, you'll be presented with additional options:
This value determines how much mouse movement impacts the displayed movement. This only applies if you use the "dot movement" preset. If you move your mouse to the left the dot will also move to the left. Currently the sensitivity is an inverse ratio, meaning that if it's lower the mouse movement will be amplified. If you move slightly to the left the dot will move quite a bit. If it's higher it will move less. (I might change it so it's not as confusing anymore)
This option is very useful, since mouse movement is mostly interesting when playing games. With this option enabled the displayed mouse movement will be far more accurate. For this to work you will need to find out the center of your screen (duh). Now it's important to remember, that if you do not play the game in fullscreen, the values you need to put in Monitor horizontal center and Monitor vertical center are not the exact center of your screen.
So first of if you do play in full screen, you can assume that horizontal center is Screen Width / 2 and vertical center is Screen height / 2. So for a 1080p display that would be 1920 / 2 = 960 for the width and 1080 / 2 = 540 for the height. If that doesn't work you'll have to use the second method.
If you do not play in full screen or using the screen size didn't work, you can use this method. Start the program called demo_hook.exe (There's also a linux version), which you can get here. The nightly-build.zip contains folders for all operating systems. For Windows you would open x86_64-win32-mscv and then the bin folder.
On windows I'd recommend you hold Shift and then right click somewhere inside the folder (Not on any file) and then click on Open PowerShell window here. Then type demo_hook.exe and press enter, that way the command line will stay open even after the program has closed. After you've started it enter your game and move your mouse around for a while. Then press Escape, which will close the program. Now after you leave the game the command line will be full of input which looks like this:
id=9,when=0,mask=0x0,x=581,y=475,button=0,clicks=0
Now what we're interested in are the values x=581 and y=475. Every time you move your mouse in the game the game will put it back to the center of the game screen. So there should now be a lot of lines which all contain roughly the same x and y values. Take the one that appears the most and put the x values as horizontal center and the y values as vertical center. If you have two screens you can also leave the program running on the second screen so you can monitor the values while in game.
This specifies a region in which mouse movements will be ignored. So you can filter out slight movements, which should be ignored. Higher value means more significant movements will be ignored.
Please note that this feature is intended for use within a trusted local network since all inputs are sent unencrypted
The WebSocket server sends input data formatted as JSON to all connected clients and replaced the input-history source, because the visualization of input history was cumbersome and limited. With the new way inputs can be visualized with the freedom of CSS Animations and JavaScript by receiving them via a WebSocket inside a browser source. There is an example html and an input-history preset. New presets will be added in the presets folder and zipped as a preset archive with each release.
Enabling the server:
For this to work you have to enable the WebSocket server in the input-overlay settings dialog, which is located in the Tools menu at the top of the OBS Studio Window. After enabling it and restarting OBS you can then load the html files in a browser source.
Please note that this feature is intended for use within a trusted local network since all inputs are sent unencrypted
The remote connection allows you to connect multiple computers with input-overlay and display their input on stream. For this you'll have to enable the WebSocket Server.
Now you'll have to start the client software on all devices that you want to connect. The client software can be found in the zip archives for each operating system:
The client takes the following arguments:
-h, --help show this help message and exit
-a, --address=<str> websocket host address (e.g. ws://localhost:16899/)(required)
-n, --name=<str> name of this client (required)
-k, --keyboard enable keyboard hook
-m, --mouse enable mouse hook
-g, --gamepad enable gamepad hook
-v, --verbose enable verbose logging
The server IP will be shown in the WebSocket Server tab of the input overlay configuration screen. So if you want to transfer only mouse and gamepad input from a computer to the host with the ip 192.168.2.2 you would run the following command:
io_client -a ws://192.168.2.2:16899 -k -m -n gaming_pc
Now if the connection has been established (you'll have to send at least one input from the client to the host, so press any key or gamepad button or move the mouse), you can choose what input source an overlay should use:
If anything went wrong, you can enable logging in the input-overlay configuration and check the log for more information.
This program lets you create config JSON files for overlays which can be used with version 5.0.0 and newer. You can access it here. Once you opened it, just provide it with an existing or new config path and a valid image file:
Click OK and you can start editing/creating. The controls are:
- Left click select top most element
- Right click and dragging moves the view around
- Scrolling zooms in/out
You can now add, modify and remove elements with the controls on the right. These are the current available types:
- Static texture
- Buttons
- Mouse wheel
- Mouse movement
- Gamepad analog stick
- Gamepad trigger
- Gamepad ID
- Gamepad D-Pad
Most of them are pretty straightforward: Select the subregion of the unpressed texture and fill out the information on the left. Here are all explanations for the properties of each type:
Keycodes can be recorded, if "Record keybind" is checked. Then just select the textbox and press the respective key or button.
As explained in the tool, you only have to select the texture that shows the default mouse wheel. On the right side next to should be in order (and with a 3 pixel gap in between each): Mouse wheel pressed down, mouse wheel scrolling up, mouse wheel scrolling down
The type can either be moving texture or arrow. Moving texture means that the texture you selected will rest where you place the element later and will move in the directions you move your mouse. The radius defines by how much it can at maximum move.
The arrow type means that the texture will be rotated to point in the direction the mouse is being moved. For the rotation the center of the element will be used. The radius is not used for this type.
You can choose whether this stick will represent the movement of the left analog stick on your gamepad or the right one as well as the maximum radius it can move in any direction.
You can choose whether this trigger will represent the left or the right trigger on your gamepad. If "Is button" is checked the element will only show either the unpressed texture or the pressed one after a certain threshold is surpassed (Triggers are the type of button on the gamepad that can be pressed down with different strength). If it is not set the strength with which the trigger is being pressed will be represented by gradually filling up the unpressed texture with the filled texture. You can choose in which direction the progression is being displayed with the option "Fill direction:".
This one is self explanatory. It will show which player is using this gamepad. You select the texture with Player one being selected and then next to it in order (with a 3 pixel gap in between each): Player 2, 3, 4.
"Reset numbers frequently" means that for example the left click counter will be reset once anything, but the left mouse button was clicked. This applies to all mouse button counters.
As it is explained in the program you have to select the Texture that shows the dpad centered (E.g. an arcade stick, which is in the center). And then next to it in order (with a 3 pixel gap in between each): Dpad to the left, right, up, down, top left, top right, bottom left and bottom right.
That's all there is to the different element types.