Bitmapped Fonts, WordWrap and ImageStrips!

[PeeJay]

This is the routine I am using to draw bitmapped fonts onto the screen. I have also added a function to enable word wrap.

Since the font is a single image, it also demonstrates a very simple way of using ImageStrips.

Code (glbasic) Select Expand

//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//
//                                                                      //
// Project: Bitmapped Font Printing for GLBasic                         //
//          Example of Imagestrip Usage                                 //
//          Word Wrap Function                                          //
//                                                                      //
// (C)opyright PeeJay December 30th 2007      www.peejays-remakes.co.uk //
//                                                                      //
// Code is free to use for FREEWARE projects only, though credit would  //
// still be welcomed if you decide to use it                            //
//                                                                      //
// Please contact me through my website for conditions on using this    //
// code in shareware, commercial, or other revenue generating projects  //
//                                                                      //
// This code shows an example of how you can use any bitmapped font     //
// without the limitations of the standard GL Basic routines. The font  //
// is stored in an imagestrip. There is also a simple function to allow //
// for a word wrap facility.                                            //
//                                                                      //
// Functions are currently coded for a screen width of 640, and for a   //
// font with individual character size 24x24 (all easily changed!)      //
//                                                                      //
//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//

SETSCREEN 640,480,0 // 640x480 Window
LIMITFPS 60 // at 60 frames per second

LOADSPRITE "glfont.png",0

DrawText("PRINTING EXAMPLE",-1,20) // -1 = centralised

DrawText("LEFT",10,80)
DrawText("RIGHT",510,80)

WrapText("THIS TEXT IS AN EXAMPLE OF THE WORD WRAP FUNCTION IN ACTION",104,200,18)

SHOWSCREEN
KEYWAIT
END


FUNCTION DrawText: pjtxt$,pjtx,pjty

// Usage - text$, x co-ordinate (-1 for centralised), y co-ordinate

IF pjtx=-1 THEN pjtx=(640-LEN(pjtxt$)*24)/2
LOCAL pjloop,pjcr
FOR pjloop=0 TO LEN(pjtxt$)-1
pjcr=ASC(MID$(pjtxt$,pjloop,1))-32
VIEWPORT pjtx,pjty,24,24
DRAWSPRITE 0,0-(pjcr*24),0
VIEWPORT 0,0,0,0
pjtx=pjtx+24
NEXT

ENDFUNCTION

FUNCTION WrapText: pjw$,pjwx,pjwy,pjmax

// Usage - text$, x co-ordinate, y co-ordinate, max chars per line

LOCAL pjloop,pjtemp$

WHILE pjw$<>""
IF LEN(pjw$)<(pjmax+1)
DrawText(pjw$,pjwx,pjwy)
pjw$=""
ELSE
pjloop=pjmax
pjtemp$=pjw$
WHILE MID$(pjw$,pjloop,1)<>" "
pjloop=pjloop-1
WEND
DrawText(MID$(pjw$,0,pjloop),pjwx,pjwy)
pjwy=pjwy+24
pjw$=MID$(pjtemp$,pjloop+1,LEN(pjtemp$)-pjloop)
ENDIF
WEND

ENDFUNCTIONYou'll also need the font, which is here:

http://www.peejays-remakes.co.uk/gifs/glfont.png

At the moment I have only done the uppercase letters (but only because I couldn't be bothered to add lower case ones to the image!)

Hopefully someone will find it useful!

[Ian Price]

Nice

[Kitty Hello]

VIEWPORT! Now, that's an awesome way of solving this problem. Never thought of that.

[AndyH]

Viewport is a really useful command and works well.  However I have found a performance hit compared to displaying each as an individual sprite.

I've been looking at making a tilemap routine for displaying a level where I've made a large image of say 32x32 tiles laid out across the image, so very much like the excellent code posted above.

I've then tried using VIEWPORT to display a number of tiles on screen.  I can get 3000 tiles with VIEWPORT cropping down to the specific tile I want before I see a performance hit.

When I use the GRABSPRITE method and put each tile into it's own sprite I can get over 10,000 sprites - quite a difference.

I've also tried using POLYVECTOR.  The performance with this is not as good as VIEWPORT, the following snippet gives me around 720 objects before I get a performance hit.

Code (glbasic) Select Expand

STARTPOLY 0
POLYVECTOR x,y, 0,0, RGB(255,255,255)
POLYVECTOR x,y+32, 0,32, RGB(255,255,255)
POLYVECTOR x+32,y+32, 32,32, RGB(255,255,255)
POLYVECTOR x+32,y, 32,0, RGB(255,255,255)
ENDPOLY(x and y are the positions on the tilemap in increments of 32 - the size of my tiles)

It seems that, for me at least, that cutting up the tilemap into separate sprites gives the best overall performance.

While 10,000 or even 1,000 may be a large number, it's sometimes best to look for the fastest route especially when considering deploying your code on slower PC's or even slower devices such as Pocket PC's and the like.

[PeeJay]

Thanks for Gernot's latest update, the code can now benefit from the built in imagestrips - thus:

Code (glbasic) Select Expand

//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//
//                                                                      //
// Project: Bitmapped Font Printing for GLBasic                         //
//          Example of Imagestrip Usage                                 //
//          Word Wrap Function                                          //
//                                                                      //
// (C)opyright PeeJay December 30th 2007      www.peejays-remakes.co.uk //
//                                                                      //
// Code is free to use for FREEWARE projects only, though credit would  //
// still be welcomed if you decide to use it                            //
//                                                                      //
// Please contact me through my website for conditions on using this    //
// code in shareware, commercial, or other revenue generating projects  //
//                                                                      //
// This code shows an example of how you can use any bitmapped font     //
// without the limitations of the standard GL Basic routines. The font  //
// is stored in an imagestrip. There is also a simple function to allow //
// for a word wrap facility.                                            //
//                                                                      //
// Functions are currently coded for a screen width of 640, and for a   //
// font with individual character size 24x24 (all easily changed!)      //
//                                                                      //
//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//

SETSCREEN 640,480,0 // 640x480 Window
LIMITFPS 60 // at 60 frames per second

LOADANIM "glfont.png",0,24,24

DrawText("PRINTING EXAMPLE",-1,20) // -1 = centralised

DrawText("LEFT",10,80)
DrawText("RIGHT",510,80)

WrapText("THIS TEXT IS AN EXAMPLE OF THE WORD WRAP FUNCTION IN ACTION",104,200,18)

SHOWSCREEN
KEYWAIT
END


FUNCTION DrawText: pjtxt$,pjtx,pjty

// Usage - text$, x co-ordinate (-1 for centralised), y co-ordinate
   
    IF pjtx=-1 THEN pjtx=(640-LEN(pjtxt$)*24)/2
    LOCAL pjloop,pjcr
    FOR pjloop=0 TO LEN(pjtxt$)-1
        pjcr=ASC(MID$(pjtxt$,pjloop,1))-32
        DRAWANIM 0,pjcr,pjtx,pjty
        pjtx=pjtx+24
    NEXT

ENDFUNCTION

FUNCTION WrapText: pjw$,pjwx,pjwy,pjmax

// Usage - text$, x co-ordinate, y co-ordinate, max chars per line

    LOCAL pjloop,pjtemp$

    WHILE pjw$<>""
        IF LEN(pjw$)<(pjmax+1)
            DrawText(pjw$,pjwx,pjwy)
            pjw$=""
        ELSE
            pjloop=pjmax
            pjtemp$=pjw$
            WHILE MID$(pjw$,pjloop,1)<>" "
                pjloop=pjloop-1
            WEND
            DrawText(MID$(pjw$,0,pjloop),pjwx,pjwy)
            pjwy=pjwy+24
            pjw$=MID$(pjtemp$,pjloop+1,LEN(pjtemp$)-pjloop)
        ENDIF
    WEND

ENDFUNCTIONThanks Gernot - much better now

[AndyH]

Excellent job PeeJay!

[spicypixel]

Does anyone have the 24x24 font save me making one? Presuming first char is SPACE if not.

[Wampus]

Er, do you mean this one? (attached)

Just checking. Are you using the most recent version updated by Moru?

[attachment deleted by admin]

[spicypixel]

Er, do you mean this one? (attached)

Just checking. Are you using the most recent version updated by Moru?

The attachment goes to a page doesn't exist. Right-clicking grabs the file but in Picasa I get Black Square with Invalid Image in Red so I didn't really trust the download. Just tried opening the attachment in Promotion it's not valid. So a duff attachment if you ask me. Probably how the host works in relation to linking to a file.

[fuzzy70]

I just downloaded it in linux & no problem at all with the image in the preview program or in GIMP 

[okee]

Works fine here also, you could just make one in GLBasic editor (tools>fontcreator)
and download the "Bitmap Font Routines 9" library that wampus gave a link to, it was
also made by peejay and has a lot more features.