LibGDX: How to draw a transparent Polygon? - java

I'm currently using ShapeRenderer to draw polygons.
Code:
shapeRenderer.begin(ShapeType.Line);
shapeRenderer.setColor(255 / 255.0f, 109 / 255.0f, 120 / 255.0f, 0.0f);
Gdx.gl.glEnable(GL20.GL_BLEND);
//drawing a sample rectangle to test transparency(it worked)
shapeRenderer.rect(getRect().x, getRect().y,
getRect().width, getRect().height);
//drawing polygon
shapeRenderer.polygon(getPoly().getTransformedVertices());
Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
Gdx.gl.glDisable(GL20.GL_BLEND);
shapeRenderer.end();
I'm getting the rectangle as a transparent one but polygon is still opaque as ever.
How to do this correctly?
Or is this even possible?

The actual "drawing" probably isn't happening until the shapeRenderer.end() call. Try moving that up:
//drawing polygon
shapeRenderer.polygon(getPoly().getTransformedVertices());
shapeRenderer.end();
Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
Gdx.gl.glDisable(GL20.GL_BLEND);

Related

LWJGL draw rect over texture

I use the following to draw the texture quads
tex.bind();
glTranslatef(x, y, 0);
glBegin(GL_QUADS);
glTexCoord2f(0, 0);
glVertex2f(0, 0);
glTexCoord2f(1, 0);
glVertex2f(width, 0);
glTexCoord2f(1, 1);
glVertex2f(width, height);
glTexCoord2f(0, 1);
glVertex2f(0, height);
glEnd();
glLoadIdentity();
with these configurations:
try {
Display.setDisplayMode(new DisplayMode(WIDTH, HEIGHT));
Display.create();
} catch (LWJGLException e) {
e.printStackTrace();
}
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(0, WIDTH, HEIGHT, 0, 1, -1);
glMatrixMode(GL_MODELVIEW);
GL11.glEnable(GL11.GL_TEXTURE_2D);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
GL11.glDisable(GL11.GL_DEPTH_TEST);
GL11.glDisable(GL11.GL_LIGHTING);
GL11.glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
GL11.glClearDepth(1);
however now i want to add a menu to the game by drawing a rect over the screen but when i do so, everything turns red (if i set red as color)
case MENU:
GL11.glColor3f(1.0f, 0.0f, 0.0f);
glRectf(50, 50, 50, 50);
Two things:
Whenever you draw using color instead of textures, make sure to disable GL_TEXTURE_2D by calling glDisable(GL_TEXTURE_2D); before the rendering call (in your case before case MENU:). But don't forget to enable it again as soon as you're finished and ready to draw the texture once again (in your case, call glEnable(GL_TEXTURE_2D); after glRectf()). This might not be the reason for the problem that you're experiencing, but it will become a problem later.
The reason as to why everything turns red, is because whenever you render a texture, the currently bound color affects what color components are rendered from the texture. Every pixel in the texture that you're drawing is composed of 3 or 4 values. Red, Green, Blue and possibly an Alpha channel. Since you bind the color to red, and you do not change it before you draw the texture, OpenGL only draws the red component of each pixel within your texture. Thus, the Red component will be ranging from 0-1 in your texture, and the Green and Blue values will be staying at a constant 0.
To fix this, simply call glColor3f(1, 1, 1); After rendering the red rectangle. This will set the rendering color back to white (default) and therefore OpenGL will successfully draw all 3 color components of your texture pixels.
I hope that I've been clear and that this helps.
Good luck! :)
//SK

Moved renderer in lwjgl rendering

I have made a simple application in lwjgl and created simple gui. For now I have frame and panel. But there is a problem.
Because (Display 800x600) when I make panel on Panel(x,y,w,h) (0,0,64,64) everything works fine, but when I create it on other position (x,y where point 0,0 is in left upeper corner) it render moved panel.
The white space is my panel which should change color when I drag mouse on it. It is created on (417,417,64,64), but it's rendered on somethink like (90,90).
I have rendered fonts to show all of itss positions. The blue box I draw on this image is where it should be and it looks like there the panel is, because the white space is changing color when I drag mouse there, but this white space should be there.
My code looks like that:
I am adding all components to HashMap like Panels.
glColor3f(backgroundColor.getRed(), backgroundColor.getGreen(),
backgroundColor.getBlue());
if (hasFocus()) {
glColor3f(1f, 0f, 0f);
}
glPushMatrix();
glRecti(getX(), getY(), getWidth(), getHeight());
glPopMatrix();
And initGL method:
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glScalef(1.0f, 1.0f, 1.0f);
glOrtho(0, 800, 600, 0, 1, -1);
glFrustum(-1, 1, -1, 1, 0.0, 40.0);
glViewport(0, 0, Display.getWidth(), Display.getHeight());
glMatrixMode(GL_MODELVIEW);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
glShadeModel(GL_SMOOTH);
glRecti doesn't work that way it expects the coordinates of the corners
so instead you should do:
glRecti(getX(), getY(), getX()+getWidth(), getY()+getHeight());

Pixmap circle border doesn't appear in libGDX html project

I'm programming my first project with libGDX and I'm currently trying to draw a transparent circle with an opaque border on top of the background.
It's working as desired in the android an the desktop project. The html project, however, doesn't render the border of the circle.
The circle is a texture which is created with a pixmap. As there is no possibility to set the strokewidth for the drawCircle method (why isn't there any?; see http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/Pixmap.html#drawCircle-int-int-int-), I'm drawing the border as a filledCircle with another circle on top of it:
creating the texture
Pixmap pixmap = new Pixmap(radius * 2 + 1, radius * 2 + 1, Format.RGBA8888);
Pixmap.setBlending(Blending.None);
pixmap.setColor(new Color(1,1,1,1));
pixmap.fillCircle(radius, radius, radius);
pixmap.setColor(new Color(0, 0, 0, 0.6f);
pixmap.fillCircle(radius, radius, radius - borderWidth);
texture = new Texture(pixmap);
texture.setFilter(TextureFilter.Linear, TextureFilter.Linear);
pixmap.dispose();
drawing
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT (Gdx.graphics.getBufferFormat().coverageSampling ? GL20.GL_COVERAGE_BUFFER_BIT_NV : 0));
// tell the camera to update its matrices.
camera.update();
game.spriteBatch.setProjectionMatrix(camera.combined);
// begin the drawing process
game.spriteBatch.begin();
drawBackground();
//circle gets drawn here
game.spriteBatch.draw(texture, 50, 50);
//end drawing process
game.spriteBatch.end();
Any ideas?
Edit: Tested on Chrome (35.0.1916.153) and Firefox (30.0) on Ubuntu 14.04. Can anybody reproduce this problem?
You need to disable blending before drawing a circle:
pixmap.setBlending(Pixmap.Blending.None);
pixmap.fillCircle(radius, radius, radius);

Text field using OpenGL

So, I'm new to OpenGL and trying to create a 2D Multiplayer game, I know how to do all of the networking, although the graphics portion is honestly kicking my buttox.
I have tried looking at NiftyGUI aswell as TWL as they have been recommended a-lot, although I can't seem to get a grasp of them as there aren't very many tutorials and no videos to help explain what's going on, not to mention the OpenGL Documentary page is just horribly laid out.
I've attemped drawing a black rectangle, which I was going to go ahead and outline in white somehow and making that a temporary textbox, by drawing white font onto it, although I don't even know how to draw font. These are just a few of the things I'm strugling with that I can't find and I'm aware that I'm going to have to use some libraries, so I'll name the ones I have implemented currently.
LWJGL
Slick2D
I don't have any others currently, besides for TWL but I can't figure out how to use it for the life of me.
Here's the code that I made myself while trying to get a small black rectangle going
void drawTextBox(int fromLeft, int fromTop, int width, int height) {
glColor3f(1.0f, 1.0f, 1.0f);
glBegin(GL_QUADS);
glTexCoord2f(0, 0);
glVertex2i(fromLeft, fromTop); // Upper Left
glTexCoord2f(1, 0);
glVertex2i(fromLeft - width, fromTop); // Uppright
glTexCoord2f(1, 1);
glVertex2i(fromLeft - width, fromTop + height); // Bottom right
glTexCoord2f(0, 1);
glVertex2i(fromLeft, fromTop + height); // bottom left
glEnd();
}
This is working correctly, all but one part... It's drawing the last texture that I have loaded, even though I'm not binding it anywhere in the program, because I've made sure of it. Then it's scaling it to fit into the dimensions of the text-box.
Could someone help me resolve this error and direct me to where I can learn how to set the opacity of quads as-well as draw some text?
Try binding the texture you want right before calling the function. Without knowing how you've "made sure" that the other texture is not being bound, that's all I can say. Also, for changing opacity simply use one of GL11.glColor4_ functions; the last parameter is the alpha (opacity) of the color.
void drawTextBox(int fromLeft, int fromTop, int width, int height) {
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA);
glColor4f(1.0f, 1.0f, 1.0f, <B>0.5f</B>);
glBegin(GL_QUADS);
glTexCoord2f(0, 0);
glVertex2i(fromLeft, fromTop); // Upper Left
glTexCoord2f(1, 0);
glVertex2i(fromLeft - width, fromTop); // Uppright
glTexCoord2f(1, 1);
glVertex2i(fromLeft - width, fromTop + height); // Bottom right
glTexCoord2f(0, 1);
glVertex2i(fromLeft, fromTop + height); // bottom left
glEnd();
glDisable(GL_BLEND);
}
This block of code allows you to draw a white rectangle with %50 opacity.
Take a look at the BOLDED part (0.5f). This float number defines the opacity of your rectangle. The bigger this number is (0.0f~1.0f), the more the opacity of the rectangle is.

Problem texture mapping a quad in OpenGL with Ortho2D

The following code produces the image that follows. The image I am using for the background is 640 x 480, as is the displayMode. The texture background is a .bmp and is loaded with the Slick texture loader. I am confuse to why it is not filling the Quad and why it is reflected.
EDIT: The background of my OpenGL scene is pink, the black you see is from the Quad created. The background image is the green block with a 2px light blue border with "test" plastered on it.
private void renderBackground(){
float w = displayMode.getHeight()/2;
float h = displayMode.getWidth()/2;
GL11.glMatrixMode(GL11.GL_PROJECTION);
GL11.glPushMatrix();
GL11.glLoadIdentity();
GLU.gluOrtho2D(-w, w, -h, h);
GL11.glMatrixMode(GL11.GL_MODELVIEW);
GL11.glPushMatrix();
GL11.glLoadIdentity();
GL11.glDisable(GL11.GL_DEPTH_TEST);
if(useTextures)background.bind();
GL11.glBegin(GL11.GL_QUADS);
GL11.glTexCoord2f(0.0f, 0.0f);
GL11.glVertex2f(-w,-h);
GL11.glTexCoord2f(1.0f, 0.0f);
GL11.glVertex2f(w,-h);
GL11.glTexCoord2f(1.0f, 1.0f);
GL11.glVertex2f(w, h);
GL11.glTexCoord2f(0.0f, 1.0f);
GL11.glVertex2f(-w, h);
GL11.glEnd();
GL11.glEnable(GL11.GL_DEPTH_TEST);
GL11.glMatrixMode(GL11.GL_PROJECTION);
GL11.glPopMatrix();
GL11.glMatrixMode(GL11.GL_MODELVIEW);
GL11.glPopMatrix();
}
Now when I add GL11.glTranslatef(20.0f, 20.0f, 0.0f); you will notice that the pink appears, which is the colour created int my "initGL" method:
GL11.glClearColor(1.0f, 0.75f, 0.796f, 0.0f);
My GL_PROJECTION contains the following before pushing it, my GL_MODELVIEW is unmodified when renderBackground() is called.
GL11.glMatrixMode(GL11.GL_PROJECTION); // Select The Projection Matrix
GL11.glLoadIdentity(); // Reset The Projection Matrix
// Calculate The Aspect Ratio Of The Window
GLU.gluPerspective(45.0f, (float) displayMode.getWidth() / (float) displayMode.getHeight(), 0.1f, 25.0f);
//position camera
GLU.gluLookAt(5.0f, 3.0f, -5.0f, 0.0f, 0.0f, -10.0f, 0.0f, 1.0f, 0.0f);
GL11.glMatrixMode(GL11.GL_MODELVIEW); // Select The Modelview Matrix
I need more information to determine the problem, but here is a list with some possibilities.
1) You are using an older video card, which does not support texture non-power of 2, since you are using a library to load the texture, maybe it is detecting it, creating a power of two image, and filling it with black.
2) You (or some library you are using) changed the matrix of the texture matrix stack, and it is changing the texture coordinates.
3) You are doing something wrong when you load the texture (or call the library to do so).
The first thing I would check is if your video card supports texture non-power of 2 extension. You can check it at runtime, see how to detect if openGL/card supports non power of 2?
What I see first, is that you compute
float w = displayMode.getHeight()/2;
float h = displayMode.getWidth()/2;
switched?
Second, the texture could be flipped because the loader flipped it (when I remember right this happened to me, too especially with BMPs).

Categories