Entering the 2020 season we wanted to try and implement our own dynamic/stat-driven in-game animations. In the the past this is something we paid an outside company for but wanted to move in-house due to wanting more control and to save cost. The idea was to create modular pre-rendered components that could then be combined in a matter of seconds for social media no matter how powerful the device. Initially our season was postponed, but resurrected with only a few weeks to prepare. The following is the result that was used and is a proof of concept that was developed in a short amount of time. Going forward more features, and a higher degree of customization can be implemented.
As mentioned the idea was to stack modular pre-rendered videos as layers into a final animation. This was accomplished by using seemingly impossibly small transparent .webm files. The files were pre-rendered using Comps from Spreadsheets in After Effects, exported as transparent .movs, and batch encoded as .webms via scripting and FFMPEG. The result was a whopping 815 high quality videos weighing it at a mind-blowing size of only 880 megabytes.
Here's a 3D breakout to visualize the 11 layers that composed a sample Touchdown animation
In order to compose the graphics into 1 rendered video, I made a web application that would create the FFMPEG code programmatically to compose the video. In this iteration it is just a web app that just generates the necessary code that musts then be pasted into the terminal and ran. In the future I would like to create a desktop application that renders the video without the extra steps. I would use NodeJS compiled into a ElectronJS app that can be run on Windows and Macs. The GUI of the web app for this season looked as follows:
Here are just a few examples of the outputs (as lossy gifs for Behance purposes). On a good computer these are encoded almost immediately, and typically only take a few seconds at worst. On social media SPEED MATTERS.
Touchdown
FINAL score
Quarter score
