Despite my lack of posts, I've been very active with LiveCode these past few months. I'm currently teaching two courses at the University of Georgia in which I've introduced LiveCode to our very talented graduated students. I'm always amazed and impressed with the interesting ideas that they come up with. So, I thought I would use some of their ideas in at least some of my next posts.
The first one is a simple example of a game spinner, based on an idea by Lucy Daigle, one of our Masters students in our Instructional Design and Development graduate program at UGA. I built this simple prototype for her.
Before I proceed, a reminder to everyone that the LiveCode Community version is now free. So you really have no excuse for not downloading your own copy of LiveCode. For that reason I am not providing executable versions for Macintosh and Windows. Instead, you can simply download and run the LiveCode file. Here's what the final version looks like:
This prototype took about 30 minutes to build, so yes, it is very simple. I started by building six triangles using LiveCode's polygon tool. When you add a polygon to your card, it defaults to a 12-sided polygon, but you have the option to change the number of sides to three in the Basic Properties window of the Property Inspector. It's also a good idea while you are in Basic Properties to make the triangle "opaque," if only because it will be much easier to grab hold of the object and move it around later. Plus, you will need all of the six triangles to eventually be opaque anyway in order to show colors.
Next, with the triangle object selected, you can quickly choose "Edit > Duplicate" twice.
You can then rearrange these three triangles so that they touch at a center point. (A good tip to remember is that when an object is selected, you can use the arrow keys to move an object pixel by pixel.)
Duplicate one of the triangles to make a fourth. Now, you will need to rotate this triangle 60 degrees. The rotation option is also found in Basic Properties of the Property Inspector for the object. After you rotate it, duplicate it twice. Then, move these three triangles into their positions around the center point formed by the first three triangles. This makes the a six-sided set of pie shapes reminiscent of the Trivial Pursuit game token.
Next, give each triangle a distinctive color. I chose yellow, green, red, orange, blue, and purple. You do this by selecting a triangle and going to the Colors & Patterns window in the Property Inspector. Choose the BackgroundColor block for Fill (the square block on the right). I always like choosing from the "Crayons" option. Now, you would think that you would find color names like yellow, green, etc., but you'll have to choose between options like banana and lemon.
Next, name each triangle object accordingly by clicking on each and entering "yellow," "green," etc. in the name field Basic Properties of the Property Inspector. These names will be important because they will be referenced in the upcoming scripts. Oh, I also created a seventh polygon - a six-sided polygon with a gray background - to act as a background (doing so is optional, but I liked having it for aesthetic reasons).
To create the illusion of spinning, all I do in the script is to show and hide the six triangles in a "strategic" order. So, I created a button named "Spin" on the card and added the following script:
global varSpinTimes, varNumber, varDelay
on mouseUp
put 4 into varDelay
put random (7)+3 into varSpinTimes
put random (6) into varNumber
hide graphic "yellow"
hide graphic "green"
hide graphic "red"
hide graphic "orange"
hide graphic "blue"
hide graphic "purple"
repeat varSpinTimes times
show graphic "yellow"
wait varDelay ticks
hide graphic "yellow"
show graphic "green"
wait varDelay ticks
hide graphic "green"
show graphic "red"
wait varDelay ticks
hide graphic "red"
show graphic "orange"
wait varDelay ticks
hide graphic "orange"
show graphic "blue"
wait varDelay ticks
hide graphic "blue"
show graphic "purple"
wait varDelay ticks
hide graphic "purple"
end repeat
if varNumber = 1 then show graphic "yellow"
if varNumber = 2 then show graphic "green"
if varNumber = 3 then show graphic "red"
if varNumber = 4 then show graphic "orange"
if varNumber = 5 then show graphic "blue"
if varNumber = 6 then show graphic "purple"
end mouseUp
So, let's dissect this code a little bit to see how it works. The repeat loop is the heart of the code. As you can see, starting with yellow, it shows and then hides each triangle with a short delay in-between. Now, I wasn't sure how long the delay should be and so I knew I would need a lot of trial and error to get it just right. I didn't want to have to change the delay 6 times (once for each triangle), so instead I just created a variable called varDelay. That way, I could change the delay once in the first line after the mouseUp. (Recall that a tick is 1/60 of a second. I settled on 4 ticks.)
Notice that before the spinning starts, I hide all the triangles.
Now the question was how many times should the spinner spin? It seemed boring to me to always have it spin the same number of times. In all of the board games I ever played that involved spinners, it was part of the fun to spin it fast and slow. I thought it should spin at least 3 times, but no more than 10, hence this line:
put random (7)+3 into varSpinTimes
Since "random(7)" returns a number between 1 and 7, by adding three to the result changes the range to 4 to 11 (hmm, perhaps I should change this line to only add 2?)
Anyhow, I put this random number into the variable "varSpinTimes," which, as you can see, I use to determine the number of times the repeat loop repeats.
Note also that near the top of the script is this line:
put random (6) into varNumber
This actually chooses the final number that the spinner will reveal. It obviously will be a number somewhere between 1 and 6.
After the spinning has concluded, all of the pieces will be hidden.
The final six lines of code determine which triangle will be revealed as the spinner's final result. So, if varNumber turns out to be 1, then the yellow triangle will be shown. If 2, then the green triangle, and so on.
Now, the interesting thing is that, unlike a real spinner that physically ends at the final number (or color), this spinner just spins a certain number of times and then jumps to the final triangle. So, that's a sneaky shortcut, but one that I don't think players will ever notice. Of course, you may disagree. But, I just don't think it's worth revising the code to make the spinner spin "pure."
I made another button on the card that simply shows all of the triangles. Finally, I put similar code on the card script so that when the card is initially opened, all of the triangles show.
I don't know if Lucy will use this actual spinner prototype, but it's now hers to use, adapt, or ignore. But, let's see how Lucy eventually uses the spinner idea in her project.
The first one is a simple example of a game spinner, based on an idea by Lucy Daigle, one of our Masters students in our Instructional Design and Development graduate program at UGA. I built this simple prototype for her.
Before I proceed, a reminder to everyone that the LiveCode Community version is now free. So you really have no excuse for not downloading your own copy of LiveCode. For that reason I am not providing executable versions for Macintosh and Windows. Instead, you can simply download and run the LiveCode file. Here's what the final version looks like:
Next, with the triangle object selected, you can quickly choose "Edit > Duplicate" twice.
You can then rearrange these three triangles so that they touch at a center point. (A good tip to remember is that when an object is selected, you can use the arrow keys to move an object pixel by pixel.)
Duplicate one of the triangles to make a fourth. Now, you will need to rotate this triangle 60 degrees. The rotation option is also found in Basic Properties of the Property Inspector for the object. After you rotate it, duplicate it twice. Then, move these three triangles into their positions around the center point formed by the first three triangles. This makes the a six-sided set of pie shapes reminiscent of the Trivial Pursuit game token.
Next, give each triangle a distinctive color. I chose yellow, green, red, orange, blue, and purple. You do this by selecting a triangle and going to the Colors & Patterns window in the Property Inspector. Choose the BackgroundColor block for Fill (the square block on the right). I always like choosing from the "Crayons" option. Now, you would think that you would find color names like yellow, green, etc., but you'll have to choose between options like banana and lemon.
Next, name each triangle object accordingly by clicking on each and entering "yellow," "green," etc. in the name field Basic Properties of the Property Inspector. These names will be important because they will be referenced in the upcoming scripts. Oh, I also created a seventh polygon - a six-sided polygon with a gray background - to act as a background (doing so is optional, but I liked having it for aesthetic reasons).
To create the illusion of spinning, all I do in the script is to show and hide the six triangles in a "strategic" order. So, I created a button named "Spin" on the card and added the following script:
global varSpinTimes, varNumber, varDelay
on mouseUp
put 4 into varDelay
put random (7)+3 into varSpinTimes
put random (6) into varNumber
hide graphic "yellow"
hide graphic "green"
hide graphic "red"
hide graphic "orange"
hide graphic "blue"
hide graphic "purple"
repeat varSpinTimes times
show graphic "yellow"
wait varDelay ticks
hide graphic "yellow"
show graphic "green"
wait varDelay ticks
hide graphic "green"
show graphic "red"
wait varDelay ticks
hide graphic "red"
show graphic "orange"
wait varDelay ticks
hide graphic "orange"
show graphic "blue"
wait varDelay ticks
hide graphic "blue"
show graphic "purple"
wait varDelay ticks
hide graphic "purple"
end repeat
if varNumber = 1 then show graphic "yellow"
if varNumber = 2 then show graphic "green"
if varNumber = 3 then show graphic "red"
if varNumber = 4 then show graphic "orange"
if varNumber = 5 then show graphic "blue"
if varNumber = 6 then show graphic "purple"
end mouseUp
So, let's dissect this code a little bit to see how it works. The repeat loop is the heart of the code. As you can see, starting with yellow, it shows and then hides each triangle with a short delay in-between. Now, I wasn't sure how long the delay should be and so I knew I would need a lot of trial and error to get it just right. I didn't want to have to change the delay 6 times (once for each triangle), so instead I just created a variable called varDelay. That way, I could change the delay once in the first line after the mouseUp. (Recall that a tick is 1/60 of a second. I settled on 4 ticks.)
Notice that before the spinning starts, I hide all the triangles.
Now the question was how many times should the spinner spin? It seemed boring to me to always have it spin the same number of times. In all of the board games I ever played that involved spinners, it was part of the fun to spin it fast and slow. I thought it should spin at least 3 times, but no more than 10, hence this line:
put random (7)+3 into varSpinTimes
Since "random(7)" returns a number between 1 and 7, by adding three to the result changes the range to 4 to 11 (hmm, perhaps I should change this line to only add 2?)
Anyhow, I put this random number into the variable "varSpinTimes," which, as you can see, I use to determine the number of times the repeat loop repeats.
Note also that near the top of the script is this line:
put random (6) into varNumber
This actually chooses the final number that the spinner will reveal. It obviously will be a number somewhere between 1 and 6.
After the spinning has concluded, all of the pieces will be hidden.
The final six lines of code determine which triangle will be revealed as the spinner's final result. So, if varNumber turns out to be 1, then the yellow triangle will be shown. If 2, then the green triangle, and so on.
Now, the interesting thing is that, unlike a real spinner that physically ends at the final number (or color), this spinner just spins a certain number of times and then jumps to the final triangle. So, that's a sneaky shortcut, but one that I don't think players will ever notice. Of course, you may disagree. But, I just don't think it's worth revising the code to make the spinner spin "pure."
I made another button on the card that simply shows all of the triangles. Finally, I put similar code on the card script so that when the card is initially opened, all of the triangles show.
I don't know if Lucy will use this actual spinner prototype, but it's now hers to use, adapt, or ignore. But, let's see how Lucy eventually uses the spinner idea in her project.
