Parola A to Z – Sprite Text Effects

sprite_ghostA recent feature of the Parola library is sprite based text effects. This extends the functionality of the library to include fully customisable, user defined, animated bitmaps to wipe text on and off the LED matrix display.

Here’s how it works.

What is a sprite?

In computer graphics, a sprite is a two-dimensional bitmap that is integrated into a larger scene (in our case, the matrix display). To create an animated sprite, a series of bitmaps is created that will cycled during display, providing individual frames for the animation.

Defining the sprite

sprite_ghost_annotatedEach frame is defined by a sequence of numbers that encode the columns of the bitmap. In the example on the left (a Pacman ‘ghost’ character), each column of bits is represented by the hexadecimal number at the base of the bitmap. The least significant bit is at the top of the bitmap. If the sprite has a front and rear, the bitmap should be defined for the sprite moving to the right. The library will mirror reverse the image when it moves left.

The sprites are essentially defined in the same way as the character font (described in this previous post) and the same tools can be used to define the data for the sprite bitmap. Note that, like the font definition, the sprite is stored in PROGMEM to save RAM space.

A sprite has at least one frame. If more than one frame is required, a similar definition is created for each frame of the animation, and a data table constructed defining the animated sprite, as shown in the code snippet below, which is for the ghost character with shifting eyes.

Two convenience constants are used to define the sprite, one for the width (number of bytes) data for one sprite and the other for the number of frames contained in the animation. The total number of bytes required is the width * number of frames.

const uint8_t F_GHOST = 2;
const uint8_t W_GHOST = 7;
static const uint8_t PROGMEM ghost[F_GHOST * W_GHOST] =
{
 0xfe, 0x7b, 0xf3, 0x7f, 0xfb, 0x73, 0xfe,
 0xfe, 0x73, 0xfb, 0x7f, 0xf3, 0x7b, 0xfe,
};

To ensure smooth animations, you should remember that once the last frame is reached, it will loop back to the first. Avoid discontinuities between the two ends of the data table.

Using the sprite

When displaying text, the sprite leads the appearance of the text displayed in a zone (travelling left to right) and wipes the text off the display (travelling right to left).

To use your sprite, the library needs to be passed the sprite definition for the entry and exit effects before the animation is started using the setSpriteData() method. The text effect is specified in the usual way using the effect id PA_SPRITE. The library will take over from there and manage the animations as required.

An example program showing the definition and use of various sprites text effects is available in the library example folder and can be seen working in the video below.

Advertisements

13 thoughts on “Parola A to Z – Sprite Text Effects

    1. PLEASE DON’T POST IN UPPERCASE. It is considered as yelling in forums and comments.

      The article contains links to the library when the library is mentioned. The first link is in the opening sentence of the blog post. Please follow the link and you will find all the resources and examples available for the MD_Parola library.

      Like

  1. Hi,
    When I try the sprite samples, I get this error – invalid conversion from ‘const uint8_t* {aka const unsigned char*}’ to ‘uint8_t* {aka unsigned char*}’

    Any help is appreciated.
    Thanks for the amazing work!

    Like

      1. Paul G

        Could you show how to convert samples to ESP8266 architecture please?
        I tried to cast parameters in function call as uint8_t, but now it shows another error message:

        cast from ‘const uint8_t* {aka const unsigned char*}’ to ‘uint8_t {aka unsigned char}’ loses precision [-fpermissive]

        Like

  2. hey Marco. can you give me the code in the video above because i cant really see the full details of how to program it and where all the coding has to go. it would be really helpful. thanks

    Like

  3. Beautiful work Marco. The simplicity of implementation and inclusion of convenience functions set an example of how to do it right. The MD_Parola library and your explanations are wonderful, particularly to less skilled coders like me.

    Like

  4. Riccardo

    Hello Marco, I saw the test listing and I tried to understand, some things I understood, but I could not figure out how to put different messages with just one sprite.
    Thank you for your availability.
    Ciao Riccardo

    Like

  5. Just amazing, and I finally learned how to change the way of scrolling if the matrix is going up instead of to the left or right.
    It can be changed in the file inside the library – so simple.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s