Rolling Text

January 24, 2001
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.

Gary Rosenzweig's two most recent books are: "Special Edition Using Director 8" -- The most comprehensive guide to Director ever, including tons of examples and demo movies. It's suitable for novices and experts alike. "Advanced Lingo for Games" -- How to make games with Director 7 and 8. This book comes complete with full source code for more than 20 complete games. More information about these books can be found at http://clevermedia.com/resources/bookstore/. They can be purchased there, or in your local bookstore.

Gary Rosenzweig is the Chief Engineer, founder, and owner of CleverMedia, a game and multimedia development company in Denver, Colorado. He is the author of ten books on Macromedia Director and Flash, including his latest, Special Edition Using Director MX.