Font file for mojo2 font class

Monkey Forums/Monkey Beginners/Font file for mojo2 font class

hub	(Posted 2015) [#1]

Have you a Bitmap Font file to test the mojo2 Font class and a tiny example too ?

Load, SetFont, DrawText.

Many thanks !

ImmutableOctet(SKNG)

(Posted 2015) [#2]

Have you tried "mojo2_font.png"? It gets automatically added to your build's data folder. The font should already be defaulted to that. The "mojotest" example uses 'DrawText' for reference. Using a custom font is pretty easy, you basically just specify a path, the number of characters available, and if it's padded. The default font can be found at "modules/mojo2/data/mojo2_font.png".

To set up a custom font, you can do something like this:

Strict

Public

' Imports:
Import mojo2

' Classes:
Class Application Extends App Final
	' Constant variable(s):
	Const FONT_PATH:String = "mojo2_font.png" ' This can be anything, as long as it's a supported image-file.
	Const FONT_FIRST_CHARACTER:= 32
	Const FONT_CHARACTERS:= (128-FONT_FIRST_CHARACTER) ' 96
	Const FONT_PADDED:Bool = True
	
	' Constructor(s):
	Method OnCreate:Int()
		SetUpdateRate(0)
		
		Graphics = New Canvas()
		
		Local F:= Font.Load(FONT_PATH, FONT_FIRST_CHARACTER, FONT_CHARACTERS, FONT_PADDED)
		
		Graphics.SetFont(F)
		
		' Return the default response.
		Return 0
	End
	
	' Methods:
	Method OnRender:Int()
		Graphics.Clear(0.8, 0.8, 0.8)
		
		Graphics.DrawText("Hello world.", DeviceWidth()/2, DeviceHeight()/2, 0.5, 0.5)
		
		Graphics.Flush()
		
		' Return the default response.
		Return 0
	End
	
	' Fields:
	Field Graphics:Canvas
End

' Functions:
Function Main:Int()
	New Application()
	
	' Return the default response.
	Return 0
End

The file is basically just a normal left-to-right sprite-sheet, . It starts at the point specified, and in the case of the default font, that is 32 on the ASCII table. In other words, a space; thus why the first character is blank.

Also, as an example, you could try the original Mojo's font (Basically a non-transparent version of Mojo 2's font):

hub	(Posted 2015) [#3]

Very clear and complete reply SKNG. Many thanks. Is there a way to add 'french' accentued characters ' ?

ImmutableOctet(SKNG)

(Posted 2015) [#4]

Monkey modules are UTF8 (At least ideally), and the 'String' implementations used are normally at least 16-bit (Depends on the platform). The accented characters you're referring to are part of UTF 8/16 and extended ASCII. They may be represented by your application by providing the character glyphs in the appropriate order.

In order to use these characters, they'll need to be a part of your own font. Either, you'd create a custom U+0080 to U+00FF font for special characters, and render it separately, or you'd make one with ASCII before it (Full 256 characters). This all can be configured with the arguments my example describes as 'FONT_FIRST_CHARACTER' and 'FONT_CHARACTERS' respectively.

For an extended ASCII/U+0080 only font, you would start somewhere between 128 and 255, and you'd specify the number of glyphs you have made for it. To use both ASCII, and an extended set, you'd just make a bigger font-image, make your glyphs, and change 'FONT_CHARACTERS' accordingly.

Obviously, when I refer to my variables, I'm talking about the context of the example. You can input the font data however you like, using 'Font.Load'.

Since Mojo 2's default font does not cover these characters, you'll need to either:
* Make your own font. (Or modify Mojo 2's font)
* Use an existing bitmap font of some sort.
* Use a tool to generate a bitmap that you may use. (Beware of licensing)

The thing to take out of this is that Monkey's strings are UTF16/other, but the files are UTF8. But at the end of the day, your game ends up with "raw" strings holding unique character codes for each language. You can build your own images to represent these languages by matching up the UTF offsets with the symbols you create. To support different languages, you simply need to create fonts that can represent the characters.

You can get the character codes of a string by accessing it like an array, with the subscript operator:

Print(String("カタカナ"[0]))

That prints 12459 (0x30AB), which is the correct universal character code. Irrelevant formatting (Which is more important for UTF8) aside, these are universal codes for every standardized character/glyph/symbol/emoticon/etc.

You can see every single character code here, and you can look up the value of a character here.

hub	(Posted 2015) [#5]

i want use 40 px height font. So i've now this image : http://www.hub73.com/font/realiser.php (256 characters).
and i modify your code :

	Const FONT_FIRST_CHARACTER:= 32
	Const FONT_CHARACTERS:= (256-FONT_FIRST_CHARACTER) ' 96
	Const FONT_PADDED:Bool = True

But now the image is to big to be loaded ! If i reduce the image height to 16 px i've no problem to display my text with accentued characters..

Any idea with the big 64 px height image and mojo2 font class ?

(i hope Ziggy or Mark find the problem with fontmachine, mojo2 and android... )

hub	(Posted 2015) [#6]

i want use 40 px height font. So i've now this image : http://www.hub73.com/font/realiser.php (256 characters).
and i modify your code :

	Const FONT_FIRST_CHARACTER:= 32
	Const FONT_CHARACTERS:= (256-FONT_FIRST_CHARACTER) ' 96
	Const FONT_PADDED:Bool = True

ImmutableOctet(SKNG)

(Posted 2015) [#7]

I don't think it's documented, but apparently Mark added an overload that rolls over (Found in the 'Font' class):

Function Load:Font(path:String,cellWidth:Int,cellHeight:Int,glyphX:Int,glyphY:Int,glyphWidth:Int,glyphHeight:Int,firstChar:Int,numChars:Int)

Not sure if it will fix the image-size problem, but you could try making the font multi-line and using that.

hub	(Posted 2015) [#8]

Perfect ! Many thanks.
i use a 1024x1024 image.

DiTransfers

(Posted 2016) [#9]

Thank you for that post ImmutableOctet(SKNG) , hub, is there any way you can post an example of
Function Load:Font(path:String,cellWidth:Int,cellHeight:Int,glyphX:Int,glyphY:Int,glyphWidth:Int,glyphHeight:Int,firstChar:Int,numChars:Int)
?

Let's say I have an Image font of 800x800 pixles, a grid of 6x6, each square (glyph) is 20 pixles.

or anyone?
Thank you in advance, to who ever make an example.

hub	(Posted 2016) [#10]

Police lib :


Import mojo

Class Glyph
	Field image:Image
	Field char:Int
	Field x:Int
	Field y:Int
	Field width:Int
	Field height:Int
	Field advance:Float
	
	Method New( image:Image,char:Int,x:Int,y:Int,width:Int,height:Int,advance:Float )
		Self.image=image
		Self.char=char
		Self.x=x
		Self.y=y
		Self.width=width
		Self.height=height
		Self.advance=advance
	End
End

Class MyFont

	Method New( glyphs:Glyph[],firstChar:Int,height:Float )
		_glyphs=glyphs
		_firstChar=firstChar
		_height=height
	End

	Method DrawText:Void( text:String,x:Float,y:Float,xhandle:Float=0,yhandle:Float=0 )
		x-=TextWidth( text )*xhandle
		y-=TextHeight( text )*yhandle
		For Local char:=Eachin text
			Local glyph:=GetGlyph( char )
			If Not glyph Continue
			DrawImageRect (glyph.image, x, y, glyph.x,glyph.y, glyph.width,glyph.height)
			
			x+=glyph.advance
		Next
	End
	


	Method GetGlyph:Glyph( char:Int )
		Local i:=char-_firstChar
		If i>=0 And i<_glyphs.Length Return _glyphs[i]
		Return Null
	End
	
	Method TextWidth:Float( text:String )
		Local w:=0.0
		For Local char:=Eachin text
			Local glyph:=GetGlyph( char )
			If Not glyph Continue
			w+=glyph.advance
		Next
		Return w
	End

	Method TextHeight:Float( text:String )
		Return _height
	End
	
	Function Load:MyFont( path:String,firstChar:Int,numChars:Int,padded:Bool )

		Local image:Image = LoadImage( path )
		If Not image Return Null
		
		Local cellWidth:=image.Width/numChars
		Local cellHeight:=image.Height
		Local glyphX:=0,glyphY:=0,glyphWidth:=cellWidth,glyphHeight:=cellHeight
		If padded glyphX+=1;glyphY+=1;glyphWidth-=2;glyphHeight-=2

		Local w:=image.Width/cellWidth
		Local h:=image.Height/cellHeight

		Local glyphs:=New Glyph[numChars]
		
		For Local i:=0 Until numChars
			Local y:=i / w
			Local x:=i Mod w
			Local glyph:=New Glyph( image,firstChar+i,x*cellWidth+glyphX,y*cellHeight+glyphY,glyphWidth,glyphHeight,glyphWidth )
			glyphs[i]=glyph
		Next
		
		Return New MyFont( glyphs,firstChar,glyphHeight )
	
	End
	
	Function Load_deux:MyFont( path:String,cellWidth:Int,cellHeight:Int,glyphX:Int,glyphY:Int,glyphWidth:Int,glyphHeight:Int,firstChar:Int,numChars:Int )

		Local image:Image = LoadImage( path )
		If Not image Return Null

		Local w:=image.Width/cellWidth
		Local h:=image.Height/cellHeight

		Local glyphs:=New Glyph[numChars]
		
		For Local i:=0 Until numChars
			Local y:=i / w
			Local x:=i Mod w
			Local glyph:=New Glyph( image,firstChar+i,x*cellWidth+glyphX,y*cellHeight+glyphY,glyphWidth,glyphHeight,glyphWidth )
			glyphs[i]=glyph
		Next
		
		Return New MyFont( glyphs,firstChar,glyphHeight )
	End
	
	Private
	
	Field _glyphs:Glyph[]
	Field _firstChar:Int
	Field _height:Float
	
End


	Import police         ' affichage polices de caractères.

	Const Cte_police_fichier                 : String   = "hubert_carree.png" 'nom du fichier graphique de la police de caractère.
	Const Cte_police_premier_caractere       : Int      = 32
	Const Cte_police_nbre_de_caracteres      : Int      = (256-Cte_police_premier_caractere)
	Field Police_mojo                       : MyFont ' police utilisée dans l'application

...

		Police_mojo = MyFont.Load_deux(Cte_chemin_donnees_medias + Cte_police_fichier, 48, 48, 15, 0, 20, 48, Cte_police_premier_caractere, Cte_police_nbre_de_caracteres)

		PosX = (DeviceWidth() - Police_mojo.TextWidth( Phrase )) / 2
		PosY = 210
		Police_mojo.DrawText Phrase,PosX, PosY

i use this for my android application. 48x48 font on 1024x1024 png file. Mojo1.

DiTransfers

(Posted 2016) [#11]

Awesome example hub. Many thanks. this example will help a lot of people for sure including my self.