Tools for Creating a Custom UI

=First guide=
A critical part of most Role Playing Games (RPGs) is the ability to use inventory, upgrade your stats, and view general Information about the character, and location that you are in. Today, I will walk you through the basics for creating a simple Menu.
But first, I would like to go over some things with you.
== Vectors ==
Basically, vectors are coordinates. There will always be an 'X' and 'Y' location when dealing with basic on-screen elements and UI. To start programming a vector, you will need to setup a "New Vector Variable".You can do this by simply looking for the tile in the Brain Tile Selector, or searching for it. Remember to name your vector something you will not confuse with other variables, as you will use a lot of vectors, even for basic UI elements. Each 'X' and 'Y' coordinates range from -1 to 1.
=== Programming Vectors ===
When you are programming vectors, you will need to program the 'X' and 'Y' coordinates. You can do this simply by using the following Kode:
 When:[] Do:[VectorVariable][X][=][Number]
 When:[] Do:[VectorVariable][Y][=][Number]
When assigning something to the variable position, all you have to do is put the [VectorVariable] (your variable name), as it retains both the 'X' and 'Y' coordinates. Here's an example:
 when:[] Do:[display][sqaure][onscreetat][VectorVariable]
=== Finding Vector Coordinates ===
An easy way to find Vector coordinates is to put this line of code in the the character brain:
 when:[] Do:[Display][Mouseposition][topleft]
When you hit Test, you will see a set of numbers in the top left of the screen. The first set of numbers is the X coordinates, and the second set is the Y coordinates,
=== Basic Beginnings ===
Today I will show you how to create a simple Pause Menu. I will try to break this down as simply as possible with explanations of the code when it is not self explanatory. I would start this process on a blank page probably on page 2 of the character (or page one if you are using a logic cube).
=== Getting Started ===
On the first page insert the line:
When:[z][pressed] Do:[switch page][2] or whatever page your want to start your menu on.
The second thing you need to do Is set the position you want the menu 
To appear. For this guides purpose I will use the Cords X=-0.025 an
Y=-0.117. Remember to place The coordinates on the same page your are
Assigning something to its position. I named my Variable "Menu". An
Example of this is:
When:[] Do:[Menu][x][=][-0.025]
When:[] Do:[Menu][y][=][-0.117]
When:[] Do:[Display][square][Black][onscreetat][Menu][Width][6][height][6]
Now you may have noticed the [square] tile you can find that by 
opening up the props menu and hitting the Heart button. You can adjust
The color, height, and width to your liking. 
Adding Text:
Usually when you open a menu in a game what do you see? Resume, Map,
Inventory, Player stats?? For this Guides purpose i will use Resume
Player Stats and Inventory.
I named my Vector Variables Accordingly as to not to confuse then.
For the guides purpose I used the following vector coordinates:
When:[] Do:[Resume][x][=][-0.0045]
When:[] Do:[Resume][y][=][0.1004]
When:[] Do:[Inventory][x][=][-0.0045] 
When:[] Do:[Inventory][y][=][-0.056]
When:[] Do:[PlayerStats][x][=][-0.0045]
When:[] Do:[PlayerStats][y][=][-0.2646]
Now Since your variables are ready lets display text at there location
The following is are examples:
When: Do:[Display][Text:Resume][onscreenat][Resume]
When: Do:[Display][Text:Inventory][Onscreenat][Inventory]
When: Do:[Display][Text:PlayerStats][Onscreenat][Playerstat]
You'll notice that if you used the same coordinates as i did The menu
Box looks to be off centered. I did that on purpose. This is to teach
you how to do it. I dont want you to copy everything. It is easly 
Fixed by Changing the cords and/or resizing the square.
Adding a cursor:
Now Since you've got the begging of you menu setup lets make it
Usable. To do this we will need to setup a line cursor. Create
A new Number Variable and Name it something you can remember
For this guides purpose i named it "line" now the next few 
Lines of code are showing you how to set this up:
When:[Pageentered] Do:[Line][=][1]
When:[line][=][1] Do:[display][square][onscreenat][Resume]
You will need to adjust the width and height of the square to
your liking. Now lets set a action. The following line is a 
Child rule to the one above. 
When:[Enter][Pressed] Do:[Switchpage][1]
This line states that when enter is pressed it will go back
To page one. Thus exiting the menu. 
Now lets program the line cursor to move simply by using the 
following kodes:
When:[uparrow][pressed] Do:[Line][Drecremented][1]
When:[downarrow][pressed] Do:[line][incremented][1]
Now lets assign the [line] to the other selections:
When:[Line][=][2] Do:[display][square][onscreen][Inventory]
childrule When:[enter][pressed] Do:[switchpage][3] 
When:[Line][=][3] Do:[display][square][onscreen][plyerstat]
childrule When:[enter][pressed] Do:[switchpage][4]
Again you will have to edit the height and width of the square to
Make it look like it belongs.
=Second guide=
This is a basic guide on how you can create your own User Interface, or UI in short.
For almost all of the UI elements you will have, you will make heavy use of the Display tile. The Display tile lets you display various things on the screen.
==Using Display==
===Displaying objects===
Any basic (non-glued) object can be drawn directly onto the screen by using the display tile. Note that using the Display tile with an object will display the icon of the tile, rather than the object itself, so changing the appearance of the object won't change the look of the drawn icon.
For example:
WHEN: [ ] DO: [display] [Lightbulb] [screen center]
The Kode shown above will show a picture of a light bulb in the center of the screen. You can also use the world picker to select the object you want to display from your world, or use object variables.
Lucky for you, it's easy to make a simple UI due to the extensive list of icons that are made available to you in the icon gallery. For example, after placing a display tile, go into the icon gallery, go to the Icons section, and find the heart icon. Now there is a heart on your screen!
I should note here, that if you attempt to display a certain button, don't use the actual button, trying to get the icon to appear. Use the Icon Gallery, and go into the Icons section. There, you can find the icons for almost every key and button. Trying to display the actual button will result in the game displaying the state of the button, telling you if it is being pressed or not (true/false).
===Displaying text===
You can display text the same way you can display an object, by adding text after the Display tile. Remember that you can also add numbers, vectors and additional text (using the "plus" tile in between the two text lines) to the end of any text you are working with. To add a line between text, use the following Kode:
 (There's a problem with sharing our Kode.. Check back soon!)
To add text inside an icon, use the following Kode:
 (Still have a problem..)
===Displaying at common screen locations===
The display tile allows you to place text or pictures of objects at certain common screen locations in the Screen Location modifier tile. It contains options like top left, bottom left, center etc... This is useful when you don't have many UI elements on the screen. For all these common positions other than the exact center, when you try to draw multiple things in the same location, the game automatically shifts additional UI elements up or down so they don't overlap. To avoid stacking or stack towards a different direction, use the "stacking" modifiers after "display".
===Displaying at exact locations on the screen===
Sometimes, the common screen locations just won't cut it. If that's the case, you'll need to use the "On Screen At.." modifier. With this tile, you can specify exactly where on the screen to place a UI element. To use the "On Screen At" modifier, you will need to provide a vector to describe just where on the screen to display. The X and Y parts of the vector define the X and Y coordinates of the thing you're trying to display on the screen. The Z coordinate will not be used for this.. keep it at 0, just in case though.
The edges of the screen for both the X and Y axes are -1 and 1, with (0, 0) being the center of the screen. The location you specify on screen is where the center of your object or text will be. Although with this method, there is no additional shifting to help make UI elements visible, they appear exactly where you tell them to appear.
=== Adjusting the width and height of your UI elements===
When displaying text, you have several font size options, from small to extra large. With objects however, things get a little more interesting. You have two ways to scale displayed objects: adjusting the scale with the scale modifier, or adjusting the width and height with the width and height modifiers.
Adjusting the scale is the same as adjusting both the width and height by the same amount. This is useful when you want to preserve the aspect ratio, which is common for more complex pictures like characters or weapons. However, if you want more control you can specify different values for the width and height of your object which will cause it to stretch. This can work well for simpler pictures like squares and circles.
===Opacity ===
The opacity modifier defines how see through the object you are showing on the screen is. 0 means it is completely see through, and 1 means it is completely opaque. This can be useful for overlaying one picture on top of another, or for giving a visual indicator of whether or not a particular ability is currently available to use.
===Color===
When showing text and icons on the screen (but not objects) you can specify a color. For text, this does exactly as you expect and colors the text whatever color you specify. Icons are colored already, so specifying a color will override the defaults.
==Some Additional Tips==
===Useful Icons For UI===
* Arrows - Used to draw the user's attention to specific points on the screen. Color white also makes them easy to recolor.
*Button - A circle with a black center that shows contrast well, but it can't be colored effectively. Recommended to be used with text inside it.
*Circle - Similar to the button but white and a much smaller black outline.
*Diamond - A square rotated 45 degrees. White with a black outline.
*Inputs - There are icons for every input available. All controller buttons, keyboard keys and mouse buttons. Useful for showing how to control your game.
*Hands and feet - "Hand" icons are suitable when suggesting an interaction (push, hold, grab), "feet" to suggest you will move to or kick something.
*Square - Having resizable height and width, this will give you any shape rectangle you want with some tweaking. White in color.
*Timers - Icon is a clock, which is good for representing time limits or timers.
===Showing User Focus===
If you can interact with your UI (ie. the user can select pieces of it) it is important that the user always understands what UI element currently has focus. One way to show focus on UI elements is to slightly enlarge the focused element by increasing its scale. The increase needs to be big enough to be visually distinctive. Another way is to use another element like arrows or the square to draw next to or behind the focused object.
===Display Meter===
Another very handy and commonly seen UI tool is the [display meter] tile. This doesn't use the [display] tile, but allows much of the same functionality. Meters are often useful for anything that needs to track a maximum and current value separately. For example health, mana and experience points. There is a meter gallery for choosing a custom design for your meter. Find it by adding a modifier [meter gallery] after [show meter].
left|thumb|330x330px