wonderful scrolltext ! love the font and proportional+overlap
great effect (how
)
I loved doing that scroller, I've been meaning to do one for years, and this was a perfect excuse. As to how it works. In essence, it's very simple, but it does have to keep an eye on what it's doing.
The font is a bitmap font where each letter is held in its own rectangle in the rather wide bitmap.
For speed and simplicity, each character is exactly the same width (allows me to calculate the character offset quickly and lazily). If I were to do this again, I would trim the font down and hold a table of offsets, but I was rushing to get this done in time...
So, each character is 40 pixels wide. The scroller can be drawn just like any other bitmap scroller except that it would look just awful.
When a character is drawn, there are three things the routine needs to know.
1. A pre-offset in case we need to start drawing the character before the current x-position
2. How wide the character is (although each character takes up a full 40 pixels width, we don't need to draw it all).
3. A post-offset in case we need to move the final x-position around.
So, to draw the capital letter T, we would first of all have a pre-offset to move the drawing cursor left a bit (the top part of the letter T will overhang stuff to the left). We then draw the whole letter and then move the drawing cursor left quite a bit so that the next character is drawn near the vertical stroke rather than where the horizontal stroke ends.
Another example is a letter with a long tail, like the 'y'. In this case, the pre-offset is quite large as the tail sweeps very far to the left. The letter is then drawn and the post-offset hardly moves as the letter finishes quite neatly.
Of course, to stop things being jaggy, the font is also anti-aliased. In addition, it is also a masked image and that needs to be taken into consideration when drawing the letter onto a textured background to keep things nice and smooth and stop the characters obscuring each other.
This is why the routine crawls a little. Rather than knowing that a 720 wide display will contain 18 characters, it could contain far more, and sometimes a lot of characters will overlap especially when capital letters or letters with tails are involved. This constant moving the cursor backwards means that parts of the screen will be used by many different letters at the same time.
One other thing to be aware of is the general scroll offset. Usually, you shift the initial drawing position left until you've moved a whole character width back and then you increment the string pointer and reset the offset. With this thing, you need to bear the offsets in mind and keep an eye on that, otherwise the font jumps around like crazy.
Oh, and another gotcha is that you never know in advance how many characters you will be drawing. With fixed width, it's easy. With proportional, you need to keep on drawing until you reach a certain x-position which means not only do you need to watch where the main string pointer is in relation to the length of the scrolltext, but you also need to watch the length of the scrolltext in relation to the character you think you'll be drawing next.
If that's as clear as mud, I'll try and explain better. Hmm, I might even throw it together as a standalone proggy with a proper tutorial if people want...