Isometric view in lwjgl

Started by Droa, April 07, 2012, 16:15:33

Previous topic - Next topic
Print
Go Down Pages1
User actions

Droa

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


  • I have to paint from back to front, to paint over.. is there another way to do that, without splitting up the texture?
  • Textures don't always border up, as lwjg or the slick library seems to add an extra pixel to my texture

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


this is what i get



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();
	 }
}

matheus23

#1
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 :)
My github account and currently active project: https://github.com/matheus23/UniverseEngine

Droa

#2
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 :)

RiverC

#3
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.
Print
Go Up Pages1
User actions