Aspect ratio in LibGdx

Question

I'm learning LibGdx and I need some help with the camera.

Let's see, I'm making a Chu Chu Rocket! clon to start. I've loaded a TiledMap (10x10), and I've created an OrthographicCamera to show the map. This is my camera code, written in the Map class constructor, which is invoked in the create() method:

map = new TmxMapLoader().load("data/maps/" + filename);
renderer = new OrthogonalTiledMapRenderer(map, 1.0f/24.0f);     
camera = new OrthographicCamera();
camera.setToOrtho(false, 10, 10);

And this is the result, when I compile

The problem is that the tiles I used in Tiled were squares. When I load, as you can see, they're rectangles. That's a problem for me.

I've read some things about resizing, changing aspect ratio, etc, but everithing was about doing it to fit various devices resolutions / screen sizes. So, my questions are:

• How to define correctly the aspect ratio for a tiled map using a ortographic camera?
• When I do that, the ratio will be correct for every device?
• The elements which aren't the map (like the mice) would need to be also adjusted? How?

Thanks for your answers.

Answer 1

What your dealing with is an aspect ratio mismatch. Your trying to map an aspect ratio of 1 to an aspect ratio of 16:9 or 16 :10. That is why your tiles look stretched. Set your games resolution to a square aspect ratio like 300x300 if windowed. Or make your tiles about 160x90 pixels to look square at that resolution.

Topics of interest would be http://en.m.wikipedia.org/wiki/Aspect_ratio_(image) and http://en.m.wikipedia.org/wiki/Field_of_view_in_video_games.