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

PART ONE: SETTING UP

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

PART TWO: BALL HITS BAT

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!

PART THREE: CONTROLLING THE BAT

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


PART FOUR: SCORING

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.

PART FIVE: FINISHING TOUCHES

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)