Arabella's In-depth UI Guide

[ArabeIIa]

Disclaimer:
I know that Domgrath gave a tutorial of his own alongside Tros, but I wanted to get more in-depth. In addition, for my tutorial, you won't need Photoshop (unless that is your preference). I will be typing out instructions along with the videos because I know many people here can read English, but cannot speak it. I'm also not the best at explaining, though I did try. I just tried to explain what I was doing, while I was doing it. I did not attempt to make a lesson plan. Basically, I winged it. That being said, some of these are more instructional than others, but it's still a good visual if you are a visual learner like me. Even though this tutorial was made a while ago, this tutorial is still applicable.

When I made this guide, I had planned on permanently quitting. I had a very long waitlist, and I felt bad that I couldn't give everyone the UI I had promised them. So, at the time, I decided to give out information on how to do this because I think a UI makes it much more enjoyable: at the end of the day it's a game, and everyone deserves to have fun. I know there's not many people who make these, and I wanted to give people the option to have one if they really wanted one. That being said, I am more than happy to answer questions to help you as you go along. Since making this guide, I have learned new techniques that are faster, especially when it comes to animation. If you need help, don't hesitate to add me on discord at 2c#7972.

If you are new to editing, take your time and go in order!



Programs Needed

1) Make sure you download the TGA viewer so you can see your files.
Caution: You will need to restart your computer the first time for it to work

2) Download either version of Tros's sPCK (thanks so much dude for making it, makes this so much easier)
Click here to download sPCK and TGA viewer

3) Personally, I hate Photoshop. Everything I've ever done has been done with paint.net.
If you are used to Photoshop but would like something more simple and free, then you can download gimp here.
Keep in mind that if you have any questions about how to use gimp, I will personally not be able to answer it because my experience is only extensive in paint.net

4) I use Tros's 2.0 version of sPCK, but you're welcome to use the newer version
After you have downloaded the items, make sure you put spck and the gspck in the same folder. It does not matter what you name the folder.

5) Make sure your game is updated before you follow this step: Go to where your game is saved and to your element folder. The files you will need is surfaces.pck and interfaces.pck
Surfaces are the pictures. Interfaces are the codes that tell the pictures where to go, and how big or small they will be.

6) Copy those two files and paste them into your spck folder

7) Click on gspck, and click on the "UI" tab. Extract your surfaces, and then your interfaces. That is how you open the files. When we compress, we close the files.

Filepaths

Surfaces: copy these filepaths as needed and paste it in your files search bar.
XML: the name of the code file in interfaces


Healthbar and Target Select
Filepath: \version02\系统\头像框\半包围
XML: hpmpxp (yours), hpmpotherb (target)


Chi Sparks and Charms
File Path: Found in the "Progress" folder when you first enter your surfaces
Chi Spark XML: HpMpXp
Charms XML: progress_hp, progress_mp


Charm Background
File Path: \version01\windows


NPC and Monster Health Bars
File Path: \version02\系统\头像框\目标头像


Map
File Path: \version02\系统\雷达[
XML: map
Note: The map-looking pictures found in that folder are not the actual file. The original map is found in the "custom" folder when you first enter your surfaces.


Genie
File Path: \version02\系统\小精灵
XML: character_elf, character_elfchat, character_elfchatzoom
Note: character_elfchat is your main geinie bar. The character_elf is for when you open up your genie for things like restating. Character_elfchatzoom is for when you press the "zoom button" in game.


Squad
File Path: \version02\系统\小队面板
XML: teammain, teammate 1-9
Note: The bar behind the active quest frame is also located in this folder


Pets
File Path: \version02\系统\宠物


Skill Bars
File Path: \version02\系统\技能栏
XML: quickbar8va, quickbar8ha, quickbar9va, quickbar9ha
Note: 8 stands for the 8-slotted skillbar, and 9 stands for the 9-slotted skillbar. HA is horizontal (flat) and VA is for vertical (sideways)


Channeling Bar
File Path: \version01\施法条修改\
XML: magicprogress1, magicprogress2, magicprogress3
Note: magicprogress1 is your main channeling bar. The others are separate channeling bars for prolonged skills like BOA


Window Background
File Path: \version02\背景图\一级底图


Window Accent
File Path: \version02\背景图\二级底图
Note: This is the stuff in the middle of the windows that lays on top of the background to give the windows a nice accent


Window Titles
File Path: \version02\标题\


Window Buttons
File Path: \version02\按钮\通用按钮\


Active Quest and Bag Buttons
File Path: \version02\按钮\单选按钮\


Tabs
File Path: \version02\按钮\分页按钮


Friendslist Background
File Path: \version02\系统\任务面板\
XML: friendslist


Guild
XML: guildmanage


Bag
File Path: \version02\系统\背包


Boutique
File Path: \version02\系统\商城


Setting Buttons (Bottom Right Corner buttons)
File Path: \version02\系统\主界面


Notifications
File Path: \surfaces\version02\特殊图标

Logging in faster

Instead of having to type in your password and entering character selection every time you log in, there is a faster way.
1) Go to your element folder and right click on element.exe and copy and paste the shortcut where ever you wish.
2) Rename it to the name of the character you would like to log into


3) After you rename the shortcut, right click it and go to properties and in target.


4) After elementclient.exe, leave a space and type startbypatcher console:1 user:yourusername pwd:yourpass role:char name
It should look like this:
           "C:\Epic Perfect World\element\elementclient.exe" startbypatcher console:1 user:xxxxxx pwd:xxxxx role:xxxx

5) Press "OK" and you're done.

Credit to Thiru for this idea.

Editing with Paint.net

Pro-Tips:
1) If you're like me and you suck at drawing, try to use transparent pictures instead of pictures with a background. The quality is better.

2) Small details such as boarders matter. It makes it look a lot cleaner.

3) It helps to keep a folder of just random pictures you like. You may use some five times, or never at all. But if you ever get stuck on an idea, you can go through that folder and go "Oh hey! That was cool idea!" Also, it's a good idea to keep all of your UI's (including original UI) in a separate folder in case it breaks in a patch, or you accidentally lose it when working with files.

4) When you look up things (like for example, mine was league of legends) try to include the world "png" in your search engine. More transparent pictures will pop up that way.

5) Pick a theme and stick with it. Try to start off with the HP section first. If you start off with the small things, it might not look as good as the bigger things when you get to it... and then you would have to go back and fix a ton of small things. Often times games and TV shows have a lot of fan-made art you can use or custom ui's already made you can pick and choose from.

6) Throughout this tutorial, I even make mistakes with some layers. Try to get the hang of using them because they're so important when you're editing instead of drawing.

7) It helps to make a new file to give yourself a little bit of extra room to arrange things how you want them.
In the next video, I show you how to replace the new file with the in-game file.

Fair warning: You will use cntrl+c and cntrl+v until your fingers fall off.

Surfaces: Saving and Replacing Files

1) When you are done with the background of your HP bar, pull up all the other accessory files you plan on using (HP, MP, Chi, etc) and leave them kind of to the side.

2) Edit your HP textures in layers on top of your bar. You'll want to do this so you know how big your bar needs to be.

3) When you're done, paste each layer where they belong... so if you are done with HP, copy that layer and put it in the original HP file and save it.

4) Go to Image > Crop to Selection if it looks a little funny. This will only crop to what you have selected.

5) When you are done editing all of them: save them but do not close out because you're going to need the know the size of all of your bars.

We'll talk about that in the next video.

Interface: Resizing Pictures

When resizing, notice the height and width at the bottom of paint.net
That's why I said leave your files open, you can fill it out in your interfaces while looking at it instead of having to remember it or re-open a ton of files.

Interface: Moving Pictures

HP Bar:

Head Buttons:

1) It looks scarier than it is. Most of it is repetitive.

2) X = Horizontal | -10 moves to the left, +10 moves to the right

3) Y = Vertical | -10 moves up, +10 moves down

4) Most of the time when the game crashes, it's because we accidentally erase or forget something as small as a quotation mark.  If you are new to coding, I only suggest doing a few codes at a time. That way if it crashes, you can go back and look at the few things you did to check for errors; just don't panic. If you know that you might panic or get overwhelmed, another thing you can do is save your progress in a separate interface file somewhere else so you don't lose all your work if you feel the need to start over if it crashes. (Once you do it enough though, it'll rarely crash on you. My first few times were frustrating, but I also had no one to help me figure this out.)

5) MAKE SURE EVERYTHING IS RESIZED AND THE BACKGROUND IS WHERE YOU WANT IT BEFORE YOU TRY TO MOVE EVERYTHING. You'll waste a lot of time moving things because it's a guessing game. If you get it perfectly aligned but then go back and resize other things, it'll move everything... which means you'll be 80 years old before you finish your UI.

Interface: Re-arranging

Fast forward towards the end if you want to see how to re-arrange codes.
Just make sure you copy the whole section of a file, and not just a line.
Be sure to double check for small errors.

Interface: Changing and Separating Filepaths

So in this example, the HP bar on your INI and the HP bar on the target select are the same picture. But since our designs are different, our HP progress bars are different, too. So in this video we needed to make a new file, and make it appear in game so that they could be linked to a different picture.

Surfaces and Interfaces: Chi Sparks

If you just want one picture and for it to stay in place, choose this:

- Make sure to use the glow effect so you can tell the difference between sparks, and to save each one in separate tgas. Remember to rename them in the filepath as you code.

If you want them to spin (3D or 2D), choose this:

- Press cntrl+shift+r for 3D rotation

If you want an animation, choose this:

- Here is the website for breaking down gifs: https://ezgif.com/split

1) When you open your progress folder, you're going to see a lot of chi sparks, but the game only uses these:
- ap_a: that is the picture that sits still when you have no sparks
- ap_b: that is the animation when you have a spark on
- ap_c: that is the "flash" animation when you use up a spark

2) If you don't want the "flash" animation or the picture when it's off, just make it transparent. That way you don't have to code it.

3) When you edit the animated version, just make sure they're all aligned.

4) If you're rotating them, make sure you align it first before you rotate each frame: there are 6 frames... 180/6 is 30. So you would rotate each picture at 30 degrees.

5) If you're using a gif to break down, just try to make sure it's stationary at the center of the picture. Otherwise it's going to be hard to get it to look right in game.

Surfaces and Interfaces: Skillbars

The number attached at the end of the xml title matches the number of slots to the skill bar in game. HA is horizontal, VA is verticle

PS. I wouldn't try to code the actual skillbar slots because it's an absolute pain in the ass.
If you just want a background or a design around your bar, just edit the bottom image and resize it/move it to where you want it.

Surfaces and Interfaces: Genie

*Updated 4-1-21*
If the last few skills are not working on the genie, change the winmain width.
It would be the very first code in the interface file.

Surfaces and Interfaces: Charms

1) You can make a fancy bar design if you want to. You'll edit that the same way you did hp bars. You'll have your background, and then your progress bar. I just chose cute little chibis because I like them better, and it's faster.

2) Especially in a bigger/more complicated UI like this, try to not make them more than 125x125 in size just because it'll end up being too crowded (at least for my taste)

3) Just makes sure if you are getting rid of the charm background that you make it transparent. Do not code it out, especially if you're going to get rid of the text. That way you can still hover over your charm and see how much it has left, without the ugly text covering your picture.

Surfaces and Interfaces: Squad

1) Squad bars are annoying because there are 10 files to it. You have your team-main which is where the buttons at the top of your squad is, and then your the teammates 1-9. Whatever you do to the first one, you have to go through and code the other 8.

2) This one wasn't that hard because I didn't make a whole new bar, tick marks, resize the class icon, etc. So most of this was in place. But if you're trying to do something different with your squad bars, it will eat up a lot of time.

3) Sometimes I would get in a full PT and crash because I didn't test it 1 by 1. That's important if you're new to it because there's a lot involved in squad bars... and theres 9 of them. So that means you will have to go through 9 of them to check for small errors... and you don't want that headache. I would test each squad member with your friends / guild if you're new to this.

Surfaces: Windows, Buttons, and Bag

1) If you've gotten through all of the coding, then this part is easy peasy because this is just recoloring. I'm just putting this here to show that it can be done.

2) All windows are the same picture, which means the same picture constantly stretches: don't try any super fancy designs in the window because it won't look good.

3) If you would like a separate design in the background of your windows, like a guild icon in the guild window, go to the guildmanage.xml file and find the width and height of the background image. Make the image you want, save it as a TGA somewhere, and input the correct file path.
If you go to my shop, you can see where I did it for OC.

4) Your background in your bag can be any picture you want. However, it gets covered up by your gear and other things pretty easy.
If you want to remove the meridian and star chart, just make those pictures transparent. Don't remove it by coding, or you wont be able to click on it. It may be invisible, but if you click on that area the window for it will pop up if you ever need to use it.

Replacing a UI

As I said, don't copy from other people's ui's. This how you would've gotten rid of that giant skill bar and channeling bar. Resizing it manually would take much longer, so I showed you de wae.

Fonts and Font Colors

1) The only things (that I've noticed) that it doesn't work on is HP bars. Here is that code page: https://www.rapidtables.com/web/color/RGB_Color.html

2) To change fonts all together:
- Download whatever font you want to use
- Go to your element folder > fonts
- Copy the name of one of the fonts in your element folder, and rename the font you downloaded to that name
- Replace[
- No extracting or compressing necessarily, just log back in and enjoy

3) Keep in mind that texts can sometimes be tedious. Some fonts end up looking like symbols when you install, and others are in all caps or run off the text box. It's not a hard thing to change, but it might take a while to find a font that you actually like, and works okay in game.

Extra Notes

- Keep in mind that there are a lot of tiny things to recolor if you are wanting a quality UI, but that part is up to you. I just wanted to show you guys more of the major things. The only things I did not include that you might want to know is the channeling bar, and map.
- Channeling bar is super similar to charm bars. So if you're struggling, watch the charm bar video.

*Updated 4-1-2021*
Map buttons cannot be moved whatsoever. My suggestion is to either move the map itself to the left of the buttons and make it bigger, or to make the pictures of the map buttons invisible. That way, you can still hover over it and click it but it won't show up on your screen.

If you would like to download this UI to compare files while you figure it out (or just because it's awesome), click me.
If you would like the version without the giant skill bar and channeling bar, click me.
This will also be pasted on my thread, and the free UI thread - both of which are linked somewhere in this thread.

*Updated 4-1-2021*
This UI is outdated for the current client version. However, you are still able to download it and compare the files for practice. As of the date posted, the mediafire links are still up on my end.

If you made a ui using this guide, please post it here! I would love to see it!

DO NOT COPY OTHER PEOPLE'S WORK WITHOUT THEIR PERMISSION AND CREDITING THEM

[GINJO]

just in time

[Аlex]

. So i remember about this.

[PW? 2023?]

. So i remember about this.

Same

       

[Cyan]

Haven't read everything yet but thanks in advance!

[Rikku]

Outdated, just like your client files are.

[ArabeIIa]

Outdated, just like your client files are.

Oh you reminded me of something, xD Thanks for yuh hate girl

[ArabeIIa]

Lordie, that was a lot. 
Done ^^

Haven't read everything yet but thanks in advance!

And you're welcome!

[ᴋᴀʏᴅᴇɴ]

 

[hanggang leeg]

Make that ui on the tutorial free 

[ArabeIIa]

Make that ui on the tutorial free  

I'm going to ^

[hanggang leeg]

I'm going to ^

oh very nice ty

[☆ ¢у∂αєα ☆]

Bump for best Mysteek and Clereek, even though she's leaving me 

[ArabeIIa]

Bump for best Mysteek and Clereek, even though she's leaving me  

<3 <3 <3
What other games do you play though? You're a gaming pal for life 

[Saint]

waaaw thanks