Trackmania Keybinds

[Mireille Kreines]

Thereseems to be all sorts of ideas floating around the head of a developer, but figuring out which idea to put the work in is a lot harder. And once we find the time to work on a side project, we get sidetracked by any other side project idea we came up with during our morning coffee. But sometimes, the perfect formula for a side project can arrive out of the most mundane situations.

This is the story of how I accidentally built TMViz, a tool that became popular among Trackmania streamers. This post will contain a lot of technical details. But with it, I do hope to tell a story about how I developed and still actively maintain a side project which has a decently-sized userbase.

I've been livestreaming consistently for about 1.5 years under my own Twitch channel. I've been playing a lot of racing games on stream, and as of late I've also been streaming Trackmania almost consistently. I've played Trackmania casually ever since the Trackmania Nations Forever (TMNF) days in 2009, and with the new release of Trackmania, I want to take it a little more seriously.

As I started watching some popular Trackmania streamers on Twitch for inspiration, I've noticed that some streamers have a custom overlay which shows the current inputs on their controller/keyboard, one of them being padviz. But sadly, back then I could never find out what it's called. And I was the kind of guy who was very shy in chat, because I'm fairly new to the Trackmania community on Twitch.

To make the first iteration of my overlay, I used a technology which 1) I'm familiar with; and 2) has been tried and tested by many different apps for ages: the web. In JavaScript, we can use the Gamepad API to receive inputs from game controllers and react to it. Remember this API - it will become important later.

I'm a fan of tools that you can set up quickly and then forget about it. In padviz, you need to run a separate app in the background to provide the overlay, and you will have to do that every time you start your stream. By providing an overlay that can be included in OBS as a browser source, it's a truly set-and-forget solution.

I used the first iteration of this tool on my own stream for a couple weeks. At some point during my stream, someone in the chat noticed my tool and that it's different compared to padviz. He asked whether or not it might work for another streamer's controller, since padviz won't work for this one streamer.

Turns out, since padviz was a desktop app written in Python, support for lesser-known controllers was quite flaky. The streamer in question uses a Stadia controller, which was not supported in padviz. Since the web-based Gamepad API is supported by all major browsers - including the OBS browser source - and supports any controller that you could plug into your computer, I immediately saw the need for a standalone version.

I recently read a thread by Kavaeric about the inner workings of UI/UX design, and I realised I already have a mental model of what my target users are going to be like while coming up with the standalone version of TMViz:

The Overlay URL scheme takes some imspiration from Discord StreamKit. This way, I could build a system to create a personalised URL based on the settings saved in the customizer. None of the settings is stored in any external server, since everything is saved in the browser's local storage.

At this point, I was still using the first iteration of my overlay, so I wasn't able to eat my own dogfood. I decided to transition to TMViz so that I could test this issue, and I ran into the same issue. I also realised that when I opened Task Manager, the OBS process which houses the browser source would have an unusually high memory usage.

I decided to run a memory profiler while the overlay was being used, and soon enough, I found the problem. It turns out that implementing the UI of the controller overlay in Chakra UI caused a memory leak. This will cause the overlay to freeze when the OBS browser source can't handle the memory. So I immediately rushed to rewrite the overlay part of TMViz to use CSS Modules.

Around this time, TMViz was also picked up by a popular streamer. He requested me to tweak the overlay so that he can also visualise his use of the D-pad at the same time. It turns out, some players sometimes switch between analog sticks and D-pads when driving on different surfaces (for example, ice).

I spent a few hours refactoring the control schemes to support multiple input methods. I also tweaked the design of the customiser to make setting up keybinds easier. I pushed the update and notified the streamer that the feature is implemented.

The next day, the same streamer reports some issues. After asking some questions, I learned that sometimes he has two controllers plugged in. It turns out, the order of when the controller is plugged in takes precedence in the overlay, and TMViz would. And through computer restarts, the order might change, because of how Windows detects USB devices during bootup. I tweaked the customiser so that users can pick which controller gets picked up by the overlay.

Then something dawned on me. At work, we've been using Sentry to log any errors from our users. Sentry collects detailed stack trace from any user whenever an exception is handled within the code, and it has been instrumental to us at work. So I thought it would be a great time to finally give it a spin on my side projects.

Fixing this issue didn't take that long. But of course, debugging and triaging this issue did take a while. I'm glad that tools like Sentry exist. Otherwise the best way of debugging this issue would be individually contacting whoever reported the issue, and asking them about technical stuff they wouldn't understand.

After this final fix, the overlay has grown more stable over time. It's still being picked up by more streamers as time goes, and it's becoming more commonly shared around amongst the Trackmania communities on Discord.

So what did I learn while building this? Sometimes, the best ideas for a side project are the ones that are already in front of your eyes. Solve real problems you are having. As the best React instructor on Earth, Kent C. Dodds, would tell us:

[Don't] invent problems just so you can create solutions to them. Nobody will care. Contribute to existing solutions, and solve problems where there are no solutions or the existing solutions are lacking.

I would like to personally thank all the streamers who use TMViz. It always brightens my day seeing that tiny little overlay every time I browse through Trackmania streams on Twitch, regardless of viewer count. I have never felt any more invigorated to continue maintaining any side project than ever before.

What's next for TMViz, then? The next item on the list would be keyboard support. This would be a technical feat in of itself, but I understand there's a lot of demand for this. So I'll be sure to make that a reality.

Until then, I can assure everyone that I will keep maintaining TMViz as long as I remain in the Trackmania scene. I am also open for any questions regarding the technical side of the overlay, or just to ask for technical support. You can mention me on Twitter, or you can head over to the #tmviz-support channel on my Discord server.

The in-game leaderboard widget (Settings -> Interface -> Always display records) will show you a little ?️ icon next to each record that you can use to load the ghost into your current session.

To watch a specific record from the leaderboard (such as the world record), you can also go to trackmania.io, select the leaderboard and download the ghost file. See here for instructions on how to watch the ghost in-game.

Hey everyone, I'm sad that it had to come to this, but it's finally time.

Due to an even higher volume of harassment and slander that I've been met with in the past few weeks, I am entirelyquitting modding.

Some people might've realized already that the Discord link is missing on the website, I am scheduling my Discordaccount for termination.

I have released new, final versions of every mod I still actively support, from NFS to Midtown Madness, just to makesure nothing is left unfinished or inconsistent.

It turns out the people who have been harassing me non-stop for the past 3 years were not stopped by me simply quittingGTA.

I have recently heard that they were trying to pin the GTA V leaks on me, and considering they're willing to go THISfar, even putting me into the crosshairs of Take-Two, and also considering people are believing it wholesale, I am notgoing to risk anything this serious. I quit.

Before that though, I'd like to make a final statement about everything that I've been put through over the years.Basically a warning about ever interacting with the GTA modding community.

If you haven't read my previous post about quitting GTA, go read it now. It'll put a lot of things into context.

For some additional context, we'll have to go WAY back. I've already said that these people are willing to use years-oldout of context screenshots to discredit and slander me, so we're going all the way back to 2020, when I was 16.

At that time, I was part of a GTA IV multiplayer community. We were basically the main group of people who still playedMP, organized events, etc. My Discord server was originally a place only for this community.

In fact, this is where both ZPatch and ZMenu initially came from! ZPatch being a fork of XLivelessAddon withcompatibility for Games for Windows - LIVE, to make features such as the intro skip work in multiplayer, and ZMenu beinga replacement for Simple Native Trainer for messing about in freemode, since patch 1.0.8.0 removed the separated lobbysystem between modders and non-modders but broke compatibility with Simple Native Trainer, so we had to find or createan alternative, which is where I stepped in and ZMenu was born.

It was a tight community, we took care of our own and self-moderated the Peer 2 Peer matches, so we could play in publiclobbies and not be bothered by the countless cheaters.

For context, it was remarkably easy to just go on Google and install a mod that allows you to crash the games of entirelobbies of players. We were trying to counter this in any way possible, and were mostly successful in doing so, althoughthere were some really sophisticated tools that could crash lobbies in a single frame after the player joined in.

I was one of the main people who helped with this anti-cheat effort, I created ways to auto-kick and auto-ban cheatingplayers if you're the host of a match, first based on player name, then based on XUID (the Xbox Live user ID), PCID (an Xbox Live generated unique ID, completely random) and IP.

All of this information is in plain view as the game's multiplayer is Peer 2 Peer, which makes this rather simple.If I recall correctly, a part of this still lives on in a similar community called GTRF, where they are using a specialscript to ban cheaters on an XUID blacklist if the community is hosting a game.

3a8082e126