OpenGL ES render bitmap glyph as texture positioning issues

Question

I'm just testing this stuff out, so I don't need an alternate approach (no GL extensions). Just hoping someone sees an obvious mistake in my usage of GLES.

I want to take an bitmap of a glyph that is smaller than 32x32 (width and height are not necessarily powers of 2) and put it into a texture so I can render it. I've first created an empty 32x32 texture then I copy the pixels into the larger texture.

Gluint texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);

glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
glTextImage2D(GL_TEXTURE_2D, 0, GL_ALPHA, 32, 32, 0,
              GL_ALPHA, GL_UNSIGNED_BYTE NULL);
glTexSubImage2D(GL_TEXTURE_2D, 0, 0, 0, bitmap.width(), bitmap.height(),
                GL_ALPHA, GL_UNSIGNED_BYTE, bitmap.pixels());

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParamteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParamteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

Then I try to draw only the bitmap portion of the texture using the texture coordinates:

const GLfloat vertices[] = {
  x + bitmap.width(), y + bitmap.height(),
  x, y + bitmap.height(),
  x, y,
  x + bitmap.width(), y
};

const GLfloat texCoords[] = {
  0, bitmap.height() / 32,
  bitmap.width() / 32, bitmap.height() / 32,
  0, 0,
  bitmap.width() / 32, 0
};

const GLushort indices[] = { 0, 1, 2, 0, 2, 3 };

glEnableClientState(GL_VERTEX_ARRAY);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glVertexPointer(2, GL_FLOAT, 0, vertices);
glTexCoordPointer(2, GL_FLOAT, 0, texCoords);

glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, indices);

Now if all were well in the world, the size of the square created by the vertices would be the same size as the bitmap portion of the texture and it would draw my bitmap exactly.

Lets say for example that my glyph was 16x16, then it should take up the bottom left quadrant of the 32x32 texture. Then the texCoords would seem to be correct with (0, 0.5), (0.5, 0.5), (0, 0) and (0.5, 0).

However my 12x12 'T' glyph looks like this:

Anyone know why?

BTW. I start by setting up the projection matrix for 2D work as such:

glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(0.0f, 480, 800, 0.0f, 0.0f, 1.0f);
glDisable(GL_DEPTH_TEST);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslate(0.375f, 0.375f, 0.0f); // for exact pixelization

glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_ALPHA);
glEnable(GL_TEXTURE_2D);
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);

Answer 1

The mapping between vertex coordinates and texture coordinates seems to be mixed up. Try changing your vertex coordinates to:

const GLfloat vertices[] = {
  x, y + bitmap.height(),
  x + bitmap.width(), y + bitmap.height(),
  x, y,
  x + bitmap.width(), y
};

As an aside: I don't think you need to go the route via vertex indices in your case. Easier would be a call to glDrawArrays:

glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

(as you have already set up your glVertexPointer and glTexCoordPointer).