Rolling Text

by Gary Rosenzweig

I was recently asked by a client to place a high scores list at the end of a game. The problem was that they didn't leave enough space to list 10 scores. They said they wanted it to roll up the screen like closing credits on a movie. This would make it fit into a smaller space vertically, as not all 10 scores would be visible at once. This seemed easy enough. However, the text had to roll up over a pre-made background image. This made it difficult for me to use other sprites to mask the top and bottom of the list as it rolled up. Instead, I decided that I would make a drag-and-drop behavior that would roll any text list upward in a confined space without requiring any other sprites.

Imaging Lingo seemed to be the way to go. I would take a snapshot of the text member's image and then show only a portion of that text image on the Stage at a time. With each frame, the code will move the image up one pixel, only to show the next piece of the image. Here is the final movie:

In order for the entire image of the text member to get into an image object, I needed to make the text member "Adjust To Fit". This made the text member cover more of the Stage than it should, but that didn't matter since it will be instantly replaced when the movie runs.

The code only needs one parameter to run properly. It needs to know the vertical size of the area where it can scroll. I've set the default to 100 pixels which makes sense for many uses.

One tricky part was that I needed to use a fill command every time I moved the image one pixel so that the old text gets erased.

property pMem
property pImage
property pScroll
property pWidth, pHeight
property pVisibleHeight
property pBackgroundColor

on getPropertyDescriptionList me

  list = [:]
  addProp list, #pVisibleHeight, [#comment: "Visible Height", #format: #integer, #default: 100]
  return list

end

on beginSprite me

  -- get the size of the text member
  pWidth = sprite (me.spriteNum).member.width
  pHeight = sprite (me.spriteNum).member.height

  -- get the image of the text
  pImage = duplicate (sprite (me.spriteNum).member.image)
  pBackgroundColor = sprite (me.spriteNum).member.bgColor

  -- create a new bitmap to use
  pMem = new (#bitmap)
  pMem.image = image (pWidth,pHeight,32)
  pMem.regPoint = point (0,0)
  sprite (me.spriteNum).member = pMem

  -- start the image coming up the bottom
  pScroll = -pVisibleHeight
  setImage (me)

end

on setImage me
  -- fill the image with the background color
  pMem.image.fill (rect (0, 0, pWidth, pVisibleHeight), pBackgroundColor)

  -- place only the piece of the text image that is needed
  pMem.image.copyPixels (pImage, rect (0 ,0, pWidth, pVisibleHeight), rect (0, pScroll, pWidth, pVisibleHeight + pScroll))

end

on exitFrame me
  -- scroll one pixel
  pScroll = pScroll + 1

  -- set back to beginning if done
  if pScroll > pHeight then pScroll = -pVisibleHeight

  setImage(me)
end

on endSprite me
  erase pMem
end

One way to alter this code is to change the exitFrame handler so that it doesn't loop the text around. Instead, it could signal another handler or go to another frame. The resulting behavior would then be perfect for film-style closing credits.

A sample Director 8 movie is available for download in Mac or Windows format.