Tools for Creating a Custom UI

=First guide= A critical part of Role Playing Games or RPGs is the ability to use inventory, upgrade stat's, and view general Information about the character, and location that you are in. Today I will walk you through a basic beginning for a Menu. But first i would like to go over a few things.

Vectors

Vectors:Vectors (in a nut shell) are coordinates. There is always a "X" location and "Y" location when dealing with basic on screen Menus. To start Programming a vector you will need to setup a "New Vector Variable". You can do this by simply searching for the tile in the brain tile Selector. Remember to Name it something you will not confuse with Other Variables, as you will use alot of vectors even for a basic UI. Each X and Y coordinates range from -1 to 1.

Programming Vectors: When your programming vectors you will need to program the "X" and "Y" coordinates. You can simply do this by using the following kodes. 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]. As it retains both X and Y and example of this: when:[] Do:[display][sqaure][onscreetat][VectorVariable]

Finding Vector Coordinates: <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">An easy way to find Vector coordinates is to <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Put this line of code in the the character brain. <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">when:[] Do:[Display][Mouseposition][topleft] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When you hit "Test" You sell a set of numbers in the top left of the <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">the screen The first set of numbers is the X cords, The second set is <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">The Y cords.

Basic Beginnings

<span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Today I will walk you through creating what i like to call "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: <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">On the first page insert the line: <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When:[z][pressed] Do:[switch page][2] or whatever page your want to start your menu on. <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">The second thing you need to do Is set the position you want the menu <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">To appear. For this guides purpose I will use the Cords X=-0.025 an <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Y=-0.117. Remember to place The coordinates on the same page your are <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Assigning something to its position. I named my Variable "Menu". An <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Example of this is: <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When:[] Do:[Menu][x][=][-0.025] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When:[] Do:[Menu][y][=][-0.117] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When:[] Do:[Display][square][Black][onscreetat][Menu][Width][6][height][6] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Now you may have noticed the [square] tile you can find that by <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">opening up the props menu and hitting the Heart button. You can adjust <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">The color, height, and width to your liking. Adding Text: <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Usually when you open a menu in a game what do you see? Resume, Map, <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Inventory, Player stats?? For this Guides purpose i will use Resume <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Player Stats and Inventory. <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">I named my Vector Variables Accordingly as to not to confuse then. <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">For the guides purpose I used the following vector coordinates: <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When:[] Do:[Resume][x][=][-0.0045] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When:[] Do:[Resume][y][=][0.1004] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When:[] Do:[Inventory][x][=][-0.0045] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When:[] Do:[Inventory][y][=][-0.056] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When:[] Do:[PlayerStats][x][=][-0.0045] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When:[] Do:[PlayerStats][y][=][-0.2646] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Now Since your variables are ready lets display text at there location <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">The following is are examples: <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When: Do:[Display][Text:Resume][onscreenat][Resume] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When: Do:[Display][Text:Inventory][Onscreenat][Inventory] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When: Do:[Display][Text:P <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">layerStats][Onscreenat][Playerstat] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">You'll notice that if you used the same coordinates as i did The menu <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Box looks to be off centered. I did that on purpose. This is to teach <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">you how to do it. I dont want you to copy everything. It is easly <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Fixed by Changing the cords and/or resizing the square.

Adding a cursor: <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Now Since you've got the begging of you menu setup lets make it <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Usable. To do this we will need to setup a line cursor. Create <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">A new Number Variable and Name it something you can remember <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">For this guides purpose i named it "line" now the next few <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Lines of code are showing you how to set this up: <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When:[Pageentered] Do:[Line][=][1] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When:[line][=][1] Do:[display][square][onscreenat][Resume] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">You will need to adjust the width and height of the square to <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">your liking. Now lets set a action. The following line is a  <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Child rule to the one above. <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Whem:[Enter][Pressed] Do:[Switchpage][1] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">This line states that when enter is pressed it will go back <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">To page one. Thus exiting the menu. <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Now lets program the line cursor to move simply by using the <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">following kodes: <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When:[uparrow][pressed] Do:[Line][Drecremented][1] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When:[downarrow][pressed] Do:[line][incremented][1] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Now lets assign the [line] to the other selections: <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When:[Line][=][2] Do:[display][square][onscreen][Inventory] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">childrule When:[enter][pressed] Do:[switchpage][3] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">When:[Line][=][3] Do:[display][square][onscreen][plyerstat] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">childrule When:[enter][pressed] Do:[switchpage][4] <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">Again you will have to edit the height and width of the square to <span style="color: #333333; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 15.989999771118164px;">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 pretty much all UI, you are going to be making heavy use of the "display" tile. Display is the tile that allows you to show various things on the screen.

Displaying objects
Any basic (non-glued) object can be drawn directly onto the screen by using the display tile.

Note that It is using the icon of the object, rather than the object itself, so changing the appearance of the object won't change the look of the drawn icon.

For example:

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, or use object variables.

Also very useful for a UI is the extensive list of icons that are made available in the prop gallery. After the display tile, go into the prop gallery and go to the section with the heart symbol.

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, do the following:

To add text inside an icon, do the following:

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. At this point, you need to use the "on screen at" modifier. With this option you can specify exactly where on the screen to place a UI element. To use the "on screen at" modifier, you need to provide a vector to describe where on the screen to display. The x and y parts of the vector define the x and y co-ordinates that will be used, and I believe the z section is ignored, but I leave it at 0 just in case.

The edges of the screen for both 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.It is worth noting that with this method, there is no additional shifting to help make UI elements visible, they appear exactly where you tell them to.

Adjusting the width and height of your UI elements
When displaying text you have several font size options, from small to extra large, but objects are 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.

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