Which proper way to use bitmap fonts and filters in Phaser

Recommended Posts

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?





Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

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?

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites
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.

Share this post

Link to post
Share on other sites

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



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



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 




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



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

Share this post

Link to post
Share on other sites
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?)

Share this post

Link to post
Share on other sites

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



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




for Android you'll likely need .ttf then

Share this post

Link to post
Share on other sites

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 :D

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.