Make a fun kids’ game
Use LiveCode to create a game in minutes
SKILL LEVEL
Taking things further
IT WILL TAKE
30 minutes
YOU’ll NEED
LiveCode
The traditional Fuzzy Felt children’s playsets are great fun, and you can make an on-screen version using the LiveCode development tool. Making this will take us through some useful scripting techniques, including cloning graphics, assigning new object scripts, changing colours and controlling layers. At the end of this you’ll have a working virtual toy as well as a set of new LiveCode skills under your belt.
Start, as always, by choosing File > New Mainstack. Choose the Polygon tool in the Graphic section – it’s the diamond-shaped icon – and draw a shape on the card. In the Inspector palette, use the Basic Properties pane to make it opaque, with a line thickness of zero, four sides, and a rotation of 45. Switch to the Graphic Effects pane to give it a drop shadow (we suggest opacity 90, size 9, distance 3 and angle 90), and use the Size & Position pane to make it 200x200 pixels.
Click the Code button, add an on mouseUp handler, and add just this one word: makeNewShape . This isn’t a LiveCode word, it’s a custom, made-up name that gets called when this shape is clicked. Click Apply to store your changes in this graphic. Now copy and paste to make two copies, set the sides of one to 3, and change the type of the other to Oval. Put them all on the left.
Make another graphic, name this ‘script store’, and go straight to the Code view. In there, make an on mouseDown handler and add two separate lines: set the layer of me to top , and grab me .
The line first tells the item to move in front of anything else, and the second makes it follow the mouse. Once you've applied the script, go to the Inspector palette and untick the Visible checkbox so that this item is hidden. Now go to Object > Card Script and type on makeNewShape to create a custom handler that runs when you click the object. Inside this, we’ll put a total of eight lines of script. The first, clone the target , duplicates ‘the target’ (the thing just clicked) and stores the name of the new object in the ‘it’ variable. We’ll use that later, but first we need three lines of random number generation.
put random(100)+200 into x
put random(100)+200 into y
put random(40) + 25 into z In each line a randomised number is made, another is added to that, and the result is stored in a variable.
At the end of this you'll have gained a working virtual toy as well as a set of new LiveCode skills
That’s the setup finished, so let’s use these things. The ‘loc’ property is the horizontal and vertical pixel location of an object, so we set the loc of it to x,y to have the new graphic positioned with a bit of randomness.
The next line does a similar thing to the angle of the graphic: set the angle of it to z . Each time the master graphic is clicked you get a new one, with a different angle and position every time.
After this, add set the script of NewGraphic to the script of graphic "script store" to put the script we set up earlier into the new graphic. The last line sets the background fill colour of the graphic: set the backgroundColor of it to "gray" .
This may seem fiddly, but in eight steps a graphic is duplicated, positioned and tilted, then given its own script and filled with a new colour. Drag an image object onto the card and name it ‘trash’. In the card’s code add an on mouseUp handler with a single line of code before end mouseUp : if intersect(the target, image "trash", "opaque pixels") then delete the target
Your stack now creates graphics, lets you drag them about, and deletes them on demand. Keith Martin