|
Sony PSP Lua Snippets - Player Name Entry
In this snippet tutorial we are going to learn how to make a player name entry screen. We will store the name in a variable as the player types it in. The player will be able to delete characters, and select uppercase and lowercase letters as well.
To start off we will create two colors used for text, and our selector object.
white = Color.new(255,255,255)
red = Color.new(255,0,0)
Now, in order to display and be able to type letters on the screen we need a way to refer to the alphabet. So, we are going to create an array that will store the entire alphabet. At the end of the array we will also store a blank space, in which the player can use to make a space in their name.
Here's the array.
characters = { "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", " " }
Now, we can refer to each letter of the alphabet by the array element that it is held inside.
For example, to reference the letter "a" we would use characters[1]. "b" would be characters[2] .. and so on.
Below we will create a new empty image which is 10 x 10 pixels in size. Then we clear the image to the color red.
This small red image will be used as our selector. It will move around the letters so that the player knows which letter they are selecting.
Here's the code below
selector = Image.createEmpty(10,10)
selector:clear(red)
Next, we are going to make two variables which will store x and y values. We will use these variables in some for loops. The for loops will change the values each loop, so that the letters get printed correctly on the screen.
charX = 100
charY= 100
Now, we will create two more variables. These will be used for the x and y positioning of our selector image.
currentX = 107
currentY = 98
Let's follow this with another variable. This will store a number which will indicate which letter of the alphabet we are currently on.
So, if we're on the letter "c", then currentLetter will be set to 3. When we implement direction controls to move through our letters we will add and subtract to this number to give us the correct letter that we are on.
currentLetter = 1
After that, we shall create two more variables. uppercase will be set to true or false, and will tell us whether we should use lowercase letters or uppercase letters.
name will be the variable in which we store the player's name as they type it.
We will start it as a blank string since it is empty.
We will go ahead and throw in the oldpad method now, to keep button pushes from repeating continuously. Look below
uppercase = true
name = ""
oldpad = Controls.read()
Time for more variables. These next 3 variables will be used to add to the x and y positions of the letters. This will be used for the printing of the letters. You will see these in action shortly.
addX = 0
addY = -10
addRow = -9
Now, we are going to create a new function. This function has one simple goal, which is to print all the letters of the alphabet to the screen each time our program loops. Let's look at the function below, then I will explain.
function drawLetters()
for a = 1, 3 do
addX = 0
addY = addY + 10
addRow = addRow + 9
for b = 1, 9 do
addX = addX + 10
if uppercase == false then
screen:print(charX + addX,charY + addY, characters[b + addRow],white)
else
screen:print(charX + addX,charY + addY,string.upper(characters[b + addRow]),white)
end
end
end
addX = 0
addY = -10
addRow = -9
end
First off, this is a loop within a loop. The first loop sets "a" from 1 to 3. The reason is because we will print 3 rows of letters to the screen.
We have 26 alphabet letters and one space also, meaning we have a total of 27 characters to draw. We will draw 3 rows with 9 characters each.
The code inside the for a = 1,3 loop gets executed each time a new row is ready to be printed.
addX gets set to zero.
addY gets 10 added to it. This will make the y value of the letters go down on the screen by 10 pixels, making it print to a new row.
addRow gets 9 added to it. addRow will get set to zero through the first loop since it's initial value from the start is -9. This value will later be added to get the correct letter to print.
The for b = 1,9 loop is where the letters get printed. We used 1,9 since we are printing 9 letters each row.
addX gets 10 added to it after each letter is printed. This will cause each letter to be printed 10 pixels more to the right than the last.
We then have a check to see if uppercase is set to false. If so, then we print the letters normally, which are lowercase.
Else, if uppercase is true then we print the letters as uppercase by converting them with the string.upper command.
Let's look inside the print statements. The first argument says charX + addX. This adds addX to charX to get the x position of the letter we are printing.
The next argument does the exact same thing, except it uses addY to add to charY.
characters[b + addRow] is the letter we are printing. b will equal a value between 1 and 9 and addRow will equal zero on the first run through of the "a" loop, 9 on the second time, and 18 on the third.
This causes all characters 1 through 27 to get printed.
At the end we set our 3 variables used for adding back to their original values, so they can redo the whole process over again.
If you're lost don't worry, that was pretty confusing! The rest of the tutorial isn't so bad.
Now, let's move on to our main loop, and get some of our looping code in there. Here's the next part:
while true do
pad = Controls.read()
screen:clear()
screen:print(10,10,"Enter Name: "..name,white)
screen:blit(currentX,currentY, selector)
drawLetters()
This code enters the main loop. We then set pad to the current button being pushed.
Next, we clear the screen.
Then, we use screen:print to print "Enter Name: " to the screen. Beside this, whatever is stored in name will be printed as well.
Then, we blit our selector image to the screen using it's 2 coordinate variables we made earlier.
Finally, we call the drawLetters() function we created, which will get our letters printed on the screen for us.
Our next section of code will take the user input. If the player hits "X" the letter they are on will get stored in the variable name. We will also check for proper case.
Take a look:
if pad:cross() and oldpad:cross() ~= pad:cross() then
if uppercase == false then
name = name .. characters[currentLetter]
else
name = name .. string.upper(characters[currentLetter])
end
end
Our if statement checks to see if "X" is pressed, and makes sure the button has been released since the last press of "X".
Next, we check to see if uppercase is set to false, if so we take the variable name and add the current letter we're on to the end of it by using concatenation ( .. )
If uppercase is set to true then we do the same thing, except we convert the letter to uppercase.
Now, let's make some code to delete a letter in case the player makes a mistake. Take a look:
if pad:square() and oldpad:square() ~= pad:square() then
name = string.sub(name, 1, string.len(name) - 1)
end
The first line checks if square is pressed and makes sure it has been released since it's last press.
The next line may have two commands you haven't used before.
The line takes the variable name and reassigns the string stored in it, except that it makes it one letter shorter than what it was.
string.sub() is used to return a portion of a string. In the above code we have 3 arguments in string.sub().
The first is name. This tells the command which string we will be using. name has our player's name stored in it, so it's value holds the string we need.
The second argument is 1. This tells the command to start getting the characters of the string from the 1st letter of the string.
The third argument is string.len(name) - 1. This tells the command to stop getting the characters of the string at this point in the string.
string.len() simply returns how many characters are in the specified string, including spaces. After we get the length of our string, we subtract 1 from it.
This means it will stop getting the characters at one character before the end of our string, which makes our name one letter shorter.
A more visual example to understand this could be something like: newString = string.sub("lua player",1,3)
This would take the string "lua player" and return characters 1 through 3, and store the result in the newString variable.
So what would the new string be? If you guessed "lua" then you're right.
Moving along, let's now add some code to allow the player to change between uppercase and lowercase.
if pad:triangle() and oldpad:triangle() ~= pad:triangle() then
if uppercase == false then
uppercase = true
else
uppercase = false
end
end
Simple enough. If you press triangle then if uppercase is currently true then set it to false. If it's false set it to true, which allows the player to alternate between the two cases.
Now we must start our code to move the selector when the player presses the directional buttons. Let's do the right button first.
if pad:right() and currentLetter ~= 9 and currentLetter ~= 18 and currentLetter ~= 27 and oldpad:right() ~= pad:right() then
currentLetter = currentLetter + 1
currentX = currentX + 10
elseif pad:right() and oldpad:right() ~= pad:right() then
if currentLetter == 9 or currentLetter == 18 or currentLetter == 27 then
currentLetter = currentLetter - 8
currentX = 107
end
end
First we check if the right button is pressed. We also check to make sure currentLetter is not equal to 9, 18, or 27.
Those three numbers when referred to in our characters array ( characters[9] characters[18] and characters[27] ) are the very last letters to the right, in each of the three rows of letters.
We don't want the selector to go past these letters so we do the check to stop it.
If the if statement executes then currentLetter gets 1 added to it. This makes the value equal the next letter to the right.
It also adds 10 to currentX, which will make our selector move right by 10 pixels.
If the first if statement doesnt execute then we check if right is pressed, and then below it we also check to see if currentLetter is equal to 9,18 or 27.
If it is equal to one of the three numbers currentLetter gets subtracted by 8. This causes the selector to go back by 8 letters, placing it on the first letter of the row the selector is on.
currentX gets set to 107 which is the position of the very left-most letter for our selector.
The rest of the directions are the same process, except the values change a little differently to suit each direction. I won't detail these since you should be able to tell where it's going by comparing with the above explanation.
This is also all we need for the code, so we flip the buffer to onscreen, set oldpad, and end our loop
Here are the rest of the direction checks, as well as the end of our code.
-- MOVE SELECTOR LEFT
if pad:left() and currentLetter ~= 1 and currentLetter ~= 10 and currentLetter ~= 19 and oldpad:left() ~= pad:left() then
currentLetter = currentLetter - 1
currentX = currentX - 10
elseif pad:left() and oldpad:left() ~= pad:left() then
if currentLetter == 1 or currentLetter == 10 or currentLetter == 19 then
currentX = 107 + 80
currentLetter = currentLetter + 8
end
end
-- MOVE SELECTOR DOWN
if pad:down() and currentLetter < 19 and oldpad:down() ~= pad:down() then
currentLetter = currentLetter + 9
currentY = currentY + 10
elseif pad:down() and currentLetter > 18 and oldpad:down() ~= pad:down() then
currentY = 98
currentLetter = currentLetter - 18
end
-- MOVE SELECTOR UP
if pad:up() and currentLetter > 9 and oldpad:up() ~= pad:up() then
currentLetter = currentLetter - 9
currentY = currentY - 10
elseif pad:up() and currentLetter < 18 and oldpad:up() ~= pad:up() then
currentY = 118
currentLetter = currentLetter + 18
end
screen.flip()
screen.waitVblankStart()
oldpad = pad
end
Back To Snippet List
|
