Concert Twitch Overlay

This information is also in the README.txt

Video version of these instructions

All of the files referenced on this page are in Concert_Overlay/Concert Overlay_Data/StreamingAssets on Windows.

I recommend using https://codebeautify.org/online-json-editor to edit UserSettings.json, it will make your life a lot easier. Please confirm that if you use that site that you download and overwrite the old UserSettings.json file or you will get a big red error.

Twitch Connection Setup

This overlay only works with Twitch. In order to connect it to your twitch account you just click the "Connect" button on the overlay and authorize the overlay to connect to your twitch account.

Customization Settings

You can customize the audience member, lightstick, and bits images. You can customize how the wotagei moves are triggered. You can also customize what happens when people subscribe, follow, and give bits.

Image Customization

Your images should be 1000px x 1000px in a png format. Place your images in the StreamingAssets folder. In UserSettings.json, input the file name for the file you want to use. There is more info on the lightstick_color and lightstick_handle images in the Lightstick Customization section. For instance, if you want to use your own lightstick image and the file was called MyLightstick.png it would look like this:

  "images": {
    "audience_member": "",
    "lightstick": "MyLightstick.png",
    "lightstick_color": "",
    "lightstick_handle": "",
    "bits_burst_1": "",
    "bits_burst_2": "",
  },

Lightstick Customization

You can show your lightstick as one image using the lightstick field in images, as shown in lightstick.png in Streaming Assets, or you can break the handle and light part of your lightstick into two images so that you can change the color of your lightstick mid-stream by typing in chat.

When you create your lightstick color image, make the color of the lightstick white. The color command to will overlay the set color on top of whatever color is already there. If you have set your separate handle/color images, then you or a mod can type "light red" in chat to change the lightstick to red, for instance. By default the lighstick color will be chosen randomly from the all of the colors in the lightstick_colors list.

You can customize this command and color to anything you want. lightstick_command specifies the command, and lightstick_colors lists the colors and their hex values. So, for instance, if you set up your lightstick settings like this:

"lightstick_color_settings": {
    "lightstick_command": "let's go!",
    "lightstick_colors": [
      {
        "name": "aitakatta",
        "colors": [
          "#ff9100"
        ]
      },
  }
}

Then when you or a mod types "let's go! aitakatta" in chat then the lightsticks will change to orange. You can also set the lightsticks to continuously fade between colors by setting a color to a list of hex values, like this:

"lightstick_color_settings": {
    "lightstick_command": "light up",
    "lightstick_colors": {
      "group colors": [
        "#fa3249",
        "#ffee05",
        "#ae3cf0",
      ]
  }
}

Then when you or a mod types "light up group colors" the lightsticks will fade between red, yellow, and purple. By default, the command is "light" and all standard colors have been added. So by default you or a mod can type "light purple" etc. and change the lightsticks to any default color. To revert the lightstick color back to being closen randomly from the list, you or a mod must type "[your command] reset". Example: "light reset".

Audience Customization

The audience members can be randomly tinted various colors to allow for variation. These tint colors can be inputted in tint_colors as hex values. If you do not want this feature, set tint_enabled: false. You can also set mulitple audience images which will be chosen at random across the audience. To do this add all the audience image names to the list

"audience": {
    "images": []
{

Subscriber Customization

When someone subscribes an animation will play of an audience member holding a banner and confetti will fall from the top of the screen. You can disable any of these options. If banner is enabled: if subber_name: true, then the banner will say "(USERNAME) subscribed". If it is false it will say "(YOUR USERNAME) <3".

Follower Customization

When someone follows an animation will play of an audience member holding a banner and confetti will fall from the top of the screen. You can disable any of these options. If banner is enabled: if follower_name: true, then the banner will say "(USERNAME) followed". If it is false it will say "(YOUR USERNAME) <3".

Bits Customization

By default if anyone gives bits a burst of bits will come from both sides of the screen. You can customize the image of these bursts in the image section. Additionally, the more bits someone gives the longer the burst. If you do not want this to occur, set "enabled": false If you want to the user to have to give a certain number of bits for the burst to happen, set the minimum field. For every "increment" number of bits, the bits burst lasts longer.
Example: If increment is 10, then 100 bits burst will last .5 seconds x (100/10) = 5 seconds. If increment is 100, then 100 bits burst will last .5 seconds x (100/100) = .5 seconds.

Animation Customization

You can see what each move looks like here: https://lualucky.itch.io/concert-overlay By default an enabled move that has is_redeem = false, will be randomly triggered by ANY emote being used in chat. Your redeem names must only contain letters or numbers or spaces!!! (a-z and 0-9) If is_redeem is false, then by default any emote will randomly trigger a non-redeem animation. If multiple moves have the same redeem name, one of them will be chosen at random. You can disable any move from being shown for any reason by setting "enabled": false

Streaming Software Setup

1. Open the app (named Concert Overlay).
   1. You should see a gray screen. If there are any issues with your twitch info/connection, there will be a red error on the screen.
2. Add a new Game Capture source to OBS
   1. Settings:
      1. Mode: Capture Specific Window
      2. Window: Concert Overlay
      3. Check: "Allow Transparency"
      4.  Uncheck: Capture Cursor
3. Right click the source in the Sources panel and select Transform->Fit To Screen

You are ready to stream!

There are test commands you can use to check how your overlay looks:

Effect	Command	Example
Test Twitch Connection	!test	!test
Bits Animation	!testbits<amount>	!testbits 100
Sub Animation	!testsub	!testsub
Follow Animation	!testfollow	!testfollow