ImageFont Creation and Usage

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|602\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
SoCoder -> Snippet Home -> Text and GUI's

Jayenkai	Created : 05 February 2008 Edited : 06 February 2008 System : Windows Language : Blitz ImageFont Creation and Usage
A "mostly" working ImageFont system. First up, this is the "Makey bob" Save it somewhere, (FontMakey_PeepsHappy.bb seems a nice enough name!) then run it. It'll generate 3 font files, Arial_8.fnt, Arial_16.fnt and Arial_32.fnt Graphics 640,480,32,2 SetBuffer BackBuffer() Global y Global grabwide,grabhigh Global gap=1 ;Default gap between chrs Global fontimg Dim width(256) ;Makefont usage. ; Makefont( Fontname$, Name of the font ; [FontSize], Size of the font. Defaults to 12 ; [DrawStyle], Style, as designed in the DrawChr function below. Defaults to 1 ; [Gap], Gap between chrs. Defaults to 1 ; [Save FileName$] Filename to save as. (with .fnt added on the end!) ; ) MakeFont("arial",8) MakeFont("arial",16) MakeFont("arial",32,2) Function DrawChr(x,y,Ch,style) ; Different draw styles. Select style Case 1 ; Plain Text Color 255,255,255 Text x,y,Chr$(ch) Case 2 ; Slightly 3D-ish For ang=0 To 360 Step 10 Color 180+Sin(ang)70,180+Sin(ang)70,180+Sin(ang)70 Text 101+Sin(ang)1,1-Cos(ang)1,Chr$(Ch) Next Color 180,180,180 Text 101,1,Chr$(Ch) ; Feel free to add your own. End Select End Function Function MakeFont(FntName$,fnthigh=12,style=1,gap=1,savename$="") If savename$="" savename$=fntname$+"_"+fnthigh savename$=Replace$(savename$," ","_") savename$=Replace$(savename$,".ttf","") savename$=Replace$(savename$,".fon","") EndIf tfont=LoadFont(fntname$,fnthigh) SetFont tfont wide=1 high=FontHeight() For n=32 To 127 If StringWidth(Chr$(n))>wide Then wide=StringWidth(Chr$(n)) Next grabwide=Ceil(Float(wide)/8) grabwide=grabwide8 grabhigh=grabwide If high>wide grabhigh=Ceil(Float(high)/8) grabhigh=grabhigh8 grabwide=grabhigh EndIf ; ^ I made sure the font tiles are multiples of 8... That's important when you're trying to load images as textures! fontImg=CreateImage(grabwide,grabhigh,96):MaskImage fontimg,255,0,255 bang=CreateImage(grabwide,grabhigh):MaskImage bang,255,0,255 ClsColor 255,0,255 Cls For n=32 To 127 Cls DrawChr(100,0,n,style) CopyRect 100,0,grabwide,grabhigh,0,0,BackBuffer(),ImageBuffer(fontimg,n-32) hitr=0 hitl=-1 For atx=-1 To grabwide If ImagesCollide(fontImg,0,0,n-32,bang,atx-grabwide,0,0)=0 And atx>hitl Then hitl=atx Next For atx=grabwide To 0 Step -1 If ImagesCollide(fontImg,0-(hitl),0,n-32,bang,atx,0,0) And atx>hitr Then hitr=atx Next If n=32 Then hitr=grabwide0.2:hitl=0 width(n)=hitr+gap+1 CopyRect 100+hitl,0,grabwide,grabhigh,0,0,BackBuffer(),ImageBuffer(fontimg,n-32) If n Mod 10=1 Then Flip False Next ClsColor 0,0,0 Color 255,0,0 Cls y=0 compare "This is a test" compare "0123 ABC abc" compare "The Quick Brown Fox Jumps Over the Lazy Dog." compare "Socoder.Net" compare "SoC - Coming soon! ..." compare "Please wait - Saving Font" Flip SaveFont(savename$) FreeImage fontimg FreeImage bang FreeFont tfont End Function End ;May as well leave the rest as it is! .MakeFont Function Compare(txt$) ImgFont 2,y,txt$ : y=y+grabhigh:Text 2,y,txt$:y=y+grabhigh*1.4 End Function Function SaveFont(in$) quicky=WriteFile(in$+".fnt") WriteLine(quicky,"JNK ImageFont - V0.2") WriteByte(quicky,grabwide) WriteByte(quicky,grabhigh) For n=32 To 127 WriteByte(quicky,width(n)) For y=0 To grabhigh-1 For x=0 To grabwide-1 c=ReadPixel(x,y,ImageBuffer(fontimg,n-32)) r=(c And $FF0000) Shr 16 g=(c And $00FF00) Shr 8 b=(c And $0000FF) a=0:If r=255 And g=0 And b=255 Then a=255 WriteByte(quicky,r) WriteByte(quicky,g) WriteByte(quicky,b) WriteByte(quicky,a) Next Next Next CloseFile quicky End Function ; Use Imgfont Function imgfont(x,y,st$) For n=1 To Len(st$) If Asc(Mid$(st$,n,1))>31 And Asc(Mid$(st$,n,1))<128 Then DrawImage fontimg,x,y,Asc(Mid$(st$,n,1))-32 x=x+width(Asc(Mid$(st$,n,1))) Next End Function --v Once that's done, save this to the same directory. (FontShowy_PeopleKnowy.bb seems ok to me.) It'll load all three of the fonts, and do a nice display for you. There's lots being flung onscreen, though, so you might have to switch to Non-Debug to get a decent fps. Sorry! I tried to keep the drawing routine down as much as I could... But... Well, them's the breaks! ;Test our nice new fontimages. ; / How to load and use them! Graphics 640,480,32,2 SetBuffer BackBuffer() Type font Field width[128] Field img Field wide Field high End Type My1.Font=LoadImgFont("Arial_8") My2.Font=LoadImgFont("Arial_16") My3.Font=LoadImgFont("Arial_32") Repeat Cls y=0 y=y+16:ImgFont my1.font,2,y,"This is a test" y=y+16:ImgFont my1.font,2,y,"0123 ABC abc" For n=1 To 50 y=y+1:ImgFont my3.font,2,y,"The Quick Brown Fox Jumps Over the Lazy Dog." Next y=y+32:ImgFont my2.font,2,y,"Socoder.Net" y=y+16:ImgFont my2.font,2,y,"SoC - Coming soon! ..." y=y+16:ImgFont my2.font,2,y,"Kickass font!" y=y+16:imgfont my3.font,2,y,"FPS : "+fps fps=1000/(MilliSecs()-lastframe) lastframe=MilliSecs() Flip Until KeyDown(1) End ; Loader.... Function LoadImgFont.font(in$) ThisFont.Font=New font quicky=ReadFile(in$+".fnt") temp$=ReadLine(quicky) ThisFont\wide=ReadByte(quicky) ThisFont\high=ReadByte(quicky) ThisFont\img=CreateImage(ThisFont\wide,ThisFont\high,96):MaskImage ThisFont\img,255,0,255 For n=32 To 127 ThisFont\width[n]=ReadByte(quicky) For y=0 To ThisFont\high-1 For x=0 To ThisFont\wide-1 r=ReadByte(quicky) g=ReadByte(quicky) b=ReadByte(quicky) a=ReadByte(quicky) c=(r Shl 16)+(g Shl 8)+b WritePixel(x,y,c, ImageBuffer(ThisFont\img,n-32) ) Next Next Next CloseFile quicky Return ThisFont.font End Function ; Drawer... Function imgfont(ThisFont.font,x,y,st$) For n=1 To Len(st$) DrawImage ThisFont\img,x,y,Abs((Asc(Mid$(st$,n,1)) Mod 128)-32) x=x+ThisFont\width[Asc(Mid$(st$,n,1))] Next End Function --v

Comments
Wednesday, 06 February 2008, 03:29
Jayenkai	Updated to v0.2 The font is now saved, as raw data.. I might add some kind of compression to that at a later time. Also, given extra time, I might add scrolling, and centering and all that kinda stuff. For now, though, it'll do as it is. Feel free to add your own stuff to it. Neat character drawing styles, or some justification stuff. Whatever! Post as you do.. Meanwhile I'm going to work on adding this into SoC, so I can actually display text somewhere! At the minute there's no Debug info whatsoever! Kinda needs that, methinks!
Thursday, 23 June 2011, 04:42
waroffice	Just having a look at the code to transfer this to Cobra, looks easy enough. Thanks
Tuesday, 28 June 2011, 05:25
waroffice	Ey up, Any chance of a breakdown of how this is made, so I can compare with the one i made. I coded it the way I could think of, based on this but I premade the bitmap rather than rendering one in game. A sort of article/tutorial rather than a list of code would be ace
Tuesday, 28 June 2011, 10:15
Jayenkai	shrugs Nothing magical, really. Draws letters on screen, cuts out as images, slaps back down. The conversion to data's not even compressed. Geeze, this is lazy coding!!

ImageFont Creation and Usage

Comments