Gibier Posted November 2, 2017 Share Posted November 2, 2017 Beta 5 (Will be upgrade to b6) Spoiler The tutorial is REALLLLLLLY unfinished, i'll fill it when few time to spend on it. The tutorial will explain the lines inside the .json file of the UI. I planned to also include some tutorial to show how to change something in the default intersect template. (if you have some suggestions please send me a pm) Good thing to know: Spoiler CTRL + F is very usefull to make research inside those .json with this you will spend less time to find something.  .JSON location: Spoiler In Game: .\Client and Editor\resources\gui\layouts\game\*.json In Main Menu: .\Client and Editor\resources\gui\layouts\menu\*.json Language (client): .\Client and Editor\resources\client_strings.json credits: .\Client and Editor\resources\credits.json Text colors: .\Server\resources\colors.json   How to make modification: Spoiler Find a window Spoiler The name of every window is written as: something + Window.json in the game or menu document.        CreditsWindow.json, MenuWindow.json, OptionsWindow.json....  Find every parts display inside a window Spoiler Every part of a window will include the name of the window at the first part of his name.        TradeWindow.json -Â> TradeItem.json        BagWindow.json -> BagItem.json        BankWindow.json -> BankItem.json  Change a window's size Spoiler You can find the size of a window at the first line of every .json file.        "Bounds": "0,0,0,0" (SartingPosition (x), SartingPosition (y), Width, Height)  Align a window Spoiler "Alignments": "", change it to "Alignments": "Something",         To the Right Top -> "Alignments": "Right,Top",         To the Left Top -> "Alignments": "Left,Top",        To the top center -> "Alignments": "CenterH"        To the Center -> "Alignments": "Center",        To the Center Right -> "Alignments": "Center,Right",        To the Center Left -> "Alignments": "Center,Left",        To the Right Bottom -> "Alignments": "Right,Bottom",        To the Left Bottom -> "Alignments": "Left,Bottom",        To the Center Bottom -> "Alignments": "Center,Bottom",  How to disable something inside an element Spoiler Just change"Disabled": false, and "Hidden": false, to True.   Tutorial on how to edit the menu UI: Spoiler Align the menu to the left/right Spoiler Before been able to align the main menu to the left we have to open the .json file. Open you Resources folder and copy this to your explorer bar  \gui\layouts\menu  1. Open MenuWindow.json  2. Copy "Alignments": "Center" and press Ctrl+F in your text editor (or just search the line 7)  3. Change "Center" to "Left"/"Right"  4. Save the file and open your game (open the spoiler to see the result) Spoiler  *BONUS* Align the main menu to the left bottom *BONUS*  1. Replace "Alignments": "Left" to "Alignments": "Left,Bottom"  2. Save the file and open your game (open the spoiler to see the result) Spoiler   Add a splash screen Spoiler To add a sphash screen to your game you have to open the .json file. Open the Resources folder.  1. Open config.json (\Client and Editor\resources)  2. Go to the last line and find "IntroImages": []  3. Add your images that will be in the splash screen in the images folder (Client and Editor\resources\images)  4. Copy your images's names between  the two []  with double quote follow by the image's extension and a , between each image      Ex.  "IntroImages": [] to "IntroImages": ["AGDPresents.png","bg.png","Intersect.png"]  5. Save and open your game (open the spoiler to see the result) Spoiler     Hide class (Who know maybe someone will not use this xD) Spoiler To hide the class selection you have to go in the layers folder inside the gui folder.  1. Open CharacterCreationWindow.json (resources\gui\layouts\menu)  2. Press CTRL + F (or search line 112) to find "ClassPanel"  3. Look for "Disabled" and "Hidden" and edit 'false' to 'true'  4. Save the file  pictures:  Spoiler    Align horizontally the menu at the bottom Spoiler    Tutorial on how to edit the game UI: Spoiler Find a window IG: Spoiler You can find the in game ui in the game folder (...\gui\layouts\game)  Change the size of a window: Spoiler You can find the windows size in at the first line of everything related to the UI.        "Bounds": "0,0,192,29", (xPosition, yPosition, width, height)  Align a window: Spoiler You can align the windows or other elements by changing "Alignments": "", by:        To the Right Top -> "Alignments": "Top,Right",       To the Left Top -> "Alignments": "Top,Left",       To the top center -> "Alignments": "CenterH",       To the left center -> "Alignments": "Center,Left",       To the right center -> "Alignments": "Center,Right",  How to disable something inside an element: Spoiler Just change "Disabled": false, and "Hidden": false, to True.  What the dynamic UI can't do: Spoiler - Put a child element outside of his parent - Change the vertical scrollbar to a horizontal scrollbar    Colors.json: Spoiler If you want to change the color of any text in the game such as the chatbox, damage, player name, quest… Well everything, you will need to open colors.json in the server’s side. This file is inside the resources folder.                "HpForeground": "argb(255,255,0,0)" -> (Alpha, Red, Green, Blue) The max you can put is 255 to apply the maximum possible to a color. An alpha lower than 255 will add transparency to the color.    Henry, pLeet, Refur and 7 others 7 3 Link to comment Share on other sites More sharing options...
pLeet Posted November 2, 2017 Share Posted November 2, 2017 Thanks for the tutorial, will come handy since both @Refur and @mateusfar showed us what incredible things you can do with dynamic UI ! Refur 1 Link to comment Share on other sites More sharing options...
Gibier Posted November 2, 2017 Author Share Posted November 2, 2017 No problem, you will see, iM sure that the person which will follow the tutorial will say to themselves "Damn i'm such stupid". That's what i tell myselft after tried to make a Ui (which it failed at the first windows)  Dont you let be scared by all those line, you only have to remember few thing in all those lines.  PS: When the tutorial will be finish i'll post it in the french section too! If someone want to translate it to another language you're free to do it no need to give credit I don't really care about it. Link to comment Share on other sites More sharing options...
mateusfar Posted November 2, 2017 Share Posted November 2, 2017 nice! the dynamic UI is a wonderful tool and hope everyone learns to use it. I can make one or two tutorials about it too. Link to comment Share on other sites More sharing options...
Kibbelz Posted November 2, 2017 Share Posted November 2, 2017 I'd like to see you complete this tutorial @Gibier, the dynamic ui xml is so powerful even when source becomes open. Rather than having to dive into various source modules trying to make heads and tails of a hard coded interface we have the option to find and edit the relevant attributes with minimal effort. A good feature for both new and experienced game developers. Henry and SarcasticSloth24 2 Link to comment Share on other sites More sharing options...
Miharukun Posted November 2, 2017 Share Posted November 2, 2017 This is amazing, I haven't touched the UI yet because it's very confusing xD. Glad you make a thread about it! Link to comment Share on other sites More sharing options...
Gibier Posted November 2, 2017 Author Share Posted November 2, 2017 @Kibbelz Of course i'll finish it, it's a too much usefull feature to let it unfinished. Even if i can't do nothing with this feature  @Miharukun well it's an intersect feauture so very confusing at the start. But after know the basics of this feature it will be really easy. Link to comment Share on other sites More sharing options...
General Awesome Posted November 2, 2017 Share Posted November 2, 2017 48 minutes ago, Kibbelz said: I'd like to see you complete this tutorial @Gibier, the dynamic ui xml is so powerful even when source becomes open. Rather than having to dive into various source modules trying to make heads and tails of a hard coded interface we have the option to find and edit the relevant attributes with minimal effort. A good feature for both new and experienced game developers.  https://pastebin.com/V0F1N6Vn  when you really need to get on top of implementing XML loading... Link to comment Share on other sites More sharing options...
Henry Posted November 2, 2017 Share Posted November 2, 2017 Thanks @Gibier will be very useful for AGD. I worked my head for several hours but I figured mostly everything out via trial and error over the past few weeks. In a way it was a fun puzzle game I will throw some paragraphs into this thread. If they would be deemed useful. Understanding the alignments/bounds and how they relate to the different entities was the biggest challenge for me when learning from a blank slate. Quick Tricks: -Elements can be stacked on top of each other just have to be mindful of their location in the xml for that is how they will be stacked in game and certain elements can obscure others. -Digging in the xml you can find the hidden trade button and make a UI for it if you wish. -You can add images to some things that do not have them by copy and pasting the image part of xml to the area you want an image. -Control+F is nice The UI feature is amazing and very powerful as has been stated, it may seem a bit daunting at first, but once a person gets used to it, its very flexible. It really allows for some creative effects as seen in a few of the projects floating around the forums. Give it a try and see what creative design you can come up with! I would suggest making your art first and then learning to fit the xml around that art. Even if a person just starts with a custom chatbox ect. Â Refur and Gibier 2 Link to comment Share on other sites More sharing options...
Gibier Posted November 3, 2017 Author Share Posted November 3, 2017 I just added few more thing. I'll add more when i'll be on pc and some free time. Link to comment Share on other sites More sharing options...
Gibier Posted December 2, 2017 Author Share Posted December 2, 2017 I'll continue this tutorial when the beta 5 will be finished. I already need to change few thing. Link to comment Share on other sites More sharing options...
Debbo Posted March 1, 2018 Share Posted March 1, 2018 You can find the windows size in at the first line of everything related to the UI. <Bounds>0,0,0,0</Bounds> (start (width), start (height), end (width), end (height))  Sorry about that, but I don't understand what this settings means.  <MenuContainer>    <Bounds>624,678,400,42</Bounds>   In this case the width size start at pixel 624 and  end at pixel 400?  This would not make sense.  Usually in the markup languages the syntax is as follows:  <MenuContainer>    <Bounds>Width,Height,xPosition,yPosition</Bounds> I'm trying in every way to understand the syntax, but I can not change the layout of the interface.  It is possible to introduce one graphic editor for change size, position, padding, colors etc. for game interface after or while release Beta 5?   Link to comment Share on other sites More sharing options...
Gibier Posted March 1, 2018 Author Share Posted March 1, 2018 11 minutes ago, Debbo said: You can find the windows size in at the first line of everything related to the UI. <Bounds>0,0,0,0</Bounds> (start (width), start (height), end (width), end (height))  Sorry about that, but I don't understand what this settings means.  <MenuContainer>    <Bounds>624,678,400,42</Bounds>   In this case the width size start at pixel 624 and  end at pixel 400?  This would not make sense.  Usually in the markup languages the syntax is as follows:  <MenuContainer>    <Bounds>Width,Height,xPosition,yPosition</Bounds> I'm trying in every way to understand the syntax, but I can not change the layout of the interface.  It is possible to introduce one graphic editor for change size, position, padding, colors etc. for game interface after or while release Beta 5?    indeed that was an error, the good format is <Bounds>0,0,0,0</Bounds> (xPosition, yPosition, width, height) Link to comment Share on other sites More sharing options...
panda Posted March 1, 2018 Share Posted March 1, 2018 17 minutes ago, Debbo said: You can find the windows size in at the first line of everything related to the UI. <Bounds>0,0,0,0</Bounds> (start (width), start (height), end (width), end (height))  Sorry about that, but I don't understand what this settings means.  <MenuContainer>    <Bounds>624,678,400,42</Bounds>   In this case the width size start at pixel 624 and  end at pixel 400?  This would not make sense.  Usually in the markup languages the syntax is as follows:  <MenuContainer>    <Bounds>Width,Height,xPosition,yPosition</Bounds> I'm trying in every way to understand the syntax, but I can not change the layout of the interface. Usually it would be X1,Y1,X2,Y2 or Top,Right,Bottom,Left, but at least as far as it works in Beta 5 it's x,y,width,height and I assume it's the same order format in Beta 4. Link to comment Share on other sites More sharing options...
Debbo Posted March 1, 2018 Share Posted March 1, 2018 So, to move the "EntityBox" on the "x" position, do I have to change only the variable "x"?  In this case, I have changed the "x" variables to value 50 (for PlayerBox and EntityInfoPanel).  Before <PlayerBox> <Bounds>0,0,314,192</Bounds> ... <Children> <EntityInfoPanel> <Bounds>0,0,314,126</Bounds> ... After: <PlayerBox> <Bounds>50,0,314,192</Bounds> ... <Children> <EntityInfoPanel> <Bounds>50,0,314,126</Bounds> ...  But this is the problem: PlayerBox.jpg  If "EntityInfoPanel" is inside the "PlayerBox" and I changed both "x" variables, why in the game, the "EntityInfoPanel" is divided?  I can work around this problem by changing more the "width" size of "PlayerBox", but why if both have the same "x" position and same "width" size? Link to comment Share on other sites More sharing options...
jcsnider Posted March 1, 2018 Share Posted March 1, 2018 The alignment value of the PlayerBox (Top, Left) overrides the X value. Remove the alignment or change the alignment distance X value to achieve what you want. Debbo 1 Link to comment Share on other sites More sharing options...
Solomon Posted March 22, 2018 Share Posted March 22, 2018 On 01/03/2018 at 5:31 PM, jcsnider said: The alignment value of the PlayerBox (Top, Left) overrides the X value. Remove the alignment or change the alignment distance X value to achieve what you want.  I was messing around with this but was having problems with the main menu, it didn't even occur to me to remove the alignment this explains why the position wasn't changing when I put the coordinates in lol. Link to comment Share on other sites More sharing options...
Gibier Posted March 23, 2018 Author Share Posted March 23, 2018 3 hours ago, Solomon said:  I was messing around with this but was having problems with the main menu, it didn't even occur to me to remove the alignment this explains why the position wasn't changing when I put the coordinates in lol.  I'm gonna add this, even if i didn't want to touch this tutorial until the B5, it will be usefull for person who want to do their UI twice Link to comment Share on other sites More sharing options...
Solomon Posted March 23, 2018 Share Posted March 23, 2018 12 hours ago, Gibier said:  I'm gonna add this, even if i didn't want to touch this tutorial until the B5, it will be usefull for person who want to do their UI twice  Well, I'm not actively making a game because my editor isn't working yet, so I'm just playing around with what I can. I wanted to make a small and quick pvp/permadeath/survival type orpg (using rpgmaker assets) to learn about all the events and see if I could make some type of arena  system with it. Also who knows when B5 is going to drop? It could be weeks/months away. Link to comment Share on other sites More sharing options...
faller-magie Posted June 27, 2018 Share Posted June 27, 2018 Can i contribute to this tutorial or is that useless ? Link to comment Share on other sites More sharing options...
Beefy Kasplant Posted June 27, 2018 Share Posted June 27, 2018 You can still contribute, unless @Gibier really doesnt want you to of course  faller-magie 1 Link to comment Share on other sites More sharing options...
Gibier Posted June 27, 2018 Author Share Posted June 27, 2018 @faller-magie @Kasplant I'm not working anymore on this tutorial until the B5. The GUI system is rewrite so i already need to remake it. Link to comment Share on other sites More sharing options...
Gibier Posted August 26, 2018 Author Share Posted August 26, 2018 Hey guys as you already know i'll rewrite this tutorial when the B5 will be release. I was wondering if it would be a great idea to include a spoiler to show how to make specific edit with picture? Agoraphobic, Zetasis, Rayslay and 1 other 4 Link to comment Share on other sites More sharing options...
Gibier Posted August 26, 2018 Author Share Posted August 26, 2018 Link to comment Share on other sites More sharing options...
Gibier Posted September 25, 2018 Author Share Posted September 25, 2018 I just made some edit on the first post to update the tutorial to the B5. I'm thinking to use the new intersect UI that will come with the B5 or later to make it. It will probably be a good idea cause it's really different than the actual UI. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now