Ich habe mich in den letzten Tagen ein bischen mit der Anpassbarkeit des User Interface beschäftigt und wollte hier mal kurz meine Erfahrungen niederschreiben. Vielleicht findet es Anklang, vielleicht auch nicht
Benötigte Materialien:
Grafikprogramm wie Gimp (opensource) Http://www.gimp.org
oder
Photoshop (30 Tage Testversion) Http://www.adobe.de
Texteditor (reicht der Windowsinterne)
Alternativ ein XML Editor wie Adobe Golive.
Teil 1: Die Materie
In Herr der Ringe Online hat man die Möglichkeit mittels .tga Grafiken und einer XML Datei sein Interface auf bestimmte Art und Weise anzupassen.
Dabei gibt man in der XML Datei an, was geändert wird und wo die neuen Grafiken zu finden sind.
Teil 2: Die ersten Veränderungen:
Erstellt eine XML Datei namens: SkinDefinition.xml
Eine solche XML Datei kann in etwa so aussehen wenn sie fertig ist:
Zitat:
<?xml version="1.0" encoding="UTF-8" ?>
- <opt>
<SkinName Name="TestInterface" />
<Mapping ArtAssetID="bag1_normal" FileName="bag1_normal.tga" />
<Mapping ArtAssetID="bag1_rollover" FileName="bag1_rollover.tga" />
<Mapping ArtAssetID="bag1_pressed" FileName="bag1_pressed.tga" />
<Mapping ArtAssetID="bag2_normal" FileName="bag2_normal.tga" />
<Mapping ArtAssetID="bag2_rollover" FileName="bag2_rollover.tga" />
<Mapping ArtAssetID="bag2_pressed" FileName="bag2_pressed.tga" />
<Mapping ArtAssetID="bag3_normal" FileName="bag3_normal.tga" />
<Mapping ArtAssetID="bag3_rollover" FileName="bag3_rollover.tga" />
<Mapping ArtAssetID="bag3_pressed" FileName="bag3_pressed.tga" />
<Mapping ArtAssetID="bag4_normal" FileName="bag4_normal.tga" />
<Mapping ArtAssetID="bag4_rollover" FileName="bag4_rollover.tga" />
<Mapping ArtAssetID="bag4_pressed" FileName="bag4_pressed.tga" />
<Mapping ArtAssetID="bag_inventory" FileName="" />
</opt>
Wie ihr sehen könnt gibt es in diesem Fall 3 Aktionen:
1. Wie der Button normal aussieht - <Mapping ArtAssetID="bag1_normal" FileName="bag1_normal.tga" />
2. Beim Mouseover - <Mapping ArtAssetID="bag1_rollover" FileName="bag1_rollover.tga" />
3. Beim drücken - <Mapping ArtAssetID="bag1_pressed" FileName="bag1_pressed.tga" />
Für einen Button müssen also 3 Grafiken erstellt werden.
Die Hauptschwierigkeit ist, die Dateigrößen herauszufinden, das meiste basiert auf Herumexperimentieren.
In diesem Fall hat die Bilddatei eine Größe von 30x30 Pixeln.
Die Grafiken und die XML Datei werden in folgendem Verzeichnis gespeichert:
C:\Dokumente und Einstellungen\Username\Eigene Dateien\The Lord of the Rings Online\UI\Skins\Skinname\
Habt ihr dies gemacht, geht ins Spiel auf die Optionen - Oberfläche und scrollt nach ganz unten und wählt unter Div euren neuen Skin aus.
Voilá ihr solltet die ersten Ergebnisse sehen.
Teil 3: Die XML Datei
Gehen wir genauer auf die XML Datei ein.
Der wichtigste Befehl in dieser Datei lautet:
<Mapping ArtAssetID=“xxx“ FileName=“xxx.tga“>
Hinter ArtAssetID steht der Name dessen was geändert werden soll.
Hinter FileName die veränderte Datei.
Hier ist eine Liste der von Codemaster bekanntgegeben ArtAssetIDs:
Zitat:
accomplishment_journal_normal
accomplishment_journal_pressed
accomplishment_journal_rollover
bag_inventory
bag1
bag1_normal
bag1_pressed
bag1_rollover
bag2
bag2_normal
bag2_pressed
bag2_rollover
bag3
bag3_normal
bag3_pressed
bag3_rollover
bag4
bag4_normal
bag4_pressed
bag4_rollover
base_box_center
base_box_center_silver
base_box_titlebar_left
base_box_titlebar_right
base_box_titlebar_top
basepanel_bottomleft
basepanel_bottommid
basepanel_bottomright
basepanel_midleft
basepanel_midright
basepanel_topleft
basepanel_topmid
basepanel_topright
black_translucent
blue_mail_select_highlight
blue_mail_select_highlight_active
blue_mail_select_highlight_active_admin
blue_mail_select_normal
blue_selection
blue_selection_accomplisment_updated
blue_selection_bright
blue_selection_quest_highlight
blue_selection_quest_highlight_active
blue_selection_quest_normal
blue_selection_selectable_reward_highlight
blue_selection_skilltrainer_ghosted
blue_selection_skilltrainer_highlight
blue_selection_skilltrainer_highlight_active
blue_selection_skilltrainer_normal
blue_selection_title_highlight
blue_selection_vendor_item_highlight_active
blue_selection_vendor_item_normal
blue_selection_vendor_item_repair
blue_selection_vendor_item_repair_normal
blue_tracking_select_highlight
blue_tracking_select_highlight_active
blue_tracking_select_normal
box_01_titlebar
box_silver_bottom
box_silver_bottom_left
box_silver_bottom_left_noadorn
box_silver_lower_right
box_silver_lower_right_noadorn
box_silver_side_left
box_silver_side_right
box_silver_upper
box_silver_upper_left
box_silver_upper_left_noadorn
box_silver_upper_right
box_silver_upper_right_noadorn
button_autoattack_highlight
button_autoattack_highlight_mouseover
button_autoattack_highlight_pressed
button_autoattack_mouseover
button_autoattack_normal
button_autoattack_normal_pressed
button_main_mouseover
button_main_normal
button_main_pressed
chat_back
chat_entry_focussed
chat_tab_tier1_middle_back_e
chat_tab_tier1_middle_back_n
chat_tab_tier1_middle_back_w
chat_tab_tier1_middle_front_e
chat_tab_tier1_middle_front_n
chat_tab_tier1_middle_front_w
chat_unread_overlay
crafting_highlight
crafting_normal
crafting_pressed
fellowship_normal
fellowship_pressed
fellowship_rollover
im_button_close_highlight_active
im_button_close_normal
im_button_close_pressed
im_button_close_rollover
im_button_ghosted
im_button_normal
im_button_pressed
im_button_rollover
im_chat_alert
inventory_normal
inventory_pressed
inventory_rollover
journal_normal
journal_pressed
journal_rollover
LetterBoxBottom
main_menu_normal
main_menu_pressed
main_menu_rollover
map_normal
map_pressed
map_rollover
money_player_all_background
no_hope_no_dread
options_panel_divider
panel_border
quest_normal
quest_pressed
quest_rollover
selection_inanimate_backdrop
social_panel_list_elements_highlight_bottom_center
social_panel_list_elements_highlight_bottom_left
social_panel_list_elements_highlight_center
social_panel_list_elements_highlight_lower_right
social_panel_list_elements_highlight_middle_left
social_panel_list_elements_highlight_middle_right
social_panel_list_elements_highlight_top_center
social_panel_list_elements_highlight_top_left
social_panel_list_elements_highlight_top_right
social_panel_list_elements_normal_bottom_center
social_panel_list_elements_normal_bottom_left
social_panel_list_elements_normal_lower_right
social_panel_list_elements_normal_middle_left
social_panel_list_elements_normal_middle_right
social_panel_list_elements_normal_top_center
social_panel_list_elements_normal_top_left
social_panel_list_elements_normal_top_right
tab_tier1_middle_back_e
tab_tier1_middle_back_e_sm
tab_tier1_middle_back_n
tab_tier1_middle_back_n_sm
tab_tier1_middle_back_w
tab_tier1_middle_back_w_sm
tab_tier1_middle_front_e
tab_tier1_middle_front_e_sm
tab_tier1_middle_front_n
tab_tier1_middle_front_n_sm
tab_tier1_middle_front_w
tab_tier1_middle_front_w_sm
textbutton_left_ghosted
textbutton_left_highlighted_mouseover
textbutton_left_highlighted_normal
textbutton_left_highlighted_pressed
textbutton_left_mouseover
textbutton_left_normal
textbutton_left_pressed
textbutton_mid_ghosted
textbutton_mid_highlighted_mouseover
textbutton_mid_highlighted_normal
textbutton_mid_highlighted_pressed
textbutton_mid_mouseover
textbutton_mid_normal
textbutton_mid_pressed
textbutton_right_ghosted
textbutton_right_highlighted_mouseover
textbutton_right_highlighted_normal
textbutton_right_highlighted_pressed
textbutton_right_mouseover
textbutton_right_normal
textbutton_right_pressed
tga_empty
titlebar_X_2
titlebar_X_2_mouseover
titlebar_X_2_pressed
Sieht auf den ersten Blick nach viel aus, jedoch stößt man schon nach kurzer Zeit auf seine Grenzen. Ob Codemaster weitere bekannt gibt, ist bisher noch nicht klar.
Mithilfe dieser Liste solltet ihr in der Lage zumindest das zu ändern, was ihr momentan in eurem Interface seht
Teil 4: Die TGA Datei
Schauen wir uns mal die Grafiken genauer an.
Wie oben bereits erwähnt arbeiten wir mit Tga Dateien, das hat gegenüber Jpeg Dateien den Vorteil das wir mit Transparent arbeiten können. Somit sind ggfs. Überlagerungen möglich.
Der einfachheit würde ich die Grafiken immer so nennen wie die ArtAssetID heißt, damit könnt ihr bei eventuellen Veränderungen immer sofort sehen welche Datei wofür da ist. Grafiken immer in das obengenannte Verzeichnis speichern, sonst findet der Client die Dateien nicht und zeigt ggfs. Fehler an.
Ich habe z.B. versucht das Interface ein bischen mehr "wowlike" aussehen zu lassen (jaja, dafür dürft ihr mich steinigen) um einen kleinen Einblick zu liefern, wie es mal aussehen kann.
Zudem hab ich unten in der Aktionsleiste diesen "unhübschen" Skin ausgeblendet.
Dafür hab ich folgende ArtAssets benutzt:
Zitat:
<Mapping ArtAssetID="box_silver_bottom" FileName="box_bot_mid.tga" />
<Mapping ArtAssetID="box_silver_bottom_left" FileName="box_bot_left.tga" />
<Mapping ArtAssetID="box_silver_bottom_left_noadorn" FileName="box_bot_left.tga" />
<Mapping ArtAssetID="box_silver_lower_right" FileName="box_bot_right.tga" />
<Mapping ArtAssetID="box_silver_lower_right_noadorn" FileName="box_bot_right.tga" />
<Mapping ArtAssetID="box_silver_side_left" FileName="box_side_left.tga" />
<Mapping ArtAssetID="box_silver_side_right" FileName="box_side_right.tga" />
<Mapping ArtAssetID="box_silver_upper" FileName="box_top_mid.tga" />
<Mapping ArtAssetID="box_silver_upper_left" FileName="box_top_left.tga" />
<Mapping ArtAssetID="box_silver_upper_left_noadorn" FileName="box_top_left.tga" />
<Mapping ArtAssetID="box_silver_upper_right" FileName="box_top_right.tga" />
<Mapping ArtAssetID="box_silver_upper_right_noadorn" FileName="box_top_right.tga" />
<Mapping ArtAssetID="base_box_center" FileName="box_center.tga" />
<Mapping ArtAssetID="base_box_center_silver" FileName="box_center.tga" />
Das ganze sieht dann ca. so aus:
http://img253.imageshack.us/img253/9...ot00000lm9.jpg
Wie ihr seht, gibt es an manchen Stellen noch ein paar Unstimmigkeiten was die Größe der Dateien angeht, aber wie gesagt, ich bin selber nur am experimentieren :-P
Finish
Es ist also möglich einiges zu verändern, wer selber etwas rumexperimentieren will, kann sich das oben gezeigte Interfaceskin hier herunterladen: http://rapidshare.com/files/24531448/TestInterface.rar
und nach belieben verändern und selber testen.
Benötigte Materialien:
Grafikprogramm wie Gimp (opensource) Http://www.gimp.org
oder
Photoshop (30 Tage Testversion) Http://www.adobe.de
Texteditor (reicht der Windowsinterne)
Alternativ ein XML Editor wie Adobe Golive.
Teil 1: Die Materie
In Herr der Ringe Online hat man die Möglichkeit mittels .tga Grafiken und einer XML Datei sein Interface auf bestimmte Art und Weise anzupassen.
Dabei gibt man in der XML Datei an, was geändert wird und wo die neuen Grafiken zu finden sind.
Teil 2: Die ersten Veränderungen:
Erstellt eine XML Datei namens: SkinDefinition.xml
Eine solche XML Datei kann in etwa so aussehen wenn sie fertig ist:
Zitat:
<?xml version="1.0" encoding="UTF-8" ?>
- <opt>
<SkinName Name="TestInterface" />
<Mapping ArtAssetID="bag1_normal" FileName="bag1_normal.tga" />
<Mapping ArtAssetID="bag1_rollover" FileName="bag1_rollover.tga" />
<Mapping ArtAssetID="bag1_pressed" FileName="bag1_pressed.tga" />
<Mapping ArtAssetID="bag2_normal" FileName="bag2_normal.tga" />
<Mapping ArtAssetID="bag2_rollover" FileName="bag2_rollover.tga" />
<Mapping ArtAssetID="bag2_pressed" FileName="bag2_pressed.tga" />
<Mapping ArtAssetID="bag3_normal" FileName="bag3_normal.tga" />
<Mapping ArtAssetID="bag3_rollover" FileName="bag3_rollover.tga" />
<Mapping ArtAssetID="bag3_pressed" FileName="bag3_pressed.tga" />
<Mapping ArtAssetID="bag4_normal" FileName="bag4_normal.tga" />
<Mapping ArtAssetID="bag4_rollover" FileName="bag4_rollover.tga" />
<Mapping ArtAssetID="bag4_pressed" FileName="bag4_pressed.tga" />
<Mapping ArtAssetID="bag_inventory" FileName="" />
</opt>
Wie ihr sehen könnt gibt es in diesem Fall 3 Aktionen:
1. Wie der Button normal aussieht - <Mapping ArtAssetID="bag1_normal" FileName="bag1_normal.tga" />
2. Beim Mouseover - <Mapping ArtAssetID="bag1_rollover" FileName="bag1_rollover.tga" />
3. Beim drücken - <Mapping ArtAssetID="bag1_pressed" FileName="bag1_pressed.tga" />
Für einen Button müssen also 3 Grafiken erstellt werden.
Die Hauptschwierigkeit ist, die Dateigrößen herauszufinden, das meiste basiert auf Herumexperimentieren.
In diesem Fall hat die Bilddatei eine Größe von 30x30 Pixeln.
Die Grafiken und die XML Datei werden in folgendem Verzeichnis gespeichert:
C:\Dokumente und Einstellungen\Username\Eigene Dateien\The Lord of the Rings Online\UI\Skins\Skinname\
Habt ihr dies gemacht, geht ins Spiel auf die Optionen - Oberfläche und scrollt nach ganz unten und wählt unter Div euren neuen Skin aus.
Voilá ihr solltet die ersten Ergebnisse sehen.
Teil 3: Die XML Datei
Gehen wir genauer auf die XML Datei ein.
Der wichtigste Befehl in dieser Datei lautet:
<Mapping ArtAssetID=“xxx“ FileName=“xxx.tga“>
Hinter ArtAssetID steht der Name dessen was geändert werden soll.
Hinter FileName die veränderte Datei.
Hier ist eine Liste der von Codemaster bekanntgegeben ArtAssetIDs:
Zitat:
accomplishment_journal_normal
accomplishment_journal_pressed
accomplishment_journal_rollover
bag_inventory
bag1
bag1_normal
bag1_pressed
bag1_rollover
bag2
bag2_normal
bag2_pressed
bag2_rollover
bag3
bag3_normal
bag3_pressed
bag3_rollover
bag4
bag4_normal
bag4_pressed
bag4_rollover
base_box_center
base_box_center_silver
base_box_titlebar_left
base_box_titlebar_right
base_box_titlebar_top
basepanel_bottomleft
basepanel_bottommid
basepanel_bottomright
basepanel_midleft
basepanel_midright
basepanel_topleft
basepanel_topmid
basepanel_topright
black_translucent
blue_mail_select_highlight
blue_mail_select_highlight_active
blue_mail_select_highlight_active_admin
blue_mail_select_normal
blue_selection
blue_selection_accomplisment_updated
blue_selection_bright
blue_selection_quest_highlight
blue_selection_quest_highlight_active
blue_selection_quest_normal
blue_selection_selectable_reward_highlight
blue_selection_skilltrainer_ghosted
blue_selection_skilltrainer_highlight
blue_selection_skilltrainer_highlight_active
blue_selection_skilltrainer_normal
blue_selection_title_highlight
blue_selection_vendor_item_highlight_active
blue_selection_vendor_item_normal
blue_selection_vendor_item_repair
blue_selection_vendor_item_repair_normal
blue_tracking_select_highlight
blue_tracking_select_highlight_active
blue_tracking_select_normal
box_01_titlebar
box_silver_bottom
box_silver_bottom_left
box_silver_bottom_left_noadorn
box_silver_lower_right
box_silver_lower_right_noadorn
box_silver_side_left
box_silver_side_right
box_silver_upper
box_silver_upper_left
box_silver_upper_left_noadorn
box_silver_upper_right
box_silver_upper_right_noadorn
button_autoattack_highlight
button_autoattack_highlight_mouseover
button_autoattack_highlight_pressed
button_autoattack_mouseover
button_autoattack_normal
button_autoattack_normal_pressed
button_main_mouseover
button_main_normal
button_main_pressed
chat_back
chat_entry_focussed
chat_tab_tier1_middle_back_e
chat_tab_tier1_middle_back_n
chat_tab_tier1_middle_back_w
chat_tab_tier1_middle_front_e
chat_tab_tier1_middle_front_n
chat_tab_tier1_middle_front_w
chat_unread_overlay
crafting_highlight
crafting_normal
crafting_pressed
fellowship_normal
fellowship_pressed
fellowship_rollover
im_button_close_highlight_active
im_button_close_normal
im_button_close_pressed
im_button_close_rollover
im_button_ghosted
im_button_normal
im_button_pressed
im_button_rollover
im_chat_alert
inventory_normal
inventory_pressed
inventory_rollover
journal_normal
journal_pressed
journal_rollover
LetterBoxBottom
main_menu_normal
main_menu_pressed
main_menu_rollover
map_normal
map_pressed
map_rollover
money_player_all_background
no_hope_no_dread
options_panel_divider
panel_border
quest_normal
quest_pressed
quest_rollover
selection_inanimate_backdrop
social_panel_list_elements_highlight_bottom_center
social_panel_list_elements_highlight_bottom_left
social_panel_list_elements_highlight_center
social_panel_list_elements_highlight_lower_right
social_panel_list_elements_highlight_middle_left
social_panel_list_elements_highlight_middle_right
social_panel_list_elements_highlight_top_center
social_panel_list_elements_highlight_top_left
social_panel_list_elements_highlight_top_right
social_panel_list_elements_normal_bottom_center
social_panel_list_elements_normal_bottom_left
social_panel_list_elements_normal_lower_right
social_panel_list_elements_normal_middle_left
social_panel_list_elements_normal_middle_right
social_panel_list_elements_normal_top_center
social_panel_list_elements_normal_top_left
social_panel_list_elements_normal_top_right
tab_tier1_middle_back_e
tab_tier1_middle_back_e_sm
tab_tier1_middle_back_n
tab_tier1_middle_back_n_sm
tab_tier1_middle_back_w
tab_tier1_middle_back_w_sm
tab_tier1_middle_front_e
tab_tier1_middle_front_e_sm
tab_tier1_middle_front_n
tab_tier1_middle_front_n_sm
tab_tier1_middle_front_w
tab_tier1_middle_front_w_sm
textbutton_left_ghosted
textbutton_left_highlighted_mouseover
textbutton_left_highlighted_normal
textbutton_left_highlighted_pressed
textbutton_left_mouseover
textbutton_left_normal
textbutton_left_pressed
textbutton_mid_ghosted
textbutton_mid_highlighted_mouseover
textbutton_mid_highlighted_normal
textbutton_mid_highlighted_pressed
textbutton_mid_mouseover
textbutton_mid_normal
textbutton_mid_pressed
textbutton_right_ghosted
textbutton_right_highlighted_mouseover
textbutton_right_highlighted_normal
textbutton_right_highlighted_pressed
textbutton_right_mouseover
textbutton_right_normal
textbutton_right_pressed
tga_empty
titlebar_X_2
titlebar_X_2_mouseover
titlebar_X_2_pressed
Sieht auf den ersten Blick nach viel aus, jedoch stößt man schon nach kurzer Zeit auf seine Grenzen. Ob Codemaster weitere bekannt gibt, ist bisher noch nicht klar.
Mithilfe dieser Liste solltet ihr in der Lage zumindest das zu ändern, was ihr momentan in eurem Interface seht
Teil 4: Die TGA Datei
Schauen wir uns mal die Grafiken genauer an.
Wie oben bereits erwähnt arbeiten wir mit Tga Dateien, das hat gegenüber Jpeg Dateien den Vorteil das wir mit Transparent arbeiten können. Somit sind ggfs. Überlagerungen möglich.
Der einfachheit würde ich die Grafiken immer so nennen wie die ArtAssetID heißt, damit könnt ihr bei eventuellen Veränderungen immer sofort sehen welche Datei wofür da ist. Grafiken immer in das obengenannte Verzeichnis speichern, sonst findet der Client die Dateien nicht und zeigt ggfs. Fehler an.
Ich habe z.B. versucht das Interface ein bischen mehr "wowlike" aussehen zu lassen (jaja, dafür dürft ihr mich steinigen) um einen kleinen Einblick zu liefern, wie es mal aussehen kann.
Zudem hab ich unten in der Aktionsleiste diesen "unhübschen" Skin ausgeblendet.
Dafür hab ich folgende ArtAssets benutzt:
Zitat:
<Mapping ArtAssetID="box_silver_bottom" FileName="box_bot_mid.tga" />
<Mapping ArtAssetID="box_silver_bottom_left" FileName="box_bot_left.tga" />
<Mapping ArtAssetID="box_silver_bottom_left_noadorn" FileName="box_bot_left.tga" />
<Mapping ArtAssetID="box_silver_lower_right" FileName="box_bot_right.tga" />
<Mapping ArtAssetID="box_silver_lower_right_noadorn" FileName="box_bot_right.tga" />
<Mapping ArtAssetID="box_silver_side_left" FileName="box_side_left.tga" />
<Mapping ArtAssetID="box_silver_side_right" FileName="box_side_right.tga" />
<Mapping ArtAssetID="box_silver_upper" FileName="box_top_mid.tga" />
<Mapping ArtAssetID="box_silver_upper_left" FileName="box_top_left.tga" />
<Mapping ArtAssetID="box_silver_upper_left_noadorn" FileName="box_top_left.tga" />
<Mapping ArtAssetID="box_silver_upper_right" FileName="box_top_right.tga" />
<Mapping ArtAssetID="box_silver_upper_right_noadorn" FileName="box_top_right.tga" />
<Mapping ArtAssetID="base_box_center" FileName="box_center.tga" />
<Mapping ArtAssetID="base_box_center_silver" FileName="box_center.tga" />
Das ganze sieht dann ca. so aus:
http://img253.imageshack.us/img253/9...ot00000lm9.jpg
Wie ihr seht, gibt es an manchen Stellen noch ein paar Unstimmigkeiten was die Größe der Dateien angeht, aber wie gesagt, ich bin selber nur am experimentieren :-P
Finish
Es ist also möglich einiges zu verändern, wer selber etwas rumexperimentieren will, kann sich das oben gezeigte Interfaceskin hier herunterladen: http://rapidshare.com/files/24531448/TestInterface.rar
und nach belieben verändern und selber testen.
