Cómo añadir una interfaz (HUD) personalizada en el cliente de MU

Una HUD personalizada es el toque que transforma un cliente genérico de MU Online en la identidad visual de tu servidor: barras de estado estilizadas, un inventario con el marco de tu marca, un minimapa temático. Pero la interfaz de MU es engañosa — cambiar la imagen es la parte fácil; mantener los clics, las áreas transparentes y el layout alineados es donde la mayoría de los proyectos se rompe. Esta guía avanzada muestra el proceso completo, del diseño a la integración, con atención especial a las trampas. Todos los nombres de archivo, dimensiones y claves citados son ejemplos y varían por season/cliente — confirma siempre en tu build.

Requisitos previos

Este es un tutorial de nivel avanzado. Antes de empezar, asegúrate de:

• Cliente de producción del servidor — la misma versión que usan los jugadores. Probar en otro cliente es una pérdida de tiempo.
• Editor de imagen con soporte para canal alfa: Photoshop o GIMP. Vas a trabajar mucho con transparencia.
• Conversor de imágenes MU (comúnmente llamado MU Image Converter o similar) para convertir entre .png/.jpg/.tga y los formatos .ozj/.ozt/.ozb.
• Editor de texto (Notepad++ o VS Code) para el archivo de layout.
• HxD (editor hexadecimal) — solo si necesitas tocar referencias dentro del Main.exe.
• Conocimiento previo de skins — si nunca has convertido una textura MU, empieza por lo básico de edición de cliente antes.
• Backup completo de la carpeta Interface/ (o equivalente) y del Main.exe en una subcarpeta _original/.
• Una planilla o bloc de notas para mapear cada archivo de textura al elemento que representa. Vas a necesitar esa referencia todo el tiempo.

> [!AVISO] La HUD está interconectada: una textura muchas veces contiene varios botones en una sola hoja. Alterar un pedazo puede desplazar hitboxes de otros. Trabaja siempre en copia y valida los clics con cada cambio.

Anatomía de la HUD de MU Online

Antes de editar, entiende que la HUD tiene tres capas independientes:

1. Texturas — las imágenes en formato MU (.ozj, .ozt, .ozb) que están en la carpeta Interface/. Definen la apariencia.
2. Layout — un archivo (o datos incrustados en el Main.exe) que define dónde aparece cada elemento y cuál es el área clicable de cada botón. Define el comportamiento.
3. Lógica — el código del cliente que conecta un clic a una acción (abrir inventario, usar poción). Esto vive en el Main.exe y raramente se altera en personalizaciones visuales.

La regla de oro: puedes rediseñar libremente la capa 1, pero la capa 2 tiene que seguir siendo consistente con ella. Es la desincronización entre textura y layout la que genera botones "invisibles" o clics que caen en el lugar equivocado.

Formatos de textura de la interfaz

Para cualquier elemento con esquinas redondeadas, sombra o borde recortado, usa .ozt — solo él preserva el canal alfa. Los fondos rectangulares opacos pueden ser .ozj (archivo más pequeño). Esto varía por season/cliente.

Mapear los archivos de la interfaz

El primer trabajo de verdad es descubrir qué archivo es cuál. La carpeta Interface/ suele tener docenas de texturas con nombres crípticos.

1. Copia toda la carpeta Interface/ a una carpeta de trabajo separada.
2. Convierte todos los .ozj/.ozt/.ozb a .png en lote con el conversor MU.
3. Abre la carpeta en el Explorador en modo miniatura grande y ve identificando visualmente cada elemento.
4. Arma tu propia tabla de referencia, por ejemplo:

newui_main_bar.ozt      -> barra inferior de estado (HP/MP/SD)
newui_inventory.ozj     -> fondo de la ventana de inventario
newui_item_back.ozt     -> marco de cada slot de ítem
newui_msgbox.ozt        -> cajas de diálogo / confirmación
newui_minimap.ozt       -> borde del minimapa
newui_skill_slot.ozt    -> slots de la barra de skills

Esos nombres son ejemplos; los de tu cliente varían por season/cliente. Sin ese mapa vas a editar a ciegas.

Paso a paso: rediseñar una barra de estado

Vamos por la barra inferior (HP/MP/SD), el elemento más visible.

1. Localiza la textura de la barra en tu tabla (ej.: newui_main_bar.ozt).
2. Conviértela a .png y ábrela en Photoshop/GIMP.
3. Anota las dimensiones exactas (ej.: 1024×128). Debes mantener las mismas dimensiones — cambiar el tamaño de la hoja desplaza todo.
4. Rediseña manteniendo:

• Las áreas transparentes exactamente donde estaban (el alfa define dónde aparece la escena por detrás).
• Las regiones de relleno de las barras (la parte que "se llena" con HP) en la misma posición, o la barra se llena torcida.

1. Si el arte tiene botones incrustados en la misma hoja, no los muevas — mantén cada botón en el mismo rectángulo de píxeles.
2. Exporta como .png de 32 bits (con alfa) en la resolución original.
3. Convierte de vuelta a .ozt con el conversor MU.
4. Sustituye el archivo en la carpeta de trabajo (nunca directo en el cliente de producción todavía).
5. Prueba in-game: la barra debe llenarse correctamente y los botones deben clicar.

Paso a paso: personalizar las ventanas (inventario, baúl)

Las ventanas más grandes (inventario, warehouse, tienda) generalmente tienen dos archivos: el fondo (.ozj) y los marcos de slot (.ozt).

1. Edita el fondo (newui_inventory.ozj) libremente — añade tu logo, cambia el color del marco, inserta un encabezado. Mantén la dimensión.
2. No alteres las dimensiones de los slots en el marco: en MU cada slot de ítem suele ser una cuadrícula de celdas (ej.: 28×28 px). Si cambias eso, los íconos de los ítems se salen de lugar.
3. Si quieres cambiar el color de fondo de los slots, edita newui_item_back.ozt manteniendo la cuadrícula intacta.
4. Convierte y prueba: coloca ítems de varios tamaños (1×1, 2×2, alas 2×3) y confirma que encajan en los slots.

; Ejemplo de definición de cuadrícula de inventario en el layout — varía por cliente
[Inventory]
CellWidth=28          ; ancho de cada celda en píxeles
CellHeight=28
Columns=8             ; columnas de la cuadrícula
Rows=8                ; filas
OriginX=8             ; esquina superior izquierda de la cuadrícula dentro de la ventana
OriginY=80

Si los ítems quedan desalineados, el problema casi siempre está en que CellWidth/CellHeight/Origin no coinciden con el diseño del marco.

Paso a paso: ajustar el layout y las hitboxes

Esta es la etapa que diferencia al amateur del profesional. El área clicable de un botón no viene de la imagen — viene del layout. Si reposicionaste un botón en la textura, necesitas actualizar la coordenada.

El layout puede estar en un archivo .ini/.txt en la carpeta del cliente o incrustado en el Main.exe (esto varía por season/cliente). Cuando es un archivo, se parece a:

; Ejemplo de layout de botones — el formato varía por cliente
[Buttons]
BtnInventoryX=980     ; posición X del botón de inventario
BtnInventoryY=1010
BtnInventoryW=40      ; ancho de la hitbox
BtnInventoryH=40      ; alto de la hitbox

BtnSkillX=1024
BtnSkillY=1010
BtnSkillW=40
BtnSkillH=40

Procedimiento:

1. Para cada botón que moviste en la textura, actualiza X, Y, W, H en el layout para que coincida con la nueva posición.
2. Si el layout usa porcentajes (común en seasons modernas), convierte la nueva posición en píxeles a porcentaje de la resolución base.
3. Si el layout está incrustado en el Main.exe, necesitas localizar los offsets con HxD — trabajo delicado y específico del build. Haz backup y altera un valor a la vez.
4. Prueba haciendo clic en todos los botones, no solo en los que tocaste (una hoja de textura compartida puede haber desplazado a los vecinos).

Integrar el minimapa y la barra de skills

El minimapa y la barra de skills tienen particularidades:

• Minimapa: el borde decorativo es una textura (.ozt), pero el mapa en sí lo genera el motor. Edita solo el marco; no cubras el área central donde se dibuja el mapa, o el jugador pierde la orientación.
• Barra de skills: cada slot tiene una hitbox individual para arrastrar skills. Mantén el espaciado entre slots idéntico al original, o el arrastrar y soltar de skills falla.
• Slots de poción: ídem — la posición tiene que coincidir con el layout para que las teclas de atajo tomen el ítem correcto.

Probar la HUD completa

Antes de distribuir, ejecuta este guion de validación en un cliente de prueba:

1. Login → selección → mundo: la HUD debe cargar sin elementos faltantes.
2. Barras de estado: recibe daño y usa poción; confirma que HP/MP/SD se llenan y vacían correctamente en la posición correcta.
3. Inventario y baúl: mueve ítems de varios tamaños entre slots; confirma el encaje y los clics.
4. Todos los botones: haz clic en cada uno (inventario, skills, guild, party, options, minimapa). Ninguno puede estar "muerto".
5. Barra de skills: arrastra skills a los slots y dispáralas por atajo.
6. Resoluciones: repite en al menos dos resoluciones (ej.: 1366×768 y 1920×1080), pues la HUD necesita escalar. Si se rompe al cambiar de resolución, revisa la alineación de resolución y cámara en el cliente — mira el tutorial de resolución personalizada de tu servidor.
7. Cajas de diálogo: abre un NPC, una confirmación de compra, un mensaje de error. Las cajas personalizadas deben centrarse y mostrar el texto correctamente.

Distribuir la interfaz personalizada

Después de validar todo:

1. Copia las texturas finales de la carpeta de trabajo a la Interface/ del cliente de producción.
2. Aplica el layout ajustado (archivo o Main.exe modificado).
3. Genera un paquete de actualización (patch) con solo los archivos alterados, para que los jugadores no rebajen el cliente entero.
4. Publica el hash de integridad del paquete en el sitio.

# Empaquetar solo la interfaz alterada y generar hash (PowerShell)
& "C:\Program Files\7-Zip\7z.exe" a -t7z -mx=9 patch-hud.7z Interface\
Get-FileHash patch-hud.7z -Algorithm SHA256 | Select-Object Hash

Si aún estás montando la estructura del servidor y del cliente desde cero, el flujo completo de creación está en la guía cómo crear un servidor de MU Online; la HUD es una de las últimas capas de pulido antes del lanzamiento.

Errores comunes y soluciones

Lista de verificación de lanzamiento

• Backup de Interface/ y Main.exe guardado en _original/
• Tabla de mapeo textura → elemento concluida
• Todas las texturas rediseñadas con las dimensiones originales preservadas
• Áreas transparentes (alfa) mantenidas en los .ozt
• Cuadrícula de inventario probada con ítems de varios tamaños
• Barras de HP/MP/SD llenándose correctamente en la posición correcta
• Todos los botones clicables validados (ningún botón muerto)
• Barra de skills con arrastrar y soltar funcionando
• Minimapa legible con marco personalizado
• HUD probada en al menos dos resoluciones diferentes
• Cajas de diálogo y NPCs mostrando el texto correctamente
• Patch con solo los archivos alterados generado y hash publicado
• Cliente final probado del login al combate real

Una HUD personalizada bien hecha es silenciosa: el jugador ni percibe el trabajo, solo siente que el servidor tiene identidad y que todo funciona. Respeta las tres capas — textura, layout y lógica — mantén los clics sagrados y valida en el cliente de producción. Es el pulido que hace que tu MU parezca un proyecto serio, no un clon de una carpeta descargada.

Preguntas frecuentes