*HOW-TO* Hack your hud (by editing the .gfx files)

12345678 ... 12
Comment below rating threshold, click here to show it.

Phauxe

Member

05-26-2012

Awesome, thanks again. Oh do you know where I can edit the positions x,y of the huds, I want to move the micro menu up above the minimap. Also with the micro menu I cant seem to get the boxes to go transparent. Like all the other hud parts I have only edited the atlas but its not working quite right with the micro menu. Here is a screenshot to explain better. Oh maybe I should edit the orig file too not just the atlas? If so would you recommend this for all the images? I would also like to make the micro menu hud and icons just slightly bigger, is this possible? Thanks again =D


Comment below rating threshold, click here to show it.

Perb

Senior Member

05-26-2012

This is the config file for the icons beside the map:
0.0.0.95/DATA/Menu/HUD/Elements/OptionsClusterRight.ini

BaseOffset: -0.036,0 can be changed to move everything listed in the file, which are all the option buttons down there.
BaseOffset: 0.15, -0.3 will put it somewhat close to above the minimap.

Rect: 1508,1057 - 1545,1088 / 1920x1080. You'll have to mess with these for each icon to change their size. Increase the distance between the two sets of coordinates to make them larger.

I couldn't get them to go transparent either. Not sure what their deal is.

___

If you want it to stay lined up with the top of the minimap through UI scale changes, you'll have to edit this file to let the minimap to be scaled with the slider.:
0.0.0.95/DATA/Menu/HUD/Elements/MinimapRight.ini

Change all:
KeepMaxScale: 1 to KeepMaxScale: 0

This will make the minimap scale with the UI slider just like everything else. If you aren't going to change the UI scale at all, then it isn't needed unless you just want the minimap a bit smaller.

___

What UI scale did you end up using? The lines look pretty good.


Comment below rating threshold, click here to show it.

Polka Dot Robot

This user has referred a friend to League of Legends, click for more information

Senior Member

05-27-2012

Be careful using base offset, it's affected by aspect ratio.


Comment below rating threshold, click here to show it.

Phauxe

Member

05-27-2012

Quote:
I couldn't get them to go transparent either. Not sure what their deal is.
I was able to get them transparent by changing the alpha from 0 to 1:

//////////////////////////////////////////
Type: Icon
Name: CameraIconLocked_Off
Group: OptionsCluster
Enabled: 0
AlwaysRespond: 0
Draggable: 0 - can this be turned on temp to make the panels moveable in game and then off when done moving?
Layer: 2
Anchor: 0.75,1
Rect: 1505,1048 - 1545,1088 / 1920x1080
Alpha: 1 (change from 0 to1)
Texture: HUDAtlas
UV: 748,145 - 776,174 / 1024x1024
//////////////////////////////////////////
___________

Quote:
What UI scale did you end up using? The lines look pretty good.
Not sure how to find out, I played with the slider in game until I got the right result once I was close I would shift the slider slightly left and click okay then back right until I was satisfied.


Comment below rating threshold, click here to show it.

Polka Dot Robot

This user has referred a friend to League of Legends, click for more information

Senior Member

05-27-2012

Toggling draggable won't let you drag elements, but you can see changes in real-time by alt-tabbing from a fullscreen instance. Some things (groups and new textures) will require you to exit and re-enter the game.


Comment below rating threshold, click here to show it.

Phauxe

Member

05-27-2012

On another note involving the .ini's you pointed me towards, I had a chance to go through them. I figured out some things that are going to help me in my adventures of ui making (yes it is an adventure) and im gonna put it here for a reference for myself and anyone else who finds it useful. Also please correct me if im wrong?
__________

While looking through the .ini files I kept seeing codes like:

//////////////////////////////////////////
Type: Icon
Name: XPBar
Group: HUDLeftUnderlay
Enabled: 1
AlwaysRespond: 0
Draggable: 0
Color: 253, 161, 53, 255
Layer: 1
Anchor: 0,1
Rect: 24,1063 - 403,1077 / 1920x1080
Alpha: 0
Texture: HUDAtlas
UV: 804,80 - 820,96 / 1024x1024
//////////////////////////////////////////
__________

Rect: 24,1063 - 403,1077 / 1920x1080 (These numbers represent two things)
1. The cords according to screen resolution.
2. The size, width and height of the image.

1. The first number 24 is the starting point left side of the screen, moving towards the right (so how far right from the left side of the screen do I start from), 1063 is the starting point top side of the screen moving down towards the bottom (so how far down on the screen do I start from) - 403 is the ending point of 24 (So how far from my first point do I keep moving towards the right side of the screen), 1077 is the bottom point of 1063 (So how far down do I keep moving towards the bottom of my screen) See screenshot 1

2. Take the first 2 numbers in each set and subtract them to get the width and then take the last 2 numbers in each set and subtract them for the height.

Example: Rect: 24,1063 - 403,1077 / 1920x1080
403 - 24 = 379px wide
1077 - 1063 = 14px tall
__________

UV: 804,80 - 820,96 / 1024x1024 (These numbers represent two things)
1. The cords according to the HudAtlas.tga.
2. The size, width and height of the image.

1. When you open the HudAtlas.tga(UVMap) in photoshop you can see its a 1024x1024px texture(canvas) so when you stick an image on there like lets say the XPbar, you can identify where the locations are by turning on your rulers and setting them to pixels, find your image and zoom all the way in. Start at the the top left corner of your image the number on the top ruler(804) how far right from the left of the canvas you are and is the starting point of your image moving right. (820) is how far right from the left of the canvas you are and is the ending point of your image (80) how far down from the top of the canvas and is the starting point of your image moving down (96) how far down from the top of the canvas and is the ending point of your image.

2. Take the first 2 numbers in each set and subtract them to get the width and then take the last 2 numbers in each set and subtract them for the height.

Example: UV: 804,80 - 820,96 / 1024x1024
820 - 804 = 16px wide
96 - 80 = 16px tall

Just figured this out and was like nice to know ;]


Comment below rating threshold, click here to show it.

TheBziur

Member

05-27-2012

Hello there. I'm trying to mod Hud, however I run into some strange scaling problems. I'd like to ask how to solve them.

So I've created a HudAtlas.tga file (1024x1024) and put there a few of my textures.
Secondly I've took the textures and placed them as icons (HudLeftFrame0 & HudLeftframe1) into hudleftframe.ini.
I've selected UV:

UV: 0,40 - 732,140 / 1024x1024 (732x100px)

Then I've placed them on the 1920x1080 screen, measured and inserted rectangle as follows:

Anchor: 0.5,1 (bottom center)
Rect: 594,973 - 1325,1073 / 1920x1080 (732x100px with 7 px space from bottom in the middle)

So it should look like on the first screen. It doesn't though. It's stretched out. I've tried to measure the aspect in which it is decrased and multiply it's lenght. It will work, however working in such a manner that I have to scale everything up and down I wouldn't call proffesional or comfortable. Is there any place where I can change the multiplyers, or am I doing something stupidly wrong?


Comment below rating threshold, click here to show it.

Polka Dot Robot

This user has referred a friend to League of Legends, click for more information

Senior Member

05-28-2012

The UV and the screen are different aspect ratios. You need to reflect that in the rectangle.


Comment below rating threshold, click here to show it.

TheBziur

Member

05-28-2012

So if my UV would have aspect ratio of the screen it would scale propertly?

No that doesn't sound right. If so, the interface would be stretched on wider screens, and they're not. Are they?

An example would help


Comment below rating threshold, click here to show it.

Polka Dot Robot

This user has referred a friend to League of Legends, click for more information

Senior Member

05-28-2012

They are.

The rectangle is generated based on a 1920x1080 screen (16:9). If you're on a different resolution, it'll be stretched.

If you look at the attached image, it's my UI on 16:9 and 16:10 resolution, overlayed, and scaled to the same size. You can see the rectangles are wider on one resolution than the other.


12345678 ... 12