Gibier

Tutorial on intersect's UI

Recommended Posts

Will not be compatible with intersect beta 5

 

 

The tutorial is REALLLLLLLY unfinished, i'll continue it when i'll have some free time. This tutorial is a tutorial which explain only the line 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 windows IG:

Spoiler

The name of every windows 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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now