Jump to content
Gibier

Tutorial on intersect's UI

Recommended Posts

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 left center -> "Alignments": "Center,Left"

             To the right center -> "Alignments": "Center,Right"

             To the top center -> "Alignments": "Center"

             To the Left Bottom -> "Alignments": "Left,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

83cee1fd291019ceff726c5d62c0f8d9.png

 

*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

4540885ca9683f703edcbd1c01e57267.png

 

 

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

7ad4c910474efeee7af71bd1dfa414fb.png

 

08ae6923f16e4863a5524c7ce61e168d.png

 

fabd5df8114c25a0b31cfc483eedcd01.png

 

 

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

27eb7eb1683f1e3a06e8a958e5ab940b.png

 

807e51f60562498ed07bd7964e20851c.png

 

 

Align horizontally the menu at the bottom

Spoiler

 

 

 

Tutorial on how to edit the game UI:

Spoiler

Display the hotbar vertically

Spoiler

 

 

 

Spoiler

 

 

 

Spoiler

 

 

 

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.

 

 

Beta 4.9.1 or less (Will not be compatible with intersect beta 5)

Spoiler

 

The tutorial is REALLLLLLLY unfinished and will not be completed. This tutorial only explain the lines inside the three .xml. No UI will be create in the tutorial.

Good thing to know:

 

CTRL + F is very usefull to make research inside those .xml with this you will spend less time to find something.

 

Trying to change the bound of something aligned (like the ChatboxWindow in the mainmenu) will not move the element. You will have to delete the alingment and set the bound as you want or move it with the element <AlignmentEdgeDistances>.

 

.XML location:  

Spoiler

In Game: .\Client and Editor\resources\gui\InGame.xml

In Main Menu: .\Client and Editor\resources\gui\MainMenu.xml

Text colors: .\Server\resources\colors.xml

 

MainMenu.xml:

Spoiler

Sorry i didn't write this section yet.

 

InGame.xml:

Spoiler

Find a window IG:

Spoiler

The name of every window in the InGame.xml is always windows’s name + Window. Like <FriendsWindow>, <BankWindow>, <ShopWindow>

 

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,0,0</Bounds> (xPosition, yPosition, width, height)

 

Trying to change the bound of something aligned (like the ChatboxWindow in the mainmenu) will not move the element. You will have to delete the alingment and set the bound as you want or move it with the element <AlignmentEdgeDistances>.

 

Align a window:

Spoiler

<Alignments /> change it to <Alignments><Alignments/>

 

            To the Right Top -> <Alignments>Top,Right<Alignments/>

            To the Left Top -> <Alignments>Top,Left<Alignments/>

            To the top center -> <Alignments>CenterH<Alignments/>

            To the left center -> <Alignments>Center,Left<Alignments/>

            To the right center -> <Alignments>Center,Right<Alignments/>

 

How to disable something inside an element:

 

Just change <Disabled>False</Disabled> and <Hidden>False</Hidden> to True.

 

What the dynamic UI can't do:

 

- Put a child element outside of his parent
- Change the vertical scrollbar to a horizontal scrollbar

 

colors.xml:

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.xml in the server’s side. This file is inside the resources folder.

                <HpForeground>argb(255,255,0,0)</HpForeground> -> (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.

 

 

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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 :PP

 

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

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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?

 

 

Share this post


Link to post
Share on other sites
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)

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...