Fontmachine module and editor available

Monkey Forums/Monkey Programming/Fontmachine module and editor available

ziggy(Posted 2011) [#1]
For newcomers, the FontMachine system is a bitmap font system that lets you add nice looking fonts to your games and applications

(This is a BlitzMax sample:)


Now we have a Monkey module that allows us to use FontMachine fonts on Monkey games and applications.

Finally, the FontMachine module for Monkey (first version) is available here:

http://www.jungleide.com/?page_id=515

This module will let you use bitmapfonts created with the FontMachine editor inside your Monkey games or applications.

This module is not a direct port of the BlitzMax one, it's been designed from scratch for its use on devices and websites. There's no documentation other that the module itself and a set of 3 very small sample applications.

To create your own Fontmachine fonts for Monkey/Mojo, you'll need the FontMachine editor, wich is free to all owners of a Jungle Ide license (you can get it from the "My Licenses and Downloadas" section of the Jungle Ide website). Read carefully the autentication instructions in the website in order to download the FontMachine font editor, as it needs special credentials (it's all explained in the download page).

Hope you find it usefull. The module is open source and public domain. If you want to make any improvement to it, feel free to do it, and if it is worth it, let me know it so I can add the improvements to official source.

I'll be adding proper documentation for the module soon.


dave.h(Posted 2011) [#2]
works great and examples are easy to follow thnx.


Skn3(Posted 2011) [#3]
Well the editor looks very nice and I was able to quickly produce a font. Well done on a release!

Have you any plans to make the font characters packed into one/few textures instead of seperate png / surface for each? I am currently using the Java Heiro font editor and if you would impliment this feature I would most definitely switch to the fontmachine! As it stands I would need to write a tool to pack the fonts, which is ok but If you have plans to do this then I wouldn't duplicate work...


ziggy(Posted 2011) [#4]
Yes, that's next thing to do in the list! I'm going to add an option to generate packed fonts in 512x512 textures. Hopefully in some days time I'll have the update ready.


dawlane(Posted 2011) [#5]
Yes, that's next thing to do in the list! I'm going to add an option to generate packed fonts in 512x512 textures.

Would it be at all possible to make the font machine module read said textures directly out of image atlas? For example you just supply the x,y, width and height of the character bitmap within the image.


ziggy(Posted 2011) [#6]
@dawlane: That's the idea.


GfK(Posted 2011) [#7]
I'm asking this from a BlitzMax point of view but I guess this is as good a place as any - how's Font Machine handle, for instance, Chinese character sets? Does it just load every character by default, or do something clever when they're needed?


ziggy(Posted 2011) [#8]
Does it just load every character by default, or do something clever when they're needed?

It does something clever when they're needed.
the LoadFont command has a flag (dynamicLoad) that when set to true, the font only load character images when they're needed on a DrawText operation. There's also a function to pre-load them.

EDIT: By the way, as Monkey does not support Unicode strings, Chinese characters can't be properly drawn yet. This is going to be improved soon.


devolonter(Posted 2011) [#9]
@ziggy's great news! Thank you!
I've tested on some targets, and everywhere there was a great result!

P.S. I do not know what about Chinese characters, but cyrillic works fine (all except for, perhaps GLFW and, maybe apple devices). Hello world in Russian - http://devolonter.ru/fontmachine/MonkeyGame.html


Skn3(Posted 2011) [#10]
Yes, that's next thing to do in the list! I'm going to add an option to generate packed fonts in 512x512 textures. Hopefully in some days time I'll have the update ready.


Winner! :D


ziggy(Posted 2011) [#11]
Fontmachine module, editor and samples updated.

You can get the new version of the module and samples here:

http://www.jungleide.com/?page_id=515

You can also get new version of the editor from the "My downloads and licenses" from the support area of the Jungle Ide website.

This new version of the module is able to load fonts packed into textures (128x128, 256x256, 512x512 or 1024x1024).

The new version of the editor allows you to generate "packed" fonts. To do so, select the desired texture size in the "Renderer parameters" panel, and just go to "File / Render font for Mojo". when the render is complete, the editor will ask you if you want to package the font or not.

I hope you find it useful.


Volker(Posted 2011) [#12]
I hope you find it useful.

Absolute. And I only need 21 kb for my font :-)
Thanks, ziggy.


Skn3(Posted 2011) [#13]
Brilliant!!! Will have a look tomorrow at work (down the hall from where I am now ;)

I see a major revamp to the text part of my engine w00t!

Thanks!


hardcoal(Posted 2011) [#14]
thanks zig! ur the best


Skn3(Posted 2011) [#15]
Well I have produced a font and ... excellent stuff! I did seem to have a problem with using a OTF format font.. as in it wouldn't appear in the list? Is there some way to have a refresh button?

I ended up using http://onlinefontconverter.com/ to convert it to ttf.

Well everything is brilliant aside from that little niggle, my only other suggestion (I always seem to have one) is to let the user decide the amount of padding they want between packed characters.


ziggy(Posted 2011) [#16]
Wich was the font? The editor supports OTF fonts, but they have to be properly formatted. I've seen issues with the Adobe distribution of Helvetica familly becouse the OTF files are not following standards and the .net font loader refuses to load them. Other than that, I would love to have more info.


Skn3(Posted 2011) [#17]
I have emailed you as this is a font I purchased so not able to post a download link.


ziggy(Posted 2011) [#18]
There's an update available.
Changelog:

• Fixed a compatibility issue with the Flash target. Any font rendered with a previous version will have to be rendered again in order to prevent problems with the Flash target.

• Added some additional texture sizes


Any Font created with this version will require also the latest module version, available from the FontMachine page of the Jungle Ide website.

The update also includes an updated version of the samples, and an updated version of the module. You will need to update all of them to fix the Flash compatibility issue.


xzess(Posted 2011) [#19]
oh dear this is so sweet!
I tested it just some min ago

All i can say:

Great work!
Thank you!


ziggy(Posted 2011) [#20]
there's an update available of the Module.

The update has some internal re-organization of some classes and provides documentation.
the provided documentation is compatible with latest Jungle Ide version, so once you've updated the module (and told Jungle to update the modules database) F1 should bring the proper help page for any command or item in the FontMachine module.

You can get the updated module from the official site: http://www.jungleide.com/?page_id=515


TheRedFox(Posted 2011) [#21]
I've included fontmachine along with diddy and it works beautifully! (sample fonts for now).


siread(Posted 2011) [#22]
Hey Ziggy. I've been using FontMachine for my footy game and I gotta say, it's a stunning mod! :)

One thing I've noticed is that having shadows and borders switched on slows things down enormously as the app has to draw every letter 2 or 3 times. Would it be possible to have an option to "bake" the shadow/border into the main texture? Then the app would simply draw the letter with effects in one pass. (I've tried doing this manually but the shadows are not packed with the same padding as the letters.) Sure you would lose the option to turn these effects on or off but I would imagine that in most circumstances you won't want to change the font effects in-game.


ziggy(Posted 2011) [#23]
That's not possible becouse border and shadows would overlap on letters. We need this to work in a "layered" way. Maybe a good idea is to pre-render specific words in the editor, and leave the real font drawing for dynamic things. I'm doing this in my devs and speed is not an issue.

Another approach would be to flattern fonts once rendered and tweak letter spacing to prevent overlapping, but this would not be compatible with most font faces unless kerning is realy increased.

(sorry I missed this post)


ziggy(Posted 2012) [#24]
An updated version of the open source fontmachine module is available here: http://www.jungleide.com/?page_id=515

This update includes:
• Implemented the aligment flag on draw operations

• Fixed a syntax error in several GetInfo methods for the bitmapfont class

• Fixed an incompatibility with the latest Monkey compiler, due to abstract identifier inside the Font interface

• Addeed the aligment enumerator-like class

• Optimization of the DrawText command on Java based targets, such as Android (Thanks to SGG at Jungle Ide for this one!)



Volker(Posted 2012) [#25]
I'm getting this compile error in my projects:
C:/Monkey/modules/fontmachine/bitmapfont.monkey<27> : Error : Method Font.DrawText:Int(Local text:String,Local x:Float,Local y:Float) must be implemented by class BitmapFont

Monkey V51, fontmachine-12-01-26-A, updated module database.

Curious, the sample programs compile.

Content of fontinterface.monkey:



ziggy(Posted 2012) [#26]
mmm, ok!
That's weird it compiled fine on my machine.
Temporary fix:
Interface Font 
	'summary: This is the method to draw text on the canvas.
	Method DrawText(text:String, x#,y#, align:Int) 

	'summary: This method returns the width in pixels (or graphic units) of the given string
	Method GetTxtWidth:Int(text:String) 

	'summary: This method returns the height in pixels (or graphic units) of the given string
	Method GetFontHeight:Int() 
End interface


Will upload a fixed version later today.


Volker(Posted 2012) [#27]
Doesn't compile:
Error : Unable to find overload for DrawText(String,Int,Int).

Has to be (align:Int=0):
Interface Font 
	'summary: This is the method to draw text on the canvas.
	Method DrawText(text:String, x#,y#, align:Int=0) '****

	'summary: This method returns the width in pixels (or graphic units) of the given string
	Method GetTxtWidth:Int(text:String) 

	'summary: This method returns the height in pixels (or graphic units) of the given string
	Method GetFontHeight:Int() 
End interface


This works.


ziggy(Posted 2012) [#28]
Wow, thanks, I was not on my computer and forgot to add the default value to the interface. anyway, I plan on fixing it on the bitmapfont class instead of modifying the interface.


GfK(Posted 2012) [#29]
Hi - will the Windows/Mac version be updated to include the alignment parameter for drawing text?


ziggy(Posted 2012) [#30]
@Gfk: you mean the blitzmax plugin? I haven't needed this features yet, but I'll be doing some BlitzMax coding next week, maybe I'll find the time to add it. I would love it to support single textured fonts too, as curent Monkey version, but no ETA on this yet. It is an open source module, if anyone wants to lend a hand...


ziggy(Posted 2012) [#31]
New version with the interface compatibility issue solved available on the fontmachine page. here: http://www.jungleide.com/?page_id=515


ziggy(Posted 2012) [#32]
Hi!
A new version of the module is available. For more info see here: http://www.jungleide.com/?page_id=33/fontmachine-group6/fontmachine-open-source-module-forum11/latest-version-12-02-15-a-available-thread244


Volker(Posted 2012) [#33]
Multiline support. Nice!


siread(Posted 2012) [#34]
How do the multi line strings work?


ziggy(Posted 2012) [#35]
@siread: Just use ~n when needed. But all metrics commands will take line feeds into consideration.


siread(Posted 2012) [#36]
Cool. That reminds me... Could you add a field to the font machine editor that allows you to increase the buffer around letters when they are packed into a single bitmap?

That way we can create a simple font and easily add our own border and shadow effects on the base bitmap. Using several fonts each with their own border and shadow bitmaps uses up a lot of memory on mobile devices and slows things down immensely when rendering lots of text on any target.

For example, this is a font I have added border and shadow to myself, so that it uses only one bitmap and one render. However, because some letters are packed so closely the shawows can overlap onto adjacent letters and cause annoying artefacts to display on screen. A bit of extra space around each letter would solve that issue. :)


Also note that the colour gradient corrupts at the top of some letters with umlauts/accents.


ziggy(Posted 2012) [#37]
@siread:Kerning allows you to modify rendering space between letters. see firstsample on latest version. Still no way to pack as an unlayered font, but this is coming soon in the editor.

I've updloaded a "B" version with some small fixes on the text metrics calculation.


siread(Posted 2012) [#38]
Thanks Ziggy, but I didn't mean adjusting the spacing at run-time. I meant during the font image creation, so that there is a bit more space around each character that I can play with in my own art package. (Packing an unlayed font would be awesome too.) :)


ziggy(Posted 2012) [#39]
Ok, I see what you mean. I need to tweak several things such as better size optimization for packed fonts and configurable additional "canvas" leading space for people editing the fonts on a third party application.


ziggy(Posted 2012) [#40]
Small update for the module is available with a couple of small fixes, one regarding multiline aligment rendering, and the other regarding the usage of float values for the Kerning not playing nice with the interget original GetTxtwidth command. This command now uses floats.
Latest version additionaly generates zero (AFAIK) garbage when rendering text. updating is recommended.
Get latest version here: http://www.jungleide.com/?page_id=515


ziggy(Posted 2012) [#41]
A new update of the FontMachine module is available for free at http://www.jungleide.com/?page_id=515

This new version fixes some small mis-calculations on text drawing width and also integrates the automatic module updating system for Jungle Ide, so after installing this module, any new version will be notified to you automatically when using Jungle Ide or Jungle Lite.

Updating is highly recommended.


siread(Posted 2012) [#42]
Hey, Ziggy. Any idea why I'm getting problems on Android?

http://www.monkeycoder.co.nz/Community/posts.php?topic=3257


ziggy(Posted 2012) [#43]
@Siread: I answered in your thread.

A new update is available. You can get it here: http://www.jungleide.com/?page_id=515

If you have previous version installed, just go to Help / Check for jungle updates, and it'll detect the new version of Fontmachine, and allow you to automatically download it and install it.

If you're not using Jungle Ide, you can just manual download the module from the official site.

Enjoy!

This latest version just improves rendering speed on HTML5 and and fixes some small issues with letters spacing


Raul(Posted 2013) [#44]
@Ziggy:
I have an issue with Font Machine module.

Take this code:
For Local s:int = 0 To GAME_SERVERS - 1
If myServer[s].isUsed = 1
DrawImage imgServer, myServer[s].posX, myServer[s].posY
fontServer.DrawText(myServer[s].name, myServer[s].posX + 20, myServer[s].posY - 20)
'SetColor(0, 255, 0)
fontServer.DrawText("firewall: " + myServer[s].firewall + " | cpu: 2", myServer[s].posX + 20, myServer[s].posY)
fontServer.DrawText("encryption: no", myServer[s].posX + 20, myServer[s].posY + 20)
'SetColor(255, 255, 255)
				
EndIf
Next


I only have 2 'serves', btw. Now, the strange part.
I I leave the SetColor (..) active immediately after my program runs through this part of the code, my cDeltaTimer.gDeltaFactor became 0
If I comment that lines.. it's working fine.

Class cDeltaTimer
	Global gDeltaTime:Int
	Global gDeltaFactor:Float
	
	Function init:Void()
		gDeltaTime = Millisecs()
	End Function
	
	Function update:Void()
		Local time:Int = Millisecs()
		gDeltaFactor = (time - gDeltaTime) / (1000.0 / UPDATE_RATE)
		gDeltaTime = time		
	End Function		



ziggy(Posted 2013) [#45]
Drawing tinted bitmaps fonts with HTML5 is very slow, and that could affect your delta time calculation?
Have you tried setting the SetColor(255,255,255) to see if that makes any difference?
does it happens the same when you just print a single char (so it's a bit faster). It looks to me like the delta time calculation is not handling well very slow rendering speed.
Do you see any issues on Desktop target? (wich renders tinted bitmaps fast).
Otherwise, a complete running sample could be useful to try to see if there's anything on the FontMachine rendering that could affect your delta-timing, but I doubt it.
Also, not sure if the Millisecs() function is updated on every OnRender or on every OnUpdate, but I'm sure it is not updated on every call, on all the targets (unless this has been changed).


Raul(Posted 2013) [#46]
well, I only tested in html5. Yes, the 'desktop' version runs fine.

I didn't know the html target is sooo slow sometimes. :D