Jump to content

[Tutorial] Customizing UI using XML


Recommended Posts

Hello,

 

I'm not a big fan of the default UI configuration, especially not on high resolution screens. After tinkering a bit with the XML files, I found a few easy improvements.

 

I didn't find a thread like this, except for this one. But it appears to be bit outdated. And there is more to improve than just the inventory window. Though, much appreciation for the author for sharing his knowledge.

 

Also, it doesn't look like the developers will improve client customization anytime soon (that GUI library is quite outdated though...). So here goes.

 

What is XML?

XML is an encoding format used to structure and describe data for software and human reading. In our case, it is used to describe GUI configuration. Values are placed between so called tags.

<tag>value</tag>

The two tags (the opening <tag> and the closing </tag>) make up what is called an element.

The element serves as a "description" of the value which it contains (in this case the text "value").

The XML in the GUI configuration files are a little more complicated, but the same concept applies. In these files, you will find something like this.

<param name="minWidth"><int>530</int></param>

The element <param> contains another element <int> (which is called nesting). The two elements describe a minimum width value of 530.

You can open any XML file in your browser to see how this nesting concept works. You can expand parent elements to see what child elements they contain.

 

How can I edit XML?

Editing XML files requires a text editor, like Windows's default notepad. Not a word processor like Microsoft Word. I recommend using Sublime Text.

 

Where can I find the XML files?

Navigate to your PokeMMO directory (from now on referred to as PokeMMO/), where your PokeMMO.exe and PokeMMO.sh files are located. The files we are editing are found in PokeMMO/data/themes/default/ui.

 

Please backup the  PokeMMO/data/themes/default directory before making changed to it.

 

So before you start:

  • You have access to a text editor
  • You have access to the XML files in PokeMMO/data/themes/default/ui
  • You have backed up the PokeMMO/data/themes/default directory
  • You have your game open

 

Some sidenotes:

  • Everytime the game updates, the XML files are reset to their default settings. You have to edit the XML files again. Do not overwrite XML files of a new update with your old editted files. Sometimes the structure of the XML files changes (new lines are added or some are removed) which could mess up your client.
  • Because the XML files are subject to change, I can't rely on giving line numbers in this tutorial. You will have to search for the correct elements.
  • After editing the XML files, make sure you save it, and press CTRL+F5 (or CMD+F5 for mac) in game to refresh your theme (reload GUI configuration), applying your changes.
  • Increasing window sizes can hit the FPS quite hard. Don't increase it too much if you have a low end system.

 

Resizing the inventory window

Spoiler

GfvcfjY.png

Spoiler

Open PokeMMO/data/themes/default/ui/inventory.xml.

Find the line containing


<theme name="tabbedpane" ref="-defaults">

Within this element, find the elements


<param name="minWidth"><int>530</int></param>
<param name="minHeight"><int>678</int></param>

You might have different values between the <int> tags. These values represent size in pixels. Edit them to whatever size you desire, and refresh your theme in game.

 

Resizing shop windows

Spoiler

ISWWS5Q.png

Spoiler

Open PokeMMO/data/themes/default/ui/shop.xml.

Find the line containing


<theme name="itemshop" ref="base-tabbed-frame">

Withing this element, find the line containing


<theme name="dialoglayout" ref="-defaults">

And withing this element, find the line containing


<theme name="tabbedpane" ref="base-tabbed-pane">

This element contains the line


<param name="minWidth"><int>200</int></param>

This represents the minimum width of the shop window. However, it is missing (at least as of writing this tutorial) a minimum height configuration line. So lets add this element below the minimum width element to make


<param name="minWidth"><int>200</int></param>
<param name="minHeight"><int>200</int></param>

Edit the values between the <int> tags to whatever size you desire, and refresh your theme in game to apply the changes.

 

Resizing PC window

Spoiler

I don't recommend changing the size of this window. But it's possible.

Open PokeMMO/data/themes/default/ui/pc.xml.

Find the line containing


<theme name="tabbedpane" ref="-defaults">

Within this element, find the line conaining


<param name="minWidth"><int>230</int></param>

Below this element, you can add a minimum height element to make it


<param name="minWidth"><int>230</int></param>
<param name="minHeight"><int>230</int></param>

Edit the values between the <int> tags to whatever size you desire, and refresh your theme in game to apply the changes. Make the width more than 650 or so to see a wider PC window.

 

Fitting PC box buttons

Spoiler

AN9Wscu.png

Spoiler

I got this one from here, as a better alternative to resizing the PC window.

Open PokeMMO/data/themes/default/ui/pc.xml.

Find the line containing


<theme name="tabbedpane" ref="-defaults">

Within this element, find the line containing


<theme name="tabbutton" ref="togglebutton">

Which contains the line


<param name=""><image>button-small.*</image></param>

Change button-small.* to button-supersmall.*.

I might add more customization as I go along.

 

Please feel free to make suggestions or imrpovements.

 

Thanks for reading.

Edited by Solist
Link to comment

Good stuff, definitely gonna borrow the PC buttons. Here's a tweak I made for the off-times that I'm using the whisper windows to help minimize their screen takeover:

Spoiler

Open your theme's /ui/chat.xml file.

Find the following line (current version is line 253):


<theme name="pm-box-frame" ref="base-frame">

Within this section is a "text-scrollpane" element with a minHeight property. For current version the line we tweak is 287:


<param name="minHeight"><int>170</int></param>

Currently running mine at 115. Haven't tried toying with how the individual messages come through, there may be more worth working on within.

 

Link to comment
  • 2 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use and Privacy Policy.