Crisp Text for Small Canvas

[TomLGD]

Hello guys!

 

I develop a small game.

 

Really, its size is 90x160 pixels

 

I scale it with Phaser scaling stuff. So i get a nice retro look. But there is something which went really wrong.

It is the text. If i use simple game.add.text with Arial or using a bitmapText doesen't matters.

There is always some kind of anti-alias or smoothing.

 

Is there a way to get a Text crispy with hard edges?

 

For a better understanding i have attached a screenshot.

 

Tom

[rich]

Personally at that resolution I would use either a BitmapText with a clean non-scaled and super tiny font, or I'd use a RetroFont (as then it won't scale anything, it'll look exactly like your font set does).

[TomLGD]

Alright! That worked.

 

Here the steps i did.

 

1. Made a small bitmap font with littera

 

Unfortunately doe's littera uses anti aliasing on default...

 

2. import the font.png to gimp and reduced the colors to 2 (only black and white are left)

 

plus made some minor changes cause the posterisation made the font a bit odd (e.g. if set colors to 2 there are alpha values left)^^

 

3. Use font as bitmapfont with exact size i set in littera.

[DonFrag]

have you tried this?

 

http://examples.phaser.io/_site/view_full.html?d=display&f=render+crisp.js&t=render%20crisp

[TomLGD]

yes but that dit not help for fonts

[DonFrag]

a dirty way:

 littera create two files: fnt and png. open png with a image editor and apply a an pixelated effect to it