Question

In OpenGL I’m drawing a 2D isometric grid. (picture: https://i.stack.imgur.com/O4jHV.png). Please don’t mind the sloppy code as a lot of this is just trying things out, I’m trying to get my hands dirty with this stuff before I’ll properly write the tiling part of my actual engine.

Each tile is 76 pixels wide and 38 pixels high. Now I want to texture each of the tiles with a little grass texture that I made. However, that ain’t going to well!

My problem is, the texture keeps looking all messed up. It’s way smaller than it should be (like half the size), and it’s surrounded by white. This is the code I use to apply the texture (which is of 76×38 in size, of course!).

void drawSquare(int x, int y) {
    glEnable( GL_TEXTURE_2D );
    glBindTexture( GL_TEXTURE_2D, texture);
    glBegin(GL_QUADS);
        glTexCoord2i( 38, -19); glVertex2i(x+38, y);
        glTexCoord2i(-38,  19); glVertex2i(x,    y+19);
        glTexCoord2i( 38, -19); glVertex2i(x-38, y);
        glTexCoord2i(-38,  19); glVertex2i(x,    y-19);
    glEnd();
}

This is the part of the code that calculates the X and Y.

for (int y = 1; y < gridY+1; y++) {
    for (int x = 1; x < gridX+1; x++) {
        drawSquare((x-y) * 38 + (SCREEN_SIZE_X/2), (x+y) * 19);
    }
}

I should probably also add, that I put the settings of my ortho like this.

glOrtho(0, SCREEN_SIZE_X, 0, SCREEN_SIZE_Y, -1, 1);

(SCREEN_SIZE_X and SCREEN_SIZE_Y just being 800×600)

Anyone that could help me out here? That’d be greatly appreciated. Perhaps to make it more clear, this is how it looks like right now!

EDIT:
After some help it’s been changed to this.

glBegin(GL_QUADS);
//glColor3f(r, g, b);
glTexCoord2f(0,1); glVertex2i(x+38, y);
glTexCoord2f(1,1); glVertex2i(x,    y+19);
glTexCoord2f(1,0); glVertex2i(x-38, y);
glTexCoord2f(0,0); glVertex2i(x,    y-19);
glEnd();

Result: https://i.stack.imgur.com/JSSXy.png

Answer 1

Texture coordinates should go from 0 to 1, not from -38 to 19 when using GL_TEXTURE_2D.

Also, you should use glTexCoord2f() instead.

Edit:
This is probably the easiest/best way: just draw the whole texture as a single quad, and enable transparency (blending), just make sure your texture has the corners 100% transparent!

Note: you can still use glTexCoord2i() since you always use the whole texture. But if you are going to make a texture atlas, then glTexCoord2f() is necessary.

void drawSquare(int x, int y) {
    glEnable(GL_TEXTURE_2D);
    glEnable(GL_BLEND);
    glBindTexture(GL_TEXTURE_2D, texture);
    glBegin(GL_QUADS);
        glTexCoord2i(0, 0); glVertex2i(x-38, y-19);
        glTexCoord2i(1, 0); glVertex2i(x+38, y-19);
        glTexCoord2i(1, 1); glVertex2i(x+38, y+19);
        glTexCoord2i(0, 1); glVertex2i(x-38, y+19);
    glEnd();
}

Remember: Texture coordinates zero point (0,0) is bottom left

Also, dont forget to set the blendmode as:

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

Also, make sure you load your texture with the alpha channel, if its still not working, make sure the alpha channel exists in your opengl texture.