I was watching the Vitality vs. MAD series and at some point during the first game, they had to switch back to the old overlay because the current one was spazzing out.
They have issues with it almost every week, making them switch back to the old one and I don't know how that keeps happening.
Anyone who has experience with this, who can chime in?
External link →Hey there! I'm John Depa, the Executive Producer of the LEC!
Was lurking around Reddit and saw this post. I have experience with this— so I can definitely chime in! Ahaha.
I'll start with why things go wrong. Super TL;DR - A lot of reasons that are not related to the game, and it's getting better with time!
We've been talking about building an improved HUD since 2018. For a few years, we utilised a graphics system called Viz Trio (which we use for most of our other show graphics) to design and render our HUD over the game, but we found that it was ultimately too limiting for what we envisioned for a great HUD display for our game. And so, after awhile, we decided to simply build a new tool from the ground up to run our HUD. We test this tool regularly whenever we roll out new features, but ultimately, because we're building it ourselves, we don't benefit from the sheer amount of user testing that larger graphics systems benefit from. This is what ended up happening for VIT vs MAD last week, and the user who broke the system was actually me... I utilised the tool by setting a setting in an unanticipated way, and managed to crash it... (Sorry!)
Another common way things can go wrong relates to the methodology we use to get data from the live game. Our HUD relies on a new system that is still under active development. Sometimes things in this development change or react with the graphics system that we've built in unanticipated ways. We haven't had a crash like this in awhile, but if you had keen eyes, you may have spotted that when Fiddlesticks was hovered in Picks/Bans last week, the old splash art snuck back in due to an update in the API that we were calling to get his image.
At the end of 2022 our goal was to launch a 1:1 equal to our previous HUD and new HUD. Winter Split 2023 was spent adding new features (which resulted in some instability) that we nailed out and solidified into "HUD v2.0" that we've been running since the start of Spring. This push for stability was largely successful: so far in the Spring Split, only in this game that you mention we had to revert back to the "Old HUD" -- and it was because of my above-mentioned user error.
The two pieces of good news from that swap: (1) We've learned how to further Depa-proof the HUD settings to hopefully prevent me from breaking it in the same way again (thank gosh), and (2) we've identified a way to "recover" back into our New HUD following a swap away from it that we are now developing towards.
Overall, I think our new HUD brings with it a really huge benefit in all of the additional information that we're able to visualize with it. To name a few quick things, we've added Stacks for a select (and growing) number of Champions, Baron Buff Active Indicators (to show who's lost the buff without having to see them on the rift), lane-by-lane gold difference, XP bars, and to hit on some cosmetic upgrades, the Viego Transformation Indicator and dedicated icons for multi-kill events in the kill feed. (And we have a LOT more on our backlog and wish list, including entirely new HUD arrangements and views for specific moments of the game, which we're beta-ing behind the scenes as I type)
The benefits outweigh the potential risk of an occasional crash, and even when we do crash, we're still able to revert back to a safe "Old HUD" that still contains core information while we work to restore service.
I hope this provides some amount of transparency and cool info about what goes into the HUD! If you have other questions, you can AMAA! I'm here with Eike (Riot Timbolt) who has led the development of the HUD and is waaaay smarter than I am with regards to the technical stuff. Can't promise we can answer all of your questions, but we'll keep an eye out for replies!
Why is LEC building it from scratch on their own when every league does the same thing? Why is there no cooperation between leagues to build and maintain a single tool?
Different Leagues have different Studio Hardware and Tech, as our studios were built and upgraded at different times. This means that we have, across our studios, a number of different graphics systems. (It's actually really interesting, because different countries have different TV Broadcast "metas" where hardware that is super common in one country is not particularly common in another!)
However, we agree— and are working to get to a place of common operations. Our studios have become a lot more standardised in the past few years, and we are continuously getting better at developing things together from what I've witnessed across the past five years I've been here at Riot. (Though, admittedly I can't share much about this collaboration, because I'm not sure how comfortable other broadcasts may be with me sharing more!)
Thank you for the extremely thorough answer. This was exactly what I hoped to see opening this thread.
I'm happy that I could inform!
i didn't know you guys built that from scratch, that's cool, thank you for your work haha
and btw, is this a LEC product only or are you receiving help from the "tech" side of Riot to use this tool in other broadcasts?
Hey there. It is not specifically an LEC product only, but it is currently a product developed by us the EMEA team. So you can see it used in the current EMEA Masters as well for example. We do rely on a bunch of products developed and supported by different tech teams at Riot and have been fortunate to have their support in adding new data such as champion stacks for the HUD, so there has been great support in letting us experiment in this space.
We are of course collaborating with other regions and the global side of things regarding these implementations and I think you will see more development in this area across the board in the future. Hopefully our work here can lower the thresholds for others to implement some of the functionality.
You should honestly just use the default League replay/client display names like "G2 Caps" instead of doing the weird overlay that changes it to "Caps".
It makes them look less like one cohesive unit of a team and it looks more solo queue-ish, if that makes sense.
I also feel like there's also some weird artifacting around the names as they currently are.
Admittedly we removed it from the sidebars because it seemed like duplicate information that we already establish with the logo on the top scoreboard. Might be more up to personal taste, but I'm all ears for feedback!
With the artifacting, if you have the chance to grab a screenshot when you see it to send over to me, and let me know where you watched (youtube/twitch) and at what quality (source/720/etc) that would help us out immensely. The names appear fine in-studio on our monitors, but maybe some funkiness with the compression that happens when the video is encoded is to blame.
I mean, you probably had seen the reddit posts regarding the new HUD, but just in case you hadn't:
It is really great and all you guys did a superb job with it! The viewing experience of LEC is SO much better because of it. Keep up the good work :)
Thanks a lot! We appreciate the positive feedback, hopefully we can iron out the remaining technical challenges over the next few months.
During the pandemic, pro play moving to non-stage games, did the structure and approach to technology change after Covid-19?
It seemed like problems, most commonly game pauses, technical issues, delays got amplified and multiplied even after pro play returned to the stage.
Was there technology that you started using during the pandemic and then just stuck to it once the whole thing started going back to normal?
I think this is actually a really interesting question to answer because the number of pauses didn’t increase— however, they became more visible!
When we moved to non-stage gameplay, we were operating in 10 minutes of delay to broadcast from game. Our minimum delay was three minutes for competitive integrity but we added an additional seven minutes to allow us to triage pauses without impacting viewers. This is because while trying to solve pauses, we assumed it would take longer given that everybody was remote.
This meant that for the entire time that we were playing remote, the viewers actually didn’t see all of the pauses that happened, because when they did happen, we would just “skip over” them. Everything from Internet outages to more minor things like needing to adjust mouse or keyboard settings. Viewers would only see pauses if they were longer than seven minutes.
Before remote play, we had all of those pauses, and now, after remote play, we have them too. But, we can’t hide behind the delay when players are in the studio to cover the pauses.
Since the pandemic we have maintained the technology and hardware required to operate remotely in case it becomes necessary to use.
I don't have question but a suggestion for a feature that I think will be really awesome to see in LEC. I posted it a couple weeks ago in a different thread but I'm afraid I was too late and it got burred in the comments. Here it is:
What I'd like to see is a total gold spent on combat items for each team stat.
Currently we have the total gold accumulated by each team during the course of the game at the top of the screen but that stat can be misleading at times - since it also counts gold spent on consumables like pots and wards, and gold that players have in their inventory that doesn't contribute to anything at that moment.
What I want is literally a stat that adds up all the gold spent on COMBAT items in player's inventories. This stat will be super useful to see before a teamfight starts as it will clearly show which team has the advantage. So for instance if a team is ahead let's say 10k gold total but didn't base before a teamfight and has 5k of that gold sitting in their inventories doing nothing, this new stat would show that they are in actually only 5k gold ahead going into this teamfight (instead of the misleading 10k total gold number).
I think this is one of these stats that casters would love to have while building up for a big fight in the end game.
I agree, we should add this somewhere, I ll add it to the backlog. Not sure where we will show it, it will likely be a triggered graphic that casters and observers can show when they wanna talk about it. How often they actually want to use it would then be up to them, which makes the most sense to me for this.
Hey there! I'm John Depa, the Executive Producer of the LEC!
Was lurking around Reddit and saw this post. I have experience with this— so I can definitely chime in! Ahaha.
I'll start with why things go wrong. Super TL;DR - A lot of reasons that are not related to the game, and it's getting better with time!
We've been talking about building an improved HUD since 2018. For a few years, we utilised a graphics system called Viz Trio (which we use for most of our other show graphics) to design and render our HUD over the game, but we found that it was ultimately too limiting for what we envisioned for a great HUD display for our game. And so, after awhile, we decided to simply build a new tool from the ground up to run our HUD. We test this tool regularly whenever we roll out new features, but ultimately, because we're building it ourselves, we don't benefit from the sheer amount of user testing that larger graphics systems benefit from. This is what ended up happening for VIT vs MAD last week, and the user who broke the system was actually me... I utilised the tool by setting a setting in an unanticipated way, and managed to crash it... (Sorry!)
Another common way things can go wrong relates to the methodology we use to get data from the live game. Our HUD relies on a new system that is still under active development. Sometimes things in this development change or react with the graphics system that we've built in unanticipated ways. We haven't had a crash like this in awhile, but if you had keen eyes, you may have spotted that when Fiddlesticks was hovered in Picks/Bans last week, the old splash art snuck back in due to an update in the API that we were calling to get his image.
At the end of 2022 our goal was to launch a 1:1 equal to our previous HUD and new HUD. Winter Split 2023 was spent adding new features (which resulted in some instability) that we nailed out and solidified into "HUD v2.0" that we've been running since the start of Spring. This push for stability was largely successful: so far in the Spring Split, only in this game that you mention we had to revert back to the "Old HUD" -- and it was because of my above-mentioned user error.
The two pieces of good news from that swap: (1) We've learned how to further Depa-proof the HUD settings to hopefully prevent me from breaking it in the same way again (thank gosh), and (2) we've identified a way to "recover" back into our New HUD following a swap away from it that we are now developing towards.
Overall, I think our new HUD brings with it a really huge benefit in all of the additional information that we're able to visualize with it. To name a few quick things, we've added Stacks for a select (and growing) number of Champions, Baron Buff Active Indicators (to show who's lost the buff without having to see them on the rift), lane-by-lane gold difference, XP bars, and to hit on some cosmetic upgrades, the Viego Transformation Indicator and dedicated icons for multi-kill events in the kill feed. (And we have a LOT more on our backlog and wish list, including entirely new HUD arrangements and views for specific moments of the game, which we're beta-ing behind the scenes as I type)
The benefits outweigh the potential risk of an occasional crash, and even when we do crash, we're still able to revert back to a safe "Old HUD" that still contains core information while we work to restore service.
I hope this provides some amount of transparency and cool info about what goes into the HUD! If you have other questions, you can AMAA! I'm here with Eike (Riot Timbolt) who has led the development of the HUD and is waaaay smarter than I am with regards to the technical stuff. Can't promise we can answer all of your questions, but we'll keep an eye out for replies!
Adding on a bit here to talk about testing. Overall we just have a very complex setup which makes full integration tests tricky.
The HUD is made in HTML (with Svelte as the GFX frontend for those interested) and the rest of the broadcast setup is not specifically designed to work well with that. That makes it hard to test all possible combinations of settings and inputs across the app itself, the observer client, the broadcast software, etc. On top of that broadcast software which allows for HTML overlays (like OBS) don't usually run super up to date browsers and can be finicky to optimize for.
Improving those testing pipelines is definitely always a priority and I think we have learned a lot over the last few splits of running the HUD.
A triggered graphic would be perfect for it. (Or since you are planning to have different HUD arrangements in the future, it could be part of one of these new HUD scenes before a big teamfight)
Obviously you guys have a lot of other features to manage and making everything stable for live broadcast is no easy job. I want to thank you for all the work you do. The LEC HUD has been awesome and it's great to hear it's getting even better. Kudos to you and the team and I am looking forward to see your future work!
Thank you for your interest and taking the time to give the feedback above. Also thanks for the kind words :).
For remote play, wouldn't it be better to have even longer delay so that the broadcast would have more freedom to skip the pauses? Or is the issue that with longer time delay, the results get leaked before the 'livestream' finishes?
We felt that ten was managable. The more delay we added during remote play, the more we had to track what was happening ahead of broadcast. Pauses longer than seven minutes were rare. We often only utilised 2-3 minutes to clear pauses.
Have you considered straight-up modding the Spectator UI? Or is that what you are already doing when you mention you built something from the ground up?
Just by looking at it, 90% of that HUD can be achieved with basic asset swaps, the scoreboard, Champion Portraits Frames, HP/Mana Bars, fonts. If 90% of your HUD was running natively in League wouldn't it be more stable? All you have to add is the things that the Spectator don't give you, like the XP bars for each Champion, gold different between laners, etc... making it much "lighter" and not such a big deal if it fails since most of the UI remains the same.
I know it can be done because I have extensive experience doing it, and you being Official Riot should have even easier access to UI asset swaps, if you need an intern to do it, I'm right here lol
We didn't consider modifying the spectator UI as this would likely be more complex and need the collaboration of more teams and people to accomplish additions. (For example, let's say we wanted to add a feature— now instead of keeping this just to the broadcast team, we now need to design in collaboration with the game teams!)
It also lets us do things like the "tab down" effect, where the player cameras move in sync with the scoreboard when a teamfight starts. The observers hit a button that trigger a DVE Effect on our Keyer Layer that moves the entire section downward to reveal the game underneath! Otherwise you might have these elements moving out of sync from each other.
Depa-proofing live is the ultimate stress test ;)
Thanks for the insight. Are you guys still using Tricaster for your switching?
The tricaster must have been long before my time! We're running on a Ross Acuity switcher with 4 MEs (some of which we use as split MEs). On roadshows and some of the other studios at Riot use Grass Valley Kahunas!
Why does Riot have multiple people working on similar systems? Not very scalable.
Also, taking the opportunity here to ask: If one wanted to join Riot to work on such internal systems, which roles from the website would be most appropriate? Really appreciate an answer, if you know.
u/EUTriaged talked a bit more about your first question in a different thread here: https://www.reddit.com/r/leagueoflegends/comments/12jnymy/comment/jfzc1d1/?utm_source=share&utm_medium=web2x&context=3
Hard to answer the second one since there are lots of open roles in Software Engineering it seems and lots of them touch internal systems I would assume.
Hey John,
Is there a chance we could see (instead of just an arrow pointing to one player with the gold difference) a rough estimate of each players gold in the hud. So you’d see for example, in the Rekkles vs Hans Sama tragedy in winter split. 5.1k (5k >>>) 10.1k.
So we’d see the total gold of each player, AND the gold difference? I’m not sure if you’d deem this to be unnecessary, but it would be nice to be able to see the gold difference between players in different roles. Not sure if this would make the whole “gold difference” stat redundant though.
Like, if both midlaners are even in gold, but are 3k above the rest of the lobby, it’s different from them being even and down 3k. And it would be nice to be able to see things like this without having to clock in to the Lolesports page, sometimes I watch on YouTube or twitch instead and I can only see said stats when production brings up an overlay.
I dont think we'll permanently show the total gold, there just is not enough space to show that and the GD. There are two ways this is displayed occasionally though:
Just a info, the game in EMEA on Thursday (SKP vs ANS? greece team) counted am execute as a kill for the enemy team. Maybe it''s a bug, or something. But idk if EMEA Masters uses the same tool.
Yep it is a bug, it happened in LEC last week as well. It should be fixed for LEC this week, not sure if we can get the fix into EMEA Masters for the current tournament. Thanks for reporting it!
Hey thanks for the response! By any chance do you know what programming languages or tools are used to build something like this?
Our overlay is basically just a website, so it is made with HTML/CSS/JS, specifically we use Svelte for the graphics frontend (everything you see), with a Node.js backend. On top of that you see some things that don't come from that overlay, for example the mini map, which comes from the observer client.-
Hey there! I'm John Depa, the Executive Producer of the LEC!
Was lurking around Reddit and saw this post. I have experience with this— so I can definitely chime in! Ahaha.
I'll start with why things go wrong. Super TL;DR - A lot of reasons that are not related to the game, and it's getting better with time!
We've been talking about building an improved HUD since 2018. For a few years, we utilised a graphics system called Viz Trio (which we use for most of our other show graphics) to design and render our HUD over the game, but we found that it was ultimately too limiting for what we envisioned for a great HUD display for our game. And so, after awhile, we decided to simply build a new tool from the ground up to run our HUD. We test this tool regularly whenever we roll out new features, but ultimately, because we're building it ourselves, we don't benefit from the sheer amount of user testing that larger graphics systems benefit from. This is what ended up happening for VIT vs MAD last week, and the user who broke the system was actually me... I utilised the tool by setting a setting in an unanticipated way, and managed to crash it... (Sorry!)
Another common way things can go wrong relates to the methodology we use to get data from the live game. Our HUD relies on a new system that is still under active development. Sometimes things in this development change or react with the graphics system that we've built in unanticipated ways. We haven't had a crash like this in awhile, but if you had keen eyes, you may have spotted that when Fiddlesticks was hovered in Picks/Bans last week, the old splash art snuck back in due to an update in the API that we were calling to get his image.
At the end of 2022 our goal was to launch a 1:1 equal to our previous HUD and new HUD. Winter Split 2023 was spent adding new features (which resulted in some instability) that we nailed out and solidified into "HUD v2.0" that we've been running since the start of Spring. This push for stability was largely successful: so far in the Spring Split, only in this game that you mention we had to revert back to the "Old HUD" -- and it was because of my above-mentioned user error.
The two pieces of good news from that swap: (1) We've learned how to further Depa-proof the HUD settings to hopefully prevent me from breaking it in the same way again (thank gosh), and (2) we've identified a way to "recover" back into our New HUD following a swap away from it that we are now developing towards.
Overall, I think our new HUD brings with it a really huge benefit in all of the additional information that we're able to visualize with it. To name a few quick things, we've added Stacks for a select (and growing) number of Champions, Baron Buff Active Indicators (to show who's lost the buff without having to see them on the rift), lane-by-lane gold difference, XP bars, and to hit on some cosmetic upgrades, the Viego Transformation Indicator and dedicated icons for multi-kill events in the kill feed. (And we have a LOT more on our backlog and wish list, including entirely new HUD arrangements and views for specific moments of the game, which we're beta-ing behind the scenes as I type)
The benefits outweigh the potential risk of an occasional crash, and even when we do crash, we're still able to revert back to a safe "Old HUD" that still contains core information while we work to restore service.
I hope this provides some amount of transparency and cool info about what goes into the HUD! If you have other questions, you can AMAA! I'm here with Eike (Riot Timbolt) who has led the development of the HUD and is waaaay smarter than I am with regards to the technical stuff. Can't promise we can answer all of your questions, but we'll keep an eye out for replies!
Depa is the GOAT
I don't have question but a suggestion for a feature that I think will be really awesome to see in LEC. I posted it a couple weeks ago in a different thread but I'm afraid I was too late and it got burred in the comments. Here it is:
What I'd like to see is a total gold spent on combat items for each team stat.
Currently we have the total gold accumulated by each team during the course of the game at the top of the screen but that stat can be misleading at times - since it also counts gold spent on consumables like pots and wards, and gold that players have in their inventory that doesn't contribute to anything at that moment.
What I want is literally a stat that adds up all the gold spent on COMBAT items in player's inventories. This stat will be super useful to see before a teamfight starts as it will clearly show which team has the advantage. So for instance if a team is ahead let's say 10k gold total but didn't base before a teamfight and has 5k of that gold sitting in their inventories doing nothing, this new stat would show that they are in actually only 5k gold ahead going into this teamfight (instead of the misleading 10k total gold number).
I think this is one of these stats that casters would love to have while building up for a big fight in the end game.
This has been implemented!
You can see it before some fights (and even during). It shows the Combat gold (gold in inventory, excluding consumables), average level and also shows some active items next to the champ portraits with their cooldowns.
We are still iterating on it, so the exact implementation might change over time.
devtrackers.gg