new BMFont Beta - Githubissues

Zaraka commented 11 years ago

As I promised, I wrote javascript parser for BMFonts. You can check it at http://zaraka.github.io/BMFont/ (loading can be a bit longer).

So what exactly is it? Half year ago I found project now hosted on http://bmf.php5.cz . Someone create a new file format that can store simple bitmap fonts in raw data. Format description can be found here http://bmf.php5.cz/bmf-format.htm However the format is quite old and it have some cons. Lets sum it up

Pros

Simple and lightweight
Many fonts avaible

Cons

Only ASCII characters!!!
Only 32 colors for a font
Only 6 bits per color channel!!
Parsing can take long time

So it's not exactly a miracle, but I still found them usefull. Q: That site you posted have some strange behaviour! A: Yes, I emailed with admin a few months back. He moved his site from bmf.wz.cz. It looks like moving process isn't finished. But he said something about creating a new font version and redesign web. I will keep in touch with him and help him with this proccess.

And now a few words about parser. It isn't finished, draw method is half-implemented, other methods missing completely and there will be bugs. For making this work I needed to upgrade me.loader for loading ArrayBytes.

The main question is. Are you interested to making this a part of melonJS? If you are I will write proper pull request and put BMF_Font and BMF_Char classes into melonJS core.

Zaraka commented 11 years ago

Oh I forgot. Repo is here https://github.com/Zaraka/BMFont/tree/master/Javascript

obiot commented 11 years ago

Hi @Zaraka

that's awesome !! I wonder however if this would not be better in the plugin repo ?

we've been talking a lot about how to make melonJS more modular (and to keep it lightweight), and feature like Spine or here BMFont would be perfect as available as a plugin, what would you think ?

Zaraka commented 11 years ago

No problem, Just two things. I have no Idea how to write plugin. And me.loader will still need to be upgraded..

parasyte commented 11 years ago

Actually, it looks like you can use the binary loader for this, instead of introducing a new loader type. Of note is that the binary loader was broken until very recently: https://github.com/melonjs/melonJS/commit/c581f56372ea15cc9db13fa761482e00b23a505d

For writing plugins, I should probably do another blog article explaining the process. But effectively you can look at some examples to help you at first:

An A* plugin for pathfinding: https://github.com/swmuron/melonjs-astar/blob/master/melonjs-astar.js#L375
A basic example showing how to patch parts of melonJS using the plugin API: http://jsfiddle.net/mDRGQ/3/
And lastly, the debugPanel is now a plugin: https://github.com/melonjs/melonJS/blob/master/plugins/debug/debugPanel.js

For the basic example, comment the call to me.plugin.register() and press the Run button to see what it does; it anchors the city layer to the bottom of the screen, and fixes a bug in the me.ImageLayer constructor.

agmcleod commented 9 years ago

Something like this i feel is a much needed improvement to our bitmap font loader, which is pretty limited. A lot of other frameworks support things like bmGlyph, and formats smilar. I'm honestly not sure how best to even generate a bitmap font file for what we currently have.

obiot commented 9 years ago

indeed that would be nice

note that shoebox also allow to generate bitmap fonts : http://renderhjs.net/shoebox/bitmapFont.htm

obiot commented 9 years ago

just found this one too, by searching on google : http://kvazars.com/littera/

and

https://www.glyphite.com

pretty nice tools

agmcleod commented 9 years ago

Yeah i use bmglyph. I have fairly good control about what I can generate. Wasn't sure what the dependent order is for our bitmap implementation, nor was i certain on the sizes to specify. Does it need to be a single row image? Can it be on multiple? There's just a lot we're not documenting here ;). But given other libraries support these formats with meta files, it might be a good idea for us to do so as well.

agmcleod commented 8 years ago

I think given the limitation of ascii, using this might be the way to go; http://www.angelcode.com/products/bmfont/. Found this in looking through libgdx's docs on their bitmap font support. More info on the format as well: https://71squared.com/blog/bitmap-font-file-format

obiot commented 8 years ago

The good thing is that this is what zaraka used here above (see also at his repo https://github.com/Zaraka/BMFont/blob/master/Javascript/font.js) . The bad thing however (at least for me) is that there is no OSX (oups.... sorry macOS) version of the tools

obiot commented 8 years ago

when you start adding this, make sure you do it first on a separate branch, so that we can include that in a next 4.0 version (or 3.2, as this would not break any API i'd say).

3.1 is done, and it's time to release it :)

Zaraka commented 8 years ago

Hello, Nice to see, someone is interested. I withdraw my attention from BMFont when I realized that standard and community is dead. Also my implementation is quite terrible work of naive student. I never found a good replacement, nowadays everyone use TTF.

agmcleod commented 8 years ago

Yeah for sure. One can do that with webfonts pretty easily, just doesn't work that well with WebGL, as you need to pass it a texture to draw. My aim for the angelcode/bmfont is that a number of engines seem to support it. Pixi therefore Phaser is one of em. It would be neat to see freetype get compiled with emscripten to work in the browser, but that sounds like quite an ordeal ;)

obiot commented 8 years ago

@agmcleod there is actually an OSX client :P https://71squared.com/glyphdesigner

agmcleod commented 8 years ago

Haha. Yeah i use bmglyph as well :)

parasyte commented 8 years ago

IMHO, using vector fonts is the future.

https://developer.nvidia.com/nv-path-rendering
"Path Rendering Acceleration", page 29
Chromium already supports this extension (but not currently exposed to WebGL)

Even if we can't use path rendering natively in WebGL (yet) we should focus on it for fonts and for #648 Way better than dinosaur bitmap fonts!

parasyte commented 8 years ago

Some resources mentioned here are probably worthwhile of exploring: http://stackoverflow.com/questions/12951459/nv-path-rendering-alternative

agmcleod commented 8 years ago

Aw, but dinosaurs are cool!

Given the timeline of things, I wonder if supporting bitmap would be worth while. Not an uncommon practice, and it works in both canvas & webgl today.

Path rendering does sound good, but given we have a fairly unusable bitmap implementation, I feel like it's something we should fix soon. If you think we can do this today with paths, I'm up for it.

obiot commented 8 years ago

well my point is that it should still work with a simple fix font size bitmap, after it does not mean that we cannot completely revamp the object itself, and manage this through a simple "settinng" object to be passed to the constructor (with just the font width and height)

agmcleod commented 8 years ago

@obiot then I should probably set this up as another class entirely. They would be handling sets of data quite differently. For them to be the same class would lead to a lot of confusing code.

obiot commented 8 years ago

@parasyte #648 would be great if you have any free time :):):)

parasyte commented 8 years ago

It would be really cool! I don't think I'll have time for it though. ;(

obiot commented 8 years ago

@agmcleod adding the following in the todo list :) https://github.com/melonjs/melonJS/wiki/How-to-generate-and-use-Bitmap-Font

agmcleod commented 8 years ago

https://github.com/melonjs/melonJS/pull/792

melonjs / melonJS

new BMFont Beta #279