Stream Weather

Make it rain... with channel points! (and snow, hail, sun, rainbows, and more...)

Comment

Make it rain... with Channel Points!

We love nature and we love Twitch, so with Stream Weather we bring to streamers the ambiance of the outdoors to the mostly indoor atmosphere of Twitch and put the viewers in control using their channel points to change the weather in their favorite streams. It is a fun and seamless stream overlay with soothing sounds that only requires a simple one-time browser source link created through our website to set up. Now, even those rainy days at home watching Twitch can be full of sunshine, rainbows, and peaceful stream snowflakes can help you through hot summer days through the magic of channel points. And sometimes... unexpected lightning.

Unexpected Lightning

Stream Weather

With Stream Weather, viewers can use their channel points to redeem from a variety of weather animations and sounds on the stream. Any streamer can use the PixelPlush link generator and log in using their Twitch account to get an overlay URL with the selected options and then add it to their broadcast software as a browser source. The redemptions are automatically created in the channel for the broadcaster when the overlay is shown and the broadcaster or channel moderators can use the chat command !deleteweather to clear all of the created redemptions or !resetweather to delete and re-create the redemptions in case of errors. After the redemptions have been created, the broadcaster is also able to use the Manage Rewards menu in Twitch at any time to change the cost and cooldown of the redemptions or to customize them with icons.

Stream Weather in FirstNamesLucky

Stream Weather in LittleMaow

Stream Weather in Starlet_Blossom

Stream Weather in Maayainsane

Inspiration

We are a team of two on PixelPlush, Maaya and Instafluff, who loves streaming and making Twitch-integrated games and overlays that broadcasters can use to make their streams more engaging and interactive! We learned a lot over the past year about what works and doesn't work for streamers through our projects and feedback, and now hundreds of channels are playing our games every month. The channel points API opened up many more possibilities for our games to not only play them via chat but to be rewarded for sticking around and watching.

Development

This project was built as a web page in HTML and JavaScript with Twitch Channel Points integration using ComfyJS, a popular JavaScript Twitch library we built and maintain, and our own HTML5 game engine, PinkFluffyUnicorn.

The sound effects used in this project are from freesound.org:

Challenges

We didn't run into any particularly big technical challenges during this hackathon because when the Twitch channel points system was released, we loved the idea and had already invested a lot of time over a year ago figuring out how to work with it and then added support for it into our open-source ComfyJS library so others could code for it as well, and even made a tutorial video: https://www.youtube.com/watch?v=5qLXKoyEuLI

However, we faced some design challenges that we needed to solve such as:

  • Weather Realism: Making the weather animations look better in a stream because it turns out making rain and hail look good as an overlay above any video stream can be tough! For example, we added variations to the rain droplets to make it look more natural and iterated on the style and physics of the hail to look less like bouncing stones and more like falling ice.
  • One Big Blurry Pixel: As much as we would have loved to create a screen full of weather animations, we had to balance the number of particles in the animation with the reality of video transcoding so that the weather effects do not pixelate the live stream into just one big blurry screen.
  • Heavy Simulation: During our development and testing, we also accidentally underestimated the number of particles in some of the animations. Our advice to other developers is to simulate huge numbers of particles in your game at your own risk!

What's next for Stream Weather and PixelPlush

Stream Weather is our first "channel points-only" project for PixelPlush and we would like to keep building more projects like this and make Twitch much more fun and interactive for streamers and viewers. Winning this hackathon would allow us to dedicate more of our time to building PixelPlush as our independent game studio, continuing to grow our portfolio of games and marketing to reach more broadcasters and viewers with these games.

Built With

Share this project:

Updates