[How To] modifiziere dein Interface

First Riot Post
1234511 ... 16
Comment below rating threshold, click here to show it.

MatricusWrench

Member

27-05-2010

Greetings!

Ich hab' mich in den letzten Tagen etwas eingehender mit dem UI (User Interface) von LoL beschäftigt mit dem Ziel es meinen Bedürfnissen entsprechend anzupassen.

Es hat mich bereits mehrere Stunden gekostet hinter die Positionierung der Fenster zu kommen und weitere Stunden um dann recht gut zu verstehen wie Fenster X eingestellt werden muss um an Stelle Y zu sein.

*******http://img193.imageshack.us/img193/4051/loluichange.jpg[/IMG]

Aber versucht es selbst...
Hinweis vorweg: Ich werde hier nur auf die Verschiebung und Skalierung der UI-Elemente eingehen.


Was ist möglich?
- Positionsänderung der UI-Elemente
- separate Skalierung der UI-Elemente
- Änderungen an den Grafiken (dadurch könnte man auch transparente Grafiken erstellen)

Was ist nicht möglich?
- Änderungen an der Funktionsweise der UI-Elemente
- Transparenz für UI-Element an sich


Was wird für Änderungen benötigt?
Nichts! Für die "Standard"-Änderungen alá verschieben der einzelnen Fenster bringt Windows alles mit.
Wenn man die Grafiken bearbeiten will, benötigt man ein Grafikprogramm welches DDS-Dateien bearbeiten kann.
Wie man diese bearbeitet werde ich hier nicht beschreiben, dies kann man an geeigneten Stellen in Netz nachlesen.


Gibt es einen grafischen Editor zum Bearbeiten?
Ja!
Vielen Dank an Phryneas für seine Arbeit und sein bereitgstelltes Tool, gute Arbeit!

Tool-Webseite


Erspar' mir die Details! Wie ändere ich nun das UI?
Alles rund um's User Interface gibts im Ordner \game\data\menu und dessen Unterordnern.

Erst mal einen groben Überblick.
Im Hauptordner menu findet ihr alle Grafiken des UIs. Diese sind veränder- bzw. austauschbar.
Im Unterordner HUD findet ihr alle Events und Positionseinstellungen für das UI.
Im Unterordner MiniMapIcons findet ihr - wie der Name vermuten lässt - die Grafiken für die Symbole auf der Karte.

Wie bereits gesagt gehe ich auf Änderungen für die Grafiken hier nicht ein.
Das ist zu ausführlich um's in dem Rahmen zu erklären.


Positions- und Größenänderung - Allgemeines
Es gibt 2 Dateien die für diese Belange wichtig sind.
Dies sind die HudResolutionDefaults.ini sowie HudAUFLÖSUNG.ini
* Das Wort AUFLÖSUNG natürlich mit eurer Bildschirmauflösung ersetzen.

Wie der Name verrät befinden sich in der HudResolutionDefaults.ini die grundlegenden Einstellungen der Fenster.
Dies ist auch die primäre Datei um die Position von Fenster X zu verändern.
In der HudAUFLÖSUNG.ini (z.B. Hud1920x1080.ini) finden die Anpassungen an die Auflösung statt - also die Skalierung der Fenster.

Die Einheit für Positionsangaben sind nicht etwa Pixel, sondern Prozent (%).
Dies macht es sehr einfach UI-settings an verschiedene Auflösungen anzupassen, da die Positionen immer erhalten bleiben muss man nur die Skalierung ändern.
Die Positionen sind in X (horizontal) und Y (vertikal)-Koordinaten angegeben - beides beginnt bei 0/0, was die obere linke Ecke des Bildschirms bedeutet; respektive ist unten rechts die Position 100/100.
Die Werte können ins Negative sowie über 100 gehen - dies ist manchmal nötig, da sich die Werte z.T. an der Skalierung der Fenster orientieren.

Die Skalierung beginnt bei 1.0.
Der niedrigste Wert ist 0.0 und, soweit ich das feststellen konnte, gibt's keinen maximal Wert.


Comment below rating threshold, click here to show it.

MatricusWrench

Member

27-05-2010

Positionierung - Grundlagen
Jedes Fenster hat einen festen, nicht veränderbaren anchor (Anker) an dem die Position ausgerichtet wird.
Dabei sind die anchor nicht relativ - also an den Rändern des Bildschirms - sondern direkt am UI-Objekt selbst.
Hat man also einen anchor "unten links", dann ist das Fenster nicht unten links angebracht und fängt von dort an zu zählen, sondern die Position X/Y wird an der unteren linken Ecke des UI-Elementes ausgerichtet.

Es gibt 6 anchors...:
UL - upper left
UC - upper center
UR - upper right
LL - lower left
LC - lower center
LR - lower right

Nehmen wir als Beispiel die Anzeigen für Skills und Leben des Helden...
Diese Anzeige hat folgende Standard-Werte:
XPos=50
YPos=100
Scale=1.0
Anchor=LC

Der anchor ist LC (lower center), d.h. es wird die Mitte des unteren Randes des UI-Elementes genommen und an die Position X=50/Y=100 geschoben.
Sprich am unteren Bildschirmrand zentriert.
Wäre der anchor UC (upper center), wäre das Fenster nicht mehr zu sehen, da die Mitte der Oberseite an 50/100 geschoben werden würde.
Da in diesem Fall jedoch die Anzeigen UNTER dem anchor liegen, wären die Anzeigen außerhalb des Fensters - also nicht sichtbar.


Um die anchors nochmal zu verdeutlichen, siehe Bild

http://img237.imageshack.us/img237/2043/anchors.png

Die Pfeile deuten zum einen auf die jeweiligen anchors und weisen durch dessen Richtung auch gleich darauf hin, dass alles über bzw. unter diesem Punkt (je nach Richtung) sichtbar ist.
Darauf muss man achten bei der Ausrichtung.


Positionierung - Befehle
Um die Positionen der Fenster zu ändern verwendet man die HudResolutionDefaults.ini
Dort sind alle Fenster mit ihren Positionen und anchors enthalten.

Jedes Fenster beginnt immer mit [ und endet wenn das nächste [ bzw. das Ende der Datei kommt.
Die Namen der Fenster stehen immer in [ ]-Klammern, gefolgt von den Positionsbefehlen.

Nachfolgend einmal die Fenster aufgelistet

[Surrender] - Aufgabefenster
[ItemShop] - Ladenfenster
[Minimap] - kleine Karte unten rechts
[MapOverlay] - große Karte per "M" aufrufbar
[TitianBar] - Kill / Death / Assist Anzeige oben rechts
[Scoreboard] - Spielstatistik mit allen Spielern, Items und K/D/A (TAB)
[ChampionsFriendly] - nicht implementiert
[ChampionsEnemy] - nicht implementiert
[Tooltips] - Mouse-Over Hinweisfenster (interaktiv)
[Popup] - ???
[TargetHud] - Leben/Mana/Item/Eigenschafts-Anzeige des Ziels
[DeathRecap] - Schadensauflistung nach dem Tod
[MiniPlayerHud] - eigene Lebens/Mana-Anzeige oben links
[PlayerHudCenter] - eigene Leben/Mana/Skill Anzeige unten Mitte
[PlayerHud] - eigene Erfahrung/Item/Eigenschafts-Anzeige unten links
[TeamFrame] - Gruppenanzeige
[Channelbar] - Zauberleiste
[PlayerHudChat] - Chatfenster

Die Befehle die pro Fenster gültig sind:
XPos - gibt die horizontale Position an
YPos - gibt die vertikale Position an
Scale - gibt die Standardgröße an
Anchor - Ausrichtungspunkt für die Koordinaten X/Y

Anmerkung: Anchor kann nicht geändert werden und Scale wird nur benutzt sofern in hudAUFLÖSUNG.ini kein anderer Wert gesetzt ist.


Positionierung - meine erste Änderung (endlich!)
So, genug von der Theorie. Endlich mal was ändern...

Hinweis: Bevor irgendwas geändert wird, zunächst eine Sicherung beider Dateien (hudresolutiondefault.ini und hudAUFLÖSUNG.ini) machen.
Hinweis 2: Jede Änderung an der Datei wird nicht live übertragen. Ihr müsst nach jeder Änderung neu zum Match verbinden damit er das UI neu läd.

Ein gutes Beispiel ist die Minimap.
Hat es euch nicht auch schon mal gestört immer nach unten rechts zu sehen?
Wieso nicht auf Augenhöhe rechts neben dem Champion?

Wir öffnen nun also die hudresolutiondefaults.ini mit einem Doppelklick.
Sollte Windows nach einem Programm zum Öffnen fragen, einfach den Windows Editor auswählen.

In der Datei suchen wir nach [MiniMap]. Das sollte der 3. Eintrag sein.
Hier die Standardwerte:
XPos=100
YPos=100
Scale=1.0
Anchor=LR

In diesem Zustand wird die rechte untere Ecke der Minimap (wegen anchor=LR => lower right) an Position 100/100 geschoben - also in die rechte untere Ecke des Bildschirms.
Da der anchor unten rechts ist, ist die Karte zu sehen.
Wäre der anchor LL (lower left), wäre die Karte nicht zu sehen, da die untere linke Ecke in die untere rechte Ecke des Bildschirms verschoben wird und damit die Karte an sich außerhalb des Bildes liegt.

Wir wollen die Karte also nun ungefähr vertikal zentrieren und etwas weiter in die horizontale Mitte verschieben.
Wir ändern die Werte folgendmaßen ab:
XPos=90
YPos=60
Scale=1.0
Anchor=LR

Nach dem Speichern der Datei befindet sich die Karte ca. auf halber Höhe des Bildschirms und etwas weiter in die Mitte verschoben.
Hinweis: Wenn im Spiel am Regler für die UI-Skalierung rumgespielt wurde, kann sich das Karte u.U. - je nach Auflösung - an einem nicht gewünschten Ort aufhalten.


Comment below rating threshold, click here to show it.

MatricusWrench

Member

27-05-2010

Skalierung - Grundlagen
Nachdem man die Fenster an ihre Stelle verschoben hat, möchte man diese ggf. auch noch kleine/größer machen.

Dies wird in der HudAUFLÖSUNG.ini (z.B. Hud1920x1080.ini) eingestellt.

Auch diese mit einem Doppelklick geöffnet.
Sollte Windows nach einem Programm zu öffnen fragen, einfach den Windows Editor auswählen.

Die Datei sollte etwas leerer sein als die Hudresolutiondefaults.ini
Grundlegend haben beide den gleichen strukturellen Aufbau.

Zuerst wird das Fenster per [ ]-Klammern aufgerufen - z.B. [TargetHud] - danach folgen die Befehle.
Der einzig gültige bzw. angewandte Befehl ist Scale.

Es kann durchaus sein, dass als erster Eintrag in der Datei folgender Aufruf ist:
Code:

Code:
[GlobalScale]
Scale=0.xxxxxx
* x natürlich durch Zahlen ersetzt

Dieser Befehl skaliert das gesamte UI.
Der [GlobalScale] Aufruf überschreibt, sofern enthalten, alle Scale Aufrufe, sowohl in der hudresolutiondefaults.ini als auch in der hudAUFLÖSUNG.ini

Sollte man also die Fenster einzeln skalieren wollen, so muss man diesen Aufruf aus der Datei entfernen (einfach löschen).

Aber Achtung! Wenn der [GlobalScale] Aufruf entfernt ist, werden alle Fenster die nicht in der hudAUFLÖSUNG.ini deklariert mit ihrer von Riot definierten Standardgröße angezeigt.
Das bedeutet das viele Fenster unter bestimmten Auflösungen recht groß sein werden.


Skalierung - Ich skaliere... skaliere immer noch...
Nehmen wir wieder unser Minimap-Beispiel.
Haben wir es zuvor weiter in das direkte Sichtfeld (mittig, rechts) verschoben, so kommt diese an der Stelle etwas klobig und deplaziert vor.

In dem Fall hilft es die Größe der Karte etwas zu reduzieren.

Wenn der [GlobalScale] Aufruf entfernt ist, schreiben wir an beliebiger Stelle in die Datei folgendes:
Code:

Code:
[MiniMap]
Scale=0.85
Dies reduziert die Größe der Karte um ca. 15%.
Sie ist immer noch sehr gut lesbar, aber nun ausreichend klein um nicht störend zu wirken.

Weiterhin... durch die Entfernung von [GlobalScale] sind einige Fenster nun sehr groß geraten.
Ein gutes Beispiel ist das Shop-Fenster. Das bedeckt in seiner Standardausführung fast 100% des Bildschirms, das sollte man ändern!
Wieder an beliebige Stelle im Dokument...:
Code:

Code:
[ItemShop]
Scale=0.75
Das macht das Shop-Fenster klein aber fein!

Im Anschluss wird die Datei einfach wieder abgespeichert oder man fügt noch weitere Fenster hinzu.


Comment below rating threshold, click here to show it.

MatricusWrench

Member

27-05-2010

grafische Modifikation des UIs

Quote:
In dem Ordner \game\data\menu folgende Dateien löschen:

- HudCenter_I19
- HudCenter_I48
- HudCenter_I61
- HudCenter_I70

Dadurch werden die (nutzlosen) zwischen stücke zwischen minmap, actionbar und characterframe transparent, ebneso der hintergrund der fähigkeitssteigerung beim lvl-up
Danke an Toshamaru für diesen Hinweis.

Quote:
Interface von Gechillta
Screenshot

Werte
Code:
#shop
[ItemShop]
XPos=10
YPos=10
Scale=1.1
MinScale=0.7
Anchor=UR

#Chat
[PlayerHudChat]
XPos=0
YPos=99
Scale=0.8
Anchor=LL

#aufgabeleiste
[Surrender]
XPos=75
YPos=60
Scale=1.0
Anchor=LR

#TAB Scoreboard
[Scoreboard]
XPos=50
YPos=50
Scale=1.0
Anchor=UL

#Tooltips
[Tooltips]
XPos=50
YPos=50
Scale=1.0
Anchor=UL

#Popup
[Popup]
XPos=20
YPos=25
Scale=0.5
Anchor=UL

[Minimap]
XPos=100
YPos=100
Scale=0.65
Anchor=LR

[TitanBar]
XPos=12
YPos=12
Scale=0.75
Anchor=UL

#gegnerauswahl
[TargetHud]
XPos=42
YPos=73
Scale=1.2
Anchor=LC

#champ items
[PlayerHud]
XPos=0
YPos=12
Scale=0.75
Anchor=LL

[TeamFrame]
XPos=97
YPos=43
MaxScale=10.0
Scale=10.0
Anchor=UL

#healthbar mitte
[PlayerHudCenter]
XPos=50
YPos=100
Scale=0.65
Anchor=LC

#port nach hause
[ChannelBar]
XPos=30
YPos=1
Scale=1.0
Anchor=UL

#champ healthbar jetzt versteckt
[MiniPlayerHud]
XPos=100
YPos=0
Scale=0.0
Anchor=UL
Quote:
Interface von Darkraider2009
Screenshot
Interface Dateien & Anleitung

Code:
#©Darkraider2009

[Minimap]
XPos=100
YPos=100
Scale=0.65
Anchor=LR

[TitanBar]
XPos=100
YPos=0
Scale=0.75
Anchor=UL

[TargetHud]
XPos=50
YPos=85
Scale=0.9
Anchor=LC

[PlayerHud]
XPos=0
YPos=12
Scale=0.75
Anchor=LL

[TeamFrame]
XPos=96
YPos=20
MaxScale=10.0
Scale=9.0
Anchor=UL

[PlayerHudCenter]
XPos=9
YPos=104
Scale=0.60
Anchor=LC

[ChannelBar]
XPos=30
YPos=1
Scale=1.0
Anchor=UL

[MiniPlayerHud]
XPos=30
YPos=85
Scale=0.9
Anchor=UL

[DeathRecap]
XPos=30
YPos=1
Scale=1.0
Anchor=UL

[PlayerHudChat]
XPos=0
YPos=95
Scale=0.8
Anchor=LL

[Scoreboard]
XPos=50
YPos=50
Scale=1.0
Anchor=UL

[ItemShop]
XPos=10
YPos=10
Scale=1.1
MinScale=0.7
Anchor=UR

[Surrender]
XPos=75
YPos=60
Scale=1.0
Anchor=LR

[Tooltips]
XPos=50
YPos=50
Scale=1.0
Anchor=UL

[Popup]
XPos=20
YPos=25
Scale=0.5
Anchor=UL


Comment below rating threshold, click here to show it.

MatricusWrench

Member

27-05-2010

Platz reserviert

* Beiträge nun überarbeitet und formatiert.
Etwas umstrukturiert.


Comment below rating threshold, click here to show it.

Preek

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

Junior Member

27-05-2010

Alles 'nen Daumen hoch gekriegt, wunderbar. Ich werd mich da mal ranmachen. Das ist sehr, sehr praktisch. : ) Danke.


Comment below rating threshold, click here to show it.

Dexalller

Member

27-05-2010

ui Matricus hatte es doch gesichert

Danke Matricus.


Comment below rating threshold, click here to show it.

MatricusWrench

Member

27-05-2010

Naja, nicht wirklich.
Aber ich kann nachwievor auf das alte Forum zugreifen...


Comment below rating threshold, click here to show it.

Vaginal Virus

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

Recruiter

28-05-2010

ja das existiert noch.
Tipp: http://community.lol-europe.com/boar...ad.php?t=19918


Comment below rating threshold, click here to show it.

TheDahlia

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

Junior Member

28-05-2010

Hi,

ich hab mir vorhin mal alles durchgelesen und hab dann ein bisschen rumprobiert.
Zunächst hab ich das UI von Darkraider ausprobiert und muss sagen das es mir sehr gut gefällt
Ich hab jedoch ein kleines Problem was das UI angeht.

Zur Info:

-Ich habe Sicherungskopien meiner Datein erstellt
-Die HudAUFLÖSUNG.ini so umbenannt das dort meine Auflösung steht
-Das UI per Anleitung so umgestellt das die [TitianBar] unterhalb vom [PlayerHud] steht
-Die Datein: HudCenter_I19.dds, HudCenter_I48.dds, HudCenter_I61.dds, HudCenter_I70.dds gelöscht (Sicherungskopien erstellt)


Problem:

Ich kann sowohl per Tastatur als auch mit klicken keines meiner Items im [PlayerHud] aktivieren.

Getestete Items:

-Heiltrank
-Manatrank
-Griff des Todesfeuers
-Zhonyas Ring

Würd mich über positive Rückmeldungen freuen.

MfG
TheDahlia


1234511 ... 16