(XML) Custom Interface Guide
Introduction:
Alright in this guide, I'll show you the basics of making your own custom interface design layout. I'm using the lobby for this one, but the same method can be used for any screen.
Tools needed:
- Photoshop
- Text editor (PSPad, Notepad, ect)
Preparation:
1.) Take a 1280x960 screenshot of the interface, this is for Photoshop work & soon will be for XML mapping after you resize the resolution.(picture)
Making the concept design:
Making a concept of what you're going to do is probably the best way to plan out your work. I'm making it simple and easy on this guide.
3.) Open the 1280x960 images in Photoshop.
4.) On the 1280x960, make your own design with buttons placed on different spots. Do whatever you want, it's your design. I've made a quick and simple layout design for this guide (picture; try not to laugh at it :( )
I highly advise getting a hang of this before making a complex concept layout.
Slicing out your concept design:
Like a website, you'll have to cut out the buttons and pieces to start building it up on the XML file. But don't worry, it's simple.
1.) (picture)
2.) After you have selected the button you need to slice, go to Image -> Crop.
3.) Now you have it down to the size of the button, hide the layers on the bottom (to make the background clear).
4.) Save the button as a .PNG file.
5.) Undo (CTRL+ALT+Z), & Repeat process for the rest of the objects on your concept.
(picture)
I've finished cutting out all the buttons and other things needed.
Mapping your design, Photoshop:
For this process, you'll have to place your buttons back on your concept, but they need a colored background to find the right X/Y & H/W values.
Protip: Use smart guides (view -> show -> smart guides)
1.) If your buttons are all the same size & shape, like mine, open one of them up in another window on Photoshop.
2.) Add a colored background, and flatten the image. (picture)
3.) Now take that button and move it on your concept image.
4.) The plan here is to overlap the button with the colored background over the ones on your concept. (picture)
5.) Repeat this process for every button you have on your concept layout, and remember to include the other objects, because they need this too.
(picture)
Now I'm done placing those background buttons and things, I can go open lobby.xml and change a few things to make it my layout. You'll need Photoshop open for this.
Mapping your design, XML:
Say hello to the information window, it will show you the X&Y coords as well as the H&W of your selection. It makes editing the values inside the xml dead easy.
You can open the information window by pressing F8 or go to Window -> Info.
(picture)
Resize the 1280x960 concept to 800x600. Resizing it to this resolution is purely for xml edits.
Now open lobby.xml with a text editor, like Notepad. It's time to put the right numbers in for your layout. I'll start with the shop button.
1.) Take the rectangular marquee tool (M) and place it at the upper left point of your background image.
2.) (picture)
3.) Now you'll have to make a selection around the button's image. (picture)
4.) Repeat process and write down the values on your XML file.
While you're at it, replace the current images used for the buttons with your own. Quick example:
PHP Code:
<BITMAP type="up">shop_off_kr.tga</BITMAP>
<BITMAP type="over">shop_on_kr.tga</BITMAP>
<BITMAP type="down">shop_on_kr.tga</BITMAP>
to..
PHP Code:
<BITMAP type="up">shop_bg.png</BITMAP>
<BITMAP type="over">shop_bg.png</BITMAP>
<BITMAP type="down">shop_bg.png</BITMAP>
You'll have to make a duplicate image file and edit the lighting or something for the over and down bitmap types (because those are the ones that use the flicker effect when your cursor is over the button) then put their filenames in.
My finished product:
http://i29.tinypic.com/2s9b2c5.png
Tips:
- If you don't pay attention to frames, then your layout will be ruined when you resize. I've learned this the hard way, so you shouldn't make a mistake like I did. Some frames inside xmls hold buttons and content, and are used primarily for different resolutions. but you can manipulate the frame sizes and locations for your own layout. Just look around and try to work things out with frames.
Also, remember to make sure each xml object uses the right parent.
Example, this is the main frame for the lobby:
PHP Code:
<FRAME item="Lobby">
<FRAMELOOK>NullFrameLook</FRAMELOOK>
<BOUNDS>
<X>0</X>
<Y>0</Y>
<W>800</W>
<H>600</H>
</BOUNDS>
<TITLEBAR>false</TITLEBAR>
<RESIZABLE>false</RESIZABLE>
<FOCUSABLE>false</FOCUSABLE>
<VISIBLE>false</VISIBLE>
</FRAME>
Now the parent (second text seen in red in code below) makes the object know what frame it goes in.
PHP Code:
<!-- Picture : 상단 바탕화면 이미지 -->
<PICTURE item="Lobby_MainBGTop" parent="Lobby">
<BOUNDS>
<X>0</X>
<Y>0</Y>
<W>800</W>
<H>92</H>
</BOUNDS>
<STRETCH/>
<BITMAP>main_bg_t.png</BITMAP>
</PICTURE>
It's important to know how frames work. Also, when your making a new object based on a duplicate of another object's code, remember to change the item name.
- Make a simple design first, then map it all out, and come back to make a more sophisticated design. It's less stressful, trust me.
- Some buttons/images won't move because they've been remapped on another file, you'll have to go inside LocaleAddition.xml and put in the numbers in there. I couldn't move the options and inventory buttons on lobby.xml, until I found the new coords inside LocaleAddition.xml. (before picture) (after picture)
- The reason why I started out with a resolution of 1280x960 is because you need the buttons and graphics to be a bigger scale than 800x600, or else it would look horrifyingly low-quality on high resolutions.
- Nearly all xml files use 800x600 as the maximum frame size.
Download the modified XML files, my concept PSD file, and sliced images here:
Filebeam - Beam up that File Scottie!
After getting used to it, you can start making unique layouts. Here's one I was planning on finishing for 2010, but never got the chance. (picture)
Hope you've learned a few things, and I hope to see some custom interfaces released!
Animation Overview, requested by llMafiall
Putting an animation is simple, you just need the required images and some quick coding.
Preparation
First of all, you need frame-by-frame images to make an animation. GunZ does not support .GIF or animated .PNG images. In this guide I'll be making an animation a moving ball. It won't use a lot of frames since that will need more images, and will result in slower loading times and a bloated file size.
I start off making an individual image for each frame. Just move it bit by bit to form a fluid animation. There's an animation system built-in on Photoshop that can help you with frames.
After I saved each one as an individual image, I can use them to make an animation.
(image)
Place them into the default.mrs' folder.
XML Edits
Open templates.xml and put the following code in the bottom:
PHP Code:
<!-- Custom animation -->
<ANIMATIONTEMPLATE item="MyCustomAnim">
<BITMAP>dot_frame1.png</BITMAP>
<BITMAP>dot_frame2.png</BITMAP>
<BITMAP>dot_frame3.png</BITMAP>
<BITMAP>dot_frame4.png</BITMAP>
<BITMAP>dot_frame5.png</BITMAP>
<BITMAP>dot_frame6.png</BITMAP>
<BITMAP>dot_frame7.png</BITMAP>
<BITMAP>dot_frame8.png</BITMAP>
<BITMAP>dot_frame9.png</BITMAP>
<BITMAP>dot_frame10.png</BITMAP>
<BITMAP>dot_frame11.png</BITMAP>
<BITMAP>dot_frame12.png</BITMAP>
<BITMAP>dot_frame13.png</BITMAP>
<BITMAP>dot_frame14.png</BITMAP>
<BITMAP>dot_frame15.png</BITMAP>
<BITMAP>dot_frame16.png</BITMAP>
<BITMAP>dot_frame17.png</BITMAP>
<BITMAP>dot_frame18.png</BITMAP>
<BITMAP>dot_frame19.png</BITMAP>
<BITMAP>dot_frame20.png</BITMAP>
<BITMAP>dot_frame21.png</BITMAP>
<DELAY>100</DELAY>
</ANIMATIONTEMPLATE>
This is what will make the animation. Each BITMAP tag has a frame that goes in sequence.
The way delay works in animation is 1000 = 1 second. I've set this to 10 milliseconds, which is 100 delay.
Remember to name your animation template item something, mine's named MyCustomAnim.
(image)
Save and close the file.
Now to place your custom animation somewhere in the interface! In this guide I'll be placing mine on lobby and in-game options.
This is the code you need for placing your animation:
PHP Code:
<!-- Custom animation -->
<ANIMATION item="MyCustomAnim" parent="Lobby">
<PLAYMODE>repetition</PLAYMODE>
<ANIMTEMPLATE>MyCustomAnim</ANIMTEMPLATE>
<BOUNDS>
<X>1</X>
<Y>1</Y>
<W>258</W>
<H>105</H>
</BOUNDS>
</ANIMATION>
Inside the ANIMTEMPLATE tags, put the name of the animation you put on templates.xml. Remember, I named mine MyCustomAnim. If you read the beginning of this thread then you should know how to work with the X/Y & W/H values.
(image)
Save and exit.
results
Re: Custom Interface XML Guide
this will help me a lot :): gona start looking into it. Thank you! :):
Also there is a question: on some interfaces I see people modifying numbers of rooms pages from horizontal to vertical. Does this needs to remake numbers picture to vertical or is there posible to modify original one just by xml changing?
Re: Custom Interface XML Guide
Quote:
Originally Posted by
pluke001
this will help me a lot :): gona start looking into it. Thank you! :):
Also there is a question: on some interfaces I see people modifying numbers of rooms pages from horizontal to vertical. Does this needs to remake numbers picture to vertical or is there posible to modify original one just by xml changing?
I think the only way to make the rooms go vertical is by asm editing.
Re: Custom Interface XML Guide
thank you for the wonderful guide styx
1 Attachment(s)
Re: Custom Interface XML Guide
Quote:
Originally Posted by
`Styx
I think the only way to make the rooms go vertical is by asm editing.
I know that. I was talking about rooms numbers :):
Re: Custom Interface XML Guide
Quote:
Originally Posted by
pluke001
I know that. I was talking about rooms numbers :):
Oh. Just change the X and Y coords to make it go vertical, that's it.
Re: Custom Interface XML Guide
Quote:
Originally Posted by
`Styx
Oh. Just change the X and Y coords to make it go vertical, that's it.
I still dont gethowyou can rotare with x and y coordinates since thosetells only position for image :mellow:
Re: Custom Interface XML Guide
Nice guide, i already knew this but is it me? or the buttons get can't move dosn't matter wich X / Y you put at a 2008 server with the button i mean ( Option )
Re: Custom Interface XML Guide
Quote:
Originally Posted by
MicroManiacs
Nice guide, i already knew this but is it me? or the buttons get can't move dosn't matter wich X / Y you put at a 2008 server with the button i mean ( Option )
Quote:
Originally Posted by
`Styx
- Some buttons/images won't move because they've been remapped on another file, you'll have to go inside LocaleAddition.xml and put in the numbers in there. I couldn't move the options and inventory buttons on lobby.xml, until I found the new coords inside LocaleAddition.xml. (
before picture) (
after picture)
Re: Custom Interface XML Guide
Quote:
Originally Posted by
pluke001
I still dont gethowyou can rotare with x and y coordinates since thosetells only position for image :mellow:
Change the X and Y
The way they are set up is so they go one after another.
Make all the X co-ords the same, and just make the Y lower so they are beneath the one on top.
and I remember you said you'd make this styx, bout time ;p
Re: Custom Interface XML Guide
i need to learn this
Btw Thanks
Re: Custom Interface XML Guide
Re: Custom Interface XML Guide
nice tut but i hate my gfx skills so i wont make a interface
Re: Custom Interface XML Guide
You gave us the bootleg version. Please give the one you tested on Demonic.
