We Keep Coding

libGDX problem with getWidth() and getHeight() after resizing

Problem recorded and uploaded to Youtube
libGDX resizing problem
I am starting out with libGDX and wanted to make a game.
However... when I was just experimenting around... this happened.
I don't know why it does that or what I should do to eliminate this.
I don't know what to google either. It's almost as if libGDX's default width and height methods doesn't update correctly when the screen is being resized.
Am I doing something wrong here?
Code :
public class Metroidvania extends ApplicationAdapter {
ShapeRenderer s;
#Override
public void create () {
s = new ShapeRenderer();
}
#Override
public void render () {
ScreenUtils.clear(1, 1, 1, 1);
s.begin(ShapeRenderer.ShapeType.Filled);
s.setColor(0, 0, 0, 1);
s.rect(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
s.end();
}
#Override
public void dispose () {
s.dispose();
}
}

The video is currently stuck at 97% uploaded... Even Youtube is against me now
Basically, The code is supposed to cover the entire screen in black... even when resized. But here, when resised Gdx.graphics.getWidth() and Height() returns wrong values, causing white spaces to show.
The rect()'s shape depends on which direction you resize in.
Resize the screen smaller and the rect() become's smaller at R times the rate of resizing (R is unknown). Vice versa for reisizing it larger.

LibGDX usually uses a virtual screen and viewports i.e. you render to a different width and height than are the real ones in pixel terms.
Maybe have a look here Libgdx Window Resizing: Keeping Aspect Ratio as there is a resize method you can hook into to dynamically update your own coordinate system.

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.

Trying to do a spotlight effect in android canvas

I have a canvas and a simple bitmap for background image, fills the whole screen. I created a rect painted black and set it's alpha to 250 in order to make a "dark" effect on the background image. My aim to make a simple circle object that reveals the place it's hovering above. I tried thinking in many ways how to excecute it and failed.
I think the best way is to create a simple circle that manages to decrease the darkness alpha on the position it hovers above, but I have no idea how to do it.
The relevant part of my code:
private ColorFilter filter = new LightingColorFilter(Color.BLACK, 1);
private Paint darkPaint = new Paint(Color.BLACK), paint = new Paint(), paint2 = new Paint();//The style of the text and dark.
public DarkRoomView(Context context) {
super(context);
myChild = this;
darkPaint.setColorFilter(filter);
darkPaint.setAlpha(250);
paint2.setAlpha(10);
paint.setAlpha(50);
}
private void loadGFX() {//Loads all of this view GFX file.
backgroundImage = BitmapFactory.decodeResource(getResources(), R.drawable.darkroomscreen);
lightImage = BitmapFactory.decodeResource(getResources(), R.drawable.light);
}
private void drawGFX(Canvas canvas) {
canvas.drawBitmap(backgroundImage, 0, 0, paint2);//The backgeound image.
canvas.drawRect(0, 0, WIDTH, HEIGHT, darkPaint);//The darkness.
canvas.drawBitmap(lightImage, 50, 50, paint);//A spotlight.
}
Any ideas how I should get it done?
Thanks!

For the spotlight, you could draw a circle of the original image over the darkness. You'd simply need to find the correct rectangle of the original image (based on where your finger is), and then draw a circle of that particular rectangle over the darkness. Trying to look "through" the darkness won't really get you anywhere; you need to place something over it.

By the time you draw the "spotlight", you've already darkened the image with the rectangle. It would be difficult to recover information lost during that draw.
A more flexible approach would be to draw a dark rectangle with a spotlight in a separate image (that is, compose the "darkness" and spotlight alpha and color mask image first), and then draw that mask image on top of the background as a separate step. This would also let you easily do things like e.g. give the spotlight fuzzy borders.

Arranging drawables drawn on canvas

is there a way to arrange drawable drawen on canvas, before redrawing it? I mean setting which drawable will be drawn in the front, and which drawable will be drawn in the back.

They're drawn in the order you draw them. Just try drawing the one which sits in the back first, the front one last.

A way to do it is to have everything you draw define a z-index variable and collect everything you draw at a single point and put them in a list that you then order by the z-index before drawing it.
ex:
Interface IDrawable{
int getZ();
void draw();
}
class drawMe implements IDrawable{
#overrider
draw(){
/// do my drawing
}
#override
int getZ() {return z; }
}
in your drawing or main class
List<IDrawable> myList= new ArrayList();
myList.Add(new DrawMe());
and in your draw method
for(IDrawable draw : myList.OrderBy(z){
draw.draw();
}
thats the concept anyway

You can draw to a temporary canvas for drawing to the main canvas later.
Picture iconFrame = new Picture();
Canvas tempCanvas = iconFrame.beginRecording(width, height);
// width and height refer to the intended destination canvas size
...
// Any configuration before performing the draw should be done here
tempCanvas.drawPath(...);
tempCanvas.drawBitmap(...);
// Any required draw commands for this image should be done to tempCanvas
iconFrame.endRecording();
...
// Any other configuration or draw commands can be done here
iconFrame.draw(canvas);
// Assigns the content of tempCanvas to the top of the main Canvas
In my case, the PorterDuff manipulation of my image within a custom path only worked if it was done first because later draws corrupted it.

Changing the Coordinate System in LibGDX (Java)

LibGDX has a coordinate system where (0,0) is at the bottom-left. (like this image: http://i.stack.imgur.com/jVrJ0.png)
This has me beating my head against a wall, mainly because I'm porting a game I had already made with the usual coordinate system (where 0,0 is in the Top Left Corner).
My question: Is there any simple way of changing this coordinate system?

If you use a Camera (which you should) changing the coordinate system is pretty simple:
camera= new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
camera.setToOrtho(true, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
If you use TextureRegions and/or a TextureAtlas, all you need to do in addition to that is call region.flip(false, true).
The reasons we use y-up by default (which you can easily change as illustrated above) are as follows:
your simulation code will most likely use a standard euclidian coordinate system with y-up
if you go 3D you have y-up
The default coordinate system is a right handed one in OpenGL, with y-up. You can of course easily change that with some matrix magic.
The only two places in libgdx where we use y-down are:
Pixmap coordinates (top upper left origin, y-down)
Touch event coordinates which are given in window coordinates (top upper left origin, y-down)
Again, you can easily change the used coordinate system to whatever you want using either Camera or a tiny bit of matrix math.

Just to expand a little on what badlogic said above, if you are using a TextureAtlas (with TextureRegions) you need to flip them, as badlogic said, in addition to the camera work. If you are using a TextureAtlas, you can use this code right after loading your atlas:
String textureFile = "data/textures.txt";
atlas = new TextureAtlas(Gdx.files.internal(textureFile), Gdx.files.internal("data"));
// Let's flip all the regions. Required for y=0 is TOP
Array<AtlasRegion> tr = atlas.getRegions();
for (int i = 0; i < tr.size; i++) {
TextureRegion t = tr.get(i);
t.flip(false, true);
}

If you want to hide the transformation and not think about it after setting it up once, you can make a class that inherits all of the functionalities you need, but first transforms the coordinates before passing it to its parent class's function. Unfortunately, this would take a lot of time.
You could alternatively make a method that does the simple y' = height - y transformation on the whole Coordinate object (or whatever it is you're using), and call it once before each operation.

Interesting graphics library, I would say. I found this assessment from the link below:
Another issue was that different coordinate systems were used in different parts of Libgdx. Sometimes the origin of the axes was in the
bottom left corner with the y-axis pointing upwards and sometimes in
the top left corner of the sprite pointing downwards. When drawing
Meshes the origin was even in the center of the screen. This caused
quite a bit of confusion and extra work to get everything in the
correct place on the screen.
http://www.csc.kth.se/utbildning/kandidatexjobb/datateknik/2011/rapport/ahmed_rakiv_OCH_aule_jonas_K11072.pdf

I just made a class that extends SpriteBatch that overides certain methods adding y = Gdx.graphics.getHeight() - y - height. Simple but effective.

I was able to get textures and fonts rendering correctly using the suggested flipped coordinate system via OrthographicCamera. Here's what I did:
private SpriteBatch batch;
private BitmapFont font;
private OrthographicCamera cam;
private Texture tex;
#Override
public void create () {
batch = new SpriteBatch();
font = new BitmapFont(true);
font.setColor(Color.WHITE);
cam = new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
cam.setToOrtho(true, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
tex = new Texture("badlogic.jpg");
}
#Override
public void dispose() {
batch.dispose();
font.dispose();
tex.dispose();
}
#Override
public void render () {
cam.update();
batch.setProjectionMatrix(cam.combined);
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
font.draw(batch, "Test", 50, 50);
batch.draw(tex, 100, 100, tex.getWidth(), tex.getHeight(), 0, 0, tex.getWidth(), tex.getHeight(), false, true);
batch.end();
}
Important things to notice are:
The BitmapFont constructor, the boolean flips the font
For batch.draw() you need to use all those parameters because you need a boolean flipY at the end to flip the texture (I may extend SpriteBatch or make a utility method to avoid passing so many parameters all the time.)
Notice batch.setProjectionMatrix(cam.combined); in render()
Now we will see if I am back here later tonight doing edits to fix any other issues or discoveries with doing all this.