LWJGL Forum

Programming => OpenGL => Topic started by: Droa on April 07, 2012, 16:15:33

Title: Isometric view in lwjgl
Post by: Droa on April 07, 2012, 16:15:33
So i've been playing a little around trying to make a isometric painting tool, i could use to make some games.
however currently i've not even left the experimental coding yet, as i see to many things that hurts my eyes.

now the following things i have been taking note of, is following


here is my code for the experiment.

i am the biggest n00b in the world, and just wondering if it could be done another way?

before you comment on it... Yes i was thinking of making a grid to hold the texture data, but i have to walk before i can run :P

The texture i am using
(http://pg.minsk.dk/grid.png)

this is what i get
(http://pg.minsk.dk/Untitled-2.png)


Texture2D

package dk.minsk.lwjgl.tools;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;

import org.newdawn.slick.opengl.*;

public class Texture2D {
private Texture texture;

public Texture2D() {

}

public Texture2D(File file) {
load(file);
}

public void load(File file){
FileInputStream in;
try {
in = new FileInputStream(file);
this.texture = TextureLoader.getTexture("PNG", in);
in.close();
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}

public void bind(){
this.texture.bind();
}
}


boot

package dk.minsk.dungeonvillage;
import java.io.File;

import org.lwjgl.*;
import org.lwjgl.opengl.Display;
import org.lwjgl.opengl.DisplayMode;
import org.lwjgl.opengl.GL11;

import dk.minsk.lwjgl.tools.Texture2D;


public class boot {

Texture2D t2d;
public static void main(String[] args) {
boot b = new boot();
}

public boot() {

try {
Display.setDisplayMode(new DisplayMode(800, 600));
Display.create();
} catch (LWJGLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

t2d = new Texture2D(new File("res/tiles/grid.png"));

initGL();

while(!Display.isCloseRequested()){
renderGL();
Display.update();
Display.sync(60);
}
}

public void initGL(){
GL11.glMatrixMode(GL11.GL_PROJECTION);
GL11.glLoadIdentity();
GL11.glOrtho(0, 256, 256, 0, 1, -1);
GL11.glMatrixMode(GL11.GL_MODELVIEW);
GL11.glEnable(GL11.GL_TEXTURE_2D);
GL11.glEnable(GL11.GL_BLEND);
    GL11.glBlendFunc(GL11.GL_SRC_ALPHA, GL11.GL_ONE_MINUS_SRC_ALPHA);
}

public void renderGL(){
GL11.glClear(GL11.GL_COLOR_BUFFER_BIT);
GL11.glPushMatrix();

GL11.glLoadIdentity();
GL11.glTranslatef(-126, -63, 0);
t2d.bind();

GL11.glBegin(GL11.GL_QUADS);
GL11.glTexCoord2f(.0f,.0f);
GL11.glVertex2f(0, 0);
GL11.glTexCoord2f(1.0f,.0f);
GL11.glVertex2f(255, 0);
GL11.glTexCoord2f(1.0f,1.0f);
GL11.glVertex2f(255, 255);
GL11.glTexCoord2f(.0f,1.0f);
GL11.glVertex2f(0, 255);
GL11.glEnd();


GL11.glLoadIdentity();
GL11.glTranslatef(0, 0, 0);
t2d.bind();

GL11.glBegin(GL11.GL_QUADS);
GL11.glTexCoord2f(.0f,.0f);
GL11.glVertex2f(0, 0);
GL11.glTexCoord2f(1.0f,.0f);
GL11.glVertex2f(255, 0);
GL11.glTexCoord2f(1.0f,1.0f);
GL11.glVertex2f(255, 255);
GL11.glTexCoord2f(.0f,1.0f);
GL11.glVertex2f(0, 255);
GL11.glEnd();

GL11.glLoadIdentity();
GL11.glTranslatef(-253, 0, 0);
t2d.bind();

GL11.glBegin(GL11.GL_QUADS);
GL11.glTexCoord2f(.0f,.0f);
GL11.glVertex2f(0, 0);
GL11.glTexCoord2f(1.0f,.0f);
GL11.glVertex2f(255, 0);
GL11.glTexCoord2f(1.0f,1.0f);
GL11.glVertex2f(255, 255);
GL11.glTexCoord2f(.0f,1.0f);
GL11.glVertex2f(0, 255);
GL11.glEnd();


GL11.glLoadIdentity();
GL11.glTranslatef(-126, 63, 0);
t2d.bind();

GL11.glBegin(GL11.GL_QUADS);
GL11.glTexCoord2f(.0f,.0f);
GL11.glVertex2f(0, 0);
GL11.glTexCoord2f(1.0f,.0f);
GL11.glVertex2f(255, 0);
GL11.glTexCoord2f(1.0f,1.0f);
GL11.glVertex2f(255, 255);
GL11.glTexCoord2f(.0f,1.0f);
GL11.glVertex2f(0, 255);
GL11.glEnd();

GL11.glPopMatrix();
}
}

Title: Re: Isometric view in lwjgl
Post by: matheus23 on April 08, 2012, 17:49:47
Okey.. I've downloaded your Image and have seen: that Image is 254*254 px from size... But it should acctually be a PoT texture (Power of Two) = 256x256 px. Also, try setting the Image parameters to GL_NEAREST, that would change, that every pixel of your Image is interpolated. Just try it out, you will see what happens:
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParamenteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);

Put that, before loading your texture.

Also, I've seen your texture is sized 254x254, but you call glVertex2f(255f, 255f); usually, that numbers should fit your texture size.
And the last: I would set glOrtho(...) to the screen size, to make it look better. you can choose other sizes too, but I don't know, if that is, what you want. If you choose the screen size, you will be able to call glVertex2f(...) with the numbers in pixel size. I think that should fit your need.

Hope, it helps :)
Title: Re: Isometric view in lwjgl
Post by: Droa on April 08, 2012, 17:58:54
Quote from: matheus23 on April 08, 2012, 17:49:47
Okey.. I've downloaded your Image and have seen: that Image is 254*254 px from size... But it should acctually be a PoT texture (Power of Two) = 256x256 px. Also, try setting the Image parameters to GL_NEAREST, that would change, that every pixel of your Image is interpolated. Just try it out, you will see what happens:
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParamenteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);

Put that, before loading your texture.

Also, I've seen your texture is sized 254x254, but you call glVertex2f(255f, 255f); usually, that numbers should fit your texture size.
And the last: I would set glOrtho(...) to the screen size, to make it look better. you can choose other sizes too, but I don't know, if that is, what you want. If you choose the screen size, you will be able to call glVertex2f(...) with the numbers in pixel size. I think that should fit your need.

Hope, it helps :)

i noticed that myself, when i was trying to figure it out. i must have messed up the numbers, when i made the texture :P

however i change the way i made it, by simply make a true rectangular texture, and attach it to a QUADS that is formed like a isometric surface. seems to work faster even :P

as i tryed to fix the grid size, i made a ratio calculation, so it fits my DisplayMode size of the screen.

thanks for the help trough, its nice when people respond kindly to my newbie questions :)
Title: Re: Isometric view in lwjgl
Post by: RiverC on April 12, 2012, 22:57:37
I've noticed your flat iso texture has an outline, but it has one on each side. Usually outlined textures have an outline on one side only, so you don't get 'double thickness' when two outlined textures of the same kind are aligned next to each other.

The other solution (which I use to make outline textures wrap corners smoothly) is to make a half-pixel adjustment on the texcoords so you get a half pixel of each side's outline in each repeat of the texture; this of course only works if you're not using GL_REPEAT over a large surface.