png-font.js

using a bitmap font to write text on canvas. 

When I made the game engine, my first idea was to make everything in English. But then I noticed most people really like localized text, and supporting more languages is as important as supporting many platforms.

When I started writing what you have to be different so I could support different languages, at the end point, I had a problem with my selected pixel font, which didn't supported many characters. And fonts with more characters just were too big in size.

After asking on Twitter, people pointed me to the GNU UNIFONT, and since the Font is awesome and actively maintained, I decided to use it! Paul Hardy sent me a lot of material so I could learn the basics on fonts, which I knew nothing.

Instead of using the true type font, which is around 12MB, I got it's source bitmap, converted it to png, and wrote a js script to allow me get the glyphs from the png and place on html canvas, with the minimal things for a sane use - like word wrapping. Total size is now 840kB, which loads faster!

This lead me to build this tiny js script, the png-font, which you can get here: github.com/ericoporto/png-font .  I sent an email to FSF regarding licensing, but I read the GNU embedding exception clause and interpreted that it's ok to use it in this lib with MIT license.

There is also a demo here: ericoporto.github.io/png-font

Just a video demonstration

This is just a video of the FGMK making a chest by modifying the tile map.

One of the important concepts is that you are free to edit any tile - the building blocks of the these 2D world - in any place in the map, and it's ok to do it.

FGMK