Scratch Tutorial – Colliding Clones Tutorial

Scratch Tutorial – Colliding Clones Tutorial

Alex & Jordan in Computer Science

Alex - Alex & Jordan in Computer Science

Scratch Tutorial – Colliding Clones in Scratch Games

& (more) Linear Search

The tutorial below looks at how to create clones in Scratch and detect whether two different clones have collided with each other using a linear search algorithm. This is an extension of the first clones tutorial – I’d recommend following this first!

This tutorial is a step by step guide for students learning independently. A lesson pack for teachers is available here.

To follow more tutorials from my Alex & Jordan in Computer Science series, please click here.

Creating The ClonesMoving and Tracking ClonesDetecting MovementChecking if the Clones Collide

Creating a Clone of a Sprite

A clone of a sprite is a copy of a sprite that you’ve created. Extra code can be added to give the clones code that runs when they’re created.

This tutorial shows how to create two types of clone which will disappear is they collide with each other. This is the type of algorithm that is useful in shooting games like the Bug Spawner Game where the bugs we need to shoot are all clones of a sprite.

In the same way as the first clone program, start by creating a new sprite that is a simple square on the stage.

Creating a basic sprite

Then create another sprite which is a circle of a different colour. Place these in different places on the stage.

These are going to act as the original sprites for our program. When the game runs, we’ll hide these sprites and create three clones of each which will move randomly around the screen.

Because we need to know which clone is moving around, we will give each one an ID number. This works a bit like giving each one a name badge so we know which shape is which.

To do this, we need to create a “local” variable in the Square sprite code called “square id”. We do this by clicking on the Square sprite, then the variables menu. In here, we create a variable checking the “For this sprite only” option when we create the new variable.

We’ll repeat this in the Circle sprite to create a local variable called “circle id”.

To make it easier to see which clone is which, we’ll create duplicates of the costumes for both the Circle and the Square sprites giving each duplicate a number from 1 to 3.

Then we’ll rename each of these costumes to a meaningful name like “circle_3”.

This means that we can set the costume to show the clone ID number when the clones are created.

Although this set up is a bit fiddly, it will save time in the long run!

when green flag clicked
hide
set [circle to destroy v] to [0]
set [square id v] to [1]
repeat (3)
    create clone of [myself v]
    change [square id v] by (1)
end

Before we can start creating the code, we need to create one more variable called “circle to destroy”, this time setting it to be available to all sprites. This variable will let us know which of the circles has been hit.

In the code of the square, create a starting block for when the green flag is clicked.

We hide the original square sprite because it’s the spawns that we want to add the “real” code to.

We’re going to assign the starting value for “circle to destroy” to 0 so that no circle has been selected (yet!), and “square id” to 1 so we’re ready to create the first clone of the square.

By adding a repeat block we can decide how many squares we want to add to the stage. I’ve used 3 here to match the number of costumes with numbers.

We’re going to create 3 clones of the square and each time increase the clone id variable by one – this will give each clone of the square it’s own number and let us check whether that clone has collided with something.

when I start as a clone
if <(square id) = [1]> then
    switch costume to [square_1 v]
end
if <(square id) = [2]> then
    switch costume to [square_2 v]
end
if <(square id) = [3]> then
    switch costume to [square_3 v]
end
“></p>
</div>



<div class=

The “When I start as a clone” starter block will only run if a new clone is created.

By setting an id number for each clone, we can add an IF statement that will check the clone’s “square id” number and set a matching costume.

In a game, it’s unlikely that you’ll need to have this code that shows the number of a clone, but for examples where you’re testing out new ideas in code, being able to see what’s happening by showing it on the screen can be really helpful.

Some very similar code is used for the “Circle” sprite, although when this is started, there is no block setting the value of “circle to destroy” as this only needs to be set once. Click on the Circle sprite and add the code to create the clones and set the costume for each one:

when green flag clicked
hide
set [circle id v] to [1]
repeat (3)
    create clone of [myself v]
    change [circle id v] by (1)
end

when I start as a clone
if <(circle id) = [1]> then
    switch costume to [circle_1 v]
end
if <(circle id) = [2]> then
    switch costume to [circle_2 v]
end
if <(circle id) = [3]> then
    switch costume to [circle_3 v]
end
“></p>
</div>
</div>



<div class=

when I start as a clone
show
go to [random position v]
point in direction (pick random (1) to (360))
forever
    move (4) steps
    if on edge, bounce
end

Before we can test the code, we need to make our clones move around the screen. To do this, we’ll use the same block of code in the Square and Circle sprites.

Because we hid the original sprite, we need to make sure that the clone is visible when it starts.

Just like in our original clones program, to make the random movement easier, we can send each new clone to a random position, then point in a random direction so that when it starts moving, they’re all bouncing in different random directions.

There’s no real end to our simulation (apart from clicking stop), so a forever loop lets the movement & bouncing off the walls just go on forever.

At this point, you should be able to run your code and see your three clones labelled and moving around the screen:

Tracking The Clones

Before we can start detecting whether they’ve collided, we need to store some important information about each clone: the x and y coordinates of each circle.

Because we have more than one circle clone, we need to track each one. We can do this with a list.

In the Variables menu, create a new “global” list called “circle x”. We make this global by selecting “For all sprites” when the list is created.

Repeat this, and create another list called “circle y”.

When you’ve created the lists, make sure that you have the visible on the screen checkbox selected.

When you can see the lists on your screen, click the + icon at the bottom to add three items to each list. Each item will match a clone, so if you have chosen a different number of clones, the number of items in your list must match the number of clones you chose to create.

The final part for tracking is to add two extra blocks of code into just the Circle clone’s movement loop.

This will save the x and y coordinates for each Circle clone into its place in the list (circle 1 will store it’s x & y coordinates in place 1, circle 2 will store it’s x & y coordinates in place 2… etc.).

We use the replace block because we want to constantly track each clone’s position as it moves.

The round block makes sure that we’re storing whole numbers so to make checking the position easier.

Checking if the Clones Collide

The collision block uses some big IF statements, so we’re going to break down building this section into smaller stages!

The algorithm that we’re using to check each circle to see if it’s collided with a square is called linear search. This is a computer science algorithm that looks at each item of data along a list, starting from the beginning and checking each one in turn until the data we’re looking for (a collision) is found, or the end of the list is reached.

Unlike the movement code, we only need to add this to the Square Sprite.

If you’ve already completed the single clone collision program, you’ll notice that this is very similar. In Computer Science, this ability to solve new problems using methods that we’ve used before is called pattern recognition (and it’s why practicing code is so important).

when I start as a clone
forever
    set [check for circle v] to [1]
    repeat (length of [circle x v])
        
        change [check for circle v] by (1)
    end
end

We’ll start by adding another starting “When I start as a clone” block to the Square Sprite code. You may want to put this underneath your other code blocks as some of the lines end up quite long!

We want this to be checking for collisions all the time that the program runs, so a forever loop will go around all of the code.

We’re going to check all of the circles in our list, so we need to create a new variable called “check for circle”. This will start at 1, then count through each circle clone’s id number.

Then add a repeat block which will loop as many times as the circles in your lists. Inside this, we’ll increase the “check for circle” variable by one to look at the next circle.

Our two long IF statements will check that the circle’s coordinates for both x and y are inside the square.

X and Y collision for sprites

If only one (x or y) matches, then the two sprites haven’t collided. Because of this, we need two IF statements: one to check for the X coordinates, and another for the Y coordinates.

X or Y collision for sprites

The first of our long IF statements goes inside the repeat block. This checks to see if the X (left and right) coordinates of the circle are in the same range as the square.

Over in the code for the circle sprites, we need to add one final block of code to destroy the circle when it’s hit.

when I start as a clone
forever
    if <(circle to destroy) = (circle id)> then
        replace item (circle to destroy) of [circle x v] with (1000)
        replace item (circle to destroy) of [circle y v] with (1000)
        delete this clone
    end
end

“></p>
</div>



<div class=

We’ll start by adding another starting “When I start as a clone” block to the Circle Sprite code.

We also want this to be checking all the time to see if it was hit, so a forever loop will go around all of the code.

We’re going to check if the current circle’s ID is the one that’s been hit. We’ll know this if the variable “circle to destroy” is the same as the circle’s id.

If it is, we’ll update the x & y coordinates in the list to a number that can’t be on the stage (this stops the squares from hitting ghosts of the circles), and destroy the circle sprite.

At this point, we’re ready to test that the coordinates are working by running the program and watching the data in the two lists:

And now, you should have a clone experimenter program that lets you detect other types of clone on the screen.

What did you do with your clone program? Let me know below!

Scratch Tutorial – Using Clones in Games

Scratch Tutorial – Using Clones in Games

Alex & Jordan in Computer Science

Alex - Alex & Jordan in Computer Science

Scratch Tutorial – Using Clones in Scratch Games

& Linear Search

The tutorial below looks at how to create clones in Scratch and detect whether they have collided with each other using a linear search algorithm.

This tutorial is a step by step guide for students learning independently. A lesson pack for teachers is available here.

To follow more tutorials from my Alex & Jordan in Computer Science series, please click here.

Creating a CloneMoving and Tracking ClonesChecking if the Clones Collide

Creating a Clone of a Sprite

A clone of a sprite is a copy of a sprite that you’ve created. Extra code can be added to give the clones code that runs when they’re created.

This tutorial shows how to create an example of simple clones that move around the screen and recognise when they collide with each other.

In more complex games like the Bug Spawner Game, you may need to have clones of two different sprites looking out for each other. But let’s start slowly!

Start by creating a new sprite that is a simple square on the stage.

when green flag clicked
hide
set [clone id v] to [1]
repeat (6)
    create clone of [myself v]
    change [clone id v] by (1)
end

In the code of the square, create a starting block for when the green flag is clicked.

We hide the original square sprite because it’s the spawns that we want to add the “real” code to.

Before we can create this code, we need to create a “local” variable called clone id. We do this by checking the “For this sprite only” option when we create the new variable.

We start by setting the value of clone id to one because we want it to start counting once we start creating our clones.

By adding a repeat block we can decide how many squares we want to add to the stage. I’ve used 6 here, but you can choose any number (I’d recommend less than 10 though!).

We’re going to create 6 clones of the square and each time increase the clone id variable by one – this will give each clone it’s own number and let us check whether that clone has collided with something.

Moving The Clones

Once a clone is created in our loop, we want it to move around the stage and bounce off the edges.

when I start as a clone
show
go to [random position v]
point in direction (pick random (1) to (360))
forever
    move (4) steps
    if on edge, bounce
end

The “When I start as a clone” starter block will only run if a new clone is created.

Because we hid the original square sprite, we need to make sure that the clone is visible when it starts.

To make the random movement easier, we can send each new clone to a random position, then point in a random direction so that when it starts moving, they’re all bouncing in different random directions.

There’s no real end to our simulation (apart from clicking stop), so a forever loop lets the movement & bouncing off the walls just go on forever.

At this point you will be able to run your code and see your clones squares bouncing around the screen.

Tracking The Clones

Before we can start detecting whether they’ve collided, we need to store some important information about each clone: the x and y coordinates.

Because we have more than one clone, we need to track each one. We can do this with a list.

In the Variables menu, create a new “global” list called “square x”. We make this global by selecting “For all sprites” when the list is created.

Repeat this, and create another list called “square y”.

When you’ve created the lists, make sure that you have the visible on the screen checkbox selected.

When you can see the lists on your screen, click the + icon at the bottom to add six items to each list. Each item will match a clone, so if you have chosen a different number of clones, the number of items in your list must match the number of clones you chose to create.

The final part for tracking is to add two extra blocks of code into the clone’s forever loop which saves the clone’s x and y coordinates into it’s place in the list (clone 1 will store it’s x & y coordinates in place 1, clone 2 will store it’s x & y coordinates in place 2… etc.).

We use the replace block because we want to constantly track each clone’s position as it moves.

The round block makes sure that we’re storing whole numbers so to make checking the position easier.

If you keep your lists displayed on the stage and run your code, you should see the numbers in the lists constantly updating as the circles move around the stage.

If everything is working, uncheck the boxes next to each list so that your lists are hidden on the stage (this makes the shapes easier to see and you can always make them visible again if you want to test the code).

Note: if the numbers don’t update when you run the code, you may not have set the clone id to “for this sprite only” (local). The easiest way to fix this at this point is to delete the variable and recreate it making sure it is local.

Checking if the Clones Collide

The collision block uses some big IF statements, so we’re going to break down building this section into smaller stages!

when I start as a clone
forever
    set [color v] effect to (0)
    set [check for square v] to [1]
    repeat (length of [square x v])
 
 end
 end

Add another starting “When I start as a clone” block. You may want to put this underneath your other code blocks as some of the lines end up quite long!

We want this to be checking for collisions all the time that the program runs, so a forever loop will go around all of the code.

Setting the colour effect to 0 keeps the square at the original colour we designed (remember “color” because Scratch is built in the US).

We’re going to check all of the cloned squares in our list, so we need to create a new variable called “check for square”. This will start at 1, then count through each clone’s id number.

Then add a repeat block which will loop as many times as the items in your lists. Because the square x & square y lists are the same size, it doesn’t matter which one you add here.

when I start as a clone
forever
    set [color v] effect to (0)
    set [check for square v] to [1]
    repeat (length of [square x v])
    if <not <(clone id) = (item (check for square) of [square x v])>> then
 end

 end
 end”></p>
</div>



<div class=

Inside the repeat block, we’re going to add an IF block.

This checks to see if the clone we’re looking at is the same as the one we’re testing for collision with (we don’t need to check if it collides with itself!).

So this will only run if the block to check isn’t the current clone.

Inside the IF block we just placed, we’re going to add the first of our really long IF conditions. This will check if the x coordinate of the current clone is in the same range (about 20 x 20 pixels in size) as the x coordinates in the list of the clone to check.

In the example below, the lower square clone would be a collision as its x co-ordinate is 115 which is between the 105 plus 20 (for the width).

Checking for x coordinate collisions

Inside this long IF block is another which is very similar, but checks for the Y coordinates of each clone. If we only had the first long IF block, any time the square clones were at the same point left to right, a collision would be detected (even if they were at the top & bottom of the stage).

So if the IF block for the IF finds a collision, we need to go on and check the y coordinate too.

when I start as a clone
forever
    set [color v] effect to (0)
    set [check for square v] to [1]
    repeat (length of [square x v])
    if <not <(clone id) = (item (check for square) of [square x v])>> then
    if <<(x position) < ((item (check for square) of [square x v]) + (20))> and <(x position) > ((item (check for square) of [square x v]) – (20))>> then
	if <<(y position) < ((item (check for square) of [square y v]) + (20))> and <(y position) > ((item (check for square) of [square y v]) – (20))>> then
	end
	end
 end

 end
 end”></p>



<p>Finally, we need to decide what to do if two clones collide. For this experiment, we’re going to change the colour, but you could make the clone disappear by deleting the clone, playing a sound, or updating a score…</p>



<p><img decoding=

Single clone collision program

What did you do with your clone program? Let me know below!