My favorite video game ever is Age of Empires 2, a real time strategy game which was originally released in 1999.
The game has a lot of depth. When I was younger, I exclusively played the game with cheat codes so I could mass up large army and roll some computer player. Now I see it more of an optimization problem and a battle of decision making. Both ways of playing are fun. You don't have to have to be able to do a million actions per minute to have a good time. My wife and I play together. Everybody seems to get something different out of it and it seems to have a fairly wide demographic.
Microsoft released an expansion to the game in 2000 and the title proved successful. It was my game of choice at LAN parties and every game offered exciting play and a lively post game debriefing session over pizza and soda.
13 years later in 2013 (easy math) the game was still fun and I was excited when I found out that there would be a new release of the same game - Age of Empires 2: HD edition. The game came out on Steam (no more losing the CD), with support for higher resolutions and MUCH easier networking.
Competitive multiplayer largely migrated over to a platform called Voobly, which I always thought looked sketchy and I never trusted it enough to set it up.
Over time, three additional expansion packs were released for the HD edition: The Forgotten, The African Kingdoms, and Rise of the Rajas.
Of the three HD expansions, I only purchased the first one and I was disappointed with it. The game play was fine, but the buildings and art added by the expansion looked... bad.
The Goth's and the Aztec's architectures are immaculate. There is consistent shadow and you can pick out little details like miss-aligned roof tiles or luminescence emanating from the inside of the structure, as if somebody actually used these buildings. Contrast these with the Slavs and Italians, which look block-like and lazily textured. The Italian building's shadows look like the sun is at two different heights. The Slav's tower doesn't even have a shadow.
The new content didn't fit in well with the rest of the game. It didn't look official at all and it ruined the experience for me, so I disabled it.
After much anticipation, in late 2019 Microsoft released another version of the game. Age of Empires 2: Definitive Edition. And it's beautiful. They fixed the artistic inconsistencies, merged all the expansions into a single game, added a matchmaking system, some quality of life improvements (farm auto reseed!), and sold it for $20 (again on Steam). More than 20 years after its original release the game is still wildly fun for me, it remains accessible to new players, and it still has a solid community.
Anyways, along with the new matchmaking systems comes a Definitive Edition rating and ladder. You get points when you win, lose points when you don't, and move up or down the ladder respectively. Thanks to an awesome 3rd party site called aoe2.net, any player with at least ten completed rated games can see where they stack up among other players on the competitive latter.
This works great if you're in the top 100 or so jockeying for position among names you recognize, but not great if you're part of the masses. My rating is 1262 and, at the moment, that's enough to be ranked 6213rd on the ladder. Is that good or nah?
Fortunately, aoe2.net provides an API for pulling leaderboard data. Some resourceful Redditors created and posted histograms of the distribution of ratings so you can roughly see where your rating put you with respect to all other players:
This is awesome, but I found myself squinting at the graph trying to guess how many standard deviations I was from the mean while in the back of my mind questioning whether the distribution was normal enough for it to matter. The other issue is that the distribution could be changing everyday as people play more games and the underlying data shifts.
We needed a website with a chart that was updated consistently and that could show you exactly where any given player fit in with all the others ratings-wise. I figured I could do that.
Here's the thing about Google Charts, it looks just fine, but every time I use it I very quickly run into limits on what I can customize. In this case, I wanted to be able to highlight specific histogram buckets that a player belonged to. That was a no-go with Google Charts. So, after so poking around various charting libraries I settled on plot.ly. The documentation seemed pretty good, and it looked like I'd be able to do what I wanted to do.
I host the site on Github Pages, which is great because it works well and it's free for public repositories. I use this feature frequency. I also took advantage of Github Actions for the first time. It allows me to automatically invoke a new build of the application daily at midnight GMT. The build involves getting fresh data from aoe2.net, building the web page bundle (HTML, CSS, JS), checking the new page into source control, and deploying the new site. I use NextJS as a static site build tool for this because it provides an easy way to query the aoe2.net API (or any other API) during the build process. Not only does this process update the site frequently without me have to remember to do anything, it also makes my Github contribution history look stellar:
Missed a few days in there because sometimes aoe2.net is down for maintenance and the build fails. Anyways, Github Actions is sweet - I thought for sure I'd have to pay for a cloud computing service to do the automatic updates, but public repositories get free build time. Woot!
I originally published the site on my personal Github account. But after I did so, I discovered that there is an existing development collective around Age of Empires 2 called Seige Engineers. After connecting with them on their Discord, they offered to put the site behind one of their subdomains. So it's now ratings.aoe2.se which is much easier to remember than a Github pages domain.
Check it out: https://ratings.aoe2.se/
Github repository: https://github.com/SiegeEngineers/aoe2-de-rating-charts
More than a decade of playing puts me here:
Of course you can play aoe2 in a non-competitive context. Many people do. Any multiplayer lobby game that isn't part of the ranked match is called and an 'unranked' match. Surprisingly, there are still ratings attached to these games. Just like in ranked play, you gain or lose points for every win or loss respectively.
People occasionally request that I add charts for 'unranked'. There are two issues with this:
- There are a lot more unranked players. This means that it takes longer to fetch the data from the api, longer for the web page to load, and the browser lags a bit with all that data. I'd have to redesign some things to get this working well.
The data doesn't look all that clean anyways. First of all, a ton of people just have a rating of 1000 and it makes the chart look like it's flipping the us the bird: I've been told this is because people play against AIs with their friends and these matches count toward total games played but they do not influence a player's 'unranked' rating.
But that's not all, there is a whole slice of the distribution (about 1000 +/- 50) that looks like it just doesn't belong because the values are abnormally high. Here is the same chart with all the 1000 rated players removed: It's possible the abnormality can also be explained by the play-multiplyer-game-vs-AI effect, but it ends so abruptly about 50 points out on each end. I think there might be something else going on there.
I didn't make the site for any reason other than that I thought it was cool and useful. Since it's free for me to operate, that works out great. However, now that I've put a bit a work into it, it's really satisfying when other people think it's useful too. So, without trying to be too insufferable, I shared it on Reddit and mentioned it in chat on a few Twitch channels when I thought it was relevant.
I started to see other people link it on forums or Reddit or other Age of Empires sites I didn't even know existed. Which is neat.
Here is Hera, one of the game's best players. I got enough stream points on his Twitch to have him shoutout one of my medias (called Potato points on his channel) and, of course, I picked this.
Elo is a system for determining relative ratings originally used to evaluate chess players. Elo is not an abbreviation (it's often seen written as ELO, I'm assuming this is because of the band) rather it is named after the system's creator.
That I can see, none of the official Microsoft sources for Age of Empires 2 ever mention 'Elo'. [Edit: this update actually refers to ELO: https://www.ageofempires.com/news/rankedtg-update-5-2021/]. The number that determines your place on the ladder is always referred to as 'rating' which implies a different implementation. The only place I reference it in my tool is in the description. The idea being that some people will search for the term "ELO" anyways even if it isn't strictly correct.
I wanted an easy way to see the ratings distribution for any given match listed on Aoe2.net. So I made a bookmarklet.
If you want to use it too, you can click and drag the red bookmarklet link below and add it to your bookmark bar. Then click the bookmarklet while on the aoe2.net "My Match History" page or a player's profile. This will linkify the match title to take you to ratings.aoe2.se. Like so:
If you would like to see the source code used to create the bookmarklet link below it's here: https://gist.github.com/thbrown/ded5bf8f7b7cac62ed96dc15bf8e8128
I generated the one below by pasting that code into the bookmarklet generator here: https://codepen.io/myf/pen/lfuHx
That being said, here is the link:
Keep in mind that this is fairly brittle and can break if the aoe2.net UI changes. I will try to keep the bookmarklet up to date with any changes.
I though this would be way easier than it ended being. How hard could it be to iframe an existing application into an extension? Apparently fairly difficult. Feature creep is mostly to blame, but I could write a whole different post on the annoyances I encountered during of Twitch Extension development.
Anyways it's done. It lets channel broadcasters and moderators highlight player's ratings on component. If 'bits in extension' is enabled, viewers can also add players to the chart in exchange for bits.
As far as WIPs go, this one is in a pretty good state. But, of course, there are areas that can be improved:
- Performance - Page load times are longer than I'd like. There is also a noticeable delay when selecting a player. The delay is painfully obvious when Hera selects TheViper in the twitch clip above. I've made some improvements since, but I still need to look into webworkers for some processing. Perhaps I can do plot.ly stuff in a webworker w/ some kind of virtual DOM. Maybe move some more processing to build-time without adding too much network overhead.
- Annotation Layout - I had to write the algorithm that positions the annotations for player names myself and it's not that great. If you add a lot of players you'll see what I mean. This is mostly challenging because of changing screen sizes (e.g. mobile vs desktop).
- Twitch Extension - Could expand this to be more than just a component (e.g. make it mobile, or a panel as well)
I have one other, smaller, AoE2:DE project: a helper for playing "Guess the Elo". Check it out here.