Open GL BLARG

Hi there,

I’ve been lurking on this forum for a few weeks now, I’ve found lots of handy materials and information here that have helped in learning Java. I’ve signed up now to bother you with a question about OpenGL with lwjgl.

Today has marked my first experiments with OpenGL, and it has been pretty hair-pulling. It seems to be much more complicated than basic java-y stuff, and I’ve had a lot of trouble just getting stuff to show up on screen, but up till now I’ve managed to find solutions to all my problems. This one has me stumped, though:

Attached is an image of my game. Its going to be an isometric type thing, though it is still early days at the moment. I’ve been focusing on getting a nice framework established and printing some basic background sprites to the screen.

This is my code to draw the pretty background picture. OpenGL can only do textures of maximum size 512x512 apparently. so I wrote some code to split up large incoming images into 512x512 blocks, and the bit below fits them all together again. It basically just loops through all the 512x512 tiles stores and draws them, one after another.

` GL11.glPushMatrix();

    for(int i=0; i<tilesy; i++) {
    	for(int j = 0; j<tilesx; j++) {
    		if(i*tileSize<window.getHeight() || j*tileSize<window.getWidth()) {

    			textureTiles[j][i].bind();
    			GL11.glBegin(GL11.GL_QUADS);
    			GL11.glTexCoord2f(0,0);
    			GL11.glVertex2i(j*tileSize,i*tileSize);
    			GL11.glTexCoord2f(0,1);
    			GL11.glVertex2i(j*tileSize,i*tileSize+tileSize);
    			GL11.glTexCoord2f(1,1);
    			GL11.glVertex2i(j*tileSize+tileSize,i*tileSize+tileSize);
    			GL11.glTexCoord2f(1,0);
    			GL11.glVertex2i(j*tileSize+tileSize,i*tileSize); 
    			GL11.glEnd();

    		}
    	}
    }

    GL11.glPopMatrix();

`

That bit works all nicely. This bit below is trying to draw isometric squares onto the grid:
` GL11.glPushMatrix();
isoGrid.bind();
int sizex = isoGrid.getImageWidth();
int sizey = isoGrid.getImageHeight();

    for(int i=0; i<numXTiles; i++) {
    	for(int j = 0; j<numYTiles; j++) {
    		if(i*sizey<window.getHeight() || j*sizex<window.getWidth()) {

    			GL11.glEnable (GL11.GL_BLEND); 
    			GL11.glBlendFunc (GL11.GL_SRC_ALPHA, GL11.GL_ONE_MINUS_SRC_ALPHA);
    			        			
    			GL11.glBegin(GL11.GL_QUADS); 
    			
    			GL11.glTexCoord2f(0,0);
    			GL11.glVertex2i(j*sizex,i*sizey);
    			GL11.glTexCoord2f(0,1);
    			GL11.glVertex2i(j*sizex,i*sizey+sizey);
    			GL11.glTexCoord2f(1,1);
    			GL11.glVertex2i(j*sizex+sizex,i*sizey+sizey);
    			GL11.glTexCoord2f(1,0);
    			GL11.glVertex2i(j*sizex+sizex,i*sizey); 
    			GL11.glEnd();
    			
    		}
    	}
    }
    
    GL11.glPopMatrix(); `

Really similar to the first bit, right? isoGrid.bind() is just binding a .gif image of a square (attached) to the GL context, and the two extra GL-ish lines make it be able to do transparency. However, this code doesn’t work! As you can see, the isoGrid squares are not next to each other on the screen - they have a little bit of space seperating them.

I don’t understand why it is doing this! The way I see it, I should get the whole screen filled with an isometric grid sitting over the top of the background image. There shouldn’t be a boarder seperating them, as I am using more or less the same code that draws the background tiles, which are not seperated by a boarder. Is it some strange side effect of the transparency code that is doing it? The code that sets both these methods going looks like this:
public void draw(GameWindow window) { background.draw(window); isoGrid.draw(window); }

So its not like something elsewhere in the code is making it do this.

Any ideas?

I’ve attached another image, which is what it comes out looking like if I remove the background and turn of transparency. This makes no sense!

Welcome :D.

First off since I am not sure exactly what is wrong (it’s been a long day) and I use JOGL not LWJGL I am going to suggest a few things to try and check back after I have had a nap :P:

Hard code the image sizes, int sizex = 32, int sizey = 32 or whatever sizes
Try subtracting values from your calculations to see if they line up or there are still black borders and see if this value appears elsewhere in your code
Look at how you have set up your world, ex. glOrtho()
Look up an opengl textured quad example and see how they used the coordinates and set up opengl

It looks like you are trying to draw your isometric diamond as if it were a square, in other words, the corners will touch not the sides, is that what you want?

Is the isoGrid texture OK? maybe the extra space is in the gif?

how is the texture loaded? The texture seems to be 50x50, maybe your loading method loads it unstreached into a 64x64 texture to make it power of two.

Did you try printing out the xsize and ysize? I get this feeling it’s actually 64, and not 50, because the size allocated (as hinted by the poster right above me) is 64, due to the power of two size thing.

I’m almost positive if you multiply your xsize and ysize by (64/50) your images will print out appropriately.

Try that, see if it works, then see if you can find something that gives you the actual width/height.

If the width/height is actually 64… I have no idea.

Good luck.

Yeah, it was the power of 2 thing. I really should have realized when adjusting it by +14 pixels made it line up properly. Thanks all for your help.