Java-Gaming.org    
Featured games (91)
games approved by the League of Dukes
Games in Showcase (581)
games submitted by our members
Games in WIP (500)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  Slick AngelCodeFont - Rotated characters  (Read 1339 times)
0 Members and 1 Guest are viewing this topic.
Offline McDonnough

Junior Newbie


Exp: 5 years



« Posted 2013-03-29 21:47:30 »

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:
1  
font = new AngelCodeFont("font/press_start_2p_4.fnt", new Image("font/press_start_2p_4.png"));

Then I set up my orthographic view:
1  
2  
3  
4  
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:
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
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:


I tried to do this, so the texture gets rotated in the buffer:
1  
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?
Offline davedes
« Reply #1 - Posted 2013-03-29 22:05:59 »

It's because of your glOrtho call. Slick generally expects 2D orthographic coordinates with an upper-left origin, i.e.
1  
glOrtho(0, Display.getWidth(), Display.getHeight(), 0, 1, -1);

Offline McDonnough

Junior Newbie


Exp: 5 years



« Reply #2 - Posted 2013-03-29 22:20:32 »

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?
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline davedes
« Reply #3 - Posted 2013-03-29 23:57:37 »

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? Smiley SlickUtil is pretty buggy and very old.

https://github.com/mattdesl/lwjgl-basics

Offline McDonnough

Junior Newbie


Exp: 5 years



« Reply #4 - Posted 2013-03-30 16:23:12 »

More modern approaches are always welcome!

I looked into your code and ended up with the following (mostly taken from FontTest.java):
Font loading:
1  
2  
font = new BitmapFont(Util.getResource("font/press_start_2p_4.fnt"), Util.getResource("font/press_start_2p_4.png"));
batch = new SpriteBatch();

Text drawing:
1  
2  
3  
4  
5  
6  
7  
8  
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?
Offline davedes
« Reply #5 - Posted 2013-03-30 18:22:06 »

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

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:
https://github.com/mattdesl/lwjgl-basics/wiki/Batching-Rectangles-and-Lines

You can read more about sprite batching here.

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

Offline McDonnough

Junior Newbie


Exp: 5 years



« Reply #6 - Posted 2013-03-31 01:56:08 »

Wow! Using LWJGL just got way easier. Shocked

My new render code:
1  
2  
3  
4  
5  
6  
7  
8  
9  
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.
Pages: [1]
  ignore  |  Print  
 
 
You cannot reply to this message, because it is very, very old.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

xsi3rr4x (57 views)
2014-04-15 18:08:23

BurntPizza (55 views)
2014-04-15 03:46:01

UprightPath (68 views)
2014-04-14 17:39:50

UprightPath (51 views)
2014-04-14 17:35:47

Porlus (68 views)
2014-04-14 15:48:38

tom_mai78101 (93 views)
2014-04-10 04:04:31

BurntPizza (153 views)
2014-04-08 23:06:04

tom_mai78101 (249 views)
2014-04-05 13:34:39

trollwarrior1 (205 views)
2014-04-04 12:06:45

CJLetsGame (213 views)
2014-04-01 02:16:10
List of Learning Resources
by SHC
2014-04-18 03:17:39

List of Learning Resources
by Longarmx
2014-04-08 03:14:44

Good Examples
by matheus23
2014-04-05 13:51:37

Good Examples
by Grunnt
2014-04-03 15:48:46

Good Examples
by Grunnt
2014-04-03 15:48:37

Good Examples
by matheus23
2014-04-01 18:40:51

Good Examples
by matheus23
2014-04-01 18:40:34

Anonymous/Local/Inner class gotchas
by Roquen
2014-03-11 15:22:30
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!