Thursday, November 08, 2007

making pong in etoys

This is a long-ish blog with lots of screenshots because I wanted to explain in detail how to make a game in etoys for someone who is relatively new to using it.

It's best to use the OLPC etoys image of etoys squeak, which is now superior to the version on the squeakland site: install instructions here This tutorial matches the OLPC image version of etoys, it would be hard to follow all the detail of it if using the Squeakland version.

Saving and reloading: You can save your project by clicking on the open book icon at the top right. To reload use the world menu –> alt+shift+W


Grab a Playfield out Supplies (the box at the top centre of the screen)

Make your own bat and ball, name them "bat" and "ball", and put them into the Playfield, the simplest way is to drag them in directly

Make a script to control the ball's behaviour. Name it "move". The ball's motion category contains the commands you need: forward and bounce

The default heading is zero (0), which is north, which we don't want. Write a setup script which creates a better initial heading, with some random variation:

From the ball's Viewer motion category drag out a detailed watcher for the heading, so we can directly observe its changing values:

Make some observations for yourself about the x and y co-ordinates and the heading values of the ball as it moves around the Playfield, so that you become aware of how the co-ordinate system works in etoys


Drag a Test/Yes/No pane out of the ball's move script supplies palette

and add it to the move script

There are lots of other Viewer categories! By clicking on any Viewer category heading you get a drop down list revealing the other possibilities. Do this and select the test category:

What test do we want? Answer: ball overlaps bat. We get there by initially dragging the ball's overlap dot test to the Test section of the move script:

Now open the bat Viewer and ask it for a "tile representing me"

and replace the dot tile in the move script with the bat tile:

We have to do some maths now:
With the way etoys measures headings (your HW in part one) what should the new heading be after bouncing off the bat?

Go back to the ball's Viewer, drag out the heading by the assignment arrow and add it to the Yes line in the move script

Have you done your maths yet?

For a true bounce using the etoys heading syntax the after bounce heading will be the negative of the before bounce heading. To represent the minus grab a function tile from the move script palette

and replace the number on the end of the ball's heading with the function tile

Next, click on the function tile and choose negativeOf from the list of functions:

Now replace the number in brackets after the function with the ball's heading

Test it out. The ball should bounce off the bat now with a true bounce!


We can use either key strokes or the specialised etoys slider (Supplies > Object Catalog) to control the bat. I'll use key strokes for this tutorial.

Open the world Viewer by middle clicking on the world to get the halos and then clicking on the cyan "eye". The world viewer has an input category which tracks the last key stroke. Press the up and down arrow keys and you will see the Viewer keeping track

Drag out a new script from the world viewer (only the world viewer has a keystroke option) and name it something like "batControl". From the palette tear off a Test/Yes/No pane and add it to the script.

Drag world's last keystroke (not by the assignment arrow) to the Test condition of the bat control script

If necessary change the key input to <up>

Drag out the bat Viewer and open the motion category. When we press the <up> arrow we want the heading to be zero (drag by assignment arrow) and the bat to move up the y axis, like this:

It is possible to program a keypress (thanks to Tony Forster for explaining how). Click on the button displaying "normal" next to the ticker, then choose more... from the drop down menu and then keyStroke

Now add your <down> arrow keyboard control


We will do this part by registering a score increase when the ball touches a boundary object

Make a boundary object, name it ("boundaryLeft"), drag it into the Playfield and resize it with the yellow halo so it fits all the way along the boundary
We will record the score in a "Text" because a Text contains the code to increment a numeric value. Drag a Text out of Supplies and position it on the right hand side of the Playfield. I named my Text "scoreRight" and set its numeric value to zero (basic category)

Create a new script, named ball score, add a Test/Yes/No pane and make the Test condition:
ball's overlaps boundaryLeft. First drag ball's overlaps dot from the ball's Test category. Then ask boundaryLeft to hand you a "tile representing me" and replace the dot with that tile.
When the ball hits the boundary we want the score to go up by one, the ball to be returned to the centre of the Playfield and move off in a random direction, like so:

Run the script with the ball moving, to check that it is working.


It is now mainly a matter of making a another bat, score and boundary for the other side of the Playfield and then our first version of pong will be completed. I reduced the bat size and speeded up the ball to make it more interesting. I also added in some more randomisation.

Version one available here (you will need to OLPC etoys image to play it)


Unknown said...

Bill, thanks for this excellent tutorial. I've found lots of random documentation of squeak online, but not many good tutorials. I read your other entry comparing Squeak to GameMaker. I wonder if there could be an alternate version of Squeak / Etoys such as Squeak "GameMaker!" (I know, totally unoriginal) that would have built in tools for making 2d scrolling games, levels, sprites, etc.

Thanks for this tutorial. I'm waiting for my XO to arrive and to start making my own games and programs.

Unknown said...

Hi Lee
Yes the documentation supplied with Etoys is very poor.

I am interested in exploring your comment "built in tools for making 2d scrolling games, levels, sprites, etc." more.

By sprites, maybe you mean sprite libraries, I think you can import sprites, if so, kids will have no trouble finding sprites on the net.

Sprites are one of the few things that Etoys does better than GameMaker, they automatically rotate to match their heading. In GameMaker you need to set up a multi image sprite with say 36 images and then put subimage=direction/10

In this feature Etoys is better than GM for younger kids because they can develop their understandings of angle and vectors by being presented with a visual representation of the concept. Older kids however might get more from the GameMaker because they have to think about which way 0 degrees faces and why they must divide by 10.

Its all about encapsulation of programming features and providing an age appropriate level of encapsulation for a range of student ages. For example, in text based languages, we don't expect students to write their own print() function, even though they would learn a lot from the task.

It is not good to provide a high level feature if its reasonable to expect a student to create it from low level features and learn along the way without undue frustration. But all the low level features must be there for a student to create anything if they have the motivation. For example, it would not be good to have a built in path finder (Eg A*)algorithm. Students learn a lot by thinking about how to solve the problem. For example, an 11 year old student has created a simple path finder for the enemies at A timer is used to set the enemies' motion towards the player at regular intervals but they bounce off the walls between timer events.

What is important is that all the primitive or low level functions exist to create anything and that they be reasonably easy to find and use. Unfortunately Etoys users are often frustrated by dead ends. Often you read this kind of comment (from today's Etoys discussion list), "Quite efficient. 3 hours for nothing"

Unknown said...

Thanks for the comments Tony. I'm actually an adult that wants to learn how to program. I've tried before but never got very far. I figure that using "kid's software" is a good way to start, to understand how variables work, how parts relate, etc. I'm most interested in creating my own 2d games, visual art projects and sound creation/interaction software.

Once i feel like i've mastered eToys, I'm thinking i will strip off eToys to use Squeak on the OLPC (there are instrutions on the OLPC wiki), and then when i feel like i've hit a brick wall, maybe i'll try learning Python (aka Pippy on the OLPC).

What i mean about GameMaker is that it is actually easier to use to make Games out of the box and to make standalone applications. The games also look more professional to me.

Anonymous said...

Hi, I am new to Etoys and I am currently learning how to use it. Excellent tutorial. I have come far in recreating pong and would like to verify your code.
Unfortunately it is gone...
Greetings from Braunschweig, Germany.

Bill Kerr said...

hi anonymous from Braunschweig, Germany,

I have uploaded the project again, so try clicking the link at the bottom of the page again. I just tested the download and it works for me. Cheers.