Moving Your Player - on ArrowKey message (The code is here and below)Here we are going to learn how to move objects on the screen. We are going to create a red box and learn how to move it around the screen using the arrow keys on the keyboard. We are also going to learn how to keep it from going off the card/screen
LiveCode is message oriented. Anything that you do sends out a message. When you press a key on the keyboard, a message is sent out telling which key you pressed. Even clicking a mouse sends out a message. You have mouseDown and mouseUp messages. There are many other messages but we will only work with a few of them.
When you press any of the arrow keys, a message is sent out. We will write a message handler to take those messages and move our red box.
We are going to take this step by step and show you the logic that you need to use when learning to program computers and games.
So make sure that you do each step yourself so that you learn how to do it and see the logic. This will also give you practice working with LiveCode
Screenshots of the Following Steps
click here - MovingBox - to see the screenshots showing the following steps:
Creating Our Red Box
Open up LiveCode, start with a new "MainStack" and drag a button from the "Tools" Palette to the blank card.
- Start with a new mainStack: on the Edit Bar - click on "File", then "New Mainstack"
- Add a button: click and drag a button from the "Tools Palette", make it square shaped
- Name it: right-click on the button, select "Property Inspector". In the name field, change the word "button" to "box"
- Color it red (This is just for effect - you really do not need to do this step)
Adding Code to Move It
Here we are going to use the arrow keys to move our box. We need to write a handler for the message 'arrowkey' which is sent out whenever one of them is pressed. Along with the message, is the specific key that was pressed. We save that key in a variable called "x" and check to see which one it is.
We then move the box by adding or subtracting 10 from it's location. (There is nothing special about the number "10", you can use any number that you want. The higher number, the faster it will move. Experiment)
If the top of the screen is 0 and the bottom is 400 (or whatever size your screen is), we subtract to move up and add to move down.
This script (or code) will be placed on the card (script).
- On the Edit Bar, click "Object", "Card Inspector" and name the card "mycard", then close it
- On the Edit Bar, click "Object", "Card Script" to open the code window.
- Insert the following code on the script for the card "mycard" (we use "btn" as the short for "button"):
on arrowkey x
if x is "up" then
set the top of btn "box" to the top of btn "box" - 10
end if
if x is "down" then
set the bottom of btn "box" to the bottom of btn "box" + 10
end if
end arrowkey
- Alternatively, you can use the following code with the move command which moves it to a new location (x,y which has 2 numbers - the x-coordinate and the y-coordinate. Since we want it to move straight up or down, we keep the x coordinate the same (+0) and only change the y-coordinate (+ or -10). This changes the relative position without knowing the exact coordinates)
note: I have found the "move" command with "relative" to be slow. You can use it other places but not here.
on arrowkey x
if x is "up" then
move the button "box" relative 0,-10
end if
if x is "down" then
move the button "box" relative 0,+10
end if
end arrowkey- Click Apply, then the "Run" tool on the Tool Palette and try it out.
You should see the box move up and down. If you press the key too long or too many times, the box will disappear off the card. We need to add code to prevent this.
Keeping it on the Card (Screen)
After we move the box, we need to check if it went off the card. If it did, then we need to move it back on the card. (You should be able to figure out how we do it by analyzing the code carefully) If you look at he properties for the card, ("Card Inspector", "Size and Position") you will see that it is 400x400. So to keep it from going off the screen, we can do this:
- Change the code so that it looks like this:
on arrowkey x
if x is "up" then
set the top of btn "box" to the top of btn "box" - 10
if top of btn "box" < 0 then
set the top of btn "box" to 0
end if
end if
if x is "down" then
set the bottom of btn "box" to the bottom of btn "box" + 10
if the bottom of btn "box" > 400 then
set the bottom of btn "box" to 400
end if
end if
end arrowkey
- Now it should stay on the screen. The problem now is what happens if the user changes the size of the window and makes it bigger or smaller? (Try it an see what happens to your box)
This is also a problem if you put your program on a different devices. There are many different sized monitors and cell phones have different screen sizes. The solution is to tie the code to the size of the card and not use set numbers
- change the code so that it looks like this: (Don't forget to name your card "mycard" first)
on arrowkey x
if x is "up" then
set the top of btn "box" to the top of btn "box" - 10
if top of btn "box" < 0 then
set the top of btn "box" to the top of the card "mycard"
end if
end if
if x is "down" then
set the bottom of btn "box" to the bottom of btn "box" + 10
if the bottom of btn "box" > the bottom of the card "mycard" then
set the bottom of btn "box" to the bottom of the card "mycard"
end if
end if
end arrowkey- Now try it yourself - it should work
- We check for the top of the screen which is zero (0) but we do not always know the bottom of the screen. It will be different sizes for different devices and the user can always resize a window. So instead of checking for a number at the bottom, we just check for the bottom of the screen (card)
- That takes care of "Up" and "Down", we need to do the same for "Right" and "Left".
Moving Right and Left
Assignment: This is for you to do. See if you can figure out and add the code for it...
After you are done - check your code: LCCodeRightLeft or see below
NEXT - Adding More Objects
Here is the final code: You can use (copy and paste it) in the rest of the lessons. (After you paste it, press the tab key to make it more readable)
--------------------------------------------------- FINAL CODE ----- COPY THIS AND PASTE IT INTO YOUR PROGRAM ---------------------------------
on arrowkey x
if x is "up" then
set the top of btn "box" to the top of btn "box" - 10
if top of btn "box" < 0 then
set the top of btn "box" to 0
end if
end if
if x is "down" then
set the bottom of btn "box" to the bottom of btn "box" + 10
if the bottom of btn "box" > the bottom of card "mycard" then
set the bottom of btn "box" to the bottom of card "mycard"
end if
end if
if x is "left" then
set the left of btn "box" to the left of btn "box" - 10
if the left of btn "box" < 0 then
set the left of btn "box" to 0
end if
end if
if x is "right" then
set the right of btn "box" to the right of btn "box" + 10
if right of btn "box" > the right of card "mycard" then
set the right of btn "box" to the right of card "mycard"
end if
end if
end arrowKey
--------------------------------------------------- FINAL CODE ----------------------------------------------------------------------------------------------------------
or the more general case:
on arrowkey x
if x is "up" then
set the top of btn "box" to the top of btn "box" - 10
if top of btn "box" < the top of the card "mycard" then
set the top of btn "box" to the top of the card "mycard"
end if
end if
if x is "down" then
set the bottom of btn "box" to the bottom of btn "box" + 10
if the bottom of btn "box" > the bottom of the card "mycard" then
set the bottom of btn "box" to the bottom of the card "mycard"
end if
end if
if x is "right" then
set the right of btn "box" to the right of btn "box" + 10
if right of btn "box" > the right of the card "mycard" then
set the right of btn "box" to the right of the card "mycard"
end if
end if
if x is "left" then
set the left of btn "box" to the left of btn "box" - 10
if the left of btn "box" < the left of the card "mycard" then
set the left of btn "box" to the left of the card "mycard"
end if
end if
end arrowkey 
