3

I'm creating a side-scrolling platformer and I'm using my own Tiled map. I'm rendering it using the OrthogonalTiledMapRenderer, but after adding background images I noticed that they disappear from the screen too soon. On the first picture you can see the background giant trees still being rendered, and in the TiledMap the first background tile horizontally ends exactly where the ladder starts, and then the same picture is added (so it's basically one image pasted multiple times on the level - second picture).

enter image description here enter image description here

However, even before reaching the first image's ending point, it disappears, which looks like this:

enter image description here

Anybody can help with that? Here is the code for the rendering:

OrthogonalTiledMapRenderer mapRenderer = new OrthogonalTiledMapRenderer(map, 1 / Constants.PPM);
OrthographicCamera camera = new OrthographicCamera();
float width = Constants.VIEWPORT_WIDTH * camera.zoom * 2;
float height = Constants.VIEWPORT_HEIGHT * camera.zoom * 2;

mapRenderer.setView(camera.combined, cameraX, cameraY, width, height);
Gdx.gl.glClearColor(0x64 / 255.0f, 0x95 / 255.0f, 0xed / 255.0f, 0xff / 255.0f);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
mapRenderer.render();

The floats are updated with camera position.

cameraX = camera.position.x - camera.viewportWidth * camera.zoom;
cameraY = camera.position.y - camera.viewportHeight * camera.zoom;

Camera follows the player and is clamped to the borders of the map. Nothing too fancy, I also tried mapRenderer.setView(camera) with the same results.

Deso2121
  • 99
  • 8

3 Answers3

1

It looks like this is caused by optimistic culling of tiles on the renderer side, which breaks when tiles are overly large.

One way to fix this would be to not use a single large tile for these backgrounds, but rather to add the background as a tileset using the same tile size as your map. You can still easily place the whole image at once by using click+drag to select all the tiles in this tileset.

Another option may be to place this image as a tile object on an Object Layer instead, but I don't know if libgdx will render those for you by default.

Thorbjørn Lindeijer
  • 2,022
  • 1
  • 17
  • 22
  • Is there an easy way to create elements from multiple tiles? Because so far this has been hell lot of work, I need to count every image's width and height in tiles after splitting, and properly place them on the map - there's no simple drag and dropping because I can't just mark them as being a one big rectangle. – Deso2121 Jun 09 '20 at 13:43
  • I believe you should go into your tiled map and create the whole level of the game dividing the background and the active parts by levels. It should work fine. Also to start finding the issue, remove the camera limits and other rendering limitation, when everything works again you start including these features. – EL.ALEX78UK Jun 10 '20 at 11:34
  • Thanks guys, answering late but managed to fix the issue by following your guide. Creating special tilesets for every background image and splitting them in 32x32 tiles fixed the issue. – Deso2121 Jun 22 '20 at 13:03
0

Creating separate tilesets for every background image and splitting them in 32x32 tiles fixed the issue.

Deso2121
  • 99
  • 8
0

You could temporarily boost the zoom of your camera so you always render an area larger than you see.

float zoom = camera.zoom;
camera.zoom += 1f;
//render map
camera.zoom = zoom;
Dave
  • 1
  • 1
  • 1