Rendering Text

Game Mechanics
#1

I’ve spent a lot of time trying to figure this out.

What I know:

  • Slick2D defaults to top left
  • Lwjgl in my game uses bottom left
  • TrueTypeFont is deprecated
  • AngelCodeFont is recommended
  • You use BMFont to create the 2 files in which you use to load a new AngelCodeFont
  • You load that as a normal object would
  • you draw it like font.draw(x,y,string);

So… I looked up various steps on the correct way to make a font through this. I just wanted a simple Times New Roman font…

I’ll take some pictures and show them here of everything I did.

Font Settings: http://gyazo.com/e04f3dd344a04fee9eec16868b252c7d

Export Settings: http://gyazo.com/7bc3e37b0cd4e9e737fd32155a2edf2e

Main Screen: http://gyazo.com/e4f97e34c668f04baec1eace37de17d4

and the png comes out to be this: http://gyazo.com/87e2227f707feae51ba3fd04117af525

I swear I’ve never used BMFont before and I have no clue what I’m doing. I’m just following what people say.

Also I use it within the code like this:

			try
			{
				font = new AngelCodeFont("newfont.fnt", new Image("newfont_0.png"));
			}
			catch (SlickException e)
			{
				e.printStackTrace();
			}

font.drawString(100, 50, "hi", Color.black);

It literally comes out as a black rectangle. So idk. Any advice? Am I using BMFont incorrectly?

EDIT: to make clear, when i use the color white it comes out weird also.

http://gyazo.com/36b4022dde72302a831f4250fbd9d008

(Ignore the brown, that’s my background color)

#2

You might double-check and make sure the PNG image has the correct content. The glyphs may be there and not showing up in the preview because the background is white, but to be sure, you could open it in an image editor such as GIMP. With a non-white background, you should be able to see the glyphs.

Your last image is kind of small, so it’s difficult to tell what’s going on there - maybe you could post a larger image? Also, you might double-check and make sure you have blending enabled.

#3

I’ll try the first thing when i get back home in a little (but I doubt that’s the issue because the ARGB was set differently and the picture loaded the stuff then in the png, but caused an error in the program).

The last picture shows a red rectangle at the same location where the h should, and a black rectangle where the i should be. I believe that’s the size of the text.

#4

Ok I guess it does come up in white. So what do I do from there to fix this? I don’t even know why each character has a different color rectangle when drawn.

#5

Me neither (not at the moment at least). It’d probably be good to confirm the problem with the image though.

What image editor did you use to check the image? (The image is all white in the RGB channels with the glyphs in the alpha channel, so if the viewer doesn’t handle alpha or displays the image against a white background, you may not be able to see the glyphs.)

#6

I used paint.net. The default way I opened it had a invisible background and the text was white. Kinda hard to see, but I saw it for sure.

Also for OpenGL, this is my initGL()

    public void initGL() {
    	//loads OpenGL settings
        GL11.glEnable(GL11.GL_TEXTURE_2D);
        GL11.glClearColor(0.4f, 0.4f, 0.0f, 0.0f);
        GL11.glEnable(GL11.GL_BLEND);
        GL11.glBlendFunc(GL11.GL_SRC_ALPHA, GL11.GL_ONE_MINUS_SRC_ALPHA);
        GL11.glMatrixMode(GL11.GL_PROJECTION);
        GL11.glLoadIdentity();
        GL11.glOrtho(0, 800, 0, 600, 1, -1);
        GL11.glMatrixMode(GL11.GL_MODELVIEW);
    }

I don’t know if this really affects anything, but I saw someone disable something, draw the text, then enable it. It didn’t work for me, so idk if I just did something wrong, or if there was a reason for it.

EDIT: the thing was glEnable(GL_BLEND); and glDisable(GL_BLEND); but I don’t know what to import. I thought it was the normal imports I used in my main file, but that didn’t work. I got GL_BLEND, but not the glEnable and glDisable. So idk.

#7

Ok, so I don’t know what to do here. I guess I didn’t realize when it displays text (slick), if you have an image binded, it does that instead. So I fixed that, but it’s back to the original problem. Slick by default displays text from the top left, while my game has 0,0 at the bottom left. The text still appears upside down. So I don’t know what to do now :/. The only thing I saw was to change

GL11.glOrtho(0, 800, 0, 600, 1, -1);

to

GL11.glOrtho(0, 800, 600, 0, 1, -1);

but that messes the rest of my game up. I tried changing it just to draw the text, but that makes it not draw at all. So idk, i’ve googled this a bunch, tried different things, and just don’t know what exactly to do. Is there an easy solution to this?