Duelers - Overlay Game for Streams
A channel-points-driven game as a stream overlay where viewers can duel each other as fighters! Through channel points, viewers add themselves as fighters, as well as duel other fighters.
- Game in a widget (overlay in a browser source)
- Viewers can duel each other through channel points
- Control Panel for duel and fighter management and settings
- Sounds and music
- Channel Points Integration
- Redeem to spawn as a fighter, duel other viewers, and dance
- Create required rewards or use existing rewards for functionality through Control Panel
- "Spawn", "dance", and "run around" redemptions are automatically approved if successful, or automatically reject/refund if not
- Optionally change fighter type and gender through channel points (instead of through chat commands)
- Optionally start or cancel duels from Twitch's Rewards Requests Queue
- Chat Integration
- When a redeem action fails (i.e., spawn a fighter when already in the game), it will refund the points and notify in chat
- Chat notification when duel is about to start
- Change fighter type and gender through chat commands
!char [type]to change character type
!gender [male/female]to change gender
!charsto list all available types
I wanted to make an interactive, channel-points-driven overlay. Combined with that fact that I'm a game and web developer, the overlay game was the result of that.
What it does
Viewers spend channel points to add themselves as fighters on stream, as well as duel other viewers. The streamer can start the duels for appropriate timing and commentating, but can optionally automatically run duels as they are redeemed.
How I built it
Using NodeJS, d-fischer's twitch JS library, socket-io, React, and webpack, I made a fully working mini-game with Channel Points and Chat integration.
Challenges I ran into
- Coming up with a spritesheet parser and animator
- Deciding what can be customizable by the streamer
Accomplishments that I'm proud of
- Working game with viewers already being engaged and having fun during streams
- Control Panel design
- The spritesheet parser and animator
What I learned
- React can be used for games, especially for state management.
- How wonderful d-fischer's twitch JS library is and how it sped up development by a magnitude.
What's next for Duelers - Overlay Game for Streams
Put it available online as a service.