Jump to content

[Tutorial] How to edit GUI


Recommended Posts

On 6/8/2022 at 8:55 AM, Johnwaynee said:

All the .png's wont work any longer and therefore the guide here has become somewhat obsolete. 

 

Not really, it still shows which widgets are sourced from what assets. It also elaborates on some twl terminology and a plethora of useful documentation.

The editor's jnlp is broken- Matthias' website is deprecated and the editor itself is inaccessible to us end-users, however, that doesn't make the information in this post irrelevant.

Edited by nurver9
Link to comment
  • 10 months later...

Huge thank you to @Zoubek, the waybackmachine, "Save Page Now Outlinks" and whomever else for archiving this thread last year, without them these images would probably be lost forever.

While obviously outdated- this tutorial contains important information regarding TWL and users can still learn valuable information from it. These explanations of how assets are sourced / named can aid those who want to learn how to manually create complex themes.

(You will need to click on the image and zoom in.)
 

picture1-min.png

Edited by nurver9
Link to comment
9 hours ago, Requi said:

Is it possible to edit the new pc ui? Im currently learning how to make custom themes but cannot find the png in the res folder.

I should wait a little more, till the new region comes out, seems they updating things one by one, they added a "new PC background" but the game its not using it, you can bring back the old PC with code modification thou 

Link to comment
On 4/28/2023 at 10:44 AM, Requi said:

Is it possible to edit the new pc ui? Im currently learning how to make custom themes but cannot find the png in the res folder.

 

inside the pc.xml add this parameter to pc-frame

      <param name="background"><image>pc-frame</image></param>

also for border-container you can replace the background parameter with pc-preview-field instead of label2.background.

The result won't be pretty immediately because they haven't adjusted the pc to fit the new pngs yet but that way you can edit the textures and see the result ingame.

 

image.thumb.png.2ed988d5808a1c80ef14684fd3458c02.png

Edited by realmadrid1809
Link to comment
18 minutes ago, realmadrid1809 said:

also for border-container you can replace the background parameter with pc-preview-field instead of label2.background.

can you specify this like you did with the pc.xml

you mean line 53 :

 

<theme name="border-container" ref="label">
        <param name="background">
          <image>label2.background</image>

 

there is another at 349

Edited by budadeth
Link to comment
21 minutes ago, budadeth said:

can you specify this like you did with the pc.xml

you mean line 53 :

 

<theme name="border-container" ref="label">
        <param name="background">
          <image>label2.background</image>

 

there is another at 349

Yes, replace line 55 with this:

 

          <image>pc-preview-field</image>

 

Link to comment
5 minutes ago, StormFractured said:

Is it even still possible to get your hands on the TWL Theme Editor? I've been searching for hours with no success it always links back to a website that tries it's best to tell me I have a Chrome Virus even though I am using Vivaldi.

After reading through the post a bit more I see that the link is dead and leads to ADs, are we able to do all of the editing within PS then? Don't the XML files have to reflect changes made?

Link to comment
1 hour ago, StormFractured said:

After reading through the post a bit more I see that the link is dead and leads to ADs, are we able to do all of the editing within PS then? Don't the XML files have to reflect changes made?

Yes, the editor is dead. All editing has to be done by hand by modifying the textures (with ps like you suggested or something similar) and the xmls (I recommend notepad++). By pressing ctrl+f5 ingame you can reload the theme to reflect the changes you have done without needing to restart the game

Edited by realmadrid1809
Link to comment
8 hours ago, StormFractured said:

After reading through the post a bit more I see that the link is dead and leads to ADs, are we able to do all of the editing within PS then? Don't the XML files have to reflect changes made?

you need some help I have a few tutorials, they are not up to date and with some flaws but I can guide you trough that

Link to comment
Just now, budadeth said:

you need some help I have a few tutorials, they are not up to date and with some flaws but I can guide you trough that

That would be greatly appreciated. I saw a mega thread of yours earlier on how to edit the .pngs, I am a little rocky on xml though. I have experience with HTML, CSS, JS and such, not sure if that helps any when talking about XML.

Link to comment
3 minutes ago, StormFractured said:

That would be greatly appreciated. I saw a mega thread of yours earlier on how to edit the .pngs, I am a little rocky on xml though. I have experience with HTML, CSS, JS and such, not sure if that helps any when talking about XML.

you can start with that doing a simple base theme, editing here and there to learn more about which texture works where, and then when u know well the textures, try to upgrade to xml editing, there you can add a few things like a background on login screen, or the battle banner, and more, I ll send you some more info by dm

 

8 minutes ago, StormFractured said:

I have experience with HTML, CSS, JS and such, not sure if that helps any when talking about XML

thats more than enough, I barely have any knowledge on coding xml lol

Link to comment
On 4/30/2023 at 12:07 AM, realmadrid1809 said:

 

inside the pc.xml add this parameter to pc-frame

      <param name="background"><image>pc-frame</image></param>

also for border-container you can replace the background parameter with pc-preview-field instead of label2.background.

The result won't be pretty immediately because they haven't adjusted the pc to fit the new pngs yet but that way you can edit the textures and see the result ingame.

 

image.thumb.png.2ed988d5808a1c80ef14684fd3458c02.png

I believe this commands not work anymore with the another again new update, tried again just now, the lines are different now, tried anyway find the same ones, but no cigar

Link to comment
On 5/6/2023 at 6:13 AM, budadeth said:

I believe this commands not work anymore with the another again new update, tried again just now, the lines are different now, tried anyway find the same ones, but no cigar

This needs to be added somewhere in gfx.xml

  <images file="res/pc-window-2.png" filter="nearest">
    <area name="pc-window" xywh="*"/>
  </images>

 

This needs to be added to line 5 in pc.xml

    <param name="background"><image>pc-window</image></param>

 

Link to comment
4 hours ago, realmadrid1809 said:

This needs to be added somewhere in gfx.xml

  <images file="res/pc-window-2.png" filter="nearest">
    <area name="pc-window" xywh="*"/>
  </images>

 

This needs to be added to line 5 in pc.xml

    <param name="background"><image>pc-window</image></param>

 

just this modifications, I forget about the last ones right? I mean the ones you told before a few days ago, those ones are needed or just this new ones? forgive me ignorance 

Link to comment
59 minutes ago, budadeth said:

just this modifications, I forget about the last ones right? I mean the ones you told before a few days ago, those ones are needed or just this new ones? forgive me ignorance 

background parameters will always work, it's a core part of the UI system.

their WIP PC window asset was changed in update 22865, it does not exist anymore. if you did not backup update 22698, 22758 or 22760 then the original asset is missing from your system and is gone forever.

I highly suggest disregarding line numbers entirely as they are pretty much irrelevant, it's the content inside the code blocks that matters. Fixating on line numbers makes it difficult to learn how to read themes.

All you need to do is define the area and the source image in the gfx.xml, then add said area reference into the background parameter in the "pc-frame" block.

In this instance, the "pc-frame" block contains the "pc-box-button" code as well, they share the same block.
 

  <theme name="pc-frame" ref="resizableframe">
	<!--insert your background parameter here-->
	<param name="border"><border>20,6,8,0</border></param>
    <theme name="pc-box-button" ref="button">
      <param name="background"><image>ui-button.background</image></param>
      <param name="textAlignment"><enum type="alignment">center</enum></param>
      <param name="border"><border>3,12</border></param>
    </theme>


This principle can be applied to add images to any window, label, etc.

edit; tried to send you additional documentation, but says you can't accept direct message from me ¯\_(ツ)_/¯

Edited by nurver9
Link to comment
34 minutes ago, nurver9 said:

background parameters will always work, it's a core part of the UI system.

their WIP PC window asset was changed in update 22865, it does not exist anymore. if you did not backup update 22698, 22758 or 22760 then the original asset is missing from your system and is gone forever.

I highly suggest disregarding line numbers entirely as they are pretty much irrelevant, it's the content inside the code blocks that matters. Fixating on line numbers makes it difficult to learn how to read themes.

All you need to do is define the area and the source image in the gfx.xml, then add said area reference into the background parameter in the "pc-frame" block.

In this instance, the "pc-frame" block contains the "pc-box-button" code as well, they share the same block.
 

  <theme name="pc-frame" ref="resizableframe">
	<!--insert your background parameter here-->
	<param name="border"><border>20,6,8,0</border></param>
    <theme name="pc-box-button" ref="button">
      <param name="background"><image>ui-button.background</image></param>
      <param name="textAlignment"><enum type="alignment">center</enum></param>
      <param name="border"><border>3,12</border></param>
    </theme>


This principle can be applied to add images to any window, label, etc.

edit; tried to send you additional documentation, but says you can't accept direct message from me ¯\_(ツ)_/¯

You are really bad explaining man but thanks for the effort anyways maybe someone more enlightned than me will find this helpfull ✌️

Link to comment
47 minutes ago, budadeth said:

You are really bad explaining man but thanks for the effort anyways maybe someone more enlightned than me will find this helpfull ✌️

there is nothing wrong with my explanation, if you don't understand something simply ask us to elaborate.

Link to comment

@budadeth

in other words since my last reply was apparently confusing:

the parameters madrid gave you the other day are the same ones they reposted when you said they no longer work. there is nothing different about them.

pc-window-2.png does not exist anymore, it was removed from the game. that's why importing it doesn't work, the file does not exist anymore.

use a different image.

Link to comment

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.