Bitmap Fonts

This topic contains 10 replies, has 4 voices, and was last updated by Mark Sibly 1 year, 1 month ago.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts

March 10, 2018 at 10:35 pm #13952

Participant

IIRC Monkey 1 had built-in support for bitmap fonts (as generated by http://www.kvazars.com/littera/ or the like). I loved it.

Does Monkey2 have any similar support? If not, could it be added? Or are there any 3rd party modules that would be able to do this?

I’m not necessarily after bitmap fonts but I am looking for a way to produce multi-coloured text with gradient fills and coloured outlines… is that realistically possible using truetype fonts?

March 10, 2018 at 11:00 pm #13953

Mark Sibly

Keymaster

No, there is no built-in support for ‘grid’ based bitmap fonts, but it wouldn’t be hard to add, it’ll put it on the todo list.

March 13, 2018 at 7:23 pm #14010

Mark Sibly

Keymaster

I have simple image based fixed width/height fonts going, is there some kind of file format for bitmap fonts I should also support?

March 13, 2018 at 8:21 pm #14011

Diffrenzy

Keymaster

My 2 cents are:

I use https://www.bmglyph.com/

It supports the format Beaker used in Angelfont in Monkey-X. That has nice kerning pairs, which are important to make text look pro/nice/readable. I *think* it is one of the text variant from http://www.angelcode.com/products/bmfont/

I much prefer the xml/text versions over a binary format.

March 13, 2018 at 9:52 pm #14012

Mark Sibly

Keymaster

Is this useful for coloful fonts? Seems to be a ttf->bitmap font convertor system…

March 13, 2018 at 10:21 pm #14014

Ethernaut

Participant

I used BmGlyph+AngelFont module in the past, and it got the job done.

As an aside, TTF fonts + Shaders are a possible route in M2 if you want gradients and stuff like that! I mean, that’s basically what BMGlyph is doing internally before “baking” it. The main upside of using shaders in M2 would be the possibility of animating the shader, not to mention skipping one step to get the font.

March 13, 2018 at 10:44 pm #14015

Mark Sibly

Keymaster

Ooerrr, bmGlyph looks nice, shame it’s macos only. I have only been using a rather more limited windows one…

I will try and sort out the kerning everywhere too.

March 14, 2018 at 10:07 pm #14028

arpie

Participant

I’ve only ever used the text-based .fnt format that was supported by Monkey1 (and output by the littera online tool I linked to in the first post). Is this the same format as bmglyph? (no macos here). It got the job done but IIRC doesn’t support kerning. Kerning support would be great if it’s not too much work.

One major advantage of bitmap fonts is that (unless I’ve misunderstood something, which is quite possible) most font licences allow them to be distributed (more) freely as baked bitmaps but don’t allow you to distribute the TTF/OTF file with your app.

March 14, 2018 at 11:19 pm #14029

Mark Sibly

Keymaster

Just added support for the .fnt bitmap font formats and pushed the changes to the develop branch.

.fnt does seem to be the popular format for bitmap fonts so I’ve added this (the simple text format only) and called it ‘AngelFont’ as I believe it originated at the ‘angel code’ site? Please correct me if I’m wrong here.

I’ve also added experimental kerning support but this probably wont work quite right in mojox just yet as it makes it trickier to split text into chunks eg: for syntax highlighting.

Note that the bitmap loaders pick the correct shader to use based on image format. Images should either be 8 bit greyscale/alpha or 32 bit rgba.

Here’s the new banana showing how all the font types are used. In addition, Font.Load() will pick the right loader for you from filetype extension. Except for ImageFont, ‘coz it has lots parameters:

#rem

gnsh-bitmap font from opengameart.org:

https://opengameart.org/content/bitmap-font-0

#end

Namespace myapp

#Import "<std>"
#Import "<mojo>"

'simple image font
#Import "gnsh-bitmapfont-colour1.png"

'monochrome angel font
#Import "testfont.fnt"
#Import "testfont_0.png"

'fullcolor angel font
#Import "coolfont.fnt"
#Import "coolfont.png"

Using std..
Using mojo..

Class MyWindow Extends Window
	
	Method New( title:String="Simple mojo app",width:Int=640,height:Int=480,flags:WindowFlags=Null )

		Super.New( title,width,height,flags )
		
		'Example of loading a ttf font directly
'		Style.Font=FreeTypeFont.Load( "asset::fonts/DejaVuSans.ttf",32 )
		
		'Example of loading a simple image font where chars are 15x36
'		Style.Font=ImageFont.Load( "asset::gnsh-bitmapfont-colour1.png",15,36 )

		'Example of loading a monochrome angel font
'		Style.Font=AngelFont.Load( "asset::testfont.fnt" )

		'Example of loading a fullcolor angel font
		Style.Font=AngelFont.Load( "asset::coolfont.fnt" )
		
		ClearColor=Color.Blue	'so we can see nice drop shadow.
	End

	Method OnRender( canvas:Canvas ) Override
	
		App.RequestRender()
		
		canvas.DrawText( "The Quick Brown Fox Jumps Over The Lazy Dog",0,0 )
	End
	
End

Function Main()

	New AppInstance
	
	New MyWindow
	
	App.Run()
End

#rem

gnsh-bitmap font from opengameart.org:

https://opengameart.org/content/bitmap-font-0

#end

Namespace myapp

#Import "<std>"

#Import "<mojo>"

'simple image font

#Import "gnsh-bitmapfont-colour1.png"

'monochrome angel font

#Import "testfont.fnt"

#Import "testfont_0.png"

'fullcolor angel font

#Import "coolfont.fnt"

#Import "coolfont.png"

Using std..

Using mojo..

Class MyWindow Extends Window

Method New( title:String="Simple mojo app",width:Int=640,height:Int=480,flags:WindowFlags=Null )

Super.New( title,width,height,flags )

'Example of loading a ttf font directly

' Style.Font=FreeTypeFont.Load( "asset::fonts/DejaVuSans.ttf",32 )

'Example of loading a simple image font where chars are 15x36

' Style.Font=ImageFont.Load( "asset::gnsh-bitmapfont-colour1.png",15,36 )

'Example of loading a monochrome angel font

' Style.Font=AngelFont.Load( "asset::testfont.fnt" )

'Example of loading a fullcolor angel font

Style.Font=AngelFont.Load( "asset::coolfont.fnt" )

ClearColor=Color.Blue 'so we can see nice drop shadow.

End

Method OnRender( canvas:Canvas ) Override

App.RequestRender()

canvas.DrawText( "The Quick Brown Fox Jumps Over The Lazy Dog",0,0 )

End

Function Main()

New AppInstance

New MyWindow

App.Run()

End

March 15, 2018 at 9:43 pm #14037

arpie

Participant

Mark, what can I say? Thank you! I was expecting this to end up at the end of your probably-already-enormous-to-do list. But you had to go and implement it immediately! What were you thinking?? Now I have to find some time to try it out…

March 20, 2018 at 3:32 am #14068

Mark Sibly

Keymaster

No problemo, let me know if there are any issues with the implementation. I also never actually realized how widely recognized the .fnt format is either…

Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

Bitmap Fonts

Archives

Recent Replies

What is this?