Better font/text options?

[mjp...@gmail.com]

Hey,
My company successfully produced one game demo in Flambe last year. We're trying to do another, but this one requires many, many more fonts of different types, sizes and styles.

Our artist is saying Bitmap fonts for this are really not a good idea; they're inefficient and look clunky.

Are there ever going to be plans to improve the options for text/fonts in Flambe? Openfl has better font support, but that's the only thing I like better about Openfl than flambe right now. I've been wanting this for a long time, really; I probably should have given this suggestion instead of the mask suggestion when Nate asked me for ideas.

[mjp...@gmail.com]

I would also be open to taking a shot at developing this myself if I knew more about the tools required to do so. I mean, what's the other solution? Make a crazy flump movie of pre-rendered Flash fonts where every digit animates from 0-9 and a-Z?

[Jon Grant]

I've attached our Dynamic text classes that uses web fonts - The sprite class is a subclass of my own SpriteContainer class that is a sub of Sprite - but the draw code is in there.  Basically we create HTML canvases for each text sprite that hits the stage, draw text to it, then copy the text to the main canvas on the draw loop.  The library class is just a look up table created with the attached strings.json.  The font.css file has a font face node that in this case you would use 'califunkiacpregular' as the fontFamily in the string.json instead of arial:

@font-face {

    font-family: 'califunkiacpregular';

    src: url('CounterPoint Type Studio - CalifunkiaCP.eot');

    src: url('CounterPoint Type Studio - CalifunkiaCP.eot?#iefix') format('embedded-opentype'),

         url('CounterPoint Type Studio - CalifunkiaCP.woff') format('woff'),

         url('CounterPoint Type Studio - CalifunkiaCP.ttf') format('truetype'),

         url('CounterPoint Type Studio - CalifunkiaCP.svg#califunkiacpregular') format('svg');

    font-weight: normal;

    font-style: normal;

[Jon Grant]

Also - for limited text options, like a score - making 0-9 flump movies isn't a bad idea at all - just line them up for each digit you need and change frames based on score or timer or whatever.  For text that is static - you can also make pngs and load them in dynamically and put them where you need - this allows for someone to change the png to change the text, great for some localization

On Wednesday, November 18, 2015 at 6:58:28 AM UTC-8, mjp...@gmail.com wrote:

[Ian Harrigan]

This seems very interesting... Will check it out... Even just having the ability to change the text color without having to create a new bitmap font is a great bonus here!

[mjp...@gmail.com]

It looks like there are a bunch of dependencies that weren't in those attachments.
package com.cmm.common.text;
import com.cmm.common.app.CompositionFactory;
import com.cmm.common.display.MovieClip;
import com.cmm.common.display.SpriteContainer;
import com.cmm.common.app.Wrapper;

Is that on a library available from haxelib or something?

-Michael

[Jon Grant]

No - this code isn't available from haxelib - this is just personal files that show one implementation on how to draw webfonts to flambe

[Mark Knol]

Thanks for the classes, Ill check the complete sources later, but from how I scanned it, this may be a nice approach. How does it perform in general? Does it consume much memory?

[Jon Grant]

Seems to work fine - the issue I'm having now, is that I'm loading the CSS in a bad spot, so the text might show up with the system default font for a sec before switching - current game with this approach for text in the buttons and score text: http://disneyjunior.disney.com/quest-for-the-secret-library

[Jon Grant]

OK - took a look and found what the issue is with the text not rendering right away. The code was loading the CSS when the text library is created, but since there wasn't any text on the page - the fonts would not actually load.

So updated my build to  load the font css.  Then when the file is loaded, I loop through the font families used by my text and  add a div using the font-family. This makes the page load the font.  Because setting the font-family styles in Haxe wasn't working for me, I added some #id elements to my CSS file for each font-family e.g.:

#yourFont{

font-family:yourFont;

}

Then added divs with those ids:

var text:Dynamic = Browser.document.createElement("div");

text.id ="yourFont"

text.innerHTML = ".";

Browser.document.body.appendChild(text);

Timer.delay(function(){Browser.document.body.removeChild(text);}, 50);

Good news is before I had all my fonts in an assetpack - now I pulled all the CSS and fonts into the web folder.  Though I don't know if that will break Flash builds - which isn't a concern for me.

With the fonts in the web folder - the page only loads the font I actually need - which is my current game saved me 700KB.

In the end I get real web font - any color or size for 17kb!