One BitmapText is fuzzy, and another one not; why?

Look at the screen shot below. The text to the left is fuzzy, like antialiased, and the text to the right is not. Any ideas why? These two elements are generated by the same code.

Did you try shifting it by a pixel or so?

Yeah, one is on an even pixel bound and the other is not.

@normen @pspeed Ah, I see. Hm, is there any way to guarantee that BitmapTexts always ends up on an even pixel bound? :stuck_out_tongue:

@tuffe said: @normen @pspeed Ah, I see. Hm, is there any way to guarantee that BitmapTexts always ends up on an even pixel bound? :P

Set its position to an even pixel bound.

@pspeed Not so easy. I’m using center alignment, and depending on how much of the text fits inside the rectangle (in my image, in the first post, the text is cut short, as you can see), font size, etc. the text might end up not on a pixel bound. I don’t even completely understand how the position is calculated, I mean the actual LetterQuads or whatever it is that matters. But I would really like to avoid the fuzzy text. Any ideas?

@tuffe said: @pspeed Not so easy. I'm using center alignment, and depending on how much of the text fits inside the rectangle (in my image, in the first post, the text is cut short, as you can see), font size, etc. the text might end up not on a pixel bound. I don't even completely understand how the position is calculated. But I would really like to avoid the fuzzy text. Any ideas?

Make the window bigger / raise the resolution?

@normen Hm, I’m sorry, I don’t understand how that would help. Do you mean that without any text being cut off, the problem will go away?

If you use center alignment and have a larger resolution then the images will move, possibly moving off the pixel border or simply making the blurring less obvious because of the higher resolution.

@normen Hm OK, but making the window bigger or raising the resolution doesn’t seem like the right solution. I would prefer to be able to choose resolution and window size independent of blurry (or nonblurry) text. I’m thinking of two solutions, one involving changing how BitmapText works. 1) Make sure, in the inner workings of BitmapText et al. that the text does end up on a pixel border, i.e. floor the position. Or 2) make my own alignment code that makes sure of it. Because, as far as I’ve understood, the problem is with the center alignment.

@normen @pspeed Wouldn’t it make sense to add, at least the option, to BitmapText, to have it always end up on a pixel bound? Like BitmapText.setAlwaysOnPixelBound(boolean), and then floor the position (I guess the gaps in Letters.align()?) if that is true. I would rather have my text nonblurry and half a pixel off center, than exactly center and blurry.

@tuffe said: @normen @pspeed Wouldn't it make sense to add, at least the option, to BitmapText, to have it always end up on a pixel bound? Like BitmapText.setAlwaysOnPixelBound(boolean), and then floor the position (I guess the gaps in Letters.align()?) if that is true. I would rather have my text nonblurry and half a pixel off center, than exactly center and blurry.

But BitmapText might be used in 3D also and then it’s “pixels” are actually world units. Plus, the idea completely falls down as other parts of the scene transform it. Even if it made sure it’s local model coordinates were even unit bounds, the scene graph above it might still be moving it, scaling it, or rotating it.

In the cases where you care about this ‘blurring’, it’s probably best just to implement your own alignment code. After all, you are already having to make sure that everything else in your GUI scene is also on even pixels.

@pspeed Oh, right, didn’t think about BitmapText in the 3D world. But that everything else is on even pixels is easy enough to assure. Hmm, I’m gonna try to not care so much, because making my own alignment code is going to be a little bit ugly; extra nodes, extra state, and whatnot. :stuck_out_tongue: Thanks!

Correct me if I am wrong, but it seems like this can only happen if the width or height of the BitmapText is an odd value. In that case, when its position is determined, it will become X + (width / 2) which would not be a whole number. If that is so, then it can be detected and then the text shifted by 0.5 units to workaround the issue.

@Momoko_Fan said: Correct me if I am wrong, but it seems like this can only happen if the width or height of the BitmapText is an odd value. In that case, when its position is determined, it will become X + (width / 2) which would not be a whole number. If that is so, then it can be detected and then the text shifted by 0.5 units to workaround the issue.

Note: by “detected” I think you mean “detected by the user” and not “detected by the engine”.

@Momoko_Fan said: Correct me if I am wrong, but it seems like this can only happen if the width or height of the BitmapText is an odd value. In that case, when its position is determined, it will become X + (width / 2) which would not be a whole number. If that is so, then it can be detected and then the text shifted by 0.5 units to workaround the issue.

No, it depends on how long the text is. The characters of the font may have any width, so the text may end up with arbitrary total width. And say the text happens to become 17 pixels, and the width of the Rectangle / textBox, is 20. Then to center the text, it would be moved (20-17)/2 pixels to the right. So it doesn’t have anything to do with the position or width, but with the relationship between the text width and rectangle width.

And it gets harder, because if NoWrap or whatever it’s called is turned on, then the text might be cut short, and it’s harder to predict how long the text will be if it does not fit in the rectangle.

By the way, is there an easy way to get the length/width of the part of a text that fits inside the rectangle? :stuck_out_tongue: