Typeface - Sprite-based font include/module

Share your advanced PureBasic knowledge/code with the community.
User avatar
STARGÅTE
Addict
Addict
Posts: 1655
Joined: Thu Jan 10, 2008 1:30 pm
Location: Germany, Glienicke
Contact:

Typeface - Sprite-based font include/module

Post by STARGÅTE »

Pure Basic Module: Typeface - Sprite-based engine for displaying text with bitmap fonts

Direct download of the include: Typeface.pbi (Version 1.4.2)
Download of a zip-file with include, example, two fonts and an editor: Typeface_20180930.zip

Features of the include:
  • Loading of bitmap-fonts (XML or TF)
  • Unicode and Kerning support
  • Displaying and measuring of texts on the screen
  • Changing color and opacity
  • Chaning of size, rotation (also 3D) and bending
  • Alignment and italic
  • ADisplay-clipping and word-wrap
Features of the editor:
  • Loading and saving of bitmap fonts (XML oder TF)
  • Creating of typefaces from TTF-Fonts
  • Editing of the font image
  • Editing of the characters and the kerning pairs
Image

Original post here: https://www.purebasic.fr/german/viewtop ... =8&t=23015
Last edited by STARGÅTE on Sun Sep 30, 2018 4:36 pm, edited 3 times in total.
PB 5.73 ― Win 10, 20H2 ― Ryzen 9 3900X ― Radeon RX 5600 XT ITX ― Vivaldi 4.0 ― www.unionbytes.de
Lizard - Script language for symbolic calculations and moreTypeface - Sprite-based font include/module
User avatar
idle
Addict
Addict
Posts: 3677
Joined: Fri Sep 21, 2007 5:52 am
Location: New Zealand

Re: Include - Typeface, Sprite3D-Font (colorable,flexible,mo

Post by idle »

That's great, was going to look into doing something like this myself next week.
User avatar
Kwai chang caine
Addict
Addict
Posts: 4978
Joined: Sun Nov 05, 2006 11:42 pm
Location: Lyon - France

Re: Include - Typeface, Sprite3D-Font (colorable,flexible,mo

Post by Kwai chang caine »

Nice...thanks 8)
ImageThe happiness is a road...
Not a destination
User avatar
Comtois
Addict
Addict
Posts: 1423
Joined: Tue Aug 19, 2003 11:36 am
Location: Doubs - France

Re: Include - Typeface, Sprite3D-Font (colorable,flexible,mo

Post by Comtois »

Great, Thank you.
Please correct my english
http://purebasic.developpez.com/
User avatar
Rook Zimbabwe
Addict
Addict
Posts: 4326
Joined: Tue Jan 02, 2007 8:16 pm
Location: Cypress TX
Contact:

Re: Include - Typeface, Sprite3D-Font (colorable,flexible,mo

Post by Rook Zimbabwe »

Looks great and I plan to see if it can be implemented with my new idea! 8)
Binarily speaking... it takes 10 to Tango!!!

Image
http://www.bluemesapc.com/
User avatar
OldSkoolGamer
Enthusiast
Enthusiast
Posts: 143
Joined: Mon Dec 15, 2008 11:15 pm
Location: Nashville, TN
Contact:

Re: Include - Typeface, Sprite3D-Font (colorable,flexible,mo

Post by OldSkoolGamer »

Sweet !! I was just looking for something like this myself, saves me some time. :D
User avatar
Rook Zimbabwe
Addict
Addict
Posts: 4326
Joined: Tue Jan 02, 2007 8:16 pm
Location: Cypress TX
Contact:

Re: Include - Typeface, Sprite3D-Font (colorable,flexible,mo

Post by Rook Zimbabwe »

How can I integrate this with OGRE? It does not seem to want to display in PB4.51 :cry:
Binarily speaking... it takes 10 to Tango!!!

Image
http://www.bluemesapc.com/
User avatar
STARGÅTE
Addict
Addict
Posts: 1655
Joined: Thu Jan 10, 2008 1:30 pm
Location: Germany, Glienicke
Contact:

Re: Include - Typeface, Sprite3D-Font (colorable,flexible,mo

Post by STARGÅTE »

@Rook Zimbabwe
I don't think it runs on OGRE,
because I use a DX9 structure to change the color and vertice of the Sprite3D

I change all the things (rotation, zoom, color, position, ...) in this structure.
I do not know how it is in OREG.

for transform you can use TransformSprite3D(), but for clipping and color i need this DX9 structure.

@All
nice that some of you can use the include
If I have time I try to write an editor, with which you can easily create my *.tf format from an images or *.TTF font
PB 5.73 ― Win 10, 20H2 ― Ryzen 9 3900X ― Radeon RX 5600 XT ITX ― Vivaldi 4.0 ― www.unionbytes.de
Lizard - Script language for symbolic calculations and moreTypeface - Sprite-based font include/module
User avatar
STARGÅTE
Addict
Addict
Posts: 1655
Joined: Thu Jan 10, 2008 1:30 pm
Location: Germany, Glienicke
Contact:

Re: Include - Typeface, Sprite3D-Font (colorable,flexible,mo

Post by STARGÅTE »

Here is an update of my Typeface includes for PB 5.20 and some changes:

Typeface.zip (outdated)
Needs PB 5.20 !

Features:
  • display text with any character sets (XML & Image)
  • intensity and color support
  • (clean) zoom, rotate and bend
  • italic support with any angles
  • unicode, kerning and letter spacing
Image

XML structure:

Code: Select all

<Typeface Image="Example.png"> <!-- file name of the image -->
   <Character Index="65"> <!-- character with index -->
      <Source X="344" Y="38" Width="27" Height="38"/> <!-- position and size in the image -->
      <Outlay X="-8" Y="-8" Width="11" Height="22"/> <!-- display offset and text flow size ->
   </Character>
   <KerningPair Left="39" Right="65" Amount="-1"/> <!-- kerning pair with both characters and their shift -->
</Typeface>
Last edited by STARGÅTE on Sun Sep 30, 2018 4:40 pm, edited 1 time in total.
PB 5.73 ― Win 10, 20H2 ― Ryzen 9 3900X ― Radeon RX 5600 XT ITX ― Vivaldi 4.0 ― www.unionbytes.de
Lizard - Script language for symbolic calculations and moreTypeface - Sprite-based font include/module
davido
Addict
Addict
Posts: 1859
Joined: Fri Nov 09, 2012 11:04 pm
Location: Uttoxeter, UK

Re: Include - Typeface, Sprite-Font

Post by davido »

Another incredible piece of work!
Game-changer!
Love it! :D

Oh, and thanks for sharing.
DE AA EB
User avatar
STARGÅTE
Addict
Addict
Posts: 1655
Joined: Thu Jan 10, 2008 1:30 pm
Location: Germany, Glienicke
Contact:

Re: Typeface - Sprite-based font include/module

Post by STARGÅTE »

Dear all,

I have updated my Typeface include:

Pure Basic Module: Typeface - Sprite-based engine for displaying text with bitmap fonts

Direct download of the include: Typeface.pbi (Version 1.4.2)
Download of a zip-file with include, example, two fonts and an editor: Typeface_20180930.zip

Features of the include:
  • Loading of bitmap-fonts (XML or TF)
  • Unicode and Kerning support
  • Displaying and measuring of texts on the screen
  • Changing color and opacity
  • Chaning of size, rotation (also 3D) and bending
  • Alignment and italic
  • ADisplay-clipping and word-wrap
Features of the editor:
  • Loading and saving of bitmap fonts (XML oder TF)
  • Creating of typefaces from TTF-Fonts
  • Editing of the font image
  • Editing of the characters and the kerning pairs
Image

Original post here: https://www.purebasic.fr/german/viewtop ... =8&t=23015

Feedback is welcome :) .
PB 5.73 ― Win 10, 20H2 ― Ryzen 9 3900X ― Radeon RX 5600 XT ITX ― Vivaldi 4.0 ― www.unionbytes.de
Lizard - Script language for symbolic calculations and moreTypeface - Sprite-based font include/module
RSBasic
Moderator
Moderator
Posts: 1124
Joined: Thu Dec 31, 2009 11:05 pm
Location: Gernsbach (Germany)
Contact:

Re: Typeface - Sprite-based font include/module

Post by RSBasic »

Nice
ImageImageImageImage
User avatar
Fig
Enthusiast
Enthusiast
Posts: 349
Joined: Thu Apr 30, 2009 5:23 pm
Location: Côtes d'Azur, France

Re: Typeface - Sprite-based font include/module

Post by Fig »

Very nice !
How fast is it compared with DrawText() ?
There are 2 methods to program bugless.
But only the third works fine.

Win10, Pb x64 5.71 LTS
User avatar
STARGÅTE
Addict
Addict
Posts: 1655
Joined: Thu Jan 10, 2008 1:30 pm
Location: Germany, Glienicke
Contact:

Re: Typeface - Sprite-based font include/module

Post by STARGÅTE »

Fig wrote:How fast is it compared with DrawText()?
It's much faster!, because you don't need a StartDrawing() and #PB_2DDrawing_Transparent mode which is very slow compared to the Sprite-Lib with DisplayTransparentSprite.

Here my results:

Code: Select all

Characters | Typeface | DrawText
180          3500 FPS   108 FPS
1800          700 FPS    13 FPS
18000          80 FPS    <1 FPS
I can only advise against using DrawText in games!

Test code:

Code: Select all

InitSprite()

Enumeration
	#Window
	#Typeface
	#Sprite
	#Font
EndEnumeration

IncludeFile "Typeface.pbi" : UseModule Typeface

Declare FPS()

OpenWindow(#Window, 0, 0, 700, 520, "Typeface Example", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
OpenWindowedScreen(WindowID(#Window), 0, 0, WindowWidth(#Window), WindowHeight(#Window), 0, 0, 0, #PB_Screen_NoSynchronization)
SpriteQuality(#PB_Sprite_BilinearFiltering)

UsePNGImageDecoder()
UsePNGImageEncoder()

LoadTypeface(#Typeface, "Tahoma20.tf")
LoadFont(#Font, "Tahoma", 16)

Define Characters = 18000

Define Typeface = #False;#True;

Repeat
	
	ClearScreen($000000)
	SpriteBlendingMode(#PB_Sprite_BlendSourceAlpha, #PB_Sprite_BlendInvertSourceAlpha)
	
	ResetTypefaceStyles(#Typeface)
	
	DisplayTypeface(#Typeface, 0, 0, "FPS: "+Str(FPS()))
	
	RandomSeed(0)

	If Typeface
		For I = 1 To Characters/60
			DisplayTypeface(#Typeface, 10, 20+Random(480), "Grumpy wizards make toxic brew For the evil Queen And Jack.")
		Next
	Else
		If StartDrawing(ScreenOutput())
			DrawingMode(#PB_2DDrawing_Transparent)
			DrawingFont(FontID(#Font))
			For I = 1 To Characters/60
				DrawText(10, 20+Random(480), "Grumpy wizards make toxic brew For the evil Queen And Jack.")
			Next
			StopDrawing()
		EndIf
	EndIf
		
	FlipBuffers()
	
Until WindowEvent() = #PB_Event_CloseWindow


Procedure.i FPS()
	
	Static Count.i, Time.i, FPS.i
	Protected CurrentTime
	
	CurrentTime = ElapsedMilliseconds()
	If Time = 0 : Time = CurrentTime : EndIf
	
	If CurrentTime - Time > 1000 
		FPS = 1000 * Count / (CurrentTime - Time)
		Time = CurrentTime
		Count = 0
	EndIf
	
	Count + 1
	
	ProcedureReturn FPS
	
EndProcedure
[/size]
Last edited by STARGÅTE on Sun Sep 30, 2018 7:23 pm, edited 1 time in total.
PB 5.73 ― Win 10, 20H2 ― Ryzen 9 3900X ― Radeon RX 5600 XT ITX ― Vivaldi 4.0 ― www.unionbytes.de
Lizard - Script language for symbolic calculations and moreTypeface - Sprite-based font include/module
RSBasic
Moderator
Moderator
Posts: 1124
Joined: Thu Dec 31, 2009 11:05 pm
Location: Gernsbach (Germany)
Contact:

Re: Typeface - Sprite-based font include/module

Post by RSBasic »

Thank you for this performance information.
ImageImageImageImage
Post Reply