Como adicionar uma interface (HUD) customizada no cliente de MU

Uma HUD customizada é o toque que transforma um cliente genérico de MU Online na identidade visual do seu servidor: barras de status estilizadas, um inventário com a moldura da sua marca, um minimapa temático. Mas a interface do MU é enganosa — trocar a imagem é a parte fácil; manter os cliques, as áreas transparentes e o layout alinhados é onde a maioria dos projetos quebra. Este guia avançado mostra o processo completo, do desenho à integração, com atenção especial às armadilhas. Todos os nomes de arquivo, dimensões e chaves citados são exemplos e variam por season/cliente — confirme sempre no seu build.

Pré-requisitos

Este é um tutorial de nível avançado. Antes de começar, garanta:

• Cliente de produção do servidor — a mesma versão que os jogadores usam. Testar em outro cliente é perda de tempo.
• Editor de imagem com suporte a canal alpha: Photoshop ou GIMP. Você vai trabalhar muito com transparência.
• Conversor de imagens MU (comumente chamado de MU Image Converter ou similar) para converter entre .png/.jpg/.tga e os formatos .ozj/.ozt/.ozb.
• Editor de texto (Notepad++ ou VS Code) para o arquivo de layout.
• HxD (hex editor) — apenas se precisar mexer em referências dentro do Main.exe.
• Conhecimento prévio de skins — se você nunca converteu uma textura MU, comece pelo básico de edição de cliente antes.
• Backup completo da pasta Interface/ (ou equivalente) e do Main.exe em uma subpasta _original/.
• Uma planilha ou bloco de notas para mapear cada arquivo de textura ao elemento que ele representa. Você vai precisar dessa referência o tempo todo.

> [!AVISO] A HUD é interconectada: uma textura muitas vezes contém vários botões numa folha só. Alterar um pedaço pode deslocar hitboxes de outros. Trabalhe sempre em cópia e valide os cliques a cada mudança.

Anatomia da HUD do MU Online

Antes de editar, entenda que a HUD tem três camadas independentes:

1. Texturas — as imagens em formato MU (.ozj, .ozt, .ozb) que ficam na pasta Interface/. Definem a aparência.
2. Layout — um arquivo (ou dados embutidos no Main.exe) que define onde cada elemento aparece e qual é a área clicável de cada botão. Define o comportamento.
3. Lógica — o código do cliente que liga um clique a uma ação (abrir inventário, usar poção). Isso vive no Main.exe e raramente é alterado em customizações visuais.

A regra de ouro: você pode redesenhar livremente a camada 1, mas a camada 2 precisa continuar consistente com ela. É a dessincronia entre textura e layout que gera botões "invisíveis" ou cliques que caem no lugar errado.

Formatos de textura da interface

Para qualquer elemento com cantos arredondados, sombra ou borda recortada, use .ozt — só ele preserva o canal alpha. Fundos retangulares opacos podem ser .ozj (arquivo menor). Isto varia por season/cliente.

Mapear os arquivos da interface

O primeiro trabalho de verdade é descobrir qual arquivo é qual. A pasta Interface/ costuma ter dezenas de texturas com nomes crípticos.

1. Copie toda a pasta Interface/ para uma pasta de trabalho separada.
2. Converta todos os .ozj/.ozt/.ozb para .png em lote com o conversor MU.
3. Abra a pasta no Explorer em modo miniatura grande e vá identificando visualmente cada elemento.
4. Monte uma tabela de referência sua, por exemplo:

newui_main_bar.ozt      -> barra inferior de status (HP/MP/SD)
newui_inventory.ozj     -> fundo da janela de inventário
newui_item_back.ozt     -> moldura de cada slot de item
newui_msgbox.ozt        -> caixas de diálogo / confirmação
newui_minimap.ozt       -> borda do minimapa
newui_skill_slot.ozt    -> slots da barra de skills

Esses nomes são exemplos; os do seu cliente variam por season/cliente. Sem esse mapa você vai editar às cegas.

Passo a passo: redesenhar uma barra de status

Vamos pela barra inferior (HP/MP/SD), o elemento mais visível.

1. Localize a textura da barra na sua tabela (ex.: newui_main_bar.ozt).
2. Converta-a para .png e abra no Photoshop/GIMP.
3. Anote as dimensões exatas (ex.: 1024×128). Você deve manter as mesmas dimensões — mudar o tamanho da folha desloca tudo.
4. Redesenhe mantendo:

• As áreas transparentes exatamente onde estavam (o alpha define onde a cena aparece por trás).
• As regiões de preenchimento das barras (a parte que "enche" com HP) na mesma posição, senão a barra enche torto.

1. Se a arte tiver botões embutidos na mesma folha, não os mova — mantenha cada botão no mesmo retângulo de pixels.
2. Exporte como .png de 32 bits (com alpha) na resolução original.
3. Converta de volta para .ozt com o conversor MU.
4. Substitua o arquivo na pasta de trabalho (nunca direto no cliente de produção ainda).
5. Teste in-game: a barra deve encher corretamente e os botões devem clicar.

Passo a passo: customizar as janelas (inventário, baú)

As janelas maiores (inventário, warehouse, loja) geralmente têm dois arquivos: o fundo (.ozj) e as molduras de slot (.ozt).

1. Edite o fundo (newui_inventory.ozj) livremente — adicione sua logo, mude a cor da moldura, insira um cabeçalho. Mantenha a dimensão.
2. Não altere as dimensões dos slots na moldura: no MU cada slot de item costuma ser uma grade de células (ex.: 28×28 px). Se você mudar isso, os ícones dos itens saem do lugar.
3. Se quiser mudar a cor de fundo dos slots, edite newui_item_back.ozt mantendo a grade intacta.
4. Converta e teste: coloque itens de vários tamanhos (1×1, 2×2, asas 2×3) e confirme que encaixam nos slots.

; Exemplo de definição de grade de inventário no layout — varia por cliente
[Inventory]
CellWidth=28          ; largura de cada célula em pixels
CellHeight=28
Columns=8             ; colunas da grade
Rows=8                ; linhas
OriginX=8             ; canto superior esquerdo da grade dentro da janela
OriginY=80

Se os itens ficarem desalinhados, o problema quase sempre está em CellWidth/CellHeight/Origin não baterem com o desenho da moldura.

Passo a passo: ajustar o layout e as hitboxes

Esta é a etapa que diferencia o amador do profissional. A área clicável de um botão não vem da imagem — vem do layout. Se você reposicionou um botão na textura, precisa atualizar a coordenada.

O layout pode estar em um arquivo .ini/.txt na pasta do cliente ou embutido no Main.exe (isto varia por season/cliente). Quando é arquivo, parece com:

; Exemplo de layout de botões — formato varia por cliente
[Buttons]
BtnInventoryX=980     ; posição X do botão de inventário
BtnInventoryY=1010
BtnInventoryW=40      ; largura da hitbox
BtnInventoryH=40      ; altura da hitbox

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

Procedimento:

1. Para cada botão que você moveu na textura, atualize X, Y, W, H no layout para casar com a nova posição.
2. Se o layout usa porcentagens (comum em seasons modernas), converta a nova posição em pixels para porcentagem da resolução base.
3. Se o layout está embutido no Main.exe, você precisa localizar os offsets com HxD — trabalho delicado e específico do build. Faça backup e altere um valor por vez.
4. Teste clicando em todos os botões, não só nos que você mexeu (uma folha de textura compartilhada pode ter deslocado vizinhos).

Integrar o minimapa e a barra de skills

O minimapa e a barra de skills têm particularidades:

• Minimapa: a borda decorativa é uma textura (.ozt), mas o mapa em si é gerado pelo motor. Edite só a moldura; não cubra a área central onde o mapa é desenhado, ou o jogador perde a orientação.
• Barra de skills: cada slot tem uma hitbox individual para arrastar skills. Mantenha o espaçamento entre slots idêntico ao original, senão o drag-and-drop de skills falha.
• Slots de poção: idem — a posição precisa casar com o layout para as teclas de atalho pegarem o item certo.

Testar a HUD completa

Antes de distribuir, rode este roteiro de validação em cliente de teste:

1. Login → seleção → mundo: a HUD deve carregar sem elementos faltando.
2. Barras de status: tome dano e use poção; confirme que HP/MP/SD enchem e esvaziam corretamente na posição certa.
3. Inventário e baú: mova itens de vários tamanhos entre slots; confirme encaixe e cliques.
4. Todos os botões: clique cada um (inventário, skills, guild, party, options, minimapa). Nenhum pode ser "morto".
5. Barra de skills: arraste skills para os slots e dispare por atalho.
6. Resoluções: repita em pelo menos duas resoluções (ex.: 1366×768 e 1920×1080), pois a HUD precisa escalar. Se ela quebra ao mudar de resolução, revise o alinhamento de resolução e câmera no cliente — veja o tutorial de resolução customizada do seu servidor.
7. Caixas de diálogo: abra um NPC, uma confirmação de compra, uma mensagem de erro. As caixas customizadas devem centralizar e mostrar o texto corretamente.

Distribuir a interface customizada

Depois de validar tudo:

1. Copie as texturas finais da pasta de trabalho para a Interface/ do cliente de produção.
2. Aplique o layout ajustado (arquivo ou Main.exe modificado).
3. Gere um pacote de atualização (patch) com apenas os arquivos alterados, para os jogadores não rebaixarem o cliente inteiro.
4. Publique o hash de integridade do pacote no site.

# Empacotar somente a interface alterada e gerar 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

Se você ainda está montando a estrutura do servidor e do cliente do zero, o fluxo completo de criação está no guia como criar um servidor de MU Online; a HUD é uma das últimas camadas de polimento antes do lançamento.

Erros comuns e soluções

Checklist de lançamento

• Backup de Interface/ e Main.exe guardado em _original/
• Tabela de mapeamento textura → elemento concluída
• Todas as texturas redesenhadas com dimensões originais preservadas
• Áreas transparentes (alpha) mantidas nos .ozt
• Grade de inventário testada com itens de vários tamanhos
• Barras de HP/MP/SD enchendo corretamente na posição certa
• Todos os botões clicáveis validados (nenhum botão morto)
• Barra de skills com drag-and-drop funcionando
• Minimapa legível com moldura customizada
• HUD testada em pelo menos duas resoluções diferentes
• Caixas de diálogo e NPCs exibindo texto corretamente
• Patch com apenas arquivos alterados gerado e hash publicado
• Cliente final testado do login ao combate real

Uma HUD customizada bem-feita é silenciosa: o jogador nem percebe o trabalho, só sente que o servidor tem identidade e que tudo funciona. Respeite as três camadas — textura, layout e lógica — mantenha os cliques sagrados e valide em cliente de produção. É o polimento que faz o seu MU parecer um projeto sério, não um clone de pasta baixada.

Perguntas frequentes