[Tutorial] How to edit GUI 2021 / Editar Temas 2021

[nurver9]

31 minutes ago, SpidgetFinner said:

I can say for certain i didn't expect making a custom theme to be so involved lol. I did manage to sort of get the battle buttons borders to look how I wanted, tho I'm not sure if I'm completely happy with it and may settle for a completely straight edge one. 

see https://github.com/MatthiasMann/TWLThemeEditor/wiki/Using-the-Theme-Editor and

https://github.com/MatthiasMann/twl for further documentation.

In the past, users were able to utilize a web-based application which allowed for creating and modifying themes.

The editor is deprecated but the logic is not.

 

[budadeth]

43 minutes ago, SpidgetFinner said:

I can say for certain i didn't expect making a custom theme to be so involved lol. I did manage to sort of get the battle buttons borders to look how I wanted, tho I'm not sure if I'm completely happy with it and may settle for a completely straight edge one. 

yes that tend to happen, you start modifying here and there, and end with a fully modded theme hahaha, at least helps to know wich things can be modded and how

 

also I believe both buttons looks cool hope it ends looking as you like

[SpidgetFinner]

11 hours ago, nurver9 said:

see https://github.com/MatthiasMann/TWLThemeEditor/wiki/Using-the-Theme-Editor and

https://github.com/MatthiasMann/twl for further documentation.

In the past, users were able to utilize a web-based application which allowed for creating and modifying themes.

The editor is deprecated but the logic is not.

 

In the first link it mentions being able cut an image into multiple pieces so that you can define the corners. since the editor is defunct, is there another program that I could use to replicate this? Or is there a way I could edit one of the corresponding xml files to split the image? I'm completely new to all of this so I have next to no idea how any of it works. If I can figure this out, and if I understand it correctly this could fix my stretching problems with boxes and possibly with the bag if I can do it right.

 

[budadeth]

26 minutes ago, SpidgetFinner said:

In the first link it mentions being able cut an image into multiple pieces so that you can define the corners. since the editor is defunct, is there another program that I could use to replicate this? Or is there a way I could edit one of the corresponding xml files to split the image? I'm completely new to all of this so I have next to no idea how any of it works. If I can figure this out, and if I understand it correctly this could fix my stretching problems with boxes and possibly with the bag if I can do it right.

 

Im pretty sure those orders are in the .xml just like its says there, you may need to edit the cordinates of split x and y or something similar, remember it uses the entire image area with every pixel having a set of cordinates that tells the game wich part of the image area will be shown on screen

Good luck 

[SpidgetFinner]

Success! these corners look much better. Although, for some reason, despite clearly setting the split to be directly in the middle of where it is in the png, it is still slightly skewed to the side. I suspect this is because the working area for this particular box has a bit of extra space I'm not using slightly to the left.

 

 

 

[budadeth]

16 minutes ago, SpidgetFinner said:

Success! these corners look much better. Although, for some reason, despite clearly setting the split to be directly in the middle of where it is in the png, it is still slightly skewed to the side. I suspect this is because the working area for this particular box has a bit of extra space I'm not using slightly to the left.

 

 

 

Thats impressive man!!! Congrats

[SpidgetFinner]

It's all finally starting to click in my brain lol. I'm making this comment just to document and explain my understanding and hopefully to have someone confirm I'm right and that this isn't just a coincidence lol. 

 

Firstly, I know this top line refers to the box I managed to edit earlier and fix the corners of. While experimenting I couldn't make heads or tails of how the coords fit together until I realised that the second set (52,52) is the width and height (I know it's super obvious in hindsight since it's literally called xywh)

 

 

Since I know this, I can surmise that (7,7) and (8,62) under it are the reference pixels for where the game starts looking for those boxes. In other words, the corner of the working area. Using that, and given how the png is laid out, I learned that it builds the width and height out downwards and to the right. So if the top left corners are 7,7 and 8,62, by adding 52 to that, we can get the bottom right, which would be 59,59 and 60,114 respectively. We can even see this if we add a border around the frame in game. 

 

 

However, as I learned while applying that border, the bottom corner is actually off by a couple of pixels, tho I'm not sure why. As you can see below is the border, which is the full working area for that box, but the actual corner of it doesn't match up with were it should if it was actually 52 wide and 52 high. It also doesn't explain why it still stretches beyond the defined split x and split y that I modified to fix the corners in the first place.

 

 

I think using this and a lot of tinkering it could actually fix the battle screen when using the bag, but that's something I'll need to play with later.

[realmadrid1809]

The yellow area seems to be 52px wide/long so I don't really get what problem you are referring to. Can you further elaborate?

 

On the second problem: Your splitx/splity values seem off. If you want to prevent the corners of the red part in the yellow area from stretching you'd have to use something like splitx="L18,R18" and splity="T18,B18". The number indicates how many px from that side of the area you want to leave unstretched, e.g. R18 means that 18 rows of pixels starting from the right border won't stretch in x direction.

[SpidgetFinner]

2 minutes ago, realmadrid1809 said:

The yellow area seems to be 52px wide/long so I don't really get what problem you are referring to. Can you further elaborate?

The yellow area is actually only 51 pixels wide, which is what was confusing me. It's not a big deal but is interesting that the defined visual area is a pixel off from what the code says it should be. 

 

4 minutes ago, realmadrid1809 said:

On the second problem: Your splitx/splity values seem off. If you want to prevent the corners of the red part in the yellow area from stretching you'd have to use something like splitx="L18,R18" and splity="T18,B18". The number indicates how many px from that side of the area you want to leave unstretched, e.g. R18 means that 18 rows of pixels starting from the right border won't stretch in x direction.

I see! So by having it previously set to L32, R34 T31, B34 I was having the point at which it wasn't supposed to stretch the image overlap, causing it to stretch anyway! Thank you for this explanation it cleared up my confusion regarding the split points. I thought they were also based on the x and y positions of the frame in question lol

 

[realmadrid1809]

Yeah there is not a lot of documentation on how to make themes so I get how you feel. Had to manually understand all the parameters through trial and error.

The area is actually 52x52 though. It starts at 7,7 and ends at 59,59. You can verify this by defining a small area (like 3x3) and manually counting the pixels. You will see that it will be exactly as big as defined in the xmls

[SpidgetFinner]

23 minutes ago, realmadrid1809 said:

Yeah there is not a lot of documentation on how to make themes so I get how you feel. Had to manually understand all the parameters through trial and error.

The area is actually 52x52 though. It starts at 7,7 and ends at 59,59. You can verify this by defining a small area (like 3x3) and manually counting the pixels. You will see that it will be exactly as big as defined in the xmls

Ahh I get it now, I see how it adds up. My software was telling me 51 pixels but I realise it wasn't counting the starting pixel lmao

[SpidgetFinner]

HALLE-FUCKIN-LUJAH BOYS WE DID IT

 

 

 

It's still a pixel or two off, but by adding this line of code below the line that added the other battle frame and a new png, I was able to do it. I know how to shorten the scrollpane already, so that won't be to much of a pain, I just don't know how to lower its position but I don't think that'll be to difficult I hope

 

Edited September 14, 2022 by SpidgetFinner

[SpidgetFinner]

Even more success! I was able to get it pixel perfect.

 

 

Turns out this was all that I need for the code in the gfx file.

 

 

I also had to add this line in the battle xml to obviously have it reference the right file.

 

 

Also, here's a blank copy of the png. If you're using the same battle frame as Budadeth and add those lines to the gfx.xml and battle.xml respectively, it should work. The black box is of course the working area.

Edited September 14, 2022 by SpidgetFinner

[SpidgetFinner]

I also wanna take a moment to thank you all for helping me with this. It's definitely not an understatement to say that theme editing in 2022 is a crucially difficult process for beginners because the documentation simply doesn't exist. This thread was the beginning of my best hopes to do it, and I want to document as much as I can, mistakes and all so that if anyone is looking back on it, it can hopefully help steer them in the right direction.

[budadeth]

3 minutes ago, SpidgetFinner said:

I also wanna take a moment to thank you all for helping me with this. It's definitely not an understatement to say that theme editing in 2022 is a crucially difficult process for beginners because the documentation simply doesn't exist. This thread was the beginning of my best hopes to do it, and I want to document as much as I can, mistakes and all so that if anyone is looking back on it, it can hopefully help steer them in the right direction.

Impressive man, you did a lot of progress in just a few days, hope that theme come out as awesome as it looks

[SpidgetFinner]

It seems a day can't go by without me getting confused about something lol. Today on why I'm confused is these wonderful boxes. They are supposedly points the gfx.xml references for things, but seem to make no sense size and shape wise. I can only assume they're leftovers from older versions of the game?

 

[nurver9]

21 minutes ago, SpidgetFinner said:

It seems a day can't go by without me getting confused about something lol. Today on why I'm confused is these wonderful boxes. They are supposedly points the gfx.xml references for things, but seem to make no sense size and shape wise. I can only assume they're leftovers from older versions of the game?

 

No, they're definitely used.

An easy way you can tell is by commenting out the grid or area, if the game fails to load- it's being called.
 

 

Edited September 15, 2022 by nurver9

[nurver9]

On 9/14/2022 at 12:32 PM, SpidgetFinner said:

Even more success! I was able to get it pixel perfect.

 

 

Turns out this was all that I need for the code in the gfx file.

 

 

I also had to add this line in the battle xml to obviously have it reference the right file.

 

 

Also, here's a blank copy of the png. If you're using the same battle frame as Budadeth and add those lines to the gfx.xml and battle.xml respectively, it should work. The black box is of course the working area.

You used a wildcard (*) to tell the game to load the battleframebg2 using the entire image's area.

xywh values just define theme block set areas instead of using the entire image.

[nurver9]

removed

Edited September 15, 2022 by nurver9
mistake

[SpidgetFinner]

35 minutes ago, nurver9 said:

You used a wildcard (*) to tell the game to load the battleframebg2 using the entire image's area.

xywh values just define theme block set areas instead of using the entire image.

Ah, so that's what it means by wildcard in the code, I wasn't sure what that referred to, thank you.

Also, a question for you specifically since I was looking at the Archetype Theme. When you replaced the background with a new gif on the main login screen, was that just as simple as having the code reference something like a background.gif, or was it more complicated than that? I ask because I'd love to have a moving image in the background in my own theme and wasn't sure how the best way to achieve that would be.

[nurver9]

4 minutes ago, SpidgetFinner said:

was that just as simple as having the code reference something like a background.gif

Nope 😄

@realmadrid1809 made this by hand.

Enjoy this snippet we pulled from the original TWL demos from eons ago.

Matthias's original TWL demo code for animations:
 

<animation name="-blocker-anim" timeSource="hover">
            <frame ref="-blocker-0" duration="150"/>
            <frames count="5" offsetx="32" duration="150" xywh="32,0,32,32"/>
        </animation>

PokeMMO currently uses animation blocks for the mouse cursor and berry planting, not much else.

[SpidgetFinner]

38 minutes ago, nurver9 said:

Nope 😄

@realmadrid1809 made this by hand.

Enjoy this snippet we pulled from the original TWL demos from eons ago.

Matthias's original TWL demo code for animations:
 

<animation name="-blocker-anim" timeSource="hover">
            <frame ref="-blocker-0" duration="150"/>
            <frames count="5" offsetx="32" duration="150" xywh="32,0,32,32"/>
        </animation>

PokeMMO currently uses animation blocks for the mouse cursor and berry planting, not much else.

I think I'm still far to much of a novice at this to make any sense of that but some day I will lmao, thank you

[budadeth]

4 hours ago, SpidgetFinner said:

It seems a day can't go by without me getting confused about something lol. Today on why I'm confused is these wonderful boxes. They are supposedly points the gfx.xml references for things, but seem to make no sense size and shape wise. I can only assume they're leftovers from older versions of the game?

 

Took me a while to know where those are used, the left upper corner its used as panel background in battle, the second one its your party icons when expanded and the third its for the menu icons when large menu icons its activated trough settings... Im not 100% sure but you can always edit them with a noticeable colour and try to find where its used, thats basically I did for this guide 

Even thou just like you I couldnt find where some of the textures are placed anyway

 

 

 

 

 

 

[Soren]

Justo quería algo de ayuda y encontré este post.

 

Cada que agrego un tema siempre me pasa lo de la imagen de arriba, no me muestra correctamente los datos en los apartados de "Movimientos" y "Sitios"
Mi pregunta es la siguiente ¿Qué archivo debería modificar para arreglar este error?
Quisiera verlo como en la interfaz.

[budadeth]

2 hours ago, Soren said:

Justo quería algo de ayuda y encontré este post.

 

Cada que agrego un tema siempre me pasa lo de la imagen de arriba, no me muestra correctamente los datos en los apartados de "Movimientos" y "Sitios"
Mi pregunta es la siguiente ¿Qué archivo debería modificar para arreglar este error?
Quisiera verlo como en la interfaz.

Se debe a que muchos, casi todos, los temas del foro son de anteriores versiones del juego, hace menos de una semana el juego se actualizo al evento de halloween y eso tambien requiere que los temas se actualizen, no es un problema tuyo ni del juego, simplemente se añaden cosas nuevas o se cambian otras que hacen que los temas anteriores a esos cambios funcionen mal o directamente no funcionen, si los temas que quieres usar son simples puedes copiar tranquilamente las imagenes dentro de la carpeta "res" (que son las que constituyen un tema) en una copia del tema "default" el tema default siempre estara actualizado asique no tendra problemas ni nada 

aqui te dejo algunos temas que si estan actualizados a la ultima version

 

ese ultimo la descarga esta en los comentarios, yo lo actualize

 

cualquier duda que tengas no dudes en comentar un saludo