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.
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.
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 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
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.
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.