From Spheriki

This tutorial is pretty much a try at helping people create their own menu systems. I hope you, who is reading this, somehow benefits and get something outta this. You should be able to, after fully reading and applying what you learned, create your own full menu system from ground up, starting with nothing and ending with something. Newbs/Beginner users should be able to comprehend what is occurring here, if not please inform. Mainly, this tutorial is directed towards those who want to create their own custom style menus and such. Users of this tutorial are expected to have knowledge on the following before starting:

• Creating Functions
• Creating/Drawing Text
• Creating/Drawing Images
• Use of Flipscreen()
• Use of Variables

Contents 1 Part 1: Creating The Basic Function 1.1 Step 1: Variables 1.2 Step 2: While-Loops 1.3 Step 3: Defining the While-Loop 2 Part 2: Yes/No Menus 2.1 Step 1: Adding More Variables 2.2 Step 2: Adding More Properties 2.3 Step 3: Defining The Keys 3 Part 3: Beginner Menus 3.1 Step 1: Reference List 3.2 Step 2: Editing The Properties 3.3 Step 3: Editing The Keys 4 Part 4: The Naming Menu 4.1 Step 1: New Function and New Variables 4.2 Step 2: New While Loop and Properties 4.3 Step 3: New Keys and Problem Solving 4.4 Step 4: Defining Remaining Keys And Create A Working Menu 5 Part 5: Items Menu 6 Part 6: Save Menu 7 EXAMPLES: 7.1 Beginner's menu: 7.2 Naming Menu

Part 1: Creating The Basic Function

Step 1: Variables

To fill you in on what we're going to be doing here, we're going to be creating a menu-like fuction in which text will be drawn on screen representing the number of our choices. To begin, we must start off by creating somewhat of a basic function as a base for our system's layout. Name it whatever you like but, I strongly recommend that it have "menu" or "ms" in the name simply for reference purposes (calling it or giving it a name entirely unrelated makes coding harder than you think, especially when editing it or reading it). Next, we are going to need 3 local variables ("local" means they're placed inside of the function).

var done = false;
var font =  GetSystemFont();
var choice = 1;

The variable "done = false" is to create a type of question within the code. The question it's asking is "if it is done yet, or not?". You should be able to recognize the variable "font = GetSystemFont" already if you have worked with creating and drawing text on screen before.

What this function does is collect the font used by the sphere engine and turns it into a local variable that will be used later for as a means to draw text.

Next, You'll come across the variable "choice = 1", which is a number variable which will be used in telling us and determining what to choose between our choices over all (think like the curtains thing in which they ask you for what's behind door number 1, door number 2, door number 3... that's the best example of this I can think of).

Step 2: While-Loops

After the three primary variables are established, we're going to need to create two while-loops. One to check keys and the other to keep the menu/function up and running until we say it's done.

while(AreKeysLeft()) GetKey();
while(done == false)

The while-loop "AreKeysLefft() GetKey();" is to check if any keys are being pressed, and if there is one, it returns which key it is (this will be used for when we define the "done==false"). The other while-loop, which is "done==false", is for telling the engine that "while the local variable done is false, or until it is true, we do this". So next, it's only right if we tell it what it has to do by defining it.

Step 3: Defining the While-Loop

When defining the while-loop "done==false", it should look something close to this:

while(done == false)
{
		
	//properties of the menu
	font.drawText(5, 5, choice);
		
	FlipScreen();	
	
		while(AreKeysLeft())
			{
			switch (GetKey())
			{
				//what occurs when each key that is listed, is pressed
				case KEY_DOWN:
				choice++;
				if (choice > 3)	{choice = 3}
				break;
				
				case KEY_UP:
				choice--;
				if (choice < 1)	{choice = 1}
				break;
		}
	}
} 

Notice, the first thing we define within the while-loop "done==false" is the properties. The only priority the while-loop, in this function, needs to consider is just drawing which number of choice we're selecting. So, what we do is call a drawText function, using the local variable "font", and define the x and y as 5 (so we can see it on screen), and define the text simply as the local variable choice (so it blits the number of whatever choice is). Next, we place a FlipScreen(); behind all that so we'll see it on the screen.

Now, we call the while-loop "AreKeysLeft()" to define it. First, while defining it, we must place a "switch (GetKey())" so it'll know what to do next when we start defining the keys to operate the menu.

Now, when defining "switch (GetKey())", we're now defining which keys operate the menu and telling the engine what they do when they're pressed.

So first, we define "case KEY_DOWN:", then below it place "choice++;" (which will add 1 to choice everytime you press the down key), and then we'll place and if-then, that says: "choice is greater than 3 then choice equals 3", below "choice++;" so there'll be some limit to what we are selecting (otherwise the number will keep on increasing).

Next, we place a "break;" below that, which tells us "that's all that Key_down does, it's over". So after that, we define Key_Up pretty much the same way, then close up the function, and you've just finished you're first basic menu system.

Part 2: Yes/No Menus

In this next part of the tutorial, we're going to continue adding to the original menu we've just made. Now, we're going to give it a real menu-style look and add in things most menus would have. This part is mainly about creating a "yes/no" menu, which is the easiest menu I can think of.

Step 1: Adding More Variables

First thing we're needing to do to make this menu system more menu-like is adding three basic local variables to the other list of local variables we already have (the locals created in the first step of the menu system in part 1).

var win = GetSystemWindowStyle();
var point = GetSystemArrow();
var BG = GrabImage(0, 0, GetScreenWidth(), GetScreenHeight());

The first variable "win=GetSystemWindowStyle();" is needed to create windows, which you should recognize if you have created textbox functions before.

The next variable "point=GetSystemArrow();" is for selection purposes. It'll show us which option we're selecting in our menu.

The variable "BG=GrabImage();" is for the background. It'll be used to blit whatever GrabImage(); captures. Basically we're going to use it to capture the whole screen and draw our menu on top of it.

Step 2: Adding More Properties

If you remember correctly, properties are the first thing we define within the while-loop "done==false". What we're going to do now is change those up. Use to, the only thing that was in the properties was some text which is defined by choice. Well, since we don't need that in a yes/no menu, we can get rid of that. Instead we do need two words, and they are: "yes" and "no", and to finish our yes/no menu's properties up, this is what we gotta add:

BG.blit(0,0);
win.drawWindow(10,10,20,15);
point.blit(0, choice*10);
		
font.drawText(15, 0, "yes");
font.drawText(15, 10, "no");
			
FlipScreen();

The first thing here is "BG.blit();", which is for drawing the background. Notice in step 1 (of part 2), we defined "BG" as the GrabImage function, which collects whatever is already on the screen and uses that. So, in other words, whatever is already on screen, is going to be the background for when the menu pops up. The reason we placed it first in the properties is cause otherwise it'll be a faulty in the script, since JS is read from top to bottom (why? IDK, that's just the way it works).

Next we have the drawWindow function, which uses the system's window style. The numbers in the parenthesis define the X-axis, Y-axis, Width, and Height, all in that order. We want it above the code that blits the pointer and drawText because we want the window to appear behind everything (except the background, which is the reason we have it below that).

After that comes the pointer. The reason for "choice*10" is because we want the pointer to move depending upon which choice we're currently on (ex: if choice number 0 is yes, then the pointer should move to 0 on the Y-axis, because 0 X 10 = 0, which will put us right next to the "yes" option).

Then, we have text "yes" and "no" defined, and lastly, put a "FlipScreen();" in there to draw everything on screen.

Step 3: Defining The Keys

Now, all that's left to do for this menu is the keys. When creating this part, get rid of the if-thens and "choice++;" stuff, and then continue to edit. Really in truth, all you need to establish for the keys is which one is "yes" and which is "no". When doing this, you should come out to something like this:

case KEY_UP:
choice = 0;
break;
				 
case KEY_DOWN:
choice = 1;
break;
					
case KEY_ENTER:
if (choice = 0) return true;
else return false;
break;

In defining the first key, which is the up-key, I've established that it's going be known as "yes", because I just so happen to want the "yes" option above my "no" option in my menu, and since the number 0 comes before 1, that means choice is going to equal zero. Can you guess what I'm going to establish Key_DOWN as?

Next, just so I can prove the menu works, I've included a new key, which is the enter key, and with this, I am going to establish what will happen by selecting "yes" or "no". Since the "yes" option is known to be "choice==0" I'm going to create an if-then that says: "if choice equals zero when I press enter, then 'this' will happen". Since this is a yes/no menu, all I it has to do is either return as true or false. Since the "yes" option is "choice==0", then I'll establish the "then" part of the if-then as just "return true". Next, I'll place an "else" below that, along with the opposite to say that if anything else happens, then just return as "false" (since there's only two options in a yes/no question, the only other possible answer is "no", therefore that's why we tell the "else" to return as "false").

Now finally, close up the function and you've just finished your first real menu.

Part 3: Beginner Menus

Within this part is an attempt to teach you how to create menus like you see in Pokemon and Final Fantasy. With this, you'll be able to figure out how to code your own start menu and etc.

Step 1: Reference List

Here's the step where you actually have to think about what you're wanting to include beforehand. Usually, Start Menus contain simply the options: "New Game", "Load Game", and "Options". In-game Menus, on the other hand, contain various things (ex: Pokemon's in-game menu, which includes: Pokedex, Stats, Pokemon, Save, and etc.). After you've figured out what you're going to put into your menu, it's time to start on it. For this menu, I'm only giving four options, which will be: "Name", "Stats", "Items", and "Save" (which will all be separate menus on there on that'll teach you how to create in coming parts).

Step 2: Editing The Properties

In this step, all we're going to do is go back to the properties, add in our new options and change the pointer's way of moving along the Y-axis and the window's sizing. This is an example for what should come out of this:

BG.blit(0,0);
win.drawWindow(250,10,60,70);
if (choice == 1) point.blit(250, 5*choice);
if (choice == 2) point.blit(250, 5*choice+5);	
if (choice == 3) point.blit(250, 5*choice+10);
if (choice == 4) point.blit(250, 5*choice+15);		
font.drawText(265, 5, "Name");
font.drawText(265, 15, "Stats");
font.drawText(265, 25, "Items");
font.drawText(265, 35, "Save");
					
FlipScreen();	

If you noticed, we never changed anything about the background. Next, we've changed up the window's location on the X and Y-axis, and also correctly figured the width and height of the window so that it'll cover the space behind our multiple options.

After that, we've managed to work out how the pointer moves on the Y-axis. Notice that it's without rhythm so we had to create multiple if-thens to correctly place the pointer beside the options.

Then, we placed our options below one another in the most seemingly "fit" looking way.

Step 3: Editing The Keys

On this next step, you are going to want to change up the key's definition. Really, it's all going to look similar to the keys in the first function we created in part 1. Here's what it should come out looking like:

case KEY_UP:
choice++;
if (choice >= 4) choice = 4
break;
									 
case KEY_DOWN:
choice--;
if (choice <= 1) choice = 1
break;
										
case KEY_ENTER:
if (choice == 1) NameMenu();
if (choice == 2) StatsMenu();
if (choice == 3) ItemsMenu();
if (choice == 4) SaveMenu();
break;

Alright, notice that "choice++;" is back, but also, we've now needed to put a limit on the number of choices. We only have four choices to choose from, therefore our limit should be established as four in an if-then. The KEY_DOWN's definition is basically the same thing backwards (we don't want any numbers less than one, and if you don't know why you just hopeless).

Next, we come to the KEY_ENTER's defintion. Here's where we tell the engine what's going to happen with each choice/option we pick. Since the first choice is the "Name" option, we call out the NameMenu function (we've yet to create it, that comes in the next part, and so does the other options if you didn't catch my drift about the ordeal). After all that, establish the rest of the if-thens correctly with the options and close up the function.

You should now have the beginning of a fully-functional menu system. By now, you should have something that looks similar to this:

Example

Part 4: The Naming Menu

In this part, I'll attempt to teach you how to create a naming menu, a menu in which you'll create your own name by selecting individual letters (ex: pokemon, which has you name the main character in the beginning of the game, that menu is something what we'll be trying to accomplish here). This type of menu is a step up in difficulty due to the need of using strings and problem solving, so be prepared. NOTICE: no promises it works correctly, but it works none-the-less...

Step 1: New Function and New Variables

For this menu, we need a new function since we're branching off of the menu that we created in Part 3 (remember to name this function the same name you're using to call it from the menu in part 3). After you've created the function, time to add some local variables.

First variable we need for this kind of function is called a string. This string we're creating is the entire alphabet in CAPS (including other symbols you would prefer to include as you see fit).

REMINDER: when spacing inside of the string, it also affects the spacing inbetween the characters of the menu when drawn on screen (ex: if you space two times between "A" and "B" inside the variable string, then when drawn on screen you'll have the size of two spaces between the letter "A" and "B" on screen).

It should look something like this:

var letters = "A B C D E F G H I "+
              "J K L M N O P Q R "+
              "S T U V W X Y Z "+
              "* ( ) : ; -";

The next set of variables you are going to need for this function are:

var charAt = 0;
var name = ['-','-', '-', '-', '-', '-', '-', '-', '-', '-'];
var length = 0;
	
var BG = GrabImage(0, 0, GetScreenWidth(), GetScreenHeight());
var font =  GetSystemFont();
var win = GetSystemWindowStyle();
var point = GetSystemArrow();
	
var x = 1;
var y = 1;

The variable "charAt=0;" is going to be used to figure out which letter we're on, when moving around on the menu selecting letters. It'll be used to return the letter and help create our new name, which brings us to the next variable.

The variable "name" is a variable that will later be defined when we're done selecting the letters for our new name. This variable will be what holds our new name.

The variable "length=0;" is the limit to how many letters we can select for our name (of course it could be any number, I just figured 10 would seem reasonable). As for the next four variables, you should already know what they're for, so we'll skip to the last two.

Variables "x" and "y" are mainly there for placing the pointer correctly beside each letter to identify which letter we're selecting. It's very important to put it equal to one, because you'll be using it in an equation and one is the easiest number to work with (of course this statement varies with different equations).

Step 2: New While Loop and Properties

Now, after we've established the variables, all we need to do to continue from here is establish one while-loop. That's one less than in the past when we used two while-loops. The only while-loop you need to establish here is this one:

while(true)

I know what you're thinking, why didn't we use the variable "done==false" and what happened to the while-loop we needed to establish to get the keys, right? Ya, well it turns out, you don't truly need the variable "done==false" in this case cause this while-loop will stay open as long as it remains "true" (now that's way simpler than the other one). We still are going to need to establish the while-loop to get the keys inside of this while-loop "while(true)", but we can refrain from doubling up. We are going to establish the get-keys while-loop after the properties. Truly, the only time we need to establish the while-loop that gets our keys is inside of the while-loop we're establishing now.

Now, what we need to do is create our new properties for this while-loop. It should come out looking something like this:

BG.blit(0,0); 
win.drawWindow(10,10,220,70);
win.drawWindow(10,105,220,20);

font.drawText(15,15, letters.slice(0,28));
font.drawText(15,30, letters.slice(28,56));
font.drawText(15,45, letters.slice(56,84));
font.drawText(15,60, letters.slice(84,98));
font.drawText(15,110,"NAME:");
font.drawText(50,110,name);
point.blit(x*1,y*14);

FlipScreen();

You already know what "BG.blit();" is for and what the drawWindow function is doing, so next comes the new type of drawText function that draws our string on screen.

So we lined up all our text to 15 on the x-axis, and separate them 15 pixels apart from each other on the y-axis. Next comes the slice function inside our text drawing function. bytearray.slice(start [, end]) is what we are using here. What this does is project all the characters in the string "letters" on the screen (that includes the spaces, remember my reminder on how spacing in the string affects it when it's drawn onscreen, ya well that's why).

So we start with the first character/letter in the string, which will be zero and end the string on the 28th character (cause we're trying to create the illusion that 9 letters are shown line). Now for the next line, since the last line was 0-28, we start on the number 28 and add 28, and we get 56, so we'll end this line on the 56th character. On the next line, we end the last line on 56, so we start this line on 56 and add 28 to it, and we get 84, so we'll end this line on the 84th character. Try and figure out how the next line goes.

After you've completed lining up the letters correctly in correlation to each other, if you remember we created two textboxes (one for our letters to select and a separate one for something else), well you're new name (the end result of this naming menu) should be shown in the other textbox, so put the we put the text "NAME:" in the extra textbox and our variable for our name right beside that text.

Last of the properties comes the pointer. We want the pointer to show beside the first letter in our naming menu (which is "A") so we put it at 1 on the x-axis and 14 on the y-axis (this is the reason we put x and y variables equal to 1, so the pointer will show up exactly where we want it placed). Then finally, we put a "FlipScreen();" under all that so it can all be drawn on screen.

Step 3: New Keys and Problem Solving

Okay, here comes the step where you bring back your old while-loop to get keys, and you should have it looking like this:

while(AreKeysLeft())
{
 switch (GetKey())
 {
			
   case KEY_RIGHT:
   break;
				
   case KEY_LEFT:
   break;
				 
   case KEY_UP:
   break;
				
   case KEY_DOWN:
   break;
				
   case KEY_ENTER:
   break;

   case KEY_CTRL:
   break;
 }
}

Notice that we now have three more keys in this menu. These two new keys will be needed to move vertically through the menu since our letters are on multiple lines and the other one will be for returning the name we made.

Now here's where the problem solving comes in. You are going to need the pointer to move beside each letter in the menu. First, start small, let's think about how to make the pointer move horizontal across the menu using KEY_RIGHT. We've got our equation on how the pointer moves, remember? It was "x*1" and "y*14".

I know what you're thinking: "HOW THE ---- AM I GOING TO BE ABLE TO CODE THIS?!", but don't fright because I've already done the calculations for you.

First, like I already said, start off small. We know if we're using KEY_RIGHT we are only moving in a horizontal direction across the x-axis, so that means we just need to focus on the "x*1" equation right now. So focus like this:

case KEY_RIGHT:
x+=1; //focus area
break;

Notice that I even have a comment next to the area you should be focusing on. The thing that will be changing here in our focus area is the number "1". Notice also when you test the pointer out, it doesn't move correctly on screen, so we're going have to fix this through trial and error.

What I did was take the best guess at what looked right (this may not be effective for others, but it works for me), and here's how I did it:

1. I started off with small whole numbers in a 1-5 range (go with a bigger range till you start seeing numbers that sorta work)
2. I tested until which whole number seemed to fit best
3. I then took the whole number I saw as a best fit and started working on it as a decimal
4. Start off in the tenth's place
5. To get it to almost fit perfectly, add a hundredth's place in the decimal

After you have your pointer seeming to fit perfectly in your menu, it's time to put a limit on how far it can move to the right (otherwise if you keep pressing right, the pointer will move off screen). So test out your pointer again and count how many times you can move right before the pointer moves past the line of letters (or becomes out of sync with the menu). After you've counted and got the number, multiply that times the number you just got for the pointer to move perfectly beside the letters in the menu, and the number you get from there is your limit.

Now, time to make and if-then out these numbers. You need an if then that will say: "if x is smaller than limit, then add the number, you got for the pointer to move perfectly beside the letters, with the x variable". After you've done that, time to move onto KEY_LEFT.

Luckily, like I originally said, I have all the calculations for you, so if you've been following along and created the menu correctly, the pointer should move correctly beside every letter. Here's what it should look like:

case KEY_RIGHT:
if (x<=184.24) x+=14.48;
break;
				
case KEY_LEFT:
if (x>=2) x-=14.48;
break;
				
case KEY_UP:
if (y>=2) y--;
break;
				
case KEY_DOWN:
if (y<=2) y++;
break;

Now, you can say: "Phew!", but actually we're only halfway there. Now we need to use the "charAt=0" variable so we can then define the KEY_ENTER correctly.

Step 4: Defining Remaining Keys And Create A Working Menu

Now, what's next to do is defining the KEY_ENTER and KEY_CTRL. To do this, you're going to have to use the "charAt" variable. Remember that "charAt" is the number of characters in the string (that's what we're using it for if you didn't know).

So now, check out the string variable with all our letters. Notice how every two characters is a letter (include spaces in your counting)? Well, guess what? We're going use that number.

Remember the number two, because we're going to use it when moving to the right. How we do that is just add 2 to charAt to the "then" in the if-then that's already there. We do the opposite to the KEY_LEFT (means use minus instead plus).

Now, what we do with KEY_UP and KEY_DOWN I bet you're asking. Well, for those you're going to have to run your menu and count how many letters are on the first line.

You should have 14 on the first and second line, if you don't you made a mistake somewhere or are doing your own menu entirely. Now, if every letter is the 2nd character in the string, that means we have to multiply. Can you guess what we got to multiply together?

Quick answer: It's 2 x 14. The answer you should get from that is 28, so that means there are 28 characters on each line, which means if you press Up or Down, you should be 28 characters from the letter you just came from. By now you should've realized that whenever you press KEY_UP, you subject 28 from the "charAt" variable and you should do the opposite with KEY_DOWN.

By now, your keys should look something like this:

case KEY_RIGHT:
if (x<=184.24) x+=14.48; charAt+=2;
break;
				
case KEY_LEFT:
if (x>=2) x-=14.48; charAt-=2;
break;
				
case KEY_UP:
if (y>=2) y--; charAt-=28;
break;
				
case KEY_DOWN:
if (y<=2) y++; charAt+=28;
break;

Next, we will and can start our work on KEY_ENTER and KEY_CTRL. If I haven't said already, we are going to be using KEY_ENTER as a way to select each individual letter and KEY_CTRL to return our new name (result). So, taking one step at a time, we're going to start on KEY_ENTER first.

If I haven't established yet, we want our character limit to be 9 (I find that reasonable for me, if it's not reasonable for you, it doesn't have to be nine, it can be any number), so we want to create a if-then when defining KEY_ENTER that says: "if length is less than or equal to nine, then do 'this'".

The 'this' we are going to want to establish as "name[length] = letters.charAt(charAt);" so that each dash gets replaced with whatever letter we select. Don't forget to put a "length++;" after that so it won't go over our limit of nine letters, and now you've just finished defining KEY_ENTER.

Next and last to do is KEY_CTRL. All we have to define it as is "return name.join().substr(0, length);" so that it'll return the name we've created, and now close up the function, and you're finished with you're naming menu.

You should have something similar to this result when you finish the keys:

case KEY_ENTER:
if (length <= 9)
{
 name[length] = letters.charAt(charAt);
 length++;
}
break;

case KEY_CTRL:
return name.join().substr(0, length);
break;

You should have something similar to this after you have finished the function:

Example

Part 5: Items Menu

Part 6: Save Menu

EXAMPLES:

Beginner's menu:

function Menu() 
{
 var done = false;
 var choice = 1; 
	
 var font =  GetSystemFont();
 var win = GetSystemWindowStyle();
 var point = GetSystemArrow();
 var BG = GrabImage(0, 0, GetScreenWidth(), GetScreenHeight());	//grabs whatever is already drawn, for a background
	
 while(AreKeysLeft()) GetKey(); //gets our keys
 while(done == false)  		//asks question: "are you done?" and answers: "false" 
 {
			
   //properties of the menu
   BG.blit(0,0); 		//background
   win.drawWindow(250,10,60,70);  //window sizing
   if (choice == 1) point.blit(250, 5*choice);  //pointer placement
   if (choice == 2) point.blit(250, 5*choice+5);	
   if (choice == 3) point.blit(250, 5*choice+10);
   if (choice == 4) point.blit(250, 5*choice+15);		
   font.drawText(265, 5, "Name");   		//our options
   font.drawText(265, 15, "Stats");
   font.drawText(265, 25, "Items");
   font.drawText(265, 35, "Save");
									
   FlipScreen();	 			//draws everything on screen
				
    while(AreKeysLeft())
    {
     switch (GetKey())
     {
      //what occurs when each key that is listed, is pressed
      case KEY_UP:
      choice++;
      if (choice >= 4) choice = 4; //limit on how much we can increase our choices
      break;
														 
      case KEY_DOWN:
      choice--;
      if (choice <= 1) choice = 1; //limit on how much we can decrease our choices
      break;
															
      case KEY_ENTER:
      if (choice == 1) NameMenu();  //calls other functions
      if (choice == 2) StatsMenu();
      if (choice == 3) ItemsMenu();
      if (choice == 4) SaveMenu();
      break;
      }
     }
   } 
}

Naming Menu

function NameMenu()
{
 var letters = "A B C D E F G H I "+
               "J K L M N O P Q R "+
               "S T U V W X Y Z "+
               "* ( ) : ; -";

 var charAt = 0;
 var name = ['-','-', '-', '-', '-', '-', '-', '-', '-', '-'];
 var length = 0;

 var BG = GrabImage(0, 0, GetScreenWidth(), GetScreenHeight());
 var font =  GetSystemFont();
 var win = GetSystemWindowStyle();
 var point = GetSystemArrow();

 var x = 1;
 var y = 1;

 while(true)
 {
  BG.blit(0,0); 
  win.drawWindow(10,10,220,70);
  win.drawWindow(10,105,220,20);
  font.drawText(15,15, letters.slice(0,28));
  font.drawText(15,30, letters.slice(28,56));
  font.drawText(15,45, letters.slice(56,84));
  font.drawText(15,60, letters.slice(84,98));
  font.drawText(15,110,"NAME:");
  font.drawText(50,110,name);
  point.blit(x*1,y*14);
  FlipScreen();

  while(AreKeysLeft())
  {
   switch (GetKey())
   {

     case KEY_RIGHT:
     if (x<=184.24) x+=14.48; charAt+=2;
     break;

     case KEY_LEFT:
     if (x>=2) x-=14.48; charAt-=2;
     break;

     case KEY_UP:
     if (y>=2) y--; charAt-=28;
     break;

     case KEY_DOWN:
     if (y<=2) y++; charAt+=28;
     break;

     case KEY_ENTER:
     if (length <= 9)
     {
      name[length] = letters.charAt(charAt);
      length++;
     }
     break;

     case KEY_CTRL:
     return name.join().substr(0, length);
     break;
    }
   }
  }
}