Which proper way to use bitmap fonts and filters in Phaser

[andrii.barvynko]

Hi there!

I have a problem with bitmap fonts. I want create custom bitmap font via "literra" and adjust several filters by Phaser. But I don't know what is propper way to use filters in phaser.

 

I need something like that at result

 

 

I could add filters instantly in literra, but filters apply for separate symbols only and looks terrible

 

 

Two strokes and drop shadow. Is it possible to do that in Phaser? Maybe I shouldn't use bitmap fonts and phaser have other hack?

 

 

 

 

[jmp909]

You could render your word to a texture/BitmapData, process pixels on the BitmapData to make a white silhouette of your word and scale it slightly bigger, then insert it behind the original word.

 

Look here for how I made a sillhouette http://www.html5gamedevs.com/topic/18256-masking-a-sprite-with-a-complex-shaped-image/

 

for the dropshadow I guess you could make a black copy and add the available blurX/blurY filters.

 

Maybe there's an outline filter, but I haven't looked

 

when I get back to my PC tomorrow I'll try and do an example

[andrii.barvynko]

Thanks! I have thought about this way. But what about performance? This method looks like very expensive. I have to use styles for all game texts. Is it a good solution for phaser game with many texts and languages?

[jmp909]

When do you need to display the text and how often does it need to update?

[andrii.barvynko]

I have text in each game state in menus and other UI elements. States and elements have tweens so, I think they often need to be updated.

[jmp909]

No, I mean is it eg a score where the digits update constantly or is it a static word? If the latter then create the whole thing as a dynamic bitmap at game startup time using those techniques, stick it in the cache and then pull it out of the cache as required

[andrii.barvynko]

Oh, yes, the most words is static. Cached images seems like a great solution, thank you! Unfortunatelly, I have no ideas about realization in phaser. Would you be so kind to give me some example?

And one more question... If I have many languages in game and many texts, could caching take a lot of time (especially on mobile devices)? I think it might be, and it is care me.

[jmp909]

Have a language selector and only load/cache the images you need.... Regenerate if language is changed

[jmp909]

my bad.. scaling doesn't quite come out how i'd intended

http://phaser.io/sandbox/jhtctOQP/play

 

can you create a webfont out of the littera font? then you could pull it in as live text, apply the filters 

http://phaser.io/examples/v2/text/text-shadow-stroke

 

and then cache the result as a bitmap (normal text is relatively slow, so not ideal for text that is present constantly)

 

in your case though the double stroke is an issue as phaser won't support that directly...

 

there are CSS tricks to do that but I'm not sure about the implementation 

https://www.petercarrero.com/examples/stroke/

 

 

note however you can use .generateTexture() to turn text into a bitmap texture

http://phaser.io/sandbox/mbcxSXJl/play

 

ps i don't think filters work in Canvas mode, only WebGL mode. might need a different approach depending

[andrii.barvynko]

Thank you a lot! You are very kind, your examples were very useful for me! 

 

Yea... Unfortunatelly silhouette works badly. It's a pity. So...

Last two days I was playing with web fonts. They look batter but I have a many problems with them too.

Assume I don't need double stroke. I converted my current fonts via "fontsquirrel" to webfont and get my .woff2 font file. I included it into css file in @font-face, added link in index.html and load fonts in preloader as well as in your example. After that I launched my project in localhost. And here what I had:

 

At first I had a strange error in webstorm

 

 

In chrome It looks like this:

 

http://fonts.googleapis.com/css?family=chumbly_brknormal    Failed to load resource: the server responded with a status of 400 (Bad Request)

 

but in chrome I saw the result - my word was created and was added:

 

 

In firefox i hadn't seen anything (localhost). Just strange error:

 

EncodingError: The given encoding is not supported.

 

If I load game to real server sometimes I see text and sometimes not...

 

Do you have any ideas what I doing wrong?)

[andrii.barvynko]

Also it don't work in android native browser. It so pity...

[jmp909]

Google don't provide that web font, I don't know why you're trying to use it via that.. they only give the fonts available here

https://www.google.com/fonts

 

also you need to refer to which browsers support which font types

http://caniuse.com/#feat=woff2

https://css-tricks.com/snippets/css/using-font-face/

 

for Android you'll likely need .ttf then

[andrii.barvynko]

Yes, it's my crazy way

But how to use my custom web font? Google fonts so poor...

Hm... and why my way worked?))) Partly, but still worked))

Not a matter... Google fonts works fine on android native browser, and I will used them. Sometimes fonts doesn't loaded and I need to reload my game. But I think I fix it by myself.

thank you a lot! You are my font hero