I have a scene in which text is being rendered on things in the main scene. The problem I’m having is that, when the text’s apparent size is smaller than its default size, the renderer appears to pick pixels from the bitmaptext instead of scaling it like an image, so I end up with this ugly blocky text (Image has been scaled up):
I’m assuming this is unfixable using just BitmapFont and BitmapText, but just wanted to check before I try a render to texture solution.
How have you set the size? How much has the image been scaled up? Is each block a pixel in the original image?
Given that some of the pixels are partly shaded, it looks like what I’d expect if you were rendering a font two pixels high or something.
I’m making a TCG, and I’ve tried using card renders (where the text is part of the image), and at the same scale, the text on the card renders is significantly more readable when the text’s apparent size is small (the edges get blurred when scaled down). BitmapText doesn’t do that. In other words, scaled-down BitmapText gets heavily aliased, whereas text on images doesn’t.
The font’s default size is 32, and when I apply it I think I’m transforming it to 12 or 14 (players can zoom onto cards and see them larger, the method that constructs them is the same, it’s just when the card isn’t zoomed, it appears small). The text is being drawn at a very readable size, it just gets pixellated when the camera is zoomed out.
How have you set the size? How much has the image been scaled up? Is each block a pixel in the original image?
Also, in the image case that you are using for comparison, was the text 32 pixels tall in the unscaled image?
I set the size of the text using BitmapText.setSize(nameFont.getCharSet().getRenderedSize()*0.015f);
When I fly up close to the text, it renders fine. It only gets blocky when the camera s far away.
I’m gonna take some screenshots to show you the difference at zoom levels of text vs images with text.
At larger zooms, obviously the text version is more crisp.
At the lowest zooms, you can still make out some words of the image version, whereas the text version is completely unreadable, even though the text sizes are about the same.
The only reason I noticed this was because cards animate themselves, and when they move around, the text “flickers” because the renderer keeps updating which pixels it’s picking out of the text as the text moves.
The quads that render each font letter are clipped directly to the edge of the font. So you will get no nice filtering/aliasing at the edges. I suspect that could be a large contributor to this issue.
Also, in that last image, the text on the right looks smaller than the text on the left. Just going by the title and layout. Could be an optical illusion because everything else looks smaller, too.
The size of the text on the smallest images is actually the same (I checked in GIMP), the image based text looks bigger because it’s not receiving the aliased scaling that the bitmaptext is. The image based text is getting a little blur which makes it look larger.
I suppose my only route now is using RTT, pasting a large font to a large texture and scaling it. I didn’t want to do this, because the class I use to make the cards doesn’t have access to the main application or its viewports. I’m gonna have a little spaghetti code linking things back and forth 
@Shard said: The size of the text on the smallest images is actually the same (I checked in GIMP), the image based text looks bigger because it's not receiving the aliased scaling that the bitmaptext is. The image based text is getting a little blur which makes it look larger.
That is also the nature of why it looks better… especially when you consider that for BitmapText every letter is its own clipped quad… so there isn’t even any letter to letter aliasing like in your image version.
@Shard said: I suppose my only route now is using RTT, pasting a large font to a large texture and scaling it. I didn't want to do this, because the class I use to make the cards doesn't have access to the main application or its viewports. I'm gonna have a little spaghetti code linking things back and forth :(
That seems like a long way to go, too. Are you deploying on desktop or android?
If on desktop then it might just be easier to use Java2D and convert the BufferedImage there into a JME Image (relatively straight forward) rather than going the RTT route.
Also there is an ImagePainter plugin but I don’t remember if or how extensive its font support is.
ImagePainter has pretty good font support, it’s what we use for generating the cards in HeroDex.
@Shard - I hope that’s just a test thing you’ve been working with - as otherwise your game is going to hit serious copyright issues - it’s a clear copy of magic:the gathering.
That’s WoTC intellectual property and if your game is even slightly successful (even if free) I can pretty much guarantee they will shut you down as they already have several of their own online versions of magic.
I’m aware of that, thank you. It’s basically going to be a remake of Forge, which falls under certain fair use requirements.