Beeblerox / BitmapFont

cross-platform bitmap font implementation
50 stars 18 forks source link

Bitmap smoothing #19

Open MiltonW opened 9 years ago

MiltonW commented 9 years ago

Would be nice to have an option to set pixelsnapping and smoothing:

    _bitmap = new Bitmap(_bitmapData, PixelSnapping.AUTO, true));           
Beeblerox commented 9 years ago

@MiltonW what about my latest push? does it work as you prefer?

MiltonW commented 9 years ago

I think so, but I seem to have a problem with Flash (and HTML5).

Linux/Neko target: bla

Flash: bla2

Same code, no Flash conditionals. This occurs when I have

     text_retro.size = 0.57;                                             

If I don't use that (or use a nice round integer) it looks just as good as the other targets. But if I then try to use text_retro.scaleX = 0.57 I get:

Invalid field access : set_scaleX

So I can't use the DisplayObject scaling anymore, which I would guess would not distort the image.

Beeblerox commented 9 years ago

let me think about it

Beeblerox commented 9 years ago

@MiltonW sorry that i haven't worked on it earlier, but i think i've fixed this issue. could you try updated code?

MiltonW commented 9 years ago

No change I think. When I use HTML5/Flash I have the following behaviour:

     text_retro.size = 0.57;

size

     text_retro.scaleX = 0.57; text_retro.scaleY = 0.57;

scale

Since scaleX/Y seems to work it is not really a problem (for me anyway :) ). Can't reproduce the 'Invalid field access : set_scaleX' anymore.

PS. Does look a bit smoother now that I look at it, but I don't think it has to do with smoothing...

Beeblerox commented 9 years ago

strange. this is what i've got on flash target with latest code (with size set to 0.57): smoothing off smoothing_off smoothing on smoothing_on

MiltonW commented 9 years ago

Yeah, a bit smoother, but what does it look like without size, and then scale it with scaleX/Y?

Beeblerox commented 9 years ago

it looks the same

Beeblerox commented 9 years ago

ok, here is another one fix. it looks like if you change Bitmap's bitmapData then smoothing isn't applying to it anymore. so we have to reapply smoothing

MiltonW commented 9 years ago

It all doesn't seem to make a difference. All the smoothing does is smooth the jagged edges. The edges aren't there if I don't use size. So then I can use scaleX/Y and it stays crisp.

Try going fullscreen or even bigger and try to keep it this clean, no edges at all:

scale

Again, if I then comment scaling, and use size:

size

This is only on Flash/HTML5. Using size = 0.57 and scaling the entire stage by 3.

Beeblerox commented 9 years ago

oh, so you were scaling stage also. and i've tested without it. I guess it will be impossible to achieve this by using size then

MiltonW commented 9 years ago

No, I'm not scaling the stage, that was just to make the difference more obvious.

FlashTang commented 3 years ago

Hi there ,@Beeblerox Now how to disable smoohting ? I'm using this frok by @flowplay https://github.com/flowplay/BitmapFont angelCodeField.smoothing = false; // not working , it's always smoothing, I'm using pxiel font , so need to be non-smoothing p.s. when set scale to 2 , it's smoothing with white blurry border Thanks

FlashTang commented 3 years ago

Just find a way to fix : Find this line _tilemap = new Tilemap(tileMapWidth, tileMapHeight, font.tileset); Add this.smoothing to the end _tilemap = new Tilemap(tileMapWidth, tileMapHeight, font.tileset,this.smoothing);