League of Legends Community
1234511 ... 12

League of Legends Community (http://forums.na.leagueoflegends.com/board/index.php)
-   In-Game HUD Discussion (http://forums.na.leagueoflegends.com/board/forumdisplay.php?f=6)
-   -   *HOW-TO* Hack your hud (by editing the .gfx files) (http://forums.na.leagueoflegends.com/board/showthread.php?t=515500)

Polka Dot Robot 02-15-2011 10:26 AM

moooo
 
6 Attachment(s)
NOTE: The May 23, 2012 patch (Darius, V1.0.0.140) has changed the way in which much of the UI operates. All of the normal on-screen panels now use a different rendering method. The replay screens, the options menu, the tab menu and a couple others still use the older method, but are likely to be changed soon. A tutorial for the new method is unlikely, unless there is significant interest.

HACKING YOUR HUD


For those of you who want to do some in-depth modding to your HUD, this will give you some basis.

For a basic mod, you can easily move the HUD panels with skinLOL or manually editing the .ini files \League of Legends\game\DATA\Menu\HUD (ACE Client). The skins can be changed by editing the .dds files in \League of Legends\game\DATA\Menu\ with some image editing software. A good bit of info can be found on the European forums (you will need to translate from German, Google can do this).

Translate: http://eu.leagueoflegends.com/board/...ead.php?t=1262

Downloads
SWiX - http://www.swftools.com/tools-details.php?tool=4666653156
Trillix - http://www.flash-decompiler.com/
A Hex editor - http://www.physics.ohio-state.edu/%7Eprewett/hexedit/
ACE Client - http://www.ace-client.net/
An Image Editor - http://www.adobe.com/products/photoshop.html
A Flash Editor - http://www.adobe.com/products/flash.html
Skin Installer Ultimate - http://forum.leaguecraft.com/index.php?/topic/28336-tool-lol-skin-installer-031111/ (if you want to port to the official client)
A text editor - http://notepad-plus-plus.org/
FLASM - http://flasm.sourceforge.net/

Step 1 - Create your new UI by modifying the .dds files

It's easiest to create a new UI if you have a background to work with once you import the .swf into Flash. Open up the particular .dds file into an image editor and make whatever changes you'd like (remember to update the alpha layer as well).

Step 2 - Back-up and convert all of the .gfx files you want to modify into .swf files

The ACE client uses the old file system, so making changes is a ton easier. The directories in this will use the file structure from ACE, not from the default client as it's a ton more work.

So, after you install the ACE client, backup the entire \League of Legends\game\DATA\Menu\ directory. Otherwise, if you screw-up a .gfx file, it won't display in LoL and will need to be re-downloaded.

Then, for the particular .gfx you want to modify, open it in a hex editor to change the first 3 characters from either GFX to FWS or CFX to CWS. Save the file as '<original name>.swf'. Delete the .gfx file as LoL can read from the .swf file (the .gfx file will take priority if you leave it in, so make sure it's gone). (Pic 1)

Step 3 - Find the assets you want to modify

With Trillix, open up the new .swf file you want to edit. Click the file under 'My Tasks' and it'll bring up a list of assets within the .swf file. Shapes and sprites are the ones you want to look at right now. (Pic 2)

Trillix is only going to give you the name of the sprites/shapes you are going to modify, you won't be doing any actual work with it.

Step 4 - Modify assets in the .swf file

Open your .swf file with SWiX. This will give you an XML representation of the .swf file. Here is when you do the actual editing. (Pic 3)

With Trillix, click the 'Convert' tab and press 'Convert Current' to create an .fla from your .swf. Flash should automatically start up and give you access to the assets within, otherwise, open the .fla manually. (Pic 4)

Now you can do some real editing. You have very little visual feedback with placement, as the images are not stored within the .fla file. They are added in after the fact with Scaleform (which is responsible for the <Unknown TagType="1000" and "1001"> in SWiX. If you apply your .dds backgrounds to the background shape (ie. for HudLeft, it would be bkgLeft), it's a ton easier to line everything up.

Once you're satisfied with your modifications, export to a .swf. Unfortunately, all of the CharacterId's of each asset has been changed. Flash removes or reorganizes some assets when you export the .swf, so using this .swf within LoL won't work.

Fortunately, it leaves the Name intact. So, load up the new .swf inside Trillix and SWiX. Use Trillix to find the assets you need to change and SWiX will give you the new values for location and scale. You need to match-up the correct Name and replace the tags inside the <PlaceObject2> from the new .swf to the old .swf (you might see PlaceObject3 in the new .swf, but it's doesn't actually need that tag, so just put the info in the correct PlaceObject2) (Pic 5).

IE. To move and change the scale of the background of the HudLeft.gfx, you'd have to change:

Quote:

<DefineSprite Id="99" FrameCount="1">
<PlaceObject2 Depth="26" CharacterId="60" Name="bkgLeft" Move="false">
<Matrix>
<Translate TranslateX="0" TranslateY="-3544" /> <-- CHANGE
<Scale ScaleX="0.784179688" ScaleY="1.13449097" /> <-- CHANGE
</Matrix>
</PlaceObject2>
.
.
.
</DefineSprite>
Hint: If you're removing an element, rather than deleting it, set the scale to 0 instead (<Scale ScaleX="0" ScaleY="0" />). It saves a ton of time if you decide to put it back in later. Otherwise, you have to open up an old file, find the element and re-insert it.

Once you've made the changes to the original .swf from your modified .swf, save the original and discard the one you exported from Flash.

Step 5 - Editing Actionscript

There are 2 methods to editting the actionscript. You can either directly edit it in Flash, or you can edit the byte-code directly.

Low-level Editting
To edit the byte-code directly, drag the .swf you want to edit onto the FLASM program. This will create a .flm byte-code version of your .swf (or use the command line as read in the FLASM documentation). Open it up in some text editor. It's easiest to use Trillix to view the Actionscript source and find what you want to edit, then go back to the .flm and find the corresponding section (Pic 6).

IE. To remove the sliding animation of the buff icons when you level up, you'd remove the following code from the HudCenter.gfx (NOTE: You'll have to go back into the .gfx to update the locations of the buffs - they move for some reason):

Quote:

setMember
push r:1, 'showLevelupBackground'
function2 (r:2='bl') (r:1='this')
.
.
.
getMember
push 'Metrics'
newMethod
setRegister r:3
pop
push 7, r:3, 2, r:this, 'buffs' <-- CHANGE TO : push 0, 1, 2, r:this, 'buffs'
getMember
push 'animateTo'
callMethod
.
.
.
newMethod
setRegister r:4
pop
push r:this, r:this, 'hideLevelupElements'
getMember
push 7, r:4, 4, r:this, 'buffs' <-- CHANGE TO : push 0, 1, 4, r:this, 'buffs'
getMember
push 'animateTo'
callMethod
pop
label51:
end // of function
Once you've made the changes you want, save the .flm and drag it back onto the FLASM program. It will recompile the .swf and save the old versions as .$wf.

High-level Editing
To edit the actionscript from Flash, convert your .swf to a .fla with Trillix. Open the .fla in Flash. Find the code you'd like to edit and make your changes. Then, export the .fla to a .swf. Drag the .swf to the FLASM program to create the .flm. Repeat this with the original .swf. Open the .flm files side-by-side. Locate the section in the modified .flm and copy and paste it into the old .flm (typically, see not. Save the new .flm and drag it back to FLASM. The .swf will be recompiled with your changes.

Note: Editing from Flash is no where near foolproof. The compiler used by your Flash editor is likely not the same as the one Riot uses (It's some version of MTASC, I think). The byte-code generated by Adobe Flash is different than what is generated by Riot's. You can typically copy and paste small sections, or they're at least distinguishable so you can manually make the changes. It might be possible to export the assets from Trillix, edit them, then use MTASC to compile.

Step 6
- Test your work

Load up LoL with the ACE client. Create a practice game and view your changes.

To install the changes into the default LoL client, use Skin Installer Ultimate and follow the same directions as if installing a skin.

Special Notes

Anchoring - the anchoring within HudResolutionDefaults.ini doesn't seem to do anything. The anchoring actually relies on the xy values of each component in relation to the anchor point of the Flash stage. You must use the actual sprite, not the 'compiled' sprite (ie. for HudCenter.gfx, you need to shift the elements of Sprite 174, not Sprite 2).

Tooltips - the position of the tooltips can be changed by modifying the value of setTooltipX and setTooltipY within the Tooltips.gfx. I haven't bothered to figure out the formula yet, but making it a static value is an easy solution (ie. setting setTooltipY to 500 will put it a pixel 500 as measured from the top of the monitor, so it depends on resolution where the actual box will end up).

File list

Here's a list of the files that are actually in use within the UI. Some may have to be extracted from HeroPak_client.zip.

.dds
\Menu\HudCenter_I13 - Pulsing back for level up buttons
\Menu\HudCenter_I4B - Level up button (greyed out)
\Menu\HudCenter_I9B - Abilities panel
\Menu\HudCenter_I47 - Level up button
\Menu\HudCenter_I49 - Level up button (on Roll over)
\Menu\HudCenter_I87 - Level up frame
\Menu\HudLeft_I38 - Player inventory and stats panel
\Menu\MiniMap_I40 - Option\Char. Info\Camera Lock outline
\Menu\MiniMap_I46 - Minimap panel
\Menu\Surrender_I23 - Surrender panel
\Menu\TargetBar_I16 - Target hp and mana (compact)
\Menu\TargetBar_I51 - Target hp, mana, inventory and stats panel (expanded)
\Menu\TeamFrame_I11 - Boxes with teammate portraits and hp
\Menu\TitanBar_I66 - Game time, fps and latency panel

gfx
\Menu\ChannelBar - Channel bar
\Menu\HudCenter - Abilities, spells and hp/mana bars panel
\Menu\HudLeft - Player's items, stats, gold and xp panel
\Menu\InGameScoreboard - All players items, cs and building kills
\Menu\ItemShop - Item Shop
\Menu\Minimap - Minimap
\Menu\Surrender - Surrender panel
\Menu\TargetBar - Current target items, stats
\Menu\TeamFrame - Team portraits panel
\Menu\TitanBar - Game time, fps and latency panel
\Menu\Tooltip - Tooltips

Future Work

This method is tedious - You can do a fair bit of editting with this method, but matching up the changes to the .gfx file and the overlay will be slow and annoying and manually changes the values in SWiX or with FLASM is slow. A Scaleform SDK (like Unreal has - http://udn.epicgames.com/Three/Scaleform.html) and the original .fla would be incredibly helpful (HINT HINT RIOT).

Scripting - Finding out how to manipulate the individual variables of your champion would be very helpful. It's easy to see how they set them within the .gfx, but not so clear where the actual values are retrieved from. Also, how to import objects from other .gfx (like moving the game time into the TAB menu).

Perb 02-15-2011 04:44 PM

Thanks knacko.

Did a little work on the bottom bar HERE. More to come!

xXRizzaXx 02-16-2011 01:28 AM

TY Knacko but can you pls make a screenshot what i have to delete at "edges" it still dont work for me in the loading screen it come to an error and league of legends ends pls help ... or answer me in german^^ that would be the easy way^^

Polka Dot Robot 02-16-2011 07:28 AM

s
 
1 Attachment(s)
Quote:

Originally Posted by xXRizzaXx (Hozzászólás 6255670)
TY Knacko but can you pls make a screenshot what i have to delete at "edges" it still dont work for me in the loading screen it come to an error and league of legends ends pls help ... or answer me in german^^ that would be the easy way^^

This:

xXRizzaXx 02-16-2011 07:43 AM

i did it but league of leegnds still shut down? can you upload the swf file pls?

add me in icq pls 448840769 or skype bongoblub or write me an emai bloodywarrior@online.de "or just attach the file" (i use the Eu client is that a problem?)


mfg and ty for trying to help me!

Polka Dot Robot 02-16-2011 10:59 AM

I e-mailed the HudCenter.gfx (same as the .swf, but I converted it back to a gfx), but it shouldn't be crashing on you. The EU client might be different, but when I've screwed up the .gfx file, all that happens is that the particular UI doesn't show up on the screen. It doesn't crash.

Perb 02-16-2011 12:33 PM

Any idea why HudLeft.swf can't be opened with SWiX?

xXRizzaXx 02-16-2011 02:57 PM

Quote:

Originally Posted by knacko (Hozzászólás 6266428)
I e-mailed the HudCenter.gfx (same as the .swf, but I converted it back to a gfx), but it shouldn't be crashing on you. The EU client might be different, but when I've screwed up the .gfx file, all that happens is that the particular UI doesn't show up on the screen. It doesn't crash.

ty! i will work on many quality UI´s^^

xXRizzaXx 02-16-2011 03:02 PM

Quote:

Originally Posted by knacko (Hozzászólás 6266428)
I e-mailed the HudCenter.gfx (same as the .swf, but I converted it back to a gfx), but it shouldn't be crashing on you. The EU client might be different, but when I've screwed up the .gfx file, all that happens is that the particular UI doesn't show up on the screen. It doesn't crash.

lol the file isnt attached^^

Polka Dot Robot 02-17-2011 07:45 AM

Quote:

Originally Posted by Perb (Hozzászólás 6268571)
Any idea why HudLeft.swf can't be opened with SWiX?

If you can get the full version of Trillix, opening and saving HudLeft.swf will fix whatever the problem is. Not sure why though.


All times are GMT -8. The time now is 05:03 AM.
1234511 ... 12


(c) 2008 Riot Games Inc