How to add a custom interface (HUD) to the MU client

A custom HUD is the touch that turns a generic MU Online client into your server's visual identity: stylized status bars, an inventory framed with your brand, a themed minimap. But the MU interface is deceptive — swapping the image is the easy part; keeping the clicks, the transparent areas and the layout aligned is where most projects break. This advanced guide shows the full process, from design to integration, with special attention to the pitfalls. All the file names, dimensions and keys cited are examples and vary by season/client — always confirm in your build.

Prerequisites

This is an advanced-level tutorial. Before you begin, make sure you have:

• The server's production client — the same version players use. Testing on a different client is a waste of time.
• An image editor with alpha channel support: Photoshop or GIMP. You will work with transparency a lot.
• A MU image converter (commonly called MU Image Converter or similar) to convert between .png/.jpg/.tga and the .ozj/.ozt/.ozb formats.
• A text editor (Notepad++ or VS Code) for the layout file.
• HxD (a hex editor) — only if you need to touch references inside Main.exe.
• Prior skinning knowledge — if you have never converted a MU texture, start with the basics of client editing first.
• A full backup of the Interface/ folder (or equivalent) and of Main.exe in an _original/ subfolder.
• A spreadsheet or notepad to map each texture file to the element it represents. You will need that reference all the time.

> [!AVISO] The HUD is interconnected: a single texture often contains several buttons on one sheet. Changing one piece can shift the hitboxes of others. Always work on a copy and validate the clicks after each change.

Anatomy of the MU Online HUD

Before editing, understand that the HUD has three independent layers:

1. Textures — the MU-format images (.ozj, .ozt, .ozb) that live in the Interface/ folder. They define the appearance.
2. Layout — a file (or data embedded in Main.exe) that defines where each element appears and what the clickable area of each button is. It defines behavior.
3. Logic — the client code that links a click to an action (open inventory, use a potion). This lives in Main.exe and is rarely changed in visual customizations.

The golden rule: you can freely redraw layer 1, but layer 2 must stay consistent with it. It is the desync between texture and layout that produces "invisible" buttons or clicks that land in the wrong place.

Interface texture formats

For any element with rounded corners, a shadow or a cut-out edge, use .ozt — only it preserves the alpha channel. Opaque rectangular backgrounds can be .ozj (a smaller file). This varies by season/client.

Mapping the interface files

The first real task is figuring out which file is which. The Interface/ folder usually has dozens of textures with cryptic names.

1. Copy the entire Interface/ folder to a separate working folder.
2. Batch-convert all the .ozj/.ozt/.ozb files to .png with the MU converter.
3. Open the folder in Explorer in large-thumbnail mode and visually identify each element.
4. Build your own reference table, for example:

newui_main_bar.ozt      -> bottom status bar (HP/MP/SD)
newui_inventory.ozj     -> inventory window background
newui_item_back.ozt     -> frame of each item slot
newui_msgbox.ozt        -> dialog / confirmation boxes
newui_minimap.ozt       -> minimap border
newui_skill_slot.ozt    -> skill bar slots

These names are examples; your client's vary by season/client. Without this map you will be editing blind.

Step by step: redrawing a status bar

Let us go with the bottom bar (HP/MP/SD), the most visible element.

1. Locate the bar's texture in your table (e.g., newui_main_bar.ozt).
2. Convert it to .png and open it in Photoshop/GIMP.
3. Note the exact dimensions (e.g., 1024×128). You must keep the same dimensions — changing the sheet size shifts everything.
4. Redraw while keeping:

• The transparent areas exactly where they were (the alpha defines where the scene shows through).
• The fill regions of the bars (the part that "fills up" with HP) in the same position, otherwise the bar fills crookedly.

1. If the art has buttons embedded in the same sheet, do not move them — keep each button in the same pixel rectangle.
2. Export as a 32-bit .png (with alpha) at the original resolution.
3. Convert it back to .ozt with the MU converter.
4. Replace the file in the working folder (never directly in the production client yet).
5. Test in-game: the bar should fill correctly and the buttons should click.

Step by step: customizing the windows (inventory, warehouse)

The larger windows (inventory, warehouse, shop) usually have two files: the background (.ozj) and the slot frames (.ozt).

1. Edit the background (newui_inventory.ozj) freely — add your logo, change the frame color, insert a header. Keep the dimensions.
2. Do not change the slot dimensions in the frame: in MU each item slot is usually a grid of cells (e.g., 28×28 px). If you change that, the item icons go out of place.
3. If you want to change the slot background color, edit newui_item_back.ozt while keeping the grid intact.
4. Convert and test: place items of various sizes (1×1, 2×2, 2×3 wings) and confirm they fit in the slots.

; Example of an inventory grid definition in the layout — varies by client
[Inventory]
CellWidth=28          ; width of each cell in pixels
CellHeight=28
Columns=8             ; grid columns
Rows=8                ; rows
OriginX=8             ; top-left corner of the grid inside the window
OriginY=80

If items end up misaligned, the problem is almost always CellWidth/CellHeight/Origin not matching the frame's design.

Step by step: adjusting the layout and the hitboxes

This is the step that separates the amateur from the professional. A button's clickable area does not come from the image — it comes from the layout. If you repositioned a button in the texture, you need to update the coordinate.

The layout may be in an .ini/.txt file in the client folder or embedded in Main.exe (this varies by season/client). When it is a file, it looks like:

; Example of a button layout — the format varies by client
[Buttons]
BtnInventoryX=980     ; X position of the inventory button
BtnInventoryY=1010
BtnInventoryW=40      ; hitbox width
BtnInventoryH=40      ; hitbox height

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

Procedure:

1. For each button you moved in the texture, update X, Y, W, H in the layout to match the new position.
2. If the layout uses percentages (common in modern seasons), convert the new pixel position into a percentage of the base resolution.
3. If the layout is embedded in Main.exe, you need to locate the offsets with HxD — delicate, build-specific work. Back up and change one value at a time.
4. Test by clicking all the buttons, not just the ones you touched (a shared texture sheet may have shifted neighbors).

Integrating the minimap and the skill bar

The minimap and the skill bar have their quirks:

• Minimap: the decorative border is a texture (.ozt), but the map itself is generated by the engine. Edit only the frame; do not cover the central area where the map is drawn, or the player loses their bearings.
• Skill bar: each slot has an individual hitbox for dragging skills. Keep the spacing between slots identical to the original, otherwise skill drag-and-drop fails.
• Potion slots: same — the position must match the layout for the hotkeys to grab the right item.

Testing the complete HUD

Before distributing, run this validation script on a test client:

1. Login → selection → world: the HUD should load with no missing elements.
2. Status bars: take damage and use a potion; confirm HP/MP/SD fill and drain correctly in the right position.
3. Inventory and warehouse: move items of various sizes between slots; confirm the fit and the clicks.
4. Every button: click each one (inventory, skills, guild, party, options, minimap). None may be "dead".
5. Skill bar: drag skills into the slots and fire them by hotkey.
6. Resolutions: repeat at least two resolutions (e.g., 1366×768 and 1920×1080), since the HUD needs to scale. If it breaks when you change resolution, review the resolution and camera alignment in the client — see your server's custom resolution tutorial.
7. Dialog boxes: open an NPC, a purchase confirmation, an error message. The custom boxes should center and show the text correctly.

Distributing the custom interface

After validating everything:

1. Copy the final textures from the working folder to the production client's Interface/.
2. Apply the adjusted layout (file or modified Main.exe).
3. Generate an update package (patch) with only the changed files, so players do not re-download the entire client.
4. Publish the package's integrity hash on the site.

# Package only the changed interface and generate a 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

If you are still building the server and client structure from scratch, the full creation flow is in the guide how to create a MU Online server; the HUD is one of the last polishing layers before launch.

Common errors and fixes

Launch checklist

• Backup of Interface/ and Main.exe kept in _original/
• Texture → element mapping table completed
• All textures redrawn with original dimensions preserved
• Transparent (alpha) areas preserved in the .ozt files
• Inventory grid tested with items of various sizes
• HP/MP/SD bars filling correctly in the right position
• All clickable buttons validated (no dead button)
• Skill bar with drag-and-drop working
• Readable minimap with a custom frame
• HUD tested at at least two different resolutions
• Dialog boxes and NPCs showing text correctly
• Patch with only the changed files generated and hash published
• Final client tested from login to real combat

A well-made custom HUD is silent: the player never notices the work, they just feel that the server has an identity and that everything works. Respect the three layers — texture, layout and logic — keep the clicks sacred, and validate on the production client. It is the polish that makes your MU look like a serious project, not a clone from a downloaded folder.

Frequently asked questions