UI Guide Part 1

I’m breaking this into parts because I don’t feel like doing the entire thing right now, lol. This first part should be short and simple~

For those wondering; my UI should be releasing soon, like, within the next week kind of soon. I’ll be posting this guide/tutorial on the forums along with my UI when that time comes~ but till then~

 

First of all, if you’re interested in customizing your UI, aka making your own UI skin, this is the first page you’ll want to look at: http://forums.warpportal.com/index.php?/topic/121856-ui-texture-editing/

Secondly, You’ll need a few programs and a lot of patience.

• Programs like a VDK extractor and packer program. You’ll have to find this one or ask someone with it. You’ll also need a graphics/image program that edits .tga files. I personally use Photoshop CS2.

• And the patience is because~ making a custom UI requires a lot of experimenting. I can’t tell you the number of times I’ve closed my client, repacked the vdk, wrote over the client vdk with mine, restarted the client, logged in to simply see what was effected and if it was changed correctly, and repeating until I was happy with the changes.

and,

Third, This is where my guide comes in ;3

We just recently got the new UI, and so far it has some errors. The biggest error in my opinion, I’ll display in an image below.

The things within the red squares are the textures that should be changed within the .tga files, but are not. These files are actually located in the LANGUI.vdk file also and for some reason, the UI is reading the files located there instead of the ones in the UI.vdk. But here’s the thing. Yes you can go into the LANGUI.vdk file and edit the .tgas within it, repack, and write over the existing file in data > 1, however, you have to replace it after the patcher has started. If you replace it and then open the patcher, the patcher will automatically re-download that file. This does not happen with the UI.vdk.

LANGUI.vdk currently contains;

• BI
• Btn_01
• Base_002
• Con_009

That first step I posted (the one that goes to a forum thread), has pictures of folders and files that need to be edited. Uh yeah, ignore that. It’s a great example to give you the concept of things, but we have a totally new UI now, so that list is essentially useless, lol. Below I’ll provide some very simplistic notes that I personally made and used, of what you can find in which file (it’s not going to be insanely detailed, it’s more of a guide).

• Outgame_001 – LDK (long distance kafra) flyer loader, Server status, Loading poring, Create chara graphics
• BI – The main RO LotS logo (used to be on the username/pass screen)
• Icon_001 – (self explanatory, lol) Tons of icons
• Icon_002 – Skill window class icons, Window icons, Raid icons
• Hud_001 – * Probably the single most important file, this is the WYSIWYG file. Anything you see in your main UI without opening windows, is located in here * Your portrait frame, party portrait frames, opponent portrait frames, mini map, EXP/MP/Job bars, Porings, Cast bar, Chat Window, Type bar
• Damage – (self explanatory)
• Btn_001 – *The most tedious file you’ll work on* Chat buttons, Arrow buttons, Kafra shop button, Pyramid button, Menu Button, Kafra shop inside buttons
• Btn_002 – Card album tabs, Storage expansions, Drop down buttons in Menu, Chatroom bubble
• Base_001 – *The basic windows and probably the second most important file* Bags, Warning window, Main window (mail, quests, npc dialogue, etc), Item backgrounds, Text backgrounds, Trade window highlight, Bars you can find in Character window and Chara select, Checkered texture behind money and icons in main windows
• Base_002 – Map background, AH Mail background
• Con_001 – Card combining, Khara icons, Card Album stuff, Dungeon Difficulty, Shop icons, WoE icons
• Con_002 – Daily login check window, Spirit/Combo bars, Flyer load bar, DNA frags
• Con_003 – Refine, Honing, Raid members HP/Mana bars
• Con_004 – Rank icons, Dye window background, Characters in Chara window
• Con_005 – Duel stuff
• Con_006 – Quest log, Daily attendance clouds, Chibi kafra from Kafra shop
• Con_007 – Colo window and icons
• Con_008 –
• Con_009 – LDK Map
• ptn_0001-0004 – (some small box, I don’t know, lol)
• ptn_0017-0020 – Paper texture window (corresponds to the most bottom-left window in base001)
• ptn_win1a_01-04 + ptn_win1b_02 – Main window (corresponds to the most top-left window in base001)
• ptn_win2a_01-04 –
• In folder UI > UI > Texture > Skill > Arrow – Skill tree window arrows

I remember when I first tried customizing the UI with the last tan-stiched UI, the most annoying thing (even more annoying than restarting your client over and over) was trying to find the location of all the UI pieces in the .tga files. So I hope this ‘simple notes’ list that I provided helps! Good luck, and I’ll work on Part 2 soon~

Coming Soon In Part 2: I want to do something similar to a tutorial where I’ll explain how to change the textures within Photoshop. Without going into crazy detail right now, the Channels tab in the Layer window is what controls the transparency of your textures, so be sure to make sure you’re editing that along with what you’re changing.

To UI Guide Part 2