Twitch Chat Overlay with Avatars

Version 3.1.0

Description:

This is a Windows / HTML5 application, which connects to the Twitch IRC and provides an interface to the chat and to become an Avatar of ones choice. 

Once an Avatar it will roam around and stops to speak, if the user chats.

The Bot:

The Bot of the chat will handle the summoning of the avatars. Chose your color!

And he will handle the removal. So be nice or the avatar will be banished from the land - at least for some time.

The Avatars:

There are 15 Avatars at the moment with a male and female version - so a total number of 30 possible avatars.

Each Avatar is unique - only one can be active in the overlay at a time.

The overlay has a small description on the bottom left on how to use it - including a list of currently available avatars, if one of your users wants to join the fun.

Your own avatars:

It is also possible to add your own avatars to the chat, so your user can choose even more / use known characters of your games. For that Sprites of these characters are needed, if possible with animated frames. 

Thanks to 0x72 for creating such cool sprites under CC0 licence!

How to use:

General:

• CTRL-L to toggle the Login/Settings Screen
• CTRL-H to toggle the little help window in the bottom left corner

Windows Version:

• CTRL-B to toggle Borderless

Getting it ready:

General:

• Enter a Username the program will join the chat with
• Enter a Channel Name for the channel to enter and listen to
• Enter a Bot Name for the Bot in the Overlay
• Hit (Re)Connect
  • A browser window will open, asking for permission for the tool

HTML5:

• You need the windows version running in parallel
  • On the Windows Version instead of (Re)Connect, hit (Re)Start HTML Token Server
• Place the files on a (local) webserver and call the tco.html via browser.
  • If you got npm, just run npx http-server in the folder with the files and open localhost:8080/tco.html
• Same steps as in General

Background Color and/or Texture:

Windows:

• A transparent Background Color makes the window transparent
• A Background Texture PNG with transparent parts will be transparent in the window for these parts

HTML5:

• For the Background to be transparent in your stream software i.e. OBS you need to add this CSS: body { background: none; margin: 0px auto; overflow: hidden; }
  
• Adding a bg_texture.png into the same folder as tco.html - will add this image as a background

Setting up your own Avatars:

For your own Avatars to work you need to set up a specific folder structure:

• basefolder
  • name_of_first_avatar (The name of the folder will be the name of the avatar - use lower case and one word.)
    • chat_x.png
    • idle_x.png
    • join_x.png
    • part_x.png
    • run_x.png
    • chat.txt (optional)
    • idle.txt (optional)
    • join.txt (optional)
    • part.txt (optional)
    • run.txt (optional)
  • name_of_second_avatar
    • content as for the first one
  • index.html (only for HTML5 use)

For each animation there has to be at least 1 png- i.e. chat_1.png.  chat, idle and run are looped animations.  The animations need to count up from one to as much frames as you would like to have for your animation.

All frames for all animations have to be the same size!

The txt files can be used to set up the animation speed. Just add a float number for frames per seconds (default without the file is 5.0). The actual running speed in pixel is based on the height of the sprite and the speed of the animation. It is 20 px per second on a speed of one frame per second on a 128 px height sprite.

The size of the original Avatars is based on a 128x128 sprite. The chat is directly placed on top of the sprite, so you should keep some space to the top.

The index.html has to contain the list of the folders / avatar names seperated by ";":

name_1;name_2;name_3

The folders have to use the same names. 

For the Windows version: Just choose the base folder in the settings.

For the HTML5 version: Put this set up folder structure inside the same folder as tco.html and name it "mychars"

Thats it - have fun with your own Avatars!

I added a sample folder structure with two chars (thanks to 0x72 again) to the downloads!

For the User:

As every user of the chat you can use the following commands:

• !avatarme [avatarname]: Joins the overlay as the chosen avatar, if it is available. The available avatars are listed on the bottom left of the chat.
• !unavatarme: Leaves the overlay.
• !avatars: Prints a list of the currently available avatars an the chat.
• Normal chatting, when the user is an avatar: The avatar repeats the chat of the user.

For the Mod/Streamer:

As a mod or the streamer of the channel you can use the following command:

• !avatartimeout [username] [optional: time in seconds - default 60]: The user will be removed from the chat for the amount of time.
  • Cant rejoin
  • Avatar becomes available
  • Calling it again on the same user will change the timeout time to the new one

Technical Information:

The Tool was coded in Godot 4.4 with the GIFT Module. 

Future Plans (Maybe):

• Bot variants
• More avatars
• Custom User Avatars
• Usage of Twitch Emotes
• Commands for special animations, etc
• Background texture
• Put a version on GitHub with free assets