Inspiration

I'm a longtime gamer that always loved multiplayer games. Every time there is a new popular competitive game I want to try my best against the others. I love e-sport games like Starcraft 2, Counter-strike, Magic the gathering and many others - I always liked to prove everyone I can be the best. Same situation was with the Auto-Chess games - from the first day I've learned about this new genre I wanted to test it myself. Teamfight Tactics seemed like a good choice.

Knowing that no one can become best without proper studying, I started watching TFT streams. Unfortunately the game was very hard to understand for a newbie. The match rules itself were quite easy, the biggest problems was understanding synergies between units. What's more all the units on board and on bench were represented by just a model with no name, which made game analysis very hard.

That's how the idea for TFT Tracker was born - presenting details of the units played in a games make TFT games easier to understand for the viewers.

What it does

TFT Tracker enhances Viewers experience, by presenting details of all units on streamer's board, bench and in the store.This makes it easier for viewers to learn about the game, which will allow them to better understand heroes synergies.

During the game viewer may hover mouse cursor over units to get details of the unit, including its name, level, synergies list and more.

This makes Teamfight Tactics matches even more immersive now!

How I built it

Project consists of few layers:

  • (external) Overwolf app (https://www.overwolf.com) - provides informations about game state.
  • Extension Backend Service - this is the main backend for the extension. It connects to the Overwolf in order to get game events, that are then used to reproduce the match state. Uses Twitch PUB/SUB service to pass information about match to the Extension. Exposes REST API used in extension configuration. Written in node.js, hosted on AWS.
  • TFT Tracker Extension - Web application written in React (javascript). It presents information about units in a game.
  • Twitch PUB/SUB service - used by EBS to pass match state to the Extension.

The core of the extension is Overwolf app (https://www.overwolf.com) which provides information about the TFT matches. Every time the game state changes Overwolf emits events via its PUB/SUB service, which are caught and processed by EBS. Every time game state in the gets updated, it’s transported from EBS to the Extension via Twitch PUB/SUB service.

Challenges I ran into

The first major challenge I ran into was to communicate with the Overwolf backend service - for the first couple of days it was not functioning correctly (due to TFT update), which had frozen my work for quite some time. Thankfully issues were solved, and I was able to get data from them.

Another challenge was to implement extension itself - even though I have past experience with twitch extensions starting new project is always a new journey, and Twitch extensions requires quite a lot of setup before starting coding the business logic itself. However, I think that it’s much easier now thanks to the Native Developer Rig, which made the experience easier than before.

The last challenge was to prepare UI that is clear and it matches to TFT game. I’m a software developer, not a graphic designer, but after a few iterations I’am still happy with the results.

Accomplishments that I'm proud of

Implementation of the extension in limited time is something I’m really proud of. I feel I used my whole experience including project management and programming skills in order to meet the deadline. The extension itself

What I learned

  1. Usage of Native Developer Rig
  2. Overwolf platform integration

What's next for TFT Tracker

I’ve a bright future planned for TFT Tracker. Some of the future plans are:

  • present Units statistics (i.e. dmg, attack speed, etc)
  • present Items
  • add units library with metagame tips (e.g. suggested items per unit)
  • present player’s match history

...and many more. It’s just a start!

Share this project:
×

Updates