Our inspiration for this project stemmed from how we met each other - Shoutcasting for UCI Esports. Shoutcasting has become a major part of our lives and identity, so we wanted to bring something to our industry - a tool to make Shoutcasting more accessible for small stream teams/organizations and independent free-lancers. One of the difficulties in establishing production was a lack of consistent graphics and the need to continually produce the manpower required to update and create graphics as needed for the variety and number of streams per week. We sought to fix this problem by creating a program that works with OBS/Streamlabs, standard streaming tools, to update images and text for a better esports viewing experience. This tool would not only be for our use, but should also provide the opportunity to help start production without the need for a dedicated team or excess tech/tools. We hope that it could inspire people to take that first step towards becoming a Shoutcaster or producing their own streams!
What it does
Our Smart League Overlay runs in parallel with a League of Legends client and uses that local client to dynamically update images and text over the OBS/Stream Labs freeware. This means that once a game has started and Champ Select pops up, the images on the stream overlay will change as players hover, ban, and lock in their champions. This is meant to reflect the live production aspect that many professional teams use in major tournaments while still giving the user agency over the overall design/formatting within OBS/Streamlabs, allowing room for creativity to take place.
How we built it
With the pandemic happening, we faced the same problem that many others face at a hackathon - virtual collaboration. It's not ideal, but we definitely made it work. With some planning and teamwork, we set up a requirements document, distributed tasks among each of us, and used Discord/GitHub repo to help us keep track of progress within our code.
For our main program, we used the League of Legends Developer API alongside the League Client API to acquire the relevant data we needed, including summoner names, champion ban and pick events and characters, and summoner spells. This data was scattered throughout the various JSON data provided by the APIs. After we acquired the data, we used Riot’s art and icon databases to generate the champion and spell images as local files, which are then provided to OBS as a source. When the files update, the images are likewise updated in our OBS scene, reflecting the state of the Champ Select in real time.
Additionally, we are able to find tweets with specified hashtags and display them on our OBS scene, allowing for the user to showcase tweets that support either team like #TLWIN. This was accomplished by using the Twitter API and creating a stream object to extract tweets with the desired hashtag, then storing them into a text file that is also provided to OBS as a source. Tweets can be approved or denied by a stream moderator before they appear, allowing for the manual filtration of content, and can also update inside of the OBS scene in real time.
Challenges we ran into
Throughout our development process, we came across the same issue: a lack of preexisting documentation for making OBS scripts. We scoured almost every Stack Overflow post and OBS forum there was on the topic, but only a handful were helpful. As frustrating as this came to be, it forced us to be creative with our solutions and navigate our own path to our eventual solution. We did not have the luxury of an OBS/StreamLabs library or a special language that allows us to script for those clients, so we decided to take advantage of OBS’s dynamic file reading. A bit of memory management combined with dynamic file usage took us a long way, and we were able to get a fully functioning application!
Accomplishments that we're proud of
As a team, we’re proud of how we faced adversity, and overcame new technical obstacles that we haven’t encountered before. We had many moments throughout this project where we didn’t see the solution, and felt somewhat daunted knowing that. Persistence and tenacity helped get us to the finish line, and our commitment to finishing this project is what we’d love to highlight.
What's next for League Smart Overlay
To expand on this project, we’d like to clean up the graphic design to make it look nicer. The limited time nature of the hackathon didn’t allow us to allocate too much effort into making the overlay more visually appealing, so that’s definitely something we’d like to accomplish later.
Otherwise, we’d like to expand into a full in-game overlay, which is something we began working on but were unable to make much headway on before the hackathon came to a close. The in-game overlay would ideally contain and update with information about the champions, their ultimate cooldowns, their summoner spell cooldowns, kills, deaths, dragons, items, relevant stacks and creep score. This would require much more effort but it would be amazing to fully realize the concept and make it a reality.