0
\$\begingroup\$

I am making a board game. To draw the map on the board I use different tiles. On some screen the map looks good but on some other screens there is a space between the tiles. How can I do so there won't be any space between the tiles?

I am designing my game with the size 480x800. To fit other screens I stretch it.

My tiles looks like this: enter image description here

I draw the map using a for loop to draw the tile in different (x,y) position on screen.

Here is what I mean with space between tiles: Screen with 240x400

enter image description here

Screen with 360x600, here there is no spacing between tiles.

I use camera and the screen to draw I don't use stage. I have also tried to use Viewport but I get the same results.

  cam = new OrthographicCamera();cam.setToOrtho(true, gameWidth, gameHeight);
  batcher = new SpriteBatch();
  batcher.setProjectionMatrix(cam.combined);
  shapeRenderer = new ShapeRenderer();
  shapeRenderer.setProjectionMatrix(cam.combined);

How can I do to solve the problem?

\$\endgroup\$
1
\$\begingroup\$

To be clear, that black border around your tiles is what you are talking about when you say thee is a "space" inbetween the tiles, right?

You have two options if that is the case:

  1. Alter your coordinates for the tiles so that they range not from [0,1] (relative to the packed tile) but rather [1/2N, 1-1/2N], where N is the size (in texels) of your tile.

  2. Pack your tiles with a border, as described here.


The crux of the problem is that you need to implement Edge Clamp behavior (where the texture coordinates are clamped to texel centers instead of the extreme ends of textures). Otherwise, texture filtering will pickup texels from adjacent tiles since you are not using the center of the texel; the sample point is equally distant from the last texel in your tile as it is the first texel in an adjacent tile if you sample on the border.

However, doing that in a packed texture is complicated. The second solution works best for texture atlases used in 3D rendering, the first solution may be adequate for a simple 2D application such as yours.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.