Skip to content

Please update your browser

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

arrow_back Shrinking Sprite


In this add-on, you'll make one of your sprites shrink if the mouse touches it. This will make it difficult, but not impossible, for the user to click on this sprite.

To get started, click one of the sprites.

To make the sprite shrink, change the sprite's size using the "set size" block. Enter a percentage smaller than sprite’s original size, which is 65% here. In this example, the new size is set to 10%. Experiment with different values until you get the effect that you want.

To make the sprite shrink when it touches the mouse, use an "if-else" block from the control menu. Add the "if-else”block" to the bottom of the "when green flag clicked" block stack. Next, from the sensing menu, pull out the "touching" block, and add it to the “if” portion of the "if-else" block. If necessary, change the value to "touching mouse-pointer." Now, the code reads: IF the sprite is touching the mouse-pointer, THEN do something.

Make the sprite shrink by adding the "set size to" block you dragged out earlier to the "then" portion of the "if/else" block.

Next, make the sprite return to its original size. Drag a "set size to" block into the "else" portion of the "if/else" block. Change the value in the "set size to" block to the original size of the sprite. In this example, the sprite was originally 65%, because its size was already reduced slightly. Now, test the code. When the sprite touches the mouse pointer, nothing happens! That's because when the green flag is clicked, the program checks only once if the sprite is touching the mouse pointer. To make the program continually check if the sprite is touching the mouse pointer, add a forever loop around the "if-else" block.

Now, test the code again.

Well, that's not what you want! The sprite changes between its original and smaller sizes too quickly. When the panda shrinks, it's no longer touching the mouse pointer. When it's not touching the mouse pointer, it changes back to its original size.

To fix this bug, add a "wait" block under the "set size to" block that makes the sprite shrink.

Test the code again. There, that looks much better. Feel free to experiment with the values in the “wait” block. Use the Notes and Credits to thank anyone who helped you as you built this project, like your Gurus or your fellow club members.

Now, it's your turn. Use an if-else block in a loop to continually check if the sprite is touching the mouse pointer If the sprite is touching the mouse pointer, make it shrink with the "set size" block, then wait. Else, set the size back to its original size.

The sprite will always check if it's touching the mouse pointer, and it will change its size accordingly.

Choose an Add-On
Spinning Celebration
Program a sprite to spin and change color when a user clicks on it.
Shout it Out
Program the sprites to react when a particular sprite is selected.
Shrinking Sprite
Make one of the sprites shrink if the mouse touches it.
Secret Votes (Challenge)
Make the vote count for each sprite secret.
Pick Me (Challenge)
Make a sprite demand to be picked whenever the mouse-pointer touches it.
Extra Cool Factor (Challenge)
Program sunglasses to fall from the sky onto your favorite sprite's face.
arrow_backward Back
Next arrow_forward
  1. Choose an Add-On, and click "watch" to learn how to build it.
  2. Once you finish one Add-On, try another one below the video!