I surely can't be the only one who spends too much time on projects that I get invested in. Every so often though, I remember to make time to use my engineering skills to help out my husband though. In the past this has often just been making various things around the house, however I recently came across an even better way to spoil my sweetie.
My husband has been streaming on Twitch for a while now, and I've been really proud of the work and dedication he's put into it. This venture is something he enjoys, and he takes it very seriously. To support him in this, I've been helping to make the visual effects for his stream.
Figure 1: Screenshot of Xavlee's Twitch Stream
As depicted in Figure 1, Xavlee has quite a nice dashboard that was commissioned from Inklusive Arts. You'll notice on the left though is the first enhancement I made, an improved chat view. Alerts are highlighted in the chat as a block, and the chat messages themselves are conveyed with bubbles. The chat is loaded through a web browser overlay, which just loads the chat for Xavlee's stream. I then super-impose my own styles on top of it to hide the elements I don't want, and design the elements I do.
Following this, Xavlee and I thought it would be nice to add in some custom effects for some of the alerts. In particular, what we landed on was adding effects for follows and subscriptions. We were already doing some general alerts at the top of the screen, but we wanted something special in addition to this.
To start off with, we knew that we wanted a fullscreen effect. Xavlee suggested we have money rain down when someone subscribes, so I got started modeling a 3D coin in Blender.
Figure 2: 3D Model of a Gold Coin in Blender
After creating the coin, I just need to add in some particle physics. I had the coins fall down in a curtain, made them rotate a bit, added in some lighting, and threw in a camera, then I was pretty much done. The effect ended up turning out pretty great in my opinion.
Figure 3: Coins Falling Animation
Please note that the animation displayed in the browser is a GIF, so it doesn't have a transparent background like it does in use. From here, the next animation was pretty simple. With follows, we just wanted hearts to fall instead of coins. I modeled up a simple heart shape, swapped the coin out for the hearts, adjusted the rotations and lighting, and we had a whole new animation.
Figure 4: Hearts Falling Animation
So this is all pretty great, but it certainly wasn't enough. Oh no, any old streamer could have assets like these with enough money. I wanted, nay I needed, to make something unique and cool for my husband's stream that would allow him to stand out among the rest. I asked my husband to give me a list of things he would like for me to make, and the first thing was a starting soon / back soon animation. This time, I knew I wanted to do some dumb stuff, so I decided to build everything in HTML/CSS/JS so I could speed up the build process. I started by taking the light purple and dark purples from Xavlee's dashboard and created a gradient across the whole screen. This felt too static though, so I made the gradient constantly loop around to give a sense of movement. Then I overlaid Xavlee's logo and the text starting soon on the page. The starting soon text looked a little too boring, so I gave it a bit of an outline and some crisp drop shadow all in light purple. Then the background still felt a little boring so I made a repeating star pattern and had it shift across the screen in the opposite direction of the gradient. Then I didn't like the shifting gradient so I ripped it out and made everything fade to black at the edges.
....
Breathe
....
And go:
Everything still felt boring, BUT I knew Xavlee wanted a TV and controller on the screen. First I started with modeling a 2D Vector art version of a CRT television. Then I overlaid the Xavlee logo and starting soon text over the screen. I felt like this was a bit too static though, so I thought: why not add static? So I went on a binge learning how to make TV static and threw that behind the logo and starting soon text, and over the TV screen. Then I took the screen part of the TV SVG and pulled it out into it's own SVG, used it as a clip mask to shape the TV static to the perfect shape, then fine tuned it's placement.
Hold on though, because we still have a controller to build! First I start modeling a NES style controller with analog sticks in vector art. I use a controller on my desk for a general reference, and adjust the colors to fit the scene. I put that just a bit off center at the bottom of the screen, then go through the ridiculous process of defining 40 different keyframes for rotation so the controller would jitter back and forth like someone was playing it.
Finally, after a lot of obsessive tweaking, I recording my screen with OBS and had something beautiful.
Figure 5: Xavlee Starting Soon Animation
There's something about projects like this that I really get into. Of course I love doing things for my husband, but that's not the only thing. I pick up a lot of auxiliary skills as an engineer. In this project alone, I used web development, 3D modeling and animations, and 2D modeling and animations. Being able to pull all these skills together and use them to help out in my own way is very rewarding. I feel very lucky to have the opportunity to do such things and can't wait to see what else I end up doing for Xavlee's channel.
Surely this isn't the last post I'll write about updates and improvements that I've made here, but I think it's good for now. Until next time, and make sure you check out Xavlee's streams on Twitch!