Transparent Scrolling Credits

Introduction

This code uses the CGDIThread class from the MTGDI MFC sample source code for the interface thread. The transparent blitting is accomplished using the "True Mask Method" explained in the article "Transparent Bitmap - True Mask Method" by Paul Reynolds.

The text and bitmaps of the credits are printed on a memory bitmapped during initialization. The memory bitmap is then blitted to the screen repeatedly, each time starting at the next row, giving the effect of scrolling.

The CCreditsThread class does all of the initialization and drawing of the credits. The fonts and colors that will be used are initialized, followed by the actual contents of the credits.

The demo uses a dialog with an image covering it's entire surface. The credits can be displayed anywhere on the dialog. Whatever is behind the area the credits are displayed in will be used for the background of the scrolling.

The transparent color in the demo is white, but it can be changed to whatever you like by changing the MASK_RGB #define in the CreditsThread.cpp file. Anything that uses the transparent color will not show up. This includes text and areas on bitmaps. If you wanted to use text that is the same color as the transparent color then use a color that is close to the transparent color.

Example:

RGB(255, 255, 255);   // transparent color
RGB(250, 250, 250);   // text color

Any available font face can be used. The fonts are initialized in the InitFonts() function using the LOGFONT structure and are added to an array of CFonts for quick retrieval. This also allows a large number of different fonts to be used.

The font colors are initialized in the InitColors() function. Font color is independent of the font face being used. Any color can be used with any face, without having to create a new font. The font colors are also added to an array for quick retrieval.

The actual contents of the credits are initialized in the InitText() function. The credits are stored as text strings describing the attributes and the content of each line.

void CCreditsThread::InitText()
{
	// 1st pair of digits identifies the font to use
	// 2nd pair of digits identifies the color to use
	// B = Bitmap
	// S = Space (moves down the specified number of pixels)

	CString sTmp;

	// start at the bottom of the screen
	sTmp.Format(_T("S:%d"), m_rectScreen.Height());
	m_arCredits.Add(sTmp);

	m_arCredits.Add(_T("02:04:Transparent"));
	m_arCredits.Add(_T("02:04:Scrolling Credits"));
	m_arCredits.Add(_T("S:35"));
	m_arCredits.Add(_T("01:00:Insert Bitmaps"));
	m_arCredits.Add(_T("S:10"));
	m_arCredits.Add(_T("B:JENNIFER"));
	m_arCredits.Add(_T("S:35:"));

	// pause before repeating
	m_arCredits.Add(_T("S:30"));
}

Text Lines

"02:04:Text to display"

The first 2 digits are in index into the array of fonts to describe the font face to use for that line. Each line of text must specify the font to use. The font number must always be formatted as a 2 digit number at the beginning of the string. Following the font number is a colon.

The next pair of digits are an index into the array of font colors, specifying the color to use for that line of text. The color index must also be formatted as a 2 digit number. The color index is followed by a colon.

The next part of the string is the actual text to display.

Bitmaps

"B:BALL"

The bitmap resource must have a quoted name, like "BALL", instead of the customary style ID like IDB_BALL.

Spacing

"S:25"

The number specifies the number of pixels to move down. Lines of text are automatically spaced one line. You can also use spacing to cause the credits to start scrolling from the bottom of the screen initially, or to simulate a pause before the next section of credits is displayed, or until the credits are repeated.

To use in your own projects

• Add the following files to your project:
  • GDIThread.cpp
  • GDIThread.h
  • CreditsThread.cpp
  • CreditsThread.h
  • CreditsDlg.cpp
  • CreditsDlg.h
• Modify the CreditsDlg file to match the dialog you will be using. (ie. set the IDD constant and delete any unused message handlers)
• Determine where on your dialog the credits will be displayed and set the SCREEN_ #defines in the CreditsDlg.cpp file to indicate this.
• Edit the font types you will be using in the InitFonts() function in the CreditsThread.cpp file.
• Edit the font colors you will be using in the InitColors() function in the CreditsThread.cpp file.
• Edit the text for the credits in the InitText() function in the CreditsThread.cpp file.
• Add any bitmaps resources you will be using. Remember to give them a quoted name in the "ID:" field.
• Place the following line in the InitInstance() function of your main application object.

  InitializeCriticalSection(&CGDIThread::m_csGDILock);
  

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here