Server Guides How to identify UI texture coordinates (Texture Atlas / UV Mapping)?

[Gatzu09]

Hello everyone,
I have a question regarding the UI system and texture mapping.
I'm currently creating and editing my own game interfaces (inventory, chat, windows, etc.). While analyzing the source code, I noticed that a single texture file contains multiple UI elements, and each element is rendered using a specific set of coordinates that define which part of the texture should be displayed.
My question is:
How do experienced developers work with these texture coordinates (UV coordinates or texture atlas regions) efficiently?
Is there a recommended workflow or tool to identify exactly which section of the texture corresponds to each UI element, instead of modifying the coordinates by trial and error?
I would like to learn how to edit these regions more accurately and understand how the coordinate system works internally.
Any documentation, tutorials, or advice would be greatly appreciated.
Thank you!
_________________________________________________________________________________________________________________________________________________________________________________________________
Hola a todos.
Tengo una duda sobre el sistema de interfaces y el mapeo de texturas.
Actualmente estoy creando y editando mis propias interfaces del juego (inventario, chat, ventanas, etc.). Al analizar el código fuente, noté que un solo archivo de textura contiene varios elementos de la interfaz, y que cada uno utiliza un conjunto de coordenadas que indican qué parte de esa textura debe mostrarse.
Mi pregunta es la siguiente:
¿Cómo trabajan los desarrolladores experimentados con estas coordenadas de textura (coordenadas UV o regiones de un atlas de texturas) de forma eficiente?
¿Existe algún flujo de trabajo, herramienta o método recomendado para identificar exactamente qué sección de la textura corresponde a cada elemento de la interfaz, sin tener que modificar las coordenadas por prueba y error?
Me gustaría aprender a editar estas regiones con mayor precisión y comprender cómo funciona internamente este sistema de coordenadas.
Cualquier documentación, tutorial o consejo será muy bien recibido.
¡Muchas gracias!

 

[Larry]

You can use Aesprites to find the exact pixel location.

 

[alexxst]

The UI is a headache for the developer; it might be easier to rebuild it using RmlUI than to deal with the legacy system.

 

[zLuke]

The UI is a headache for the developer; it might be easier to rebuild it using RmlUI than to deal with the legacy system.

However, in RmlUI, you also need to set the coordinates of the image from the texture atlas, and you will need to change the coordinates of all buttons, windows, and forms when you modify the interface.

 

[alexxst]

все в

However, in RmlUI, you also need to set the coordinates of the image from the texture atlas, and you will need to change the coordinates of all buttons, windows, and forms when you modify the interface.

that's true, but it's much more convenient to set it in CSS styles.

 

[Mothanna]

However, in RmlUI, you also need to set the coordinates of the image from the texture atlas, and you will need to change the coordinates of all buttons, windows, and forms when you modify the interface.

that kinda correct even worst you have to learn css, html if you're not Familiar with it , i have the both codex in two of my clients i will do compare between the two soon,
migration to RmlUI means you have to rework engine codes, forms, and that's alot of works for most of people even for ai , >with ai helps this takes a week <
for legacy forms, codes you can simply do small c++ code to refresh ui elements in run time with x shortcut and use photoshop to get x cords, placing images, buttons in forms for legacy code annoying without live edits but its so simply once u do small hooks for mouse event to get x cord where u click on x forms
legacy photos you load like this x,y, size just find any image in .clu and follow the example

 

[Panda]

все в

that's true, but it's much more convenient to set it in CSS styles.

Rmlui works great, I second Alex. It does take time to build but iteration is key to success here

 

[Gatzu09]

You can use Aesprites to find the exact pixel location.

Thank you for the suggestion, Larry.

I actually tried the free version of Aseprite before, but I didn't pay much attention to it at the time. Now that you mention it, I think it could be a great tool for finding the exact coordinates of a pixel thanks to its simple and user-friendly interface.

I also think it could be useful for creating small 2D animations or story scenes to make the game feel more alive and give it a fresh touch.

I'll keep experimenting with it to see how much it can help with my project. Thanks again for the recommendation! God bless.

 

[Danny]

You can use any photo editor, and highlight object and it can show you X,Y locations.

 

[Gatzu09]

The UI is a headache for the developer; it might be easier to rebuild it using RmlUI than to deal with the legacy system.

To be honest, I'm not familiar with RmlUI. Is it a piece of software, a UI framework, or something else?

Some of the previous comments were about tools for finding pixel coordinates, but this sounds like a completely different approach. Could you tell me where I can find it or how to get started with it?

I'm always open to learning new tools and techniques, so I'd be interested in exploring whether it could be used to modernize or work with the game's interface.

Thanks again for your comment. I really appreciate your guidance.

 

[Gatzu09]

However, in RmlUI, you also need to set the coordinates of the image from the texture atlas, and you will need to change the coordinates of all buttons, windows, and forms when you modify the interface.

Thank you for the explanation, I really appreciate it.

I'm definitely going to look into RmlUI since you've mentioned it a few times. It sounds like it's an important tool for working with the game's UI, even if it also means a lot of extra work.

I don't know much about it yet, but I'm always willing to learn new things. If you could point me to where I can find RmlUI or any good tutorials or documentation, I'd really appreciate it.

Thanks again for taking the time to explain it to me!

 

[Gatzu09]

todo en

Es cierto, pero es mucho más conveniente configurarlo en estilos CSS.

Gracias, Alexxst. Aprecio mucho tu consejo.

Me gusta la idea de usar estilos CSS para configurar la interfaz de usuario en lugar de depender del sistema antiguo. Por lo que dices, parece que así es mucho más fácil gestionar y modificar todo.

Sé que hay un periodo de adaptación, pero eso es normal con cualquier tecnología nueva. Una vez que se entienden los conceptos básicos, resulta mucho más fácil trabajar con ella.

Gracias de nuevo por tu recomendación. Sin duda la tendré en cuenta e intentaré ponerla en práctica.