Hero selection overlay
The very first thing I did was to figure out the best way to structure up the grid system for everything and I landed on using Bootstrap since it already has a built in grid and I’m already familiar with it. Having a pre-made grid allowed me to work faster on the design instead of the code. With that in place I picked out the the yellow and light blue color that is associated with Overwatch. Looked up a typeface from Google Fonts that has the same feel (not look) as the Overwatch font.
All of the headlines and names are controlled by H1, H2 and H3 tags with an added Span tag to get the blue highlight in there. With all of that I started to create the first hero portrait by editing that specific grid or column and you can see what that code looks like below.
One of the issues we ran into is that JP is still using the original OBS due to audio issues on his end. If he ran, or you, OBS Studio you’re able to actually interact with something that’s pulled in through the browser plugin. This of course created a problem that we had to fix by adding a background image and do a window capture instead.
We didn’t want the background to be something static but also didn’t want to speed a huge amount of time to create something in CSS or After Effects. Instead what I simply did was to create a video tag and making that video tag into a background image. This is possible with CSS alone however I had to edit out the black bars of the video to make it stretch across the screen. With that done we now had a moving video in the background BUT you probably can tell that something like that would be distracting so I did another CSS trick by simply adding in a CSS filter to blur it.
Hero countdown overlay
With each individual countdown we were able to pull in through the CLR browser instead of doing window capture. For this I skipped getting a grid, since there’s only two space that needed to be filled.
The code is pretty straight forward since we ended up using 21 different HTML documents instead of a rotating thing. The reason for that is so that JP was able to better control it and we didn’t know the order due to the vote. I was also away for the weekend and only got home on Monday evening so the time frame would have been too short. One thing that is unique, in someway, is that when the countdown hits 0:00:00 it turns red. It’s just something that looks more visually instead of having it only go to 0.
As you can see when we have it as CSS I can change the resolution to whatever I want. I’m using a rather high resolution image so even when it’s made bigger it will still maintain high quality. Not that it’s something that we needed to do in this case but it’s nice to have the ability in case we would have wanted to animate it so at 0 it re-sizes and cover a larger portion of the screen.
I’m actually wrote this on Tuesday so that meant that I could focus on my current clients so I can start working with a few new contracts that looms at the horizon. There might be big things coming and I want to be ready when it does.