Make a fun kids’ game

Use LiveCode to cre­ate a game in min­utes

Mac Format - - FRONT PAGE -


Tak­ing things fur­ther


30 min­utes



The tra­di­tional Fuzzy Felt chil­dren’s play­sets are great fun, and you can make an on-screen ver­sion us­ing the LiveCode de­vel­op­ment tool. Mak­ing this will take us through some use­ful script­ing tech­niques, in­clud­ing cloning graph­ics, as­sign­ing new ob­ject scripts, chang­ing colours and con­trol­ling lay­ers. At the end of this you’ll have a work­ing vir­tual toy as well as a set of new LiveCode skills un­der your belt.

Start, as al­ways, by choos­ing File > New Main­stack. Choose the Poly­gon tool in the Graphic sec­tion – it’s the di­a­mond-shaped icon – and draw a shape on the card. In the In­spec­tor pal­ette, use the Ba­sic Prop­er­ties pane to make it opaque, with a line thick­ness of zero, four sides, and a ro­ta­tion of 45. Switch to the Graphic Ef­fects pane to give it a drop shadow (we sug­gest opac­ity 90, size 9, dis­tance 3 and an­gle 90), and use the Size & Po­si­tion pane to make it 200x200 pix­els.

Click the Code but­ton, add an on mouseUp han­dler, and add just this one word: makeNewShape . This isn’t a LiveCode word, it’s a cus­tom, made-up name that gets called when this shape is clicked. Click Ap­ply 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 an­other graphic, name this ‘script store’, and go straight to the Code view. In there, make an on mouseDown han­dler and add two sep­a­rate lines: set the layer of me to top , and grab me .

The line first tells the item to move in front of any­thing else, and the sec­ond makes it fol­low the mouse. Once you've ap­plied the script, go to the In­spec­tor pal­ette and untick the Vis­i­ble check­box so that this item is hid­den. Now go to Ob­ject > Card Script and type on makeNewShape to cre­ate a cus­tom han­dler that runs when you click the ob­ject. In­side this, we’ll put a to­tal of eight lines of script. The first, clone the tar­get , du­pli­cates ‘the tar­get’ (the thing just clicked) and stores the name of the new ob­ject in the ‘it’ vari­able. We’ll use that later, but first we need three lines of ran­dom num­ber gen­er­a­tion.

put ran­dom(100)+200 into x

put ran­dom(100)+200 into y

put ran­dom(40) + 25 into z In each line a ran­domised num­ber is made, an­other is added to that, and the re­sult is stored in a vari­able.

At the end of this you'll have gained a work­ing vir­tual toy as well as a set of new LiveCode skills

That’s the setup fin­ished, so let’s use these things. The ‘loc’ property is the hor­i­zon­tal and ver­ti­cal pixel lo­ca­tion of an ob­ject, so we set the loc of it to x,y to have the new graphic po­si­tioned with a bit of ran­dom­ness.

The next line does a sim­i­lar thing to the an­gle of the graphic: set the an­gle of it to z . Each time the mas­ter graphic is clicked you get a new one, with a dif­fer­ent an­gle and po­si­tion ev­ery time.

Af­ter this, add set the script of NewGraphic to the script of graphic "script store" to put the script we set up ear­lier into the new graphic. The last line sets the back­ground fill colour of the graphic: set the back­groundColor of it to "gray" .

This may seem fid­dly, but in eight steps a graphic is du­pli­cated, po­si­tioned and tilted, then given its own script and filled with a new colour. Drag an im­age ob­ject onto the card and name it ‘trash’. In the card’s code add an on mouseUp han­dler with a sin­gle line of code be­fore end mouseUp : if in­ter­sect(the tar­get, im­age "trash", "opaque pix­els") then delete the tar­get

Your stack now cre­ates graph­ics, lets you drag them about, and deletes them on de­mand. Keith Martin

The cloning in­struc­tions that du­pli­cate and po­si­tion new ob­jects in the game are stored in the card’s script.

First get the core func­tion­al­ity work­ing, then move on to play­ing with colours.

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.