Tag Archives: graphic effects

Adjust Graphic Effects in Scratch

Adjust graphic effects in Scratch to change the appearance of a sprite. Scratch is a coding app that can be used to introduce programming to children. It is free to use. Scratch has seven effects you can alter including color, fisheye, whirl, pixelate, mosaic, brightness, or ghost. Use the change effect coding block to enhance your projects.

Adjust graphic effects in Scratch.

Adjust graphic effects in Scratch.

TECHNOCODE TECHNOLOGY PROJECT
Tips are taken from the technology project TechnoCode. It includes a storytelling coding unit. Students explore the Looks palette to discover how to adjust the appearance of sprites. They apply their knowledge to animate an adventure in a strange or magical place. Instructional materials include a planning sheet, worksheets, example videos, sample scripts, story checklist, coding journal log, story rubric, Scratch quiz, diorama skill review, and extension activity.

Tips to Adjust Graphic Effects in Scratch

Ideas for Including Graphic Effects

Game Design

  • Attract Attention: Make a target easy to spot. For example, it could bulge using the fisheye effect when it appears on the stage.
  • Score Points: To show that a player has touched a target it could change its appearance. For example, it could distort using the whirl effect.

Storytelling

  • Create a Character: Perhaps your character is a ghost. Use the ghost effect to make them transparent.
  • Illustrate Action: Show an event. For example, if a character drinks potion maybe they change color.


Use Clear Graphic Effects

When you use the change effect the sprite alters its appearance permanently. To reset the appearance, add the clear graphic effects coding block to the script. For example:

Scratch script

Clear graphic effects to return the sprite to its original state.

Repeat the Graphic Effect

You can place the change effect inside a repeat coding block. This will cause a sprite to adjust its appearance many times.

repeat graphic effect

Repeat the graphic effect to have the appearance change many times.

Study the sample script above. You will notice it includes a wait coding block. This slows down the action, to make the changes easier to see. You will also see that it includes a clear graphic effects block at the end of the script to reset the sprite’s appearance (this coding block can also be placed at the beginning of the script).

How Much Should the Graphic Effect Change?

The change effect coding block has a value that can be set. What number should you use? Use the information in the table as a guide.

TIPS FOR SELECTING GRAPHIC EFFECT VALUES
color
  • Change the hue of the sprite.
  • positive values change the color in the following order
    green → blue → purple → pink → red → orange
  • negative values reverse the order from orange to green
  • explore the effect by changing the value by 20 or -20 each time
  • color changes depend on the original color- if the value is 25, a blue sprite will change to purple; whereas a pink sprite will change to red
fisheye
  • Bulge or shrink part of the sprite.
  • positive values expand the sprite to make it bulge
  • negative values contract the sprite to make it shrink
whirl
  • Twist the shape of the sprite.
  • positive values twist the sprite to the left
  • negative values twist the sprite to the right
pixelate
  • Divide the sprite into colored squares.
  • greater values display the sprite as a few big squares
  • lesser values display the sprite as many tiny squares
mosaic
  • Display multiple copies of the sprite in an array pattern, such as 4 x4.
  • greater values have bigger arrays with many duplicates of the sprite
  • lesser values have smaller arrays with a few duplicates of the sprite
brightness
  • Lighten or darken the sprite.
  • positive values increase the brightness
  • 100 turns a sprite into a white silhouette
  • negative values decrease the brightness
  • -100 turns a sprite into a black silhouette
ghost
  • Make a sprite transparent or see-through.
  • values can be between 1-100
  • 100 is fully transparent and removes the sprite from view
  • 1 is opaque which means it is solid