Jump to content

Tutorial on intersect's UI

Gibier

By Gibier
in Community Guides

 Share

Recommended Posts

Gibier

Gibier

Posted
Posted

Beta 5 (Will be upgrade to b6)

  Reveal hidden contents

 

 

Link to comment
Share on other sites
Gibier

Gibier

Posted
  • Author
Posted

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
Kibbelz

Kibbelz

Posted
Posted

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.

Link to comment
Share on other sites
General Awesome

General Awesome

Posted
Posted
  On 11/2/2017 at 4:54 PM, 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.

Expand  

 

https://pastebin.com/V0F1N6Vn

 

when you really need to get on top of implementing XML loading...

Link to comment
Share on other sites
Henry

Henry

Posted
Posted

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.
 

Link to comment
Share on other sites
  • 5 weeks later...
  • 2 months later...
Debbo

Debbo

Posted
Posted 
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
Gibier

Gibier

Posted
  • Author
Posted
  On 3/1/2018 at 4:13 PM, 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?

 

 

Expand  

 

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
panda

panda

Posted
Posted
  On 3/1/2018 at 4:13 PM, 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.

Expand  

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
Debbo

Debbo

Posted
Posted

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
  • 3 weeks later...
Solomon

Solomon

Posted
Posted
  On 3/1/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. 

Expand  

 

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
Gibier

Gibier

Posted
  • Author
Posted
  On 3/22/2018 at 9:32 PM, 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.

Expand  

 

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
Solomon

Solomon

Posted
Posted
  On 3/23/2018 at 12:48 AM, 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

Expand  

 

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
  • 3 months later...
  • 1 month later...
Gibier

Gibier

Posted
  • Author
Posted

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

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
 Share
Go to topic listing
×
×
  • Create New...