Question about TileMap and Tiled

Newbie & Debugging Questions
#1

Hey guys, i’m moving on to a 2d tiled game…I’ve been reading through some old tutorials and information pages…It seems tilemap has changed a bit, i’m trying to put everything together to come up with something. One question I have though…I have my tileset already put together, do I need to pack the texture?

I’ve already loaded the tileset into Tiled and made a small level. I’m still trying to decipher the information available, if anyone has any good ‘current’ tutorials it would be greatly appreciated.

#2

I’ve got the camera working and showing my map, but everything looks zoomed in. I’ve gone through the wiki and can’t seem to find how to keep the tiles at 16x16 instead of stretching or zooming them…I can zoom in and out, but that doesn’t solve the stretching problem…


package com.bassex.oasishm;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Input.Keys;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.tiled.*;

public class OasisGame implements ApplicationListener {
	private OrthographicCamera camera;
	private SpriteBatch batch;
	private Texture texture;
	private Sprite sprite;
	
	TileMapRenderer mapRenderer;
	TileAtlas atlas;
	TiledMap map;
	
	static final int WIDTH = 800;
	static final int HEIGHT = 600;
	
	@Override
	public void create() {		
		float w = Gdx.graphics.getWidth();
		float h = Gdx.graphics.getHeight();
		
		
		camera = new OrthographicCamera(HEIGHT,WIDTH);
		batch = new SpriteBatch();
		
		//Map Stuff
		
		map = TiledLoader.createMap(Gdx.files.internal("data/testlvl.tmx"));
		atlas = new TileAtlas(map, Gdx.files.internal("data"));
		mapRenderer = new TileMapRenderer(map, atlas, 8, 8);
		
		
		
		//camera.position.x = WIDTH / 2;
		//camera.position.y = HEIGHT / 2;
		camera.setToOrtho(false, WIDTH / 2,HEIGHT / 2);
		
	}

	@Override
	public void dispose() {
		batch.dispose();
		texture.dispose();
	}

	@Override
	public void render() {		
		Gdx.gl.glClearColor(1, 1, 1, 1);
		Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
		
		
		if(Gdx.input.isKeyPressed(Keys.LEFT)){
			camera.position.x=camera.position.x-Gdx.graphics.getDeltaTime()*300;
		}
		if(Gdx.input.isKeyPressed(Keys.RIGHT)){
			camera.position.x=camera.position.x+Gdx.graphics.getDeltaTime()*300;
		}
		if(Gdx.input.isKeyPressed(Keys.DOWN)){
			camera.position.y=camera.position.y-Gdx.graphics.getDeltaTime()*300;
		}
		if(Gdx.input.isKeyPressed(Keys.UP)){
			camera.position.y=camera.position.y+Gdx.graphics.getDeltaTime()*300;
		}
		if(Gdx.input.isKeyPressed(Keys.PLUS)){
			camera.zoom-=Gdx.graphics.getDeltaTime();
		}
		if(Gdx.input.isKeyPressed(Keys.MINUS)){
			camera.zoom+=Gdx.graphics.getDeltaTime();
		}		
		
		
		camera.update();
		mapRenderer.render(camera);	
	}

	@Override
	public void resize(int width, int height) {
	}

	@Override
	public void pause() {
	}

	@Override
	public void resume() {
	}
}

I’m trying to find a good TiledMap tutorial but haven’t had much luck as it seems TiledMap has been changed…so I don’t know what is correct and incorrect on the tutorials I can find…I’m not even sure HOW to begin drawing my character into the map or anything…Does anyone have any good tutorials for this or any good information? It would be greatly appreciated.

#3 
camera.setToOrtho(false, WIDTH / 2,HEIGHT / 2);

This takes width and height, so it should be WIDTH and HEIGHT, not WIDTH / 2 and HEIGHT / 2 if I understood Your problem correctly.

About tutorials, I do not know any, examples are best tutorials :slight_smile:

#4

Yeah, I don’t think i’m using that method correctly…But when I removed the /2, it screwed everything up. Now the map is very small.

This isn’t the problem i’m having though. I’ve been looking over it a bit more and I think my problem has to do with clipping. I want the tiles and map to stay one size, even when it’s resized. The tiles are stretched and are bigger than 16 pixels. I’ve played with the zooming a bit and got it to look right, but when I resize the window, they just stretch…

#5

I´m not really sure I understand your problem, but the way you describe it is the way it´s supposed to behave. If you resize your window everything will scale to the new resolution.

One thing that is important to understand is that you´re actually not loading 16x16 pixels that you can plot to the screen: You´re loading a texture that is pasted on a rectangle. A rectangle doesn´t have “pixel size”, just coordinates, and will clamp the image within these coordinates .This mean that when you resize the window, you also scale the rectangle (= sprite) to fit the new window resolution and since texture coordinates are relative to the rectangle you´ll also scale the texture. Hence, everything will stretch.

So if what you are experiencing are that the “stretch ratio” of the tile is equal to the new window size, this is expected. You may not like it but it is normal. If not, I think you need to clarify your problem.

#6

Yeah, sorry, it’s a bit hard to explain. Basically, I want it so if I were to make the window bigger it would show more of the map…Not stretch what is already on the map. I want everything to stay one size.

#7

Try adding this to your resize method:


public void resize(int width, int height) {
   camera.setToOrtho(false, width, height);
}

This should set the viewport to the same size as the window.

#8

I think he wants the game to scale, but not stretch. If so, I think that this is a solution.

#9

Tried it. Didn´t stretch.

#10

It does…I just resized the window. My code is a little different than what I posted earlier but not much.

Thanks Geemili, that helps.

#11

I meant I tried my little snippet and it didn´t stretch… But all is well that ends well! ;D