Using graphical effects to distort a picture

Lead Image © kudryashka,

Guessing Game

In this guessing game, graphic effects distort sprite costumes while the player tries to guess the animal shape. The game is creatively scored based on how much the shape is distorted.

If I show you a picture of an animal, can you guess it? I expect most of you to respond with, "yes, I can." In this project, I put a player's recognition skills to the test with a guessing game that asks the player to guess a distorted animal shape. I'll provide the scripts to build two versions of this game. The simple version of the game will play one round, and then I'll show a more advanced version that takes the player through three rounds.

Before I jump into the code, here's how the game works: The game will show an animal image distorted with graphical effects, and the player will try to the guess the animal. The game will slowly reveal the animal until the player guesses correctly. As the game shows more of the animal, the potential points earned for a correct guess become less; incorrect guesses are penalized.

Figure 1 shows the finished game. The bigger shape in the middle is the distorted animal shape to guess. The row of smaller animal images at the bottom are the available guesses. The player guesses by clicking on one of the animals at the bottom. As you can see in Figure 1, I included six possible sprites to choose from at the bottom of the stage.

Figure 1: A screenshot of the finished guessing game. The player guesses the animal by clicking on the sprite.

Figure 2 shows the script that each of the six sprites use to initialize its starting position and size. You could resize the sprites and drag them into position, but this initialization script always ensures they show up correctly if the player gets wild during game play and inadvertently drags the animals around the stage.

Figure 2: The scripts to position the six guess sprites and evaluate the player's selection.

The positioning happens relative to the x position of the sprite to the left of it. Because the first sprite in the list is the bee, you can just position it with absolute values: x = -204 and y = -130. Figure 2 shows the script for the clam sprite. The clam maintains a constant y position, but the x position is calculated relative to the x position of bee + 80, which shifts the sprite to the right. The grasshopper sprite uses the same positioning calculation. It will calculate its position relative to the x position of the clam plus 80, and on it goes.

Also shown in Figure 2 is the script that checks the player's answer. The clam sprite is checking to see if the costume number of the Animals sprite is equal to six. When you look at the Animals sprite, you won't be surprised to see a clam as costume number six. If the currently displayed animal costume matches the sprite, I send a broadcast message, You guessed it! A wrong answer (as shown in Figure 2) results in a five point penalty, and the round continues.

Figure 3 shows the scripts attached to the Animals sprite. The second stack of blocks starts with the when I receive (You Guessed It!) block. It calculates the score and ends the game.

Figure 3: The scripts to display and score the single-round version of the Guess that Animal game.

Now, I'll look at the first stack of blocks in Figure 3; this script initializes and controls the Animals sprite. When I initialize the Animals sprite, I use some blocks to help mask the identity of the animal by changing the color and rotating the sprite to an orientation that's different from the choices at the bottom. I am also increasing the size because that could make it harder to guess. At the very least, that helps fill the stage, which is a pleasing design; I'll let you explore whether changing the size of the animal affects the difficulty of the game.

After a random costume is displayed, the script enters a loop that will repeat until the value of the points variable equals 0. This represents the main challenge in the game. The sooner the player guesses the correct animal, the more points the player earns.

With each pass through the repeat until loop, more of the animal is revealed by reducing the value of the pixelate effect. At the start of the game, the points variable is set to 110, representing the maximum number of points available, but the points decrease each time through the loop by -10. I originally saw this way to correlate the score to the value of the effect in a Code Club Worlds Project game [1], but that project does not appear to be available any longer.

By using the points variable as the value by which to change the pixelate effect, it is always decreasing toward a value of zero. Zero represents a "normal" non-pixelated image. In Scratch, there's no real limit to the value that you can assign to the pixelate effect, but there is generally going to be a point where adding more effect is not noticeable.

The other effect I'm using inside the repeat until loop is the ghost effect, which determines the transparency of the sprite. The value 0 is fully visible, and 100 is invisible (transparent). The script in Figure 3 results in two competing effects. As the image is revealed by undoing the pixelation, it becomes more transparent and therefore may maintain some difficulty.

Set Effect vs. Change Effect

As my script shows, it's possible to interact with the effect by changing or setting a value. The difference is that the set () effect to () block assigns the specified value to the block. In the context of the script in Figure 3, the first pixelate value is set to 110. The current value does not matter.

When the change (ghost) effect by (8) command runs, it's adding a value of 8 to the current ghost effect value. That means the ghost value will increase by 8 every two seconds (or whatever value you enter in the wait () secs block. It will go 0, 8, 16, and so on. If the player doesn't guess the shape, the maximum ghost effect will be 88 because the loop will run a maximum of 11 times before the points variable is reduced to zero, stopping the game.

Multi-Round Remix

The game as described so far is a single round, single shape challenge. However, I wanted a challenge that allowed two friends to take turns playing and that would be more competitive. I remixed the game into a multiround version. This remix creates a broader number of possible points, but it also creates a slightly more complicated game to program.

Working through three rounds instead of one means that the Animals sprite not only needs to know whether or not the player guessed the animal, but it has to track the total number of animals shown.

The revised script for the Animals sprite is shown in Figure 4. To keep track of the rounds, the script that displays the animal to guess is now triggered with a broadcast message called Start Round, which is sent at the beginning of the game and after a player guesses the animal.

Figure 4: A multiround remix of the game that plays three rounds.

The first control I added was a new guess variable so that I could know when the player correctly guessed the shape. Now the script will repeatedly set the pixelate effect and change the ghost effect until the value in the points variable equals 0 or the guess variable is equal to 1.

With each correct guess, the first thing that happens is to set the guess variable to 1. This stops any more effects from running on the Animal sprite while the game gets ready to display the next round.

If the player does not guess the animal before the points tick down to zero, then the animal shape will be revealed, and the game will not advance until the player correctly chooses the animal. Note, however, that at this stage, the player receives no points for a correct guess. In Figure 4, this evaluation happens with if ((guess) = (0)).

Of course, you don't want the game to go on forever, so it's important to track the number of rounds. In this case, I chose to play three rounds and track progress using a new round variable. The game ends after the play completes three rounds (see the "Questions to Ask" box for more challenges).

Questions to Ask

By using several of the graphical effects available in Scratch, you can see how easy it is to change the appearance of sprites. As you look at the game, think about some other ways you can use the graphic effects to enhance the game.

Here are some questions to get you thinking about using effects and building on the existing game:

  • How can you apply an effect to the sprites the player clicks on to show that the player clicked the sprite (e.g., to signal a correct or incorrect guess)?
  • What else can you do to make the game more or less challenging through effects, size, or other blocks.
  • In the multiround game, can the same animal show up more than one time? Can you change it?

Buy this article as PDF

Express-Checkout as PDF

Pages: 4

Price $2.95
(incl. VAT)

Buy Raspberry Pi Geek

Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content