Logotron educational software. Partners with the teaching profession - Pioneers in Learning
menubar search this site my shopping cart support products about home
 

How to Make Some Cakes

Planning the Project | Designing the Project | Programming | Classes
Improving the Project | Conclusion | Assignments

Task

  • to create a sequencing game where the task is to put four images into a correct order
You need to know
  • how to change a turtle's shape, and how to define events for the turtle
You will learn
  • how to define a new class where several turtle share identical properties.
Designing the Project

There are many sequences you can use in this game. For example, you could have a game where pictures of the four seasons have to be ordered correctly beginning with Spring and ending with Winter. You could also have a set of numbers which must be ordered, starting with the lowest first. There are endless options.

This project, however, looks at the four stages that go into baking cakes. On the screen there will be four images reflecting the time sequence of actions:

  • Mixing the ingredients together.
  • Pouring the mixture into the baking tray.
  • Baking the cakes in the oven.
  • Turning the cakes out to cool before eating them.

The images will be lined up at the bottom of the screen randomly. Above them will be four rectangles into which they must be dragged in the correct sequence. If the correct image is dragged to the corresponding rectangle, then it will immediately 'jump' into position. If the wrong image is chosen by the player, then the image will return to its original position at the bottom of the screen. In this way the player will know that their choice was incorrect, and they will be able to choose again.

Both the rectangles and the images will be turtles. A 'New Game' button will allow the game to reset itself.

Programming


You will need to have four images to correspond with the four stages of baking a cake listed above. You can draw these in Logomotion, or download a ready-made graphic by clicking here.

All four of the images need to appear in their correct time sequence as frames of one .LGF animation. If you have downloaded the graphic supplied, then open it up in Logomotion and have a look at it. You will see that the images appear listed on the left-hand side of the Organiser at the bottom of the screen.

 
One of the ways in which you can simplify the creation of your project is to decide, in advance, on the names that each of your turtles should be given. In this case, the image turtles will be called 1, 2, 3, and 4 respectively. The rectangles will be named r1, r2, r3 and r4. Therefore, image 1 will belong to rectangle r1 and so on...

Begin by creating the four image turtles. Right click on the turtle and choose Change t1 from the dropdown menu.

Click on the Set Shape... button in the dialog window and browse to where your .LGF has been saved. Click Open to finish.


There are a few properties that you must set for your turtle whilst you are in this dialog window. Firstly, in the Basics tab view, make sure that the option Pen down has not been ticked.

Click on the Shape tab. Make sure that AutoDrag is ticked because this will allow your turtle to be moved freely around the screen by the player.

Since your .LGF consists of four frames, you will also need to specify which frame is to appear as the turtle image. Tick the Manual Frame Mode box and leave the Frame set to 1.

You are now ready to give your turtle an Event to follow.

Go to the Events tab and click on the Add button. From the list of choices select OnLeftUp. Click OK.

Before you add any other commands, think about what you want your turtle to do:

  • If image 1 is dragged to r1, it will jump into the rectangle.
  • If image 1 is dragged to any of the other three rectangles, it will return to its home position at the bottom of the screen.


What does the event onLeftUp have to find out?

  • whether the turtle covers with something; the best thing is if it covers one of the boxes that's place belongs to it – e.g. the turtle viewed as the third frame belongs evidently to the box r3, because the frames in the image were in the good time sequence,
    • if yes, it "jumps" into its place – during creating the images in the box sheet and images that form the time sequence we have to be careful to put their Hot Spot in the same place, e.g. in the middle of the image
    • if not, the turtle will return in its original place - home position- after our creating and moving all turtles - images and boxes select for each turtle in its context menu, the item Change, the tab Position and for each turtle press the button Set Current, so the turtle considers its current position as its home position.
Use these instructions and create four turtles - boxes and 4 turtles - images with arranged properties and the event. Use copying through the Clipboard. If you cannot define the event onLeftUp study here.

Classes abstracting

In previous programming we could see that all 4 turtles - images are the same. Evidently you create one turtle and copy it through the Clipboard. Thus we designed the common properties of all the turtles – images. We can define the class with these properties - pen up, auto drag, shape and event onLeftUp. (We do not have to use the Object Oriented Programming in Imagine and we can stop here on this level of programming).

Open New project, built on object oriented programming principles from the beginning. At the beginning we define the new class pictureToGame. We can define it in several ways e.g. in the line too:

? newClass "turtle "pictureToGame
        [autoDrag true pen pu setFrameMode yes shape (loadImage "cake)]

Note: we type the commands into several lines to be more readable in our explanation, if we define the event; we have to type all the commands in one line.

We define the event onLeftUp for the class, too – open Explore Project Window, double click on the class and the similar dialogue Change of any object will open, but there are only three tabs in this dialogue: Events, Variables a Procedures. Add the event onLeftUp ; check up whether the image is in the right box:

ifElse overlapped <> []
  that [ifElse (first overlapped) = (word "r frame)
   [setPos ask first overlapped [pos]][home]]
  [home]

We explain these commands:

does anybody cover the turtle that is released with left mouse button?

if yes: Compare the name of the turtle that covers the released turtle and the name created of the letter "r" and the released turtle's frame. Are they equal? if yes: the released turtle will go to its position, i.e. to the box's position
if not: the released turtle will return home
if not: the released turtle will return home
Equally as in the previous project create the turtles - boxes with the appropriate shape and with names r1, ..., r4 – the turtle t1, that is living in the page from the beginning of Imagine either cancel or rename to r1 and assign the box shape to it.

In the line now create the new turtle - image that will be the object (instance) of our new class pictureToGame. During creating the image we determine what will be different for this special instance from other instances of this class. Evidently in our case it is the name of this turtle ant its position:

? new "pictureToGame [name 1 pos [-160 -90]]

Try to drag this picture and put it on one of the boxes. As the shape of the turtle has got the frame 1, it jumps only on the first box. If we try to put the image on another box or anywhere, it will return in its home position.

Try to change the frame of this turtle:

? 1'setFrame 2

and drag it and put into the boxes. Where will it jump now?

Similarly in the line create next 3 turtles - images for the game:

? new "pictureToGame [name 2 pos [-20 -90]]
? new "pictureToGame [name 3 pos [120 -90]]
? new "pictureToGame [name 4 pos [260 -90]]

Finally insert the button on the page - we select different frames for each turtle and put it into home position by pressing this button:

let "sFrame shuffle [1 2 3 4]
repeat 4 [ask repc [setFrame item repc :sFrame home]]

Improve the project

You must realize that some turtles are drawn under other ones – evidently it is because they were formed earlier. During dragging the turtles this fact spoils the look of the project. That's why we design the event onLeftDown, that at click on the turtle - image allows its moving over other ones.

Firstly think over whether this event belongs to the whole class pictureToGame or to individual turtles - images (i.e. whether it is "equal" or whether it must be different for each of them).

Evidently you can see that it is common event for the whole class - press the Explore Project Window and type the event onLeftDown into the class pictureToGame


Press the Explore Project Window and view the parents of all objects. We can see very well what is on the page:

 

 

 

 

 

 

 

 

 

Conclusion

It was our first meeting with classes, terminology and their using in Imagine. We do not have enough space for explaining Object Oriented Programming, so we suggest you to read something about this topic in the literature.

Assignments

  1. Complete the project with other images e.g. instruction how to draw a house. Create the variable with loaded images. Think over the fact who is the variable's owner and whether there is something to change in the class pictureToGame. (Now each instance has several possibilities for its shape, so the property "shape is not equal for the whole class. Evidently we cancel the variable shape. After its canceling only in the line try new instance of the class pictureToGame . What shape it will be?) Edit the project this way - the button New game select one of images set - cakes or drawing the house.

  2. Insert other sets of images into the game and edit the button New game to select one of them.

  3. Help: if we have global variables "cake, "house, "picture a "marks with images in the event onPush of the button b1 use the commands:
    let "k pick [cake house picture marks]
    repeat 4 [ask repc [setShape thing :k]]

    In simple logic games for little children we often meet the assignments where are the players expected to put the images into the time sequence as they happened. The most elementary examples are making cakes, drawing a picture, hanging a picture on the wall, a procedure how to put a wardrobe together. There are more difficult sequences such as the sequence of seasons in the year, various mathematical sequences, crossing the road by several cars according to the traffic signs. The most difficult problem is to find appropriate images for these games. We help ourselves by finding them in Internet again, where you should find images for the game.

 
   
  back to top