We Keep Coding

LibGDX how to use different batches in one Stage

I'm using LibGDX with Scene2D for my java game. I know my issue is connected to Scene2D, because I used the EXACT same class passing it normally to SpriteBatch (not through Stage instance) and it worked as expected.
I let Stage manage all of my drawables entities which are actors. It draws everything using implementor of Batch; SpriteBatch is the default. And it was working until I wanted to draw a polygon, which has to be drawn by PolygonSpriteBatch, not SpriteBatch.. So during one Stage.draw() call I need to use them both.
I made a CheckedPolygon class which is basically two PolygonSprites drawn on top of each other (one is semi-transparent). SpriteBatch passed in draw() method is temporarily ended to enable PolygonSpriteBatch for a moment, draw the polygon and disable it.
And the output is empty screen, I get nothing. Again, it worked when I wasn't using Stage class.
Here's the class, so you get a better understanding.
NOTE: I know this is bad in terms of performance, because I don't dispose of Texture and keep Batch for one object but it's for the sake of simplicity.
NOTE2: Yes, I passed it properly to stage, the code is executed, I checked through debugging.
public class CheckedPolygon extends Actor {
private final PolygonSprite mBackground, mCross;
private final PolygonSpriteBatch mPolygonSpriteBatch;
private final Camera mCamera;
public CheckedPolygon(Camera camera, float[] vertices, short[] triangles) {
super();
mCamera = camera;
mPolygonSpriteBatch = new PolygonSpriteBatch();
Texture textureBack = new Texture(Gdx.files.internal("source/back.png"));
textureBack.setWrap(Texture.TextureWrap.Repeat, Texture.TextureWrap.Repeat);
PolygonRegion regionBack = new PolygonRegion(new TextureRegion(textureBack), vertices, triangles);
mBackground = new PolygonSprite(regionBack);
Texture textureCross = new Texture(Gdx.files.internal("source/cross.png"));
textureCross.setWrap(Texture.TextureWrap.Repeat, Texture.TextureWrap.Repeat);
PolygonRegion regionCross = new PolygonRegion(new TextureRegion(textureCross), vertices, triangles);
mCross = new PolygonSprite(regionCross);
}
#Override
public void draw(Batch batch, float parentAlpha) {
batch.end();
mPolygonSpriteBatch.setProjectionMatrix(mCamera.combined);
mPolygonSpriteBatch.begin();
mBackground.draw(mPolygonSpriteBatch);
mCross.draw(mPolygonSpriteBatch);
mPolygonSpriteBatch.end();
batch.begin();
}
}
And I use it like this:
CheckedPolygon polygon = new CheckedPolygon(mStage.getCamera(), mTextureAtlas, new float[]{0, 500, 0, 0, 0, 500}, new short[]{0, 1, 2});
mStage.addActor(polygon);
I checked values from methods PolygonSprite.getVertices() and PolygonSprite.getBoundingRectangle() and got some weird outputs...

You create an invalid polygon with 0,500 being the first and last point.
So you need to chose valid vertices, for example:
new float[] {0, 0, 0, 500, 500, 500}
I created a small image to visualize it. The line on top is your "polygon", the triangle below is a polygon with the vertices from above:
The vertices you get back from the polygon sprite are otherwise ok, since they contain x, y, color, u, v.

How to create a healthbar in Libgdx?

I have been wondering how I would go by making a health bar in libgdx/java. I am looking into a Shape Renderer thinking I can use a filled shape to create a health bar, though I am not sure on how to make an approach in that direction. On the other hand I have been looking into using scene2D and NinePatches to create a healthbar for the game. I have tried to use a NinePatch/Scene2D by looking up websites on google, though it seems when I add the code I always get an issue when I try to render it to my screen. So if anybody can help me create a functional health bar in libgdx using whatever method, I would be extremely thankful. Thank you.
I cannot post pictures yet, because I have not posted 10 posts. So here is the link http://gyazo.com/6650f3d820f31c99c3f8061ebed0bdec. Sorry

I don't have any experience with Scene2D and stages but here is how i would do a simple healthbar:
Create a rectangle and fill this with a color or texture.
When a player loses HP shorten that rectangle by the same percentage as the HP lost.
Create a basic Orthographic camera with the height/width of the screen. I usually call this viewportCam.
Below all the other draw logic you change the SpriteBatch too spriteBatch(viewportCam.Combined)
Within this spritebatch you draw the healthbar.
public void Draw()
{
spriteBatch(normalCam.combined);
spriteBatch.begin();
//Normal draw logic.
spriteBatch.end();
spriteBatch(viewportCam.combined);
spriteBatch.begin();
//Draw UI elements last so the will be drawn on top of the rest.
spriteBatch.end();
}
If you draw a slightly larger rectangle behind the healthbar you have yourself a border.
You can change color depending on how much percentage health is left.
Edit
Just came across this again and currently using another method. I a ninepatch from a 1 pixel wide red gradient. health = new NinePatch(gradient, 0, 0, 0, 0) this makes sure no artifacts occur while stretching it. From here I just calculate how long it needs to be and draw it.
width = currentHealth / totalHealth * totalBarWidth;
Now you can draw it anywhere you want.
health.draw(batch, 10, 10, width, gradient.getHeight);
If you want somekind of container for it you setup a ninepatch for it and draw it before the dynamic health in the background. So let's say the container is 2 bigger at top/bottom and 5 at left/right.
container = new NinePatch(containerRegion, 5, 5, 2, 2);
//Offset it by the dynamic bar, let's say the gradient is 4 high.
container.draw(batch, 5, 8, totalBarWidth + 10, 8);
health.draw(batch, 10, 10, width, 4);
I "hardcoded" the container 5 to the left and made it 10 longer so it fits horizontally. Vertically I lowered it by 2 and made it 8 high to fit the bar perfectly.

This is how you can do it ,implement logic your self
import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Pixmap;
import com.badlogic.gdx.graphics.Pixmap.Format;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
public class MyGdxGame extends ApplicationAdapter {
SpriteBatch batch;
int i=0;
Texture texture,texture2;
#Override
public void create () {
batch = new SpriteBatch();
initTestObjects() ;
}
#Override
public void render () {
Gdx.gl.glClearColor(0, 0, 0, 0);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
batch.draw(texture2,100,100,300,20);
batch.draw(texture,100,100,i,20);
if(i>300)
{
i=0;
}
i++;
batch.end();
}
private void initTestObjects() {
int width =1 ;
int height = 1;
Pixmap pixmap = createProceduralPixmap(width, height,0,1,0);
Pixmap pixmap2 = createProceduralPixmap(width, height,1,0,0);
texture = new Texture(pixmap);
texture2 = new Texture(pixmap2);
}
private Pixmap createProceduralPixmap (int width, int height,int r,int g,int b) {
Pixmap pixmap = new Pixmap(width, height, Format.RGBA8888);
pixmap.setColor(r, g, b, 1);
pixmap.fill();
return pixmap;
}
}

Algorithm to make a polygon from transparent png sprite

Say, I have a sprite of a game object which is a png image with transparency.
I want to create a polygon from this image which will contain my game object.
I am pretty sure there is an existing algorithm for it, but I haven't found any.
I expect something like:
public static Polygon getPolygon(BufferedImage sprite)
{
// get coordinates of all points for polygon
return polygon;
}

See this question. It will be slow, but it depends on how accurate you want it (second answer is sloppier, but a bit faster). After you get the Area from getOutline() on the other question, try using this code (untested):
public static Polygon getPolygonOutline(BufferedImage image) {
Area a = getOutline(image, new Color(0, 0, 0, 0), false, 10); // 10 or whatever color tolerance you want
Polygon p = new Polygon();
FlatteningPathIterator fpi = new FlatteningPathIterator(a.getPathIterator(null), 0.1); // 0.1 or how sloppy you want it
double[] pts = new double[6];
while (!fpi.isDone()) {
switch (fpi.currentSegment(pts)) {
case FlatteningPathIterator.SEG_MOVETO:
case FlatteningPathIterator.SEG_LINETO:
p.addPoint((int) pts[0], (int) pts[1]);
break;
}
fpi.next();
}
return p;
}

LibGDX - properly using Polygon class

I have created Polygon object to wrap my airplane (size of airplane's TextureRegion is 256x74, but size of this one in a game is 70x20). So:
TextureRegion[] texRegsAirplane = TextureRegion.split(textureAirplane, 256, 74);
Rectangle bounds = new Rectangle(0, 0, 70, 20);
Polygon polygon = new Polygon(new float[]{0,0,bounds.width,0,bounds.width,bounds.height,0,bounds.height,0,0});
After that in my update function I update position of it:
public void update(float delta){
Vector2 v = getPosition();
v.add(velocity);
polygon.setPosition(v.x, v.y);
}
Then I render polygon to know where it is:
public void render(SpriteBatch spriteBatch, float pixelPerUnitX, float pixelPerUnitY){
spriteBatch.draw(testTexture,polygon.getX()*pixelPerUnitX, polygon.getY()*pixelPerUnitY,
polygon.getBoundingRectangle().width*pixelPerUnitX,polygon.getBoundingRectangle().height*pixelPerUnitY);
}
At the end I create 2 airplanes and make them fly to each other and every iteration I try to detect collision like below:
public void detectCollision(){
for(Airplane airplane1 : Airplanes){
for(Airplane airplane2 : Airplanes){
if(Intersector.overlapConvexPolygons(airplane1.getPolygon(), airplane2.getPolygon())){
//COLLISION DON'T HAPPEN!!!
}
}
}
I see that 2 rectangles move to each other and intersect, but overlapConvexPolygons function doesn't work! Why?

I've solved this problem. I incorrectly specified vertices. I needed to get rectangular polygon, so I had to use following:
polygon = new Polygon(new float[]{0,0,bounds.width,0,bounds.width,bounds.height,0,bounds.height});
and do not forget set origin if you are going to rotate polygon object:
polygon.setOrigin(bounds.width/2, bounds.height/2);
Now it works perfect!

3D Picking OpenGL ES 2.0 after model matrix translation

Hey all I'm trying to implement 3D picking into my program, and it works perfectly if I don't move from the origin. It is perfectly accurate. But if I move the model matrix away from the origin (the viewmatrix eye is still at 0,0,0) the picking vectors are still drawn from the original location. It should still be drawing from the view matrix eye (0,0,0) but it isn't. Here's some of my code to see if you can find out why..
Vector3d near = unProject(x, y, 0, mMVPMatrix, this.width, this.height);
Vector3d far = unProject(x, y, 1, mMVPMatrix, this.width, this.height);
Vector3d pickingRay = far.subtract(near);
//pickingRay.z *= -1;
Vector3d normal = new Vector3d(0,0,1);
if (normal.dot(pickingRay) != 0 && pickingRay.z < 0)
{
float t = (-5f-normal.dot(mCamera.eye))/(normal.dot(pickingRay));
pickingRay = mCamera.eye.add(pickingRay.scale(t));
addObject(pickingRay.x, pickingRay.y, pickingRay.z+.5f, Shape.BOX);
//a line for the picking vector for debugging
PrimProperties a = new PrimProperties(); //new prim properties for size and center
Prim result = null;
result = new Line(a, mCamera.eye, far);//new line object for seeing look at vector
result.createVertices();
objects.add(result);
}
public static Vector3d unProject(
float winx, float winy, float winz,
float[] resultantMatrix,
float width, float height)
{
winy = height-winy;
float[] m = new float[16],
in = new float[4],
out = new float[4];
Matrix.invertM(m, 0, resultantMatrix, 0);
in[0] = (winx / width) * 2 - 1;
in[1] = (winy / height) * 2 - 1;
in[2] = 2 * winz - 1;
in[3] = 1;
Matrix.multiplyMV(out, 0, m, 0, in, 0);
if (out[3]==0)
return null;
out[3] = 1/out[3];
return new Vector3d(out[0] * out[3], out[1] * out[3], out[2] * out[3]);
}
Matrix.translateM(mModelMatrix, 0, this.diffX, this.diffY, 0); //i use this to move the model matrix based on pinch zooming stuff.
Any help would be greatly appreciated! Thanks.

I wonder which algorithm you have implemented. Is it a ray casting approach to the problem?
I didn't focus much on the code itself but this looks a way too simple implementation to be a fully operational ray casting solution.
In my humble experience, i would like to suggest you, depending on the complexity of your final project (which I don't know), to adopt a color picking solution.
This solution is usually the most flexible and the easiest to be implemented.
It consist in the rendering of the objects in your scene with unique flat colors (usually you disable lighting as well in your shaders) to a backbuffer...a texture, then you acquire the coordinates of the click (touch) and you read the color of the pixel in that specific coordinates.
Having the color of the pixel and the tables of the colors of the different objects you rendered, makes possible for you to understand what the user clicked from a logical perspective.
There are other approaches to the object picking problem, this is probably universally recognized as the fastest one.
Cheers
Maurizio