We Keep Coding

Jogl uv coordinates for tilesets

I am currently learning jogl so I can make my own 2d game. All the textures for the tiles are stored in a single large tileset.
I tried to use Texture.getSubImageTexCoords() to draw a single tile, but the result was weird:
I'm not sure exactly how to describe it, but the upper left triangle that makes up the quad is stretching in a very strange way.
I want to display just a section of the tileset.
I tried looking for something online but couldn't find anything.
here is my code:
public class TestSubImage {
private GLU glu = new GLU();
private GLCanvas mainCanvas;
private Texture texture;
private TextureCoords tc;
class Listener implements GLEventListener {
public void init(GLAutoDrawable drawable) {
// Load texture
try {
texture = TextureIO.newTexture(TestSubImage.class.getResource("/images/sheet.png"), false, null);
texture.setTexParameteri(drawable.getGL(), drawable.getGL().GL_TEXTURE_MAG_FILTER, drawable.getGL().GL_NEAREST);
tc = texture.getSubImageTexCoords(0, 16, 16, 32); // sub texture coords
} catch (IOException e) {
e.printStackTrace();
}
// Set up
drawable.getGL().glClearColor(0.3f, 0.3f, 0.3f, 0);
glu = new GLU();
glu.gluOrtho2D(0, 512, 512, 0);
}
public void reshape(GLAutoDrawable drawable, int x, int y, int width, int height) {
}
public void dispose(GLAutoDrawable drawable) {
}
public void display(GLAutoDrawable drawable) {
GL2 gl = drawable.getGL().getGL2();
gl.glClear(GL.GL_COLOR_BUFFER_BIT | GL.GL_DEPTH_BUFFER_BIT);
// where to draw the image
int x = 100;
int y = 100;
int width = 200;
int height = 200;
gl.glColor3f(1, 1, 1);
// Draw the image
texture.enable(gl);
texture.bind(gl);
gl.glBegin(GL2.GL_QUADS);
gl.glVertex2f(x, y);
gl.glTexCoord2f(tc.left(), tc.bottom());
gl.glVertex2f(x, y + height);
gl.glTexCoord2f(tc.right(), tc.bottom());
gl.glVertex2f(x + width, y + height);
gl.glTexCoord2f(tc.right(), tc.top());
gl.glVertex2f(x + width, y);
gl.glTexCoord2f(tc.left(), tc.top());
gl.glEnd();
texture.disable(gl);
}
}
private void run() {
// Create window
JFrame frame = new JFrame("Texture Coords Test");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// Create profile and capabilities
final GLProfile profile = GLProfile.get(GLProfile.GL2);
GLCapabilities caps = new GLCapabilities(profile);
// Now set up the main GLCanvas
mainCanvas = new GLCanvas(caps);
mainCanvas.addGLEventListener(new Listener());
frame.getContentPane().add(mainCanvas);
frame.setSize(512, 512);
frame.setResizable(false);
frame.setVisible(true);
}
public static void main(String[] args) {
new TestSubImage().run();
}
}
The tileset is here.

glTexCoord2f sets the texcoord for the next vertex. So, you are rendering one vertex with the default texcoord (whatever that is), and then you are rendering each vertex with the previous vertex's texcoord. And the last texcoord call does nothing. (Well, it probably hangs around as the current texcoord and gets used for the first vertex on the next frame)
You need to call glTexCoord2f before glVertex2f.
P.S. It works the same for glColor3f/4f, glNormal3f, etc.

I don't use JOGL, but it looks like your
gl.glVertex2f(x, y);
gl.glTexCoord2f(tc.left(), tc.bottom());
gl.glVertex2f(x, y + height);
gl.glTexCoord2f(tc.right(), tc.bottom());
gl.glVertex2f(x + width, y + height);
gl.glTexCoord2f(tc.right(), tc.top());
gl.glVertex2f(x + width, y);
gl.glTexCoord2f(tc.left(), tc.top());
is incorrect. If we are pairing each glVertex2f with the line below it I would imagine it should look like
gl.glVertex2f(x, y);
gl.glTexCoord2f(tc.left(), tc.bottom());
gl.glVertex2f(x, y + height);
gl.glTexCoord2f(tc.left(), tc.top());
gl.glVertex2f(x + width, y + height);
gl.glTexCoord2f(tc.right(), tc.top());
gl.glVertex2f(x + width, y);
gl.glTexCoord2f(tc.right, tc.bottom());

Analog clock in OpenGL 2.0 using Java

Can someone help to make a static analogue clock in OpenGL 2.0 using Java? I used Bresenham Circle to draw a circle for the clock but is there any other way to draw a circle here? Then I drew an hour, minute, and second hand but I got an error in the render part while drawing the numbers. Can someone help me here with how to fix this? The code which I tried is following:
public class MyClock implements GLEventListener {
private int windowWidth = 1000;
private int windowHeight = 900;
public void display(GLAutoDrawable drawable) {
render(drawable);
}
//render
private void render(GLAutoDrawable drawable) {
GL2 gl = drawable.getGL().getGL2();
gl.glClear(GL2.GL_COLOR_BUFFER_BIT | GL2.GL_DEPTH_BUFFER_BIT);
gl.glPointSize(5.0f);
//drawing circle
bresenhamCircle(new Point(100,100), 200, new Color(1, 0, 1), gl);
double x, y, d, delta_SE, delta_E;
x = 0;
double r = 200;
y = r;
d = 5-4*r;
setPixel(x ,y, gl);
setPixel(-x,y, gl);
setPixel(x,-y, gl);
setPixel(-x,-y, gl);
setPixel(y,x, gl);
setPixel(-y,x, gl);
setPixel(y,-x, gl);
setPixel(-y,-x, gl);
while (y>x) {
if (d >= 0) {
delta_SE = 4*(2*(x-y)+5);
d+=delta_SE; x++; y--;
}
else {
delta_E = 4*(2*x+3);
d+=delta_E; x++;
}
setPixel(x,y, gl);
setPixel(-x,y, gl);
setPixel(x,-y, gl);
setPixel(-x,-y, gl);
setPixel(y,x, gl);
setPixel(-y,x, gl);
setPixel(y,-x, gl);
setPixel(-y,-x, gl);
}
//hour hand
gl.glColor3d(0, 0, 1);
gl.glBegin(GL2.GL_LINES);
gl.glVertex2d(0, 00);
gl.glVertex2d(70, 70);
gl.glEnd();
//minute hand
gl.glColor3d(0, 0, 1);
gl.glBegin(GL2.GL_LINES);
gl.glVertex2d(0, 00);
gl.glVertex2d(150, 20);
gl.glEnd();
//seconds hand
gl.glColor3d(1, 0, 0);
gl.glBegin(GL2.GL_LINES);
gl.glVertex2d(0, 00);
gl.glVertex2d(120, -120);
gl.glEnd();
//drawing numbers
int AngleX, AngleY;
int radius;
double line;
for (int i=1;i<=12;i++) {
line = i/12*Math.PI*2;
radius=170;
AngleX=(int)((0)+(Math.sin(line)*radius));
AngleY=(int)((0)+(Math.cos(line)*radius));
gl.glColor3d(1, 1, 1);
String a= Integer.toString(i);
g.drawString(a,AngleX,AngleY);
}
}
//Bresenham Circle method
public void bresenhamCircle(Point center, double radius, Color color, GL2 gl) {
gl.glColor3d(0, 0, 1);
gl.glBegin(GL2.GL_POINTS);
gl.glVertex2d(00,200);
gl.glEnd();
}
private void setPixel(double x, double y,GL2 gl) {
gl.glColor3d(0.0, 1.0, 0.0);
gl.glBegin(GL2.GL_POINTS);
gl.glVertex2d(0,0);
gl.glVertex2d( x, y);
gl.glEnd();
}
public void dispose(GLAutoDrawable drawable) {
}
public void init(GLAutoDrawable drawable) {
GL2 gl = drawable.getGL().getGL2();
gl.glViewport(0, 0, windowWidth, windowHeight);
gl.glMatrixMode(GL2.GL_PROJECTION);
gl.glLoadIdentity();
gl.glOrtho(-windowWidth / 2, windowWidth / 2, -windowHeight / 2, windowHeight / 2, 0, 1);
gl.glClear(GL2.GL_COLOR_BUFFER_BIT);
gl.glEnable(GL2.GL_LINE_SMOOTH);
}
public void reshape(GLAutoDrawable drawable, int x, int y, int w, int h) {
GL2 gl = drawable.getGL().getGL2();
windowWidth = w;
windowHeight = h;
gl.glViewport(0, 0, w, h);
gl.glMatrixMode(GL2.GL_PROJECTION);
gl.glLoadIdentity();
gl.glOrtho(-w / 2, w / 2, -h / 2, h / 2, 0, 1);
}
}

As far as I know, there isn't a simple method built into OpenGL ES 2.0 that draws text. That means you have to either find an open-source library that you can use, or you can create your own way of rendering text. This post outlines nicely the different ways that you can render text with OpenGL.
The best way I have found based on my research and which is also stated in the above link, is to render text through images. This tutorial shows how to create a basic text engine and is what I used to get an idea of how to render custom text. The idea is to take a texture atlas (a texture atlas is one image that contains all the letters, numbers, characters that you want to be able to render) and based on what string you want to draw, the engine will crop out the necessary letters, numbers, or characters from the atlas needed for your string and combine them into a square polygon that you can then render to the screen. The tutorial that I linked is a basic text engine, but once you understand how it works, you can then modify and improve it to your needs.

Why isn't this a square? LWJGL

I have a basic LWJGL window set up and I am trying to draw a square using the glBegin(GL_QUADS) method. Square square = new Square(25, 25, 25), is the way I am calling my Square class to draw the square... but it is a rectangle. When I call it I pass in all 25's as the parameters. the first two are the starting coordinates and the last 25 is the side length, as seen below. What am I doing wrong to produce a rectangle?
public Square(float x,float y,float sl) {
GL11.glColor3f(0.5F, 0.0F, 0.7F);
glBegin(GL11.GL_QUADS);
glVertex2f(x, y);
glVertex2f(x, y+sl);
glVertex2f(x+sl, y+sl);
glVertex2f(x+sl, y);
glEnd();
}
My Viewport code
glMatrixMode(GL_PROJECTION);
glLoadIdentity(); // Resets any previous projection matrices
glOrtho(0, 640, 0, 480, 1, -1);
glMatrixMode(GL_MODELVIEW);

Using glOrtho(0, 640, 0, 480, 1, -1); constructs a non-square viewport. That means that the rendered output is more than likely going to be skewed if your window is not the same size as your viewport (or at least the same aspect ratio).
Consider the following comparison:
If your viewport is the same size as your window, then it should remain square. I'm using JOGL, but in my resize function, I reshape my viewport to be the new size of my window.
glcanvas.addGLEventListener(new GLEventListener() {
#Override
public void reshape(GLAutoDrawable glautodrawable, int x, int y, int width, int height) {
GL2 gl = glautodrawable.getGL().getGL2();
gl.glMatrixMode(GL2.GL_PROJECTION);
gl.glLoadIdentity(); // Resets any previous projection matrices
gl.glOrtho(0, width, 0, height, 1, -1);
gl.glMatrixMode(GL2.GL_MODELVIEW);
}
... Other methods
}

To draw a square around the point (x | y) you can calculate the four points that represent the corners of your square.
First you'll need your width to height ratio
float ratio = width / height
I will use a defaultSize for the length of the shortest path from the midpoint to any of the sides.
Then you can calculate four values like so:
float a = x + defaultSize
float b = ratio * (y + defaultSize)
float c = x - defaultSize
float d = ratio * (y - defaultSize)
with which you can represent all four corners to draw your square with. Since GL_SQUAD is deprecated I'll use GL_TRIANGLE.
glBegin(GL_TRIANGLES);
glColor3f(red, green, blue);
// upper left triangle
glVertex2f(a, b);
glVertex2f(c, b);
glVertex2f(c, d);
// lower right triangle
glVertex2f(a, b);
glVertex2f(c, d);
glVertex2f(a, d);
glEnd();
I don't know if this is the most performant or idiomatic way to do this since I just started exploring LWJGL.

Opengl framebuffer rendering looks wierd

The Original Problem:
I'm making a 2d game in OpenGL that uses tiles to draw a map. At the moment, each tile is drawn individually on a quad. The code for the tile rendering is:
#Override
public void render() {
if (parentTileSet.getTexture() == null)
return;
float alpha = parentLayer.getOpacity();
if (alpha < 0)
alpha = 0;
glColor4f(1.0f, 1.0f, 1.0f, alpha); //Set alpha to parent layer's alpha
parentTileSet.getTexture().bind(); //Bind texture
float bx = parentTileSet.getTileWidth() / 2; //Half the width
float by = parentTileSet.getTileHeight() / 2; //Half the height
float x = getX(), y = getY();
float z = 0f;
glPushMatrix(); //Save the current view matrix
glTranslatef(x, y, 0f); //Translate to the tile's position
glRotatef(rotate, 0f, 0f, 1f); //Rotate the tile if it has a rotation
if ((flipType & 1) > 0) //Are we flipping horizontally?
glScalef(-1f, 1f, 1f);
if ((flipType & 2) > 0) //Are we flipping vertically?
glScalef(1f, -1f, 1f);
//Draw the tile
glBegin(GL_QUADS);
glTexCoord2f(tex_cords.bottom_left.x, tex_cords.bottom_left.y); //bottom left
glVertex3f(-bx, -by, z);
glTexCoord2f(tex_cords.bottom_right.x, tex_cords.bottom_right.y); //bottom right
glVertex3f(bx, -by, z);
glTexCoord2f(tex_cords.top_right.x, tex_cords.top_right.y); //top right
glVertex3f(bx, by, z);
glTexCoord2f(tex_cords.top_left.x, tex_cords.top_left.y); //top left
glVertex3f(-bx, by, z);
glEnd();
glPopMatrix(); //Reload the view matrix to original state
parentTileSet.getTexture().unbind(); //Unbind the texture
}
And the result looks like the following:
http://i.stack.imgur.com/maIXk.jpg
Which is good. However, the FPS could be better, and this especially becomes an issue when the maps become more detailed. (The FPS drops to about 20).
My Ideal Solution:
Since the tiles will never change position or animate, if I render all the tiles to a texture once, and just draw that texture, then performance will increase!
So, I made a framebuffer using the following class:
public class Framebuffer implements Drawable {
private int fID, tID;
protected int width, height;
public Framebuffer(int width, int height) {
this.width = width;
this.height = height;
}
public void generate() {
fID = glGenFramebuffers();
tID = glGenTextures();
glBindFramebuffer(GL_FRAMEBUFFER, fID);
glBindTexture(GL_TEXTURE_2D, tID);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, width, height, 0, GL_RGBA, GL_INT, (ByteBuffer) null);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, tID, 0);
if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE)
throw new RuntimeException("Framebuffer configuration error.");
glBindTexture(GL_TEXTURE_2D, 0);
glBindFramebuffer(GL_FRAMEBUFFER, 0);
}
public void begin() {
glPushMatrix();
glPushAttrib(GL_VIEWPORT_BIT);
glBindFramebuffer(GL_FRAMEBUFFER, fID);
glViewport(0, 0, width, height);
}
public void end() {
glBindFramebuffer(GL_FRAMEBUFFER, 0);
glPopMatrix();
glPopAttrib();
}
#Override
public void render() {
float x = 0f;
float y = 0f;
float z = 0f;
float bx = (this.width)/2f;
float by = (this.height)/2f;
glPushMatrix();
glBindTexture(GL_TEXTURE_2D, tID);
glBegin(GL_QUADS);
glTexCoord2f(0f, 0f); //bottom left
glVertex3f(x - bx, y - by, z);
glTexCoord2f(1f, 0f); //bottom right
glVertex3f(x + bx, y - by, z);
glTexCoord2f(1f, 1f); //top right
glVertex3f(x + bx, y + by, z);
glTexCoord2f(0f, 1f); //top left
glVertex3f(x - bx, y + by, z);
glEnd();
glBindTexture(GL_TEXTURE_2D, 0);
glPopMatrix();
}
And then use the following code to generate the framebuffer, and render the tiles to the texture:
System.out.println("Attempting to generate frame buffer..");
try {
Framebuffer frame = new Framebuffer(tiledData.getPixelWidth(), tiledData.getPixelHeight());
frame.generate();
frame.begin();
glScalef(0.5f, 0.5f, 1f); //The game is scaled up by 2, so I'm just unscalling here.
Iterator<Drawable> drawableIterator = getSortedDrawables();
while (drawableIterator.hasNext()) {
Drawable d = drawableIterator.next();
if (d instanceof TileObject) {
TileObject t = (TileObject)d;
if (t.isGroundLayer() && !t.isParallaxLayer() && !t.isAnimated()) {
t.render(); //This render method is the one from above
drawableIterator.remove();
}
}
}
frame.end();
System.out.println("Success!");
addDrawable(frame);
} catch (RuntimeException e) {
System.out.println("Framebuffers are not supported!");
}
However, the output is this:
http://puu.sh/8Eemy.jpg
Which is not what I expected to happen. I tried scaling it, moving it, and all sorts of things but I can never get it exactly right.
My Question
What am I doing wrong? Is there another way to go about this? Am I missing something?
UPDATE
Thanks to the comments, I've got it to render correctly!
I changed the framebuffer class to be the following:
private int fID, tID;
protected int width, height;
public Framebuffer(int width, int height) {
this.width = width;
this.height = height;
}
public void generate() {
fID = glGenFramebuffers();
tID = glGenTextures();
glBindFramebuffer(GL_FRAMEBUFFER, fID);
glBindTexture(GL_TEXTURE_2D, tID);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, width, height, 0, GL_RGBA, GL_INT, (ByteBuffer) null);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, tID, 0);
if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE)
throw new RuntimeException("Framebuffer configuration error.");
glBindTexture(GL_TEXTURE_2D, 0);
glBindFramebuffer(GL_FRAMEBUFFER, 0);
}
public void begin() {
glBindFramebuffer(GL_FRAMEBUFFER, fID);
glPushAttrib(GL_VIEWPORT_BIT);
glViewport(0, 0, width, height);
glMatrixMode(GL_PROJECTION);
glPushMatrix();
glLoadIdentity();
glOrtho(0, width, 0, height, -1, 1);
glMatrixMode(GL_MODELVIEW);
glPushMatrix();
glLoadIdentity();
}
public void end() {
glBindFramebuffer(GL_FRAMEBUFFER, 0);
glMatrixMode(GL_PROJECTION);
glPopMatrix();
glMatrixMode(GL_MODELVIEW);
glPopMatrix();
glPopAttrib();
}
#Override
public void render() {
float x = this.width / 2f;
float y = this.height / 2f;
float z = 0f;
float bx = (this.width)/2f;
float by = (this.height)/2f;
glPushMatrix();
glBindTexture(GL_TEXTURE_2D, tID);
glBegin(GL_QUADS);
glTexCoord2f(0f, 0f); //bottom left
glVertex3f(x - bx, y - by, z);
glTexCoord2f(1f, 0f); //bottom right
glVertex3f(x + bx, y - by, z);
glTexCoord2f(1f, 1f); //top right
glVertex3f(x + bx, y + by, z);
glTexCoord2f(0f, 1f); //top left
glVertex3f(x - bx, y + by, z);
glEnd();
glBindTexture(GL_TEXTURE_2D, 0);
glPopMatrix();
}
The points of interest here is the begin() and end() method, where I setup a new projection matrix and save the old one, then restore it in the end() method.

lwjgl 2d rendering conflict between two tetxures

Ok so I am currently working on a 2d game in java with LWJGL. I have a fairly solid understanding of java and how it works and know the basics of how games work and LWJGL/openGL, but I am having this really weird issue with rendering textures. I determined that one of my draw methods here is the culprit ..
public static void texturedTriangleInverted(float x, float y, float width, float height, Texture texture) {
GL11.glPushMatrix();
{
GL11.glTranslatef(x, y, 0);
texture.bind();
GL11.glBegin(GL11.GL_TRIANGLES);
{
GL11.glVertex2f(width / 2, 0);
GL11.glTexCoord2f(width / 2, 0);
GL11.glVertex2f(0, height);
GL11.glTexCoord2f(0, 1);
GL11.glVertex2f(width, height);
GL11.glTexCoord2f(1, 1);
}
GL11.glEnd();
}
GL11.glPopMatrix();
}
so what happens is if I render anything with this method the next thing rendered looks like it literally was compressed on one end and stretched on the other, even if the next thing rendered is not rendered with this method. I am almost positive that it has to do with the argument I passed into the Gl11.glTexCoord2f(float x, float y) methods, but I cant figure out how to fix it.
here is my openGL initialization code
private void initGL() {
GL11.glMatrixMode(GL11.GL_PROJECTION);
GL11.glLoadIdentity();
GL11.glOrtho(0, Strings.DISPLAY_WIDTH, 0, Strings.DISPLAY_HEIGHT, -1, 1);
GL11.glMatrixMode(GL11.GL_MODELVIEW);
GL11.glEnable(GL11.GL_TEXTURE_2D);
GL11.glEnable(GL11.GL_TEXTURE_BINDING_2D);
GL11.glViewport(0, 0, Strings.DISPLAY_WIDTH, Strings.DISPLAY_HEIGHT);
GL11.glClearColor(0, 0, 1, 0);
GL11.glDisable(GL11.GL_DEPTH_TEST);
}
my game loop code
private void gameLoop() {
while (!Display.isCloseRequested()) {
GL11.glClear(GL11.GL_COLOR_BUFFER_BIT);
GL11.glLoadIdentity();
GL11.glTranslatef(Strings.transX, Strings.transY, 0);
this.level.update();
this.level.render();
Display.update();
Display.sync(Strings.FPS_CAP);
}
Keyboard.destroy();
Display.destroy();
}
my texture loading code (note I used slick to load my textures)
public static final Texture loadTexture(String location) {
try {
if (textureExists(location)) {
return TextureLoader.getTexture("png", new BufferedInputStream(new FileInputStream(new File(location))), false);
} else {
System.err.println("txture does not exist");
}
} catch (IOException e) {
e.printStackTrace();
}
return null;
}

You need to specify your glTexCoord before the glVertex it refers to, not after. This is the same as with glColor and glNormal, glVertex uses the last attributes that you set.