Monday 28 March 2016

Signed Distance fields fonts

I'm currently working on a hobby game project for Android using the JPCT opengl library .
While doing this i noticed that i would have to either use androids standard UI widgets or "BLIT" ui objects using JPCT's blitter.

Neither of these were suitable to me as i wanted to build a spatial UI type

http://www.gamasutra.com/view/feature/4286/game_ui_discoveries_what_players_.php?print=1



I found a potentially good way to do this reading about "Signed Distance Fields".  This method also interested me as it was an excuse to work with graphics shaders.


Not wanting to reinvent the wheel i first learn how this version for the Cinder library worked https://forum.libcinder.org/topic/signed-distance-field-font-rendering .

Then translated it into something that would work as a GLSL ES shader for the JPCT Library.

I ended up with with this, The image below is a screenshot of the program i made running on the android emulator using different font set's i imported as PNG's

These include a Rongorongo font http://www.dafont.com/rongorongo.font
And a Hieroglyph font http://www.dafont.com/meroitic-hieroglyph.font








Here is a link a github project af this project here https://github.com/lawlessc/distance-field-glyphs

Below are some screen shots of a later version of my signed distance fields being used my game , running on an Android device . 





 




The main menu buttons. The play/pause toggle button and the "awesome face" button attached the planet are all done using signed distance fields.  The other four buttons that are in ever screen shot are standard android UI buttons i'm using to test some features.










No comments:

Post a Comment