IAN LANG ELECTRONICS

What we are going to do here is take two independent sprites and make the movement of one entirely dependent on the movement of the other. This is the basis of many animations particularly in games and cartoon films.

Coding for Primary Schools

Back to Title

Making Two Sprites Move Together

catshadow

We are going to build on what we have done already and take our cat and give him an elliptical shadow as on the left, which will follow him all over the screen.

To do this we need to put in another block that will refer to a variable. Hence we need to make a variable, but before we do any of that we need to draw the sprite.

The finished project for this can be viewed here:

scratch.mit.edu/projects/48125108/ spritewindow

Let's make that ellipse. First of all have a look at the sprites window. You're looking for the paint new sprite icon which is shown below marked in red:

When you click on that you'll be faced with this:

drawingwindow

There are two modes you can paint in,  bitmap and vector. Vector is the more easily malleable but bitmap is more drawing friendly. Bitmap is the one we need first and if your bottom left of the window looks like this (note the arrow) leave it as it is.

vector

If that button says "Convert to bitmap" the bit above it will say Vector Mode. click the button to get into bitmap mode so that it looks like the above.

What we are going to do now is draw a filled grey ellipse, First we need to choose our colour:

The greys are on the top of the palette. Choose a lightish one. Your choice is shown in the box to the left of the palette. Now from the drawing tools, as shown below highlighted in blue, choose the ellipse tool but DON'T DRAW THE ELLIPSE IN YET.

greys ellipse

Before you draw the ellipse you need to select filled or outline. We want our ellipse filled and so choose this:

fill

Now draw in a big, bold, grey ellipse. Don't worry about precision yet, just click in there and drag an ellipse out. Make it look like the one on the right.

When you click off the ellipse, you'll see it come in to your viewer. It could look like this:

drawellipse wrong

It's far too big and it's in the wrong position. We don't care about that yet. We need to draw the thing out and then get it into position. Now we're going to choose the fill tool from the toolbox:

filltool

And from the bottom left hand a gradient fill:

gradient

Now click in the middle of your ellipse to get this:

filledelipse undo

If you make a mistake when drawing you have a very good friend in the undo button. That's him above on the left, and you'll find him on the top and centre of the drawing window. Click on him to go back to where you were last happy with your drawing.

That's the drawing part done. We can't really scale properly in bitmap mode and so as I explained above convert it to a vector graphic:

vector

and the screen will change to this:

vectormode

The blue arrow highlighted in the top left hand corner is the selector; it should highlight by default when you switch to vector mode but if not then select it. Over the page we'll look at scaling and positioning.

More >