Hacking League of Legends HUD

Don't care how, just want it done? Link + instruction at the bottom of this post

Whenever I’ve joined my friends for an occasional game of League of Legends I’ve been irritated by the fact that game won’t let me customize my HUD so I can play efficiently on my triple screen Eyefinity setup. LOL will happily render on 5760x1080px resolution, however you’re stuck with map on the far right and character screen on the far left:

Screen02

One night I’ve decided it would be a nice challenge to try and fix this. About 6 hours later the first version of a LOL Hudfixer has been born. I’ve played few games using this hack and have encountered no problems so far. It has been an exciting experience to reverse-engineer some of the logic used in the game, I’ll try to outline my findings/approach in this article.

Step one: break it so you can fix it

First I just wanted to impact the HUD in any way I could i.e. break it. Initially I’ve tried tweaking some .ini files to no avail. It won’t be that easy! Game assets are stored in raf files and before we can do anything we need to extract the contents. Luckily modding community has a tool for that – a RAF Manager. With the help of this tool we get access to a large number of resources but how to find the one used by the game to render the HUD? Actually, I have no idea. I’ve started searching for ‘Minimap’ and ‘HUD’ and kept changing random numbers in files I’ve found until I’ve noticed HUD breaks. Every time I’ve made a change I had to re-pack using RAF Manager again, start the game and see if anything breaks. Took me about 3 tries to finally stumble upon correct path:

/DATA/Menu/HUD/Hud2012/Elements/

I’ve tweaked some numbers in a file named MinimapRight.ini and my map was completely gone! Great Success!

Step two: HUD Rendering in LOL

Here is a small fragment of MinimapRight.ini file that defines size and position of the actual contents of the Minimap:

//////////////////////////////////////////
Type: Icon
Name: MinimapContent
Group: Minimap
Enabled: 0
KeepMaxScale: 1
AlwaysRespond: 1
Draggable: 0
Layer: 1
Anchor: 1,1
Rect: 832.64,576.0 - 1020.16,763.52 / 1024x768
Alpha: 0
Texture: None
UV: 0,0 - 1,1
//////////////////////////////////////////

First item that looks interesting is Rect property. It seems to be giving screen coordinates assuming 1024×768 resolution. However first thing I’ve tried is a value of 0,0 - 100,100 / 1024x768 however my map didn’t move anywhere near top-right corner. Looks like there is more to it. There is another important property we need to look at – Anchor. Here is a visualization of potential Anchor values:

anchor-points

So why anchor points are important? LOL allows HUD scaling so if you scale your map it will use the anchor point of 1,1 (as per image above) to align the map to the right-bottom corner. In order to allow that LOL will create an ‘invisible canvas’, anchor it at given point and then use Rect property to draw it’s contents. Here is a visualization:

Magic square with map positioned

If we scale the HUD using in-game settings, what really happens the M is changed and thus the size is affected but actual position (e.g. map sits in the bottom-right corner) is preserved thanks to the anchorage points, more or less like this:

Magic square scaled down

The width of the ‘magic box’ is described above as Mpx (in my code I’ve actually used constant MAGIC_VALUE). I’ve discovered that at the default scale in LOL it will be equal to 1440px.

One more complexity is the actual value of Rect, above expressed as 832.64,576.0 - 1020.16,763.52 / 1024x768. First pair of numbers (832.64,576.0) represents cooridnates for the top-left corner of rendered item – in this case top left corner of the minimap contents. Second pair represents the coordinates for the bottom-right corner of the minimap contents position. Third expression (/ 1024x768) defines a divider and while I’m not entirely sure what’s its purpose, LOL will divide the coordinates by this value before multiplying it by the M value. So the formula to get pixel value is:

pixelX = x/divider*Mx
pixelY = y/divider*My

where x and y are the coordinates of the point you want to translate to pixels and Mx and My are the magic values (at scale 1.0: Mx = 1440 and My = 1080).

Step 3: Centralize the HUD

Roughly what I was after was this:

3screens-map-target

Most likely I could stick a massive negative values for Rect coordinates – however this solution would have 2 major drawbacks:

  1. Adjusting scale just by a tiny factor would produce a massive offset causing HUD elements appearing in all the wrong places
  2. Wouldn’t work for wider screens or 5 screen setup

Instead I decided to re-anchor everything centrally and recalculate new Rect coordinates, something along these lines:

3screens-map-reposiitoned

Side note: I’ve also tried anchoring using values 0.33 and 0.66 however LOL wouldn’t render correctly with these values, my suspicion is these are stored at very low precision.

As you can see from the picture above if canvas is aligned centrally it will spread out equally to sides and if we’re to position the minimap touching the right edge we will have to use values > M (similarly to get the left borders we will need negative values). There are hundreds of HUD elements if you count every icon and every possible configuration and moving everything by hand would be very mundane and bug-prone task. That’s where my LOL Hudfixer comes handy, just fed it some rafs and it will spit out centrally-aligned files.

Side note: If your screen resolution is lower than the value of M the behavior will most likely be different!

Here is a screenshot from the modded game:

Screen after

With a touch of basic reverse engineering I’ve got HUD rendered the way I wanted. Surely Riot will eventually push a patch that breaks my hack but until then I’ll enjoy the game with fixed HUD. And if it breaks – well more hacking for me!

Update Patch 3.11: With LOL recently patched to 3.11 RAF Manager won’t be able to pack your data correctly into RAF files rendering all files you’ve modified unreadable for the game. This means that as of now if you follow the guide above, you will destroy all HUD in lol. Hope you have a backup. I’ll update this article if/when this is working again.

Update 4.9.14 (June 2014): Made this work again using my own lame raf archieve manager. If you’re on Windows here is a lazy version of the HUD Fixer with a step-by-step instruction:

  1. Backup your League of Legends folder. All of it! zip it or copy it somewhere else.
  2. Download the zip above and extract
  3. Double click “fixhud.bat”
  4. Enter path to Leauge of Legends installation. No trailing slash, no qoutes. E.g.
    C:\League of Legends
  5. Wait 10-20 seconds
  6. Happily play Lol on your 3+ AMD Eyefinity/Nvidia Surround setup. Enjoy having minimap and the rest of the interface on the center monitor!
  7. If you’re minimap is still slightly offset, make sure you reset GUI zoom level using in-game settings

Comments

  1. Francisco Caro says:

    Nice, i will try it when i get home!

  2. Obi Wan Kenobi says:

    Such a shame this is now broken, the LoL community is dying for this exact tool – Both Eyefinity and nVidia Surround users NEED this!

  3. Knobiwan Bei Obi says:

    is there an update?

  4. shig says:

    I would love a solution for this that is still working.

  5. Zingalto says:

    Just curious any progress on this yet?

  6. Hmph says:

    Hey Tom, you seem to know stuff and I totally don’t have any knowledge or experience with anything like this hah. What I DO have is a problem that maybe you could help me with. :S
    I’ve been looking for a way to scale the health bars displayed for champions in game. I’ve found color changes and scaling health bars for minions and turrets, but not for champions. I THINK they scale based on your resolution. But having a high res setup isn’t conducive to fps. umm… so is there a way to locate the HP bars thingy and make em smaller?

    Cheers :)

  7. MZ says:

    I tested this on 6/3 by downloading the source from github and running the .bat (after setting up x64 python 2.7, as i had x86)

    It works perfectly at 5750×1080, and not only does it display properly in eyefinity, but when portrait mode one of my screens and treat it as 3 separate monitors and play at 1920×1080 the hud is still EXACTLY where it needs to be.

    Well done, sir.

  8. mz says:

    Tested on 6/3/2014 – most up to date patch (4.6?)

    Works perfectly not only in 5760×1080, but in 1920×1080 when I portrait mode one of my monitors and disable eyefinity for a 3 screen setup instead.

    Downloaded source from github, ran the bat (after setting up x64 python, as my installation was x86 – had to add to path as well).

  9. mz says:

    Tested on 6/5/2014 with new patch – still works (thank you much, Najdek! This little python script is pretty baller, much appreciated.)

  10. BP says:

    Hey does anyone else have trouble with their side monitors “skipping”? I’m on a nvidia 780ti with a triple monitor setup and the minions and champions skip and stutter whenever they’re displayed on the side monitors.

  11. Had an issue with python27, fixed it.
    But apparently the newest patch broke this.
    Map shows up, but skills and what not don’t. Just black boxes.

    • Tom Najdek says:

      Just tested again, seems to be working just fine with the latest release, all gui elements repositioned and visible.

      Fixed the issue with missing dll btw.

  12. Daniel Delos says:

    Thanks for the fix. Using this as of Aug 21, 2014. The minimap is fixed which is the most important, but the character screen is still on the far left. Not a big deal since I don’t need to look at the char screen often anyway.

    • Tom Najdek says:

      Interesting. I did a fresh install literally 3 or 4 days ago, applied the fix and it worked like a charm. I’ll look into this if I find some time, thanks for your feedback!

  13. William Ricci says:

    Man, that’s awesome!

    There’s some way to improve the text size? It’s too big (items, skills)

  14. Alvaro Neto says:

    Hey Tom,

    Do you think you could do something similar but regarding the SCALE of health bars, mini map and chat text?

    Playing at 3200×1800 is painful, even with the UI scaled to 100% on options health bars and chat are so tiny. Shop is small too, but usable at least.

    This has been a demand from LoL community since at least 2012 and Riot has done nothing to fix this, other than say they intent on supporting high DPI sometime in the future.

    • Tom Najdek says:

      I think it’s doable. Some textures might end up looking broken/low quality. Would need to adjust size of **Rect** (pink rectangle in the above drawings) of LOADS of items using a script as I did with the map. Not sure how/if fonts would work. I might look into this if I’ve a spare evening at some point.

      • Alvaro Neto says:

        Hi Tom!

        Thanks for the answer. I did some very basic/minor tweaking and managed to at least get the chat font fixed. A simple change in the game.cfg file, to the CHAT SCALE attribute to 250 fixed it. It was set to 100, I supposed that’s the value it was getting from the options UI. It scaled pretty well at 250 and now I can read the font nicely on 3200×1800.

        The minimap size itself is rendered at the right size, what is tiny is the little round icons, with the champions portraits. It’s tiny but usable, specially since you are only looking at it periodically, but it’s indeed one of the major problems.

        After the in-game chat, the one thing that is the major game breaker right now is the size of the health bars on top of the creeps. That’s too small and gives me a headache by the end of a match because I have to keep focusing on them for last hits. I’ve been trying to tweak a few things here and there but so far nothing. I know they are capable of scaling because when we zoom in a creep they get even smaller. Do you have any tips regarding this? Would be most appreciated.

        Regards!

        Álvaro

  15. KoolWHIP says:

    Hey I was wondering if their is way instead of moving everything to the middle screen can you Write something to leave it on the right screen but increase it’s size to around 1/3 the screen. I’ve been looking for about a day now and can’t seem to find anything that actually works.

  16. Mikael says:

    Hi! this didnt seem to work for me.. minimap is still down at the right. is this version still working or am i doing something wrong?
    Thanks

Add Comment

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>