Tutorial on intersect's UI

[Gibier]

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.

 

 

 

[pLeet]

Thanks for the tutorial, will come handy since both @Refur and  @mateusfar showed us what incredible things you can do with dynamic UI !

[Gibier]

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.

[mateusfar]

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.

[Kibbelz]

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.

[Miharukun]

This is amazing, I haven't touched the UI yet because it's very confusing xD. Glad you make a thread about it!

[Gibier]

@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. 

[General Awesome]

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...

[Henry]

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.
 

[Gibier]

I just added few more thing. I'll add more when i'll be on pc and some free time.

[Gibier]

I'll continue this tutorial when the beta 5 will be finished. I already need to change few thing.

[Debbo]

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?

 

 

[Gibier]

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)

[panda]

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.

[Debbo]

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? 

[jcsnider]

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. 

[Solomon]

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.

[Gibier]

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

[Solomon]

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.

[faller-magie]

Can i contribute to this tutorial or is that useless ? 

[Beefy Kasplant]

You can still contribute, unless @Gibier really doesnt want you to of course

 

[Gibier]

@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.

[Gibier]

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?

[Gibier]

[Gibier]

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.