Slick Forums

I can't seem to get text that I render offscreen with a transparent background to look right. It looks like any pixels with alpha around the edges of characters get deleted as soon as I do graphics.copyArea. If I fill the image with a background color first, the text looks fine. I searched around and couldn't come up with a reason for this. As a workaround, I'm drawing the text in white and using drawFlash() on the resulting image with the color I want the text to be. It makes the text look a little better, but it's not as crisp as it would be if it rendered properly and doesn't work well for smaller font sizes. Here's the code I have so far:



I've been playing around with it for hours and haven't been able to get it to work properly. Any help is appreciated.

Same bug here, not easy to fix without reworking a lot of Slick.
viewtopic.php?f=1&t=4436

The glDisable/glEnable workaround will fix this for you.

Also, you should be using the offscreen image's graphics for rendering rather than relying on copyArea.

Sweet, that's exactly what I was looking for. Thanks a lot. Also, I'm using copyArea because I was under the impression from another bug report that creating a new empty Image and then doing getGraphics would create two textures and result in a memory leak (I'm still using the last Slick release). Is there a safe way to do that in the old version, or should I just update to the dev branch and get it overwith?

EDIT: Alright, not EXACTLY what I was looking for. The alpha on the edges is fine, but some fonts must need the blending to be drawn correctly:
How likely is it that someone wouldn't have a video card with OpenGL 1.4? Wikipedia says it was released in 2002, but I'm not exactly making the most graphically sophisticated game, so I was expecting it to run on less-than-recent machines.

Pretty much everybody has OpenGL 2.0+ nowadays.

Why do you need to draw the text to an off screen image, anyways? Unlike with Java2D, trying to "cache" things using many pre-rendered images won't always be faster in Slick2D. In fact, it may result in performance loss, as it requires more "texture binds" per frame.

You could also draw the text on top of an opaque background (e.g. your blue background) which won't result in any transparency loss.

I'm doing some GUI animations, a few of which require me to scale the text. The animation stutters really badly if I don't preload every font size that I might use, which takes several seconds per font. The animation runs nice and smooth if I prerender the text and just scale the image, and there's no unnecessary font loading time. That's also the reason I can't render it onto a solid background: the background might change every frame if I'm animating it.

I take it you're using UnicodeFont? IMO you are going about this the wrong way.

Firstly, you shouldn't load images/fonts/etc. during your animations. These should be loaded once, generally during initialization, and then re-used throughout.

Secondly, instead of changing the font size (which is expensive), you should be changing the scale at which you render the text (which is cheap).


Here's a few ideas. AngelCodeFont is very quick to load, and fast enough to render directly to the screen.

A) Use a single AngelCodeFont and load the font image with FILTER_LINEAR. Use g.scale and g.translate before drawing your text in order to "resize" it.

The downside is that scaling artifacts may appear, especially if you up-scale the text or if you rely on pixel-perfect fonts.

B) If you need smoother down-scaling, one option is to use mip mapping. This means OpenGL will select the best size to show based on the scale you're rendering your text. To achieve Mipmapping with slick, you need the dev branch and this code.

However, depending on your font and how far you are pushing the down-scaling, it may look ugly. Also, it doesn't help the up-scaling artifacts.

C) A third solution would be to load multiple AngelCodeFonts at different sizes, then select which AngelCodeFont to render based on the desired text size.

Ideally you would choose the next greatest size, so that you're always scaling the font image down as opposed to scaling it up.


Chances are, since your animation is probably relatively quick (i.e. only a couple seconds) the user won't notice any scaling artifacts. This is why I'd suggest using (A) for simplicity's sake.

I am using UnicodeFont, but I'm not loading the fonts or rendering the images during the actual animation. And figuring out a way of changing the scale of the drawing without changing the font size was the whole point of rendering offscreen to begin with. The graphics.scale did the trick much better than the offscreen rendering, though. Thanks for the help!