Ximboliex 86 Report post Posted March 9, 2017 (edited) ------------ TOP/PKO UI (User Interface) Setup Guide ----------- ****Credits: @BlackBarba*** *Introduction a lot of people asked me how to setup the skin, since i changed job, i can be full time in PC, so the guide can be a little incomplete. This is my first guide i ever made, any bugs reply here. I will try to make this guide newbie friendly. i dont know how anyone dont figure it out, anyone who have basic noledge in webdesign can do this easy. This Guide is based in ODS Noir Skin v0.9 UI. get my modded version above. *You will need: -Any running server -Photoshop -Notepad++*Starting! First of all, let's see our files, i will start setuping the inventory UI. As you can see in my inventory UI, i saved as .png, because i think is more easy to work, more "light" file and i can see it width/height in windows explorer.*Forms Folder Now we need find what file contains the configuration of that UI (Inventory UI), to do this we need to open each file in TOP folder>script>lua>forms folder with notepad++, go to Search>Find... (or Ctrl+F), and search for "LargeBackpack". I found this in "Equip.clu" now in Notepad++ go to Language>L>Lua. now go to Search>Replace... in the box "Find What:" type "LargeBackpack.tga" in the box "Replace witht:" type "LargeBackpack.png" now click in "Replace All" save the file and open the game. *WORKED! but its a mess... lets setup this. in line 11 of Equip.clu u can see this: imgItemMain = UI_CreateCompent( frmItem, IMAGE_TYPE, "imgItemMain", 331, 382, 0, 0 ) *Photoshop Time! Open original LargeBackPack (ODS one) in your photoshop (i'm using CS6 Version, but i think this doens't matters) Go to >Window>Info (or press F8), as you can see, opened this window: click in the arrow marked in the image and select "pixels" now with the Rectangular Marquee Tool (M) select the inventory (only the inventory, not that two buttons above): if you did it right, u can see in pixels the size of the inventory, and you can see, this match with size in Equip.clu: (yea i selected 1 px more, in image is 332x383) imgItemMain = UI_CreateCompent( frmItem, IMAGE_TYPE, "imgItemMain", 331, 382, 0, 0 ) Now do the same with YOUR inventory UI. *Test Time! now change the values "331, 382," to the size of your UI, in my case 389,468, in the lines 4,11,12, save and test As you can see, now it show all inventory fine, but gold, buttons, grid, equipment is all mess.*let's continue setuping following the Equip.clu, the next of the "imgItemMain" is "btnClose" and it probably mean "Button Close" (DUHHH) -code- btnClose = UI_CreateCompent( frmItem, BUTTON_TYPE, "btnClose", 27, 18, 295, 2 ) UI_LoadButtonImage( btnClose, "texture/ui/LargeBackpack.png", 27, 18, 0, 381, TRUE ) UI_SetButtonModalResult( btnClose, BUTTON_CLOSE ) Let's go back to photoshop, in the ODS inventory. With rectangular marquee tool Select the close Button, i made a selection of 27x18 for you guys see that fit the Equip.clu Do this in your UI My close Button selection is the size of 16x12, so in my case i will change the values in line 14,15 from 27, 18, for 16, 12,. Now as you can see in line 14, the last two numbers (295,2) is the coordinates where the object will be showed (Close Button). What dafuq u mean richard see the image above: *Rulers In Photoshop go to View>Rules ( or Ctrl + R) now drag it to the coordinates 295,2, you don't know how to do it? give a good zoom, when you drag the rules, you can see the y/x axis changing this is where the close button will show when you open the game, so let's try in our own skin: in my case i want that my close button be where is showing in the image. in your skin opened in photoshop make a square of the size of your closed button (or use the button itself), and place where you want it to appear when you open the game, now drag the rulers X and Y the the square, now give a big zoom to where the rulers X and Y crosses, point your mouse to it, and in the Info Window you can see it coordenate. in my case the coordinates are 330,17, so we change the 295,2 in the lines 14 to 330,17. in the end of the line 15 you can see it " 0, 381, TRUE )" this is the coordinates of the object in the image file. Again Richard! what dafug u mean??? go to ODS inventory and drag your ruler to theses coordinates 0,381 and see what you get. The size of the close button in ods skin is 27,18 now imagine a square of that size in that coordenate. Now go and do it with your UI, get the coordinates and change the line 15 (0, 381) to your coordinates. *Test Time Again! save and test, try to close your inventory. well, mine when i pass the mouse over the button it desappear, it's because, in the image file the buttons are too distant from each one. my button have the size of 16,12, there is no spacement between the normal button and the pressed button, so or you edit your image file, or you edit in equip.clu the size of the button two solution 1. move the object in the image file. or 2. make a larger button size in the equip.clu Now my close button is working fine!*Inventory Item Grid Now the Next one is the Grid items! This start in the line 21, we have this grdItem = UI_CreateCompent( frmItem, GOODS_GRID_TYPE, "grdItem", 299, 232, 19, 39 ) we know that is the size and the coordinates, but what size? lets see, create a square of 299,232 in the ods inventory (2 click anywhere) see where it fit? so this is the size of our inventory grid go to your inventory and with the marquee tool take the size of your grid mine is 296x221. now and that 19, 39 in the line 15? let's go to ods ui and drag the ruler to these coordinates to see. Now just get the size and coordinates of your grid and change in the Equip.clu For now is this guys! With this i think you guys can setup the rest. In attachment have the equip.clu file with commented lines to help you. Edited March 9, 2017 by Ximboliex 7 Quote Share this post Link to post Share on other sites
Shako 97 Report post Posted March 9, 2017 niice Quote Sunny Go! Online pko.host Share this post Link to post Share on other sites
