Project Spark Wiki

Tools for Creating a Custom UI

233pages on
this wiki
Add New Page
Comments3 Share

First guideEdit

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 (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: 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 sell a set of numbers in the top left of the  the screen The first set of numbers is the X cords, The second set is  The Y cords.

Basic Beginnings----

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: 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.  Whem:[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 guideEdit

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.

Using DisplayEdit

Displaying objectsEdit

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 textEdit

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 locationsEdit

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 screenEdit

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 elementsEdit

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.


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.


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 TipsEdit

Useful Icons For UIEdit

  • 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 FocusEdit

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 MeterEdit

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

Displaying On Screen in Project Spark08:04

Displaying On Screen in Project Spark

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.