Teaching Website: games
Take a look at this brand new educational resource

By Heather Laine, portions by Cyril Pruzsko

This week I'm focusing on LiveCode in Education. I've received some great feedback from teachers to share with you!

In this article I'd like to draw your attention to a fantastic new educational resource being made freely available by Cyril Pruzsko. It is aimed at teaching young people to make games using LiveCode in a structured way, and it is a truly excellent way to get students into coding.

I dived into his website here, and the deeper I dug, the more excited I got. Cyril certainly knows how to teach. If I'd been in his class maybe I'd be one of the coders on the RunRev team now! The site starts with the very basics, teaching you how to pop up "Hello" on screen.

• Create a new Mainstack (from the previous lesson) and name and save it as "Hello"
• Drag over any button from the Tools Palette to the blank card
• right-click on it and select "Property Inspector"
• In the Property Inspector, change the name from "button" to "Hello", click elsewhere to set it and then close the Property Inspector
• Right-click on the button again (note that it is now called "Hello") and select "Edit Script"
• Add the line - Answer "Hello"
• It should now look like this:

on mouseUp
   Answer "Hello"
end mouseUp

You should see the following on your screen after doing the above...

Yup, I can do that.

The website progresses through more advanced concepts including how to think about structuring your code as well as the actual nuts and bolts of handling game actions. Let's take a look at the section on collisions for example.

Detecting Collisions

We need to check when the player runs into another object. For that we use the "intersect" command. Read about The_Intersect_CommandandObjects_In_LiveCode

Add the intersect code to detect collisions of the player with another object ("intersect" command) and decide what to do. (On the 'Card Script', you should have the following code:LC_MovingCodeWithIntersect. You may want to change the intersect code to do something different - see below)

What do you do when the "Player" collides with another object?
You can send it back to the beginning to start over:

 if intersect(<object1> <"name1">,<object2> \
      <"name2">, "opaque pixels") then
        set the loc of<object1> <"name1">to \
         50, 50
   end if
    

for example:

 if intersect( button "myBox" , image "spider" , \
      "opaque pixels") then
     set the loc of button "myBox" to 50,50
  end if

note: I just put 50,50 as an example.

To find the real start of your maze:

click on the "Browse" tool and move your player (object1) to the start of your maze.
open up its PI (Property Inspector), click on "Size and Position', and see what its location is
use those numbers in the commands above

You can add objects (diamonds, stars, etc) to pick up for bonus points or objects (bombs, enemies, etc) to avoid. When your player hits one, make the object disappear, add stars for effect and either add points to the score, or anything else that your imagination can come up with.

   if intersect( button "myBox" , image "maze" , \
      "opaque pixels") then
     set the visible of graphic "diamond" to false
     set the visible of graphic "stars" to true
      put score + 10 into score
      put the score into the field "ScoreCard"
   end if

You can add an object that is not visible.When your player touches that invisible object, you can pop up a dialog box that says the "You won" or automatically go to another card (the next level).

 if intersect(button "myBox" , button "end" , \
      "opaque pixels") then
      Answer "You Won"
    end if

or

if intersect(button "myBox" , image "maze" , "opaque pixels") \
      then
       go to card "card2"
   end if

You can do many more things to make your game interesting, fun, challenging or more difficult.There is no limit to your imagination Have objects pop-up at random places that the player has to avoid. Have objects walking around or chasing the player. Be creative. Get ideas as you look at other pages on this website.

The Intersect Command

The intersect command is of the form:

   intersect (<object 1> , <object 2> , <threshold> )

where:

   object 1 and object 2 are of the form: <type> <name>

e.g. button "my box"

button "enemy1"

graphic "rectangle"

image "clown"

Threshold is what level of transparency you detect.

it can be:

a number from 0 to 255 (0 istransparent and 255 is opaque)

"pixels"

"opaque pixels"

...and a few other less commonly used terms

For example:

   intersect ( button "box" , image "asteroid", "pixels" )

Perhaps the following will help you:

If the intersect does not produce the result that you want, experiment and see what threshold works.

note:sometimes when you import an image, the background is actually white pixels, not transparent ones. So the "intersect" command will detect the boundaries (square outline) before you actually touch the real object. In those cases, use the image tools (eraser) on the LiveCode Tools Palette to eraser those "white" pixels.

I'll let you explore the rest of his site yourself, but I'd like to finish by taking a look at what Cyril's students are achieving. He has been kind enough to send us some sample games.

I like this game especially for the animated birds, and the changing levels. It shows some quite sophisticated gameplay, you return to the start if you hit something, and eat the cherries for rewards.

I've given this game the working title "scream" both for the entertaining player graphic and because the gameplay is sufficiently difficult that you might well. I didn't get beyond the second level on this, if you do you might let me know what imagery appears next!

I'm very impressed with the work produced by these students, especially as they are aged 13- 15. I'd like to express my thanks to Cyril for making it available. I'm sure teachers and students out there will find it valuable!