PencilCoder

Custom-Drawn Sprites!

Goals:

  • Design your own sprites
  • Continue to develop proficiency working with animation queues

Coding Snippets:

  • coding snippets
  • The Sprite constructor works similarly to the Turtle constructor.
  • Pass a color to the Sprite constructor to change the background color. Choose color transparent to hide the background rectangle completely.
  • drawon causes one sprite to draw on another. Set the drawon argument to window to make a sprite stop drawing on another sprite and go back to drawing on the background instead.

Math and Computer Concepts:

    Coding Example
  • Create a blank sprite using the syntax new Sprite, then enable editing using the drawon function. For example, to create an ant which then moves about, use the code on the right.
  • Aside from telling a sprite to stop drawing on another sprite, the function call drawon window implicitly calls the sync function, which prevents the sprite that is being drawn on from moving until the sprite doing the drawing is finished.
  • Omitting the call to drawon window can really mess things up. In the ant example, if you leave out this line, you will get a "smeary ant." (Copy the code, and try it out for yourself!)
  • drawon is a sprite-specific function. Use dot notation to have a sprite other than the default turtle do the drawing. For example, r.drawon s causes sprite r to draw on s.

Activities:

Save each of the following in a folder called Sprites.

  • SpiralSprite: create a Sprite that has a spiral drawn on it. Then, move this spiral around the screen and make it spin.
  • SpinArt: Intentionally leave out drawon window to create a sprite that looks like it had paint dribbled on it when it was spinning. Experiment with different speeds for each sprite (potentially mixing it up using the random function) to get the desired amount of smearing.
  • Create a SpaceShip and sail it around the screen. Enhance your program by drawing a starry sky for the background.
  • walker image1 walker image2
    Create a Walker, which will consist of two versions of the same sprite. Make them move in unison, but alternating which one is visible, to give the illusion of legs moving. To improve the animation, use speed Infinity and have the sprites pause half a second before taking another 'step'.