User script for helping a player create and send inputs into a Twitch Plays channel text chat box. It provides a touchscreen coordinate tap overlay for precise touchscreen inputs. It is not tied to any specific game or channel.
This script does not support automation (botting). Check the broadcaster's chat rules before using this script.
You will either need Greasemonkey or Tampermonkey desktop browser extensions. Once those are installed, click or use this URL: https://raw.githubusercontent.com/chfoo/tppinputassist/master/tppinputassist.user.js. (If that URL does not work, use this one.)
(Alternatively, you can use bookmarklet: javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://nullhound.fart.website/~chris/tppinputassist/tppinputassist.user.js';})(); . This will work until you leave the page.)
Once enabled in Greasemoney/Tampermonkey, reload the video page. Wait at least 10 seconds. The Twitch chat will show "TPPInputAssist" under the text box. Click it to show the settings panel.
When you enable the touchscreen feature, a box will appear on the video. Drag the box over the touchscreen portion of the video using the top handlebar. Then use the bottom handlebar to resize it. When you click within the box, the coordinates will appear in the chat text box.
When you hold down the mouse button and move the mouse within the touchscreen box (dragging), it will input the dragging coordinate commands (for example, "10,10>20,20"). Any drags that have a threshold distance of 8 or more touchscreen pixels will be considered drag commands. What this means is that if you are clicking and accidentally move the mouse slightly, it will still be considered a click.
The DS uses a 256×192 pixel touchscreen, the 3DS uses 320×240 touchscreen, and the Switch uses a 1280x720 touchscreen. Be sure to adjust the size setting if needed.
When you enable "Show quick overlay toggle button", it will add a floating button labeled "📺👆" to the top-right of the web page. You can click on the the button to enable and disable the tap overlay without needing to open the settings panel. You can drag the handle box to move the button.
The buttons on the right of the overlay is a toolbar for changing touch/drawing mode. "👆T" means touch mode which is the regular interface. Selecting "✒️📏L" (Line) or "✒️➰C" (Curve) will switch it into Drawing Mode. While in Drawing Mode, it works like a vector drawing program (and it does not send anything automatically). Click in the area to insert a node/handle, then click somewhere else to insert another node/handle. As you insert mode node/handles, a line is built up. You can edit the lines by dragging the node/handle. Once you are satisfied, you can press Send in the chatbox.
The overlay might not work correctly on all views or pages using the new Twitch layout. Particularly, fullscreen may hide the overlay and whispers boxes may be covered.
If you notice any visual or functional anomalies affecting extensions (such as BTTV or FFZ), please file a bug report and temporary disable/enable extensions as needed.
This script includes gamepad support using HTML5 Gamepad API just for fun.
To use a gamepad, you will need a modern web browser and a gamepad that supports the "standard" mapping such as Xbox or Playstation controller. You can go to HTML5 Gamepad Tester and check that it shows up as standard mapping with 4 axis (2 sticks) and buttons 0-16 (17 buttons). If the gamepad mapping is wrong, try a different web browser.
Table of button mappings in standard mapping:
| Button/Axis ID | Generic | Xbox | PS | Switch | TPP |
|---|---|---|---|---|---|
| button[0] | Button 1 | A | Cross | A | a |
| button[1] | Button 2 | B | Circle | B | b |
| button[2] | Button 3 | X | Square | X | x |
| button[3] | Button 4 | Y | Triangle | Y | y |
| button[4] | Shoulder Left | LB | L1 | L | l |
| button[5] | Shoulder Right | RB | R1 | R | r |
| button[6] | Shoulder Left 2 | LT | L2 | ZL | l2/zl |
| button[7] | Shoulder Right 2 | RT | R2 | ZR | r2/zr |
| button[8] | Back | View | Share | - | select/select |
| button[9] | Forward/Home | Menu | Options | + | start/plus |
| button[10] | Left-stick Press | " | L3 | " | l3/lstick |
| button[11] | Right-stick press | " | R3 | " | r3/rstick |
| button[12] | D-Pad Up | " | " | " | dup |
| button[13] | D-Pad Down | " | " | " | ddown |
| button[14] | D-Pad Left | " | " | " | dleft |
| button[15] | D-Pad Right | " | " | " | dright |
| button[16] | Home/Power | Xbox | PS | Home | Kappa |
| - axis[0] | Left-stick Left | " | " | " | left/w |
| + axis[0] | Left-stick Right | " | " | " | right/e |
| - axis[1] | Left-stick Up | " | " | " | up/n |
| + axis[1] | Left-stick Down | " | " | " | down/s |
| - axis[2] | Right-stick Left | " | " | " | cleft/rleft |
| + axis[2] | Right-stick Right | " | " | " | cright/rright |
| - axis[3] | Right-stick Up | " | " | " | cup/rup |
| + axis[3] | Right-stick Down | " | " | " | cdown/rdown |
Be sure to configure the correct input text.
To send buttons as text chat inputs, press the button or tilt a thumb stick on the gamepad and release it. You can press up to 3 inputs (chording). Make sure that you release all the buttons at the same time and the script will combine the buttons using "+" such as "b+down".
If you press more than 3 and release at the same time, the script will ignore it. This is useful if you begin to press a button by accident.
(This instruction is for users who wish to compare the precompiled script with the source code. You don't need to compile it yourself just to use the script.)
To compile the script on Linux, install Haxe 4.0. Then run the makefile with make and the JavaScript output will be in the same directory.
Q. Why doesn't the channel use Twitch extensions?
A. Using Twitch extensions is certainly possible and a carefully designed extension will work well in a Twitch Plays. However in the case of Twitch Plays Pokemon, games are carefully picked to avoid requiring precise touchscreen inputs especially for those on mobile devices. Aliases mapped to specific common points on the touchscreen can be used as inputs too.
A note about user IDs: Twitch extensions only provide broadcasters a masked ID for each user, unless extensions request identity linking. Requesting identity linking will cause Twitch's UI to show a nag notification over the video.