Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more

2. Make it Rain


In this video, you will program the rain sprite to repeat moving from the top of the screen to the bottom. This will make it look like it’s raining in your story.

When you look at this example, it might appear as though there are thousands of little rain sprites. It’s actually one large rain sprite that scrolls from the top to the bottom of the stage, then repeats. First, set a starting position for the rain.

From the motion menu, select a “go to x, y” block.

Every position on the stage has an x and y value. X values determine left and right positions, and Y values determine up and down positions. To see the x and y numbers for a position on the stage, place your mouse pointer on the stage and read the x, y coordinates shown below it.

A “go to x, y” block sets the center of the sprite at the position you type into the white value blanks.

For example, the top of the stage is Y = 180. So, enter 180 for the Y value and 0 for the X. This will make the sprite go up to the top of the stage, and keep its left-right position the exact middle of the stage. When you click on this block to test it, you may notice that the rain sprite still takes up the entire stage. That’s because it is so huge. You need to make the sprite start really far up, so it can glide down and look like rain is falling.

Drag out a “glide” block, and attach it to the “go to” block.

Looks like the bottom of the stage is Y equals negative 180. This is where the middle of the sprite will move to when it glides. Enter negative 180 into the Y spot on the “glide” block. Try it out!

Watch it glide by clicking the block stack.

Great! The rain sprite now starts at the top of the stage and scrolls down to the bottom. Now, you could duplicate this block stack a bunch of times to keep your rainy day going. Or, you can just program it to repeat.

From the control menu, drag out a “forever” block.

To tell the computer what actions should be repeated, place the “forever” block around your block stack. Now, the computer will repeat these two blocks forever, or until you tell it to stop. The sprite will go to the top of the stage, then glide to the bottom, go to the top of the stage, then glide to the bottom… and so on. Now, it looks like it’s raining in your story! Tinker with the “seconds” value in the “glide” block to change the speed at which the rain is falling. A longer amount of time will make the rain fall more slowly.

And a smaller number will make the rain fall faster.

Finally, add a way for your audience to start this story. Go to the events menu, choose a “when flag clicked” event, and place it at the top of this block stack so the story begins when a user clicks the flag. Try it out.


In the next step, you’ll program the lightning flash.

arrow_backward Back
Next arrow_forward
  1. Set the starting position of the rain.
  2. Set where the rain will go to.
  3. Make the rain keep falling forever.
  4. Start the code when the green flag is clicked.