1. Intro
Hi, we are the developers of the Overwolf desktop app "PatchMe" created to support players of the online game "League of Legends." In this blog, we will be discussing the purpose of the app, how it was created, its features, as well as highlighting the technical difficulties and struggles we faced during the development process and how we tackled these issues.
2. Why create PatchMe?
League of Legends is a massively popular online multiplayer game created by Riot Games, with millions of active players worldwide. The key aspect of League of Legends is that players assume control of a character called a Champion and engage in battles against other players who control different Champions in 5v5 matches. Each Champion has different stats (such as Health, Damage, etc.) and spells that can be used to attack enemies and protect allies. As the match progresses, players can upgrade their Champion by leveling up their spells or equipping items that enhance the Champion's stats and abilities.
Since League of Legends is a continually evolving game, it regularly receives bi-weekly updates from the developers. These updates serve to introduce new content to the game, such as champions and items, as well as balance the game by making adjustments to existing champions or items. These adjustments can involve making them stronger or weaker.
To stay informed about these updates, players can read the patch notes released by the developers on the League of Legends website or within the game client. However, if a player wants to find specific changes that have been made to a particular champion, they would need to go through the patch notes one by one, searching for any modifications related to that champion. Alternatively, players can rely on third-party websites that may provide this information, as there is currently no official, easily accessible method to find it.
Furthermore, there is currently no way to check these patch notes during a match, nor is it possible to access champion spell descriptions for champions other than the one the player is currently using. This lack of accessibility poses a challenge, particularly for newer players who are still learning the game.
Our solution is a desktop app that provides easy access to all this information and more, both outside and during a match of League of Legends.
3. Choosing the Stack
Our first instinct as web developers was to create a website that could provide the needed information to players. However, that does not solve the issue we were aiming to tackle: easy and quick access to needed information during a game. We knew we had to create a desktop app, which meant we had a few different choices to consider for its development. It is possible to create a desktop app using frameworks like Electron or Tauri. However, incorporating an in-game overlay using these frameworks would be challenging.
In our search for alternatives, we came across Overwolf and decided to use it as the platform for our app.
Overwolf is a software platform specifically designed to assist developers in creating extensions for video games, which are then made available to users through Overwolf's App Store. It enables developers to create desktop applications that incorporate in-game overlays seamlessly. Overwolf provides an easy-to-use API for interacting with the League of Legends game and its client. Additionally, Overwolf APIs have been approved by Riot Games, ensuring that our app doesn't raise any concerns about cheating or the use of unregulated applications.
For the front-end, we went with Vue.js as we found it to be the most suitable framework for our purposes, and because Overwolf isn’t very opinionated towards any particular framework.
All the web scraping and data parsing are implemented in Node.js and Python, utilizing libraries such as Puppeteer and Beautiful Soup.
4. A look at the App
Let's take a look at the current state of PatchMe, page by page, while clarifying some of the notable features as well as the technical work done to implement each of them.
The homepage of the app is the Champions page. Here, you will find a list of all the Champions currently available in the game. This list can be sorted either alphabetically or by showcasing the most recently updated Champions at the top. Additionally, you have the option to search for any specific Champion using the search bar.
This list of Champions and all the necessary information to display it (except for the images) is fetched only once during app startup from an online JSON file. This JSON file contains information such as the Champion's name, a list of patch versions in which the Champion was updated, and a description of the Champion's most recent changes.
.
.
.
"Kog'Maw": {
"ChampionName": "Kog'Maw",
"ChangePatches": ["9.21","10.1","10.13","10.18","11.5","11.9","11.18","12.10","12.11","13.8"],
"LatestChanges": {
"B": "",
"P": {
"SpellName": "Passive - Icathian Surprise",
"Changes": [
{
"Tag": "NEW",
"Change": {
"Attribute": "Run Kog, Run!: ",
"Before": "",
"Indicator": "",
"After": "Kog’Maw is now Ghosted while in his passive form"
}
},
{
"Tag": "",
"Change": {
"Attribute": "True Damage: ",
"Before": "125-550 (based on level)",
"Indicator": " ⇒ ",
"After": "140-650 (based on level)"
}
}
]
},
"Q": {
"SpellName": "Q - Caustic Spittle",
"Changes": [
{
.
.
.
This information can be viewed when clicking on a certain Champion to access its individual page.
On this page, the user can select a specific patch from the dropdown to see the changes undergone by the Champion in that patch. In the background, the app fetches a new JSON file that contains all information related to this Champion. This approach ensures the app doesn’t download unnecessary data during startup. This Champion JSON file contains information such as the complete history of changes for this Champion as well as its current stats and detailed spells descriptions.
"Changes": {
"9.21": {...
},
"10.1": {...
},
"10.13": {...
},
"10.18": {...
},
"11.5": {...
},
"11.9": {
"B": "",
"P": "",
"Q": {
"SpellName": "Q - Caustic Spittle",
"Changes": [
{
"Tag": "",
"Change": {
"Attribute": "RESISTANCES REDUCTION: ",
"Before": "20/22/24/26/28%",
"Indicator": " ⇒ ",
"After": "25/27/29/31/33%"
}
}
]
},
"W": "",
.
.
.
"stats": {
"hp": {
"base": 635,
"increment": 99
},
"mp": {
"base": 325,
"increment": 40
},
"armor": {
"base": 24,
"increment": 4.45
},
"spellBlock": {
"base": 30,
"increment": 1.3
},
"hpRegen": {
"base": 3.75,
"increment": 0.55
},
.
.
.
.
.
.
"E": {
"_rawTooltip": {
"fullTooltip": "Kog'Maw spits bile, dealing [[0]] and leaving a trail of ooze for 4 seconds. Enemies in the ooze are [[1]] by 30/35/40/45/50%.",
"parseInfo": [
{
"text": {
"text": "75/120/165/210/255 {{0}} magic damage",
"scaleHolders": [
{
"scale": "(+70% AP)",
"scaleId": "AP"
}
]
},
"type": "magicDamage"
},
{
"text": {
"text": "Slowed",
"scaleHolders": []
},
"type": "status"
}
]
},
"cooldown": "12",
"cost": "40/55/70/85/100 Mana",
"name": "Void Ooze"
},
.
.
.
The rest of this information can be found by clicking on the double arrow button in the Champion page.
In order to ensure easy readability, we have designed our app to display spells in a format similar to how players are accustomed to seeing them in the game. This required us to find a solution for highlighting certain parts of the text using different colors, just like the game does. However, since there is no official source for obtaining accurate spell descriptions, we had to rely on third-party or community projects that provide spells in plain text format. Consequently, we developed a custom parser in Python to identify the specific elements we wanted to highlight and generate the rawtooltip format seen in the JSON file. The app then renders the text based on the formatted JSON retrieved.
Upon startup, the app actively listens for the launch of the League of Legends client and subsequently waits for the player to enter a game lobby. This functionality is facilitated through the Overwolf API. As the app operates on the Overwolf platform and relies on it, certain events occurring within the League of Legends client can be detected by the Overwolf main application and are then communicated to the app. The app has the ability to subscribe to these events. Once a player enters a match lobby, the app transitions into "Live" mode, wherein it delivers real-time information to the user based on the Champions currently selected in the lobby.
Similar to Champions, Items also have a main page that displays a list of all the items available. Each item has a detailed view, allowing users to access the patch notes specific to that item. Furthermore, by clicking on the "Details" button, users can access the item's description, build path, and stats. The design of these item details closely resembles the presentation of items in the game's user interface.
All the information regarding both Champions and Items can be conveniently accessed during a match through the in-game overlay offered by the application. The overlay is usually hidden to avoid distracting players from the game, but it can be easily opened either by using a shortcut or by clicking on a configurable small widget with the mouse.
The data used in the app is shared between the desktop window and the in-game overlay. This is done to avoid taxing the internet bandwidth of users, as any spikes in internet usage can negatively impact the player experience while playing the game.
5. Compiling the Information
Riot Games offers developers access to "Data Dragon," a library that includes a majority of the game's data and assets. This library is regularly updated with each new game patch. However, the specific information provided to users in PatchMe is not available in Data Dragon. This forced us -and many other community project developers- to collect the needed data on our own.
We settled on scraping the official patch notes provided by Riot using the Python web-scraping library “Beautiful Soup”.
For Champion stats and other miscellaneous data, we used the Node.js library “Puppeteer” to scrape the League of Legends Wiki.
As for the spell descriptions, we built a database of all the spells in the game using as basis data provided by “Community Dragon,” a community effort to provide developers with all potentially required assets and data. However, since we aim to provide the latest information as fast as possible, we didn’t want to rely on 3rd party sources, which pushed us to build our own internal tool to update the spells database when a new patch is released, using the same data scraped from the official patch notes.
We hope this post has shed some insight over the development process of an app like PatchMe, and that it might be useful for anyone researching this topic.
You can download PatchMe from the Overwolf Appstore by following this link: https://www.overwolf.com/app/BmElectro_and_A3ead-PatchMe
Let us know if you have any questions you’d like us to answer in the comments.
Top comments (0)