Twitch Scenes Gamified

Overview:

The Twitch Scenes product is an Eleventy-based Twitch scenes starter that includes a chat-controlled game. It utilizes ComfyJS with command responses and provides 6 scenes, including support for guest appearances. The scenes are optimized for a resolution of 1280x720 and include features such as pre-show, post-show, break messages, a main scene with a large capture area and host webcam capture, a game scene with dedicated backdrop and instructions, and the ability to highlight chat messages using OBS Interact mode. Each scene also includes stream “header” details and embedded chat.

Features:

• Chat-controlled game: Allows viewers to interact with the stream through chat commands.
• 6 scenes: Includes pre-show, post-show, break messages, main scene with capture area and webcam, support for guest appearances, and a dedicated game scene.
• Optimized resolution: Scenes are designed to be optimal at 1280x720.
• Embedded chat: All scenes include embedded chat, allowing viewers to engage with the stream.
• OBS Interact mode: Enables highlighting of chat messages within any scene using OBS Interact mode.
• Customizable stream setup: Stream meta data, including allowed chat commands, can be customized within the /src/_data/stream.js file.
• Captions support: Captions can be added using OBS and the OBS Captions Plugin.
• Customizable scenes: Scene styles can be modified within the src/sass/_scenes.scss file, allowing for customization of appearance.
• Chat command and subscriber action responses: Scripts and styles are included to handle showing chat and responding to chat commands and subscriber actions using ComfyJS.

Installation:

To install the Twitch Scenes theme, follow these steps:

1. Customize the stream meta data by editing the /src/_data/stream.js file. This includes specifying the allowed chat commands.
2. Run npm start in the command line to launch the scenes at http://localhost:8090/. You can customize the port by editing the watch:eleventy script within the package.
3. If using OBS, captions can be added using the OBS Captions Plugin. Please note that this feature is not available for Streamlabs.
4. To customize the theme and appearance of the scenes, modify the CSS custom properties located in src/sass/_theme.scss. For quick results, provide a new color hue value for the –color-primary-hue property.
5. To modify the individual scene styles, edit the src/sass/_scenes.scss file. Each scene file has a corresponding class on the main scene area, allowing for scoped styles.
6. Adjust the display capture area by modifying the .display-capture rule within src/sass/_scenes.scss. The default setting creates an area with a 16:9 aspect ratio.
7. For chat command and subscriber action responses, scripts and styles are included to handle these interactions using ComfyJS. Make sure to provide your Twitch username within the /src/_data/stream.js file, and at least one chat command for the interaction to work properly.
8. Optional: If you wish to send a chat message back, create a .env file with an OAUTH value matching what’s described in the ComfyJS docs. However, please note that if you add your oauth, do not host your scenes publicly as the value will be exposed in plain text.

Summary:

The Twitch Scenes product is an Eleventy-based Twitch scenes starter that allows streamers to create interactive and engaging streams for their viewers. It includes 6 scenes optimized for a resolution of 1280x720, with features such as embedded chat, support for guest appearances, and a chat-controlled game using ComfyJS. The scenes can be customized and themed to match the streamer’s preferences, and installation is facilitated through simple steps. With the inclusion of OBS Interact mode, viewers can even have their chat messages highlighted within any scene. Overall, Twitch Scenes provides a comprehensive solution for streamers looking to enhance their Twitch streams with interactive elements and engaging visuals.