Slick AngelCodeFont - Rotated characters

Engines, Libraries and Tools
#1

Hello everybody

Today I decided to experiment with the fonts functionality provided by the slick-library.
I keeped struggling with UnicodeFont/TrueTypeFont and ended up using AngelCodeFont.
Using Hiero it was pretty easy to convert my .ttf into a .fnt and the coresponding .png (if someone’s interested in the files: press_start_2p_4.png (warning: it’s white on white) and press_start_2p_4.fnt).

In my class I load the texture as follows:

font = new AngelCodeFont("font/press_start_2p_4.fnt", new Image("font/press_start_2p_4.png"));

Then I set up my orthographic view:


glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(0, 200, 0, 200, -1, 1);
glMatrixMode(GL_MODELVIEW);

The opengl related part of my rendering cylce looks like this:


glClear(GL_COLOR_BUFFER_BIT);
            
glPushMatrix();
    //draw background
    glBegin(GL_QUADS);
        glColor3f(red, green, blue);
        glVertex2f(0, 0);
        glColor3f(red, green, blue);
        glVertex2f(200, 0);
        glColor3f(red, green, blue);
        glVertex2f(200, 200);
        glColor3f(red, green, blue);
        glVertex2f(0, 200);
    glEnd();
glPopMatrix();
            
glPushMatrix();
    //draw text
    font.drawString(10, 380, "red: " + formatter.format(red));
    font.drawString(10, 360, "green: " + formatter.format(green));
    font.drawString(10, 340, "blue: " + formatter.format(blue));
glPopMatrix();

The variables red, green and blue are alterable by pressing certain keys on the numpad. That way you can adjust the background colour at runtime.
As you can see on the last few lines of code, I’m “printing” the current values of these variables onto the screen.

When I now start the application this is what I get:

https://dl.dropbox.com/u/911160/angelcode_rotated.JPG

I tried to do this, so the texture gets rotated in the buffer:

font = new AngelCodeFont("font/press_start_2p_4.fnt", new Image("font/press_start_2p_4.png", true));

But this doesn’t help at all, because the coordinates in the .ftn file are still the same and do not refer to the new character positions.

Has anyone any idea what could cause my problem?

#2

It’s because of your glOrtho call. Slick generally expects 2D orthographic coordinates with an upper-left origin, i.e.

glOrtho(0, Display.getWidth(), Display.getHeight(), 0, 1, -1);
#3

Thanks a lot! Works like a charm now.
Always good to know such things.

The odd thing is, that the background doesn’t change its colour although I change the values of the variables.
If I remove all font-related code it works just fine.

Any suggestions?

#4

Probably because your font texture is still bound. Disable texturing or use a white opaque texture.

If you’re just looking for a way to render text and PNG images, might I suggest a more “modern” GL approach? :slight_smile: SlickUtil is pretty buggy and very old.

#5

More modern approaches are always welcome!

I looked into your code and ended up with the following (mostly taken from FontTest.java):
Font loading:


font = new BitmapFont(Util.getResource("font/press_start_2p_4.fnt"), Util.getResource("font/press_start_2p_4.png"));
batch = new SpriteBatch();

Text drawing:


glPushMatrix();
    //draw text
    batch.begin();
        font.drawText(batch, "red: " + formatter.format(red),10, 380);
        font.drawText(batch, "green: " + formatter.format(green),10, 360);
        font.drawText(batch, "blue: " + formatter.format(blue),10, 340);
    batch.end();
glPopMatrix();

Loading and drawing work just fine, but the background still won’t change its colour.
The background drawing routine is the same as in the first post.
As far as I can see, I did everything according to your example.
Am I doing something wrong with the “fonting” or is the error in the background code?

#6

Like I said, texturing is enabled when you’re drawing your background quad, which is likely what’s causing the change in colours.

You shouldn’t be using glPushMatrix/glPopMatrix unless you are relying on the old and deprecated fixed-function pipeline. This is the problem with reading old tutorials like NeHe… you need to “un-learn” everything when you go to learn the modern pipeline. :slight_smile:

If you’re taking a modern approach, you shouldn’t have any calls to glVertex, glTexCoord2f, glRotate, etc. If you want to render an opaque rectangle or lines, see here:

You can read more about sprite batching here.

If you’re just trying to change the background or clear colour, you can use [icode]glClearColor[/icode]. This is explained in my Display tutorial.

#7

Wow! Using LWJGL just got way easier. :o

My new render code:


glClear(GL_COLOR_BUFFER_BIT);
        
glClearColor(red, green, blue, 0F);
        
spriteBatch.begin();
    font.drawText(spriteBatch, "red: " + red, 10, 10);
    font.drawText(spriteBatch, "green: " + green, 10, 30);
    font.drawText(spriteBatch, "blue: " + blue, 10, 50);
spriteBatch.end();

I only read the first five articles in your wiki and I’ve the feeling I learned more than I did with any other tutorial about lwjgl/opengl. I surely continue reading them.