I am having a hard time with LibGDX TileMaps

Question

I'm trying to kind of make a remake of the first Super Mario level. I've been successful with almost everything except for the tiling. If anyone could take a quick look at my code and explain what I've been doing wrong, that would be great! I've been troubleshooting for a couple of days now. Thanks! Also, I'm not allowed to post pictures until my reputation is higher, so here's a link to them.

http://dl.dropbox.com/u/88813088/upload.html

Firstly, here's my image atlas. It's named "world.png":

(the first picture on the linked website)

Secondly, here's what I'm trying to produce:

(second picture on website)

After I save the tmx file and use the TexturePacker, I get this result:

(last picture on website)

It seems as though the tile atlas isn't being chopped up into 32x32 bits. Instead every 32 pixels, the whole image is being displayed again and again on top of each other. Here's the rest of my code. I hope one of you could help me fix it. That would be spectacular.

Here's my main Java code. It's named "MainGame.java":

package com.chanceleachman.marioExample.Screens;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.g2d.tiled.TileAtlas;
import com.badlogic.gdx.graphics.g2d.tiled.TileMapRenderer;
import com.badlogic.gdx.graphics.g2d.tiled.TiledLoader;
import com.badlogic.gdx.graphics.g2d.tiled.TiledMap;
import com.chanceleachman.marioExample.MarioExample;

public class MainGame implements Screen {

OrthographicCamera camera;
TileMapRenderer tileMapRenderer;
TiledMap map;
TileAtlas atlas;

private MarioExample game;

public MainGame(MarioExample game) {
    this.game = game;
}

@Override
public void render(float delta) {
    Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT); // #14
    Gdx.gl.glClearColor(0, 0, 1, 1);
    tileMapRenderer.render(0, 0, 800, 480);
    camera.zoom = 10;
}

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

@Override
public void show() {
    camera = new OrthographicCamera(Gdx.graphics.getWidth(),
            Gdx.graphics.getHeight());

    map = TiledLoader.createMap(Gdx.files.internal("map/map.tmx"));

    atlas = new TileAtlas(map, Gdx.files.internal("map/"));

    tileMapRenderer = new TileMapRenderer(map, atlas, 32, 32);

}
}

Here's my Tmx file from the Tiled program. It's named "map.tmx":

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" width="25" height="15" tilewidth="32" tileheight="32">
<tileset firstgid="1" name="world" tilewidth="32" tileheight="32">
<image source="level.png" width="512" height="32"/>
</tileset>
<layer name="Tile Layer 1" width="25" height="15">
<data encoding="base64" compression="zlib">
eJxjZGBgYBzFo3gUj+JRPKwwAFOoAXg=
</data>
</layer>
</map>

Here's my map packfile code. It's named "map packfile":

level.png
format: RGBA8888
filter: Nearest,Nearest
repeat: none
level
  rotate: false
  xy: 0, 0
  size: 480, 32
  orig: 480, 32
  offset: 0, 0
  index: 0

I think that just about sums it up. To anyone who responds to this, thank you so much! Oh, and also, here is the original tutorial I followed:

1. http://code.google.com/p/libgdx/wiki/GraphicsTileMaps

Once again, thank you! If I left anything important out, just tell me! :)

Answer 1

TexturePacker seems to be bugged, I've never been able to make it work correctly and then use the files in LibGDX. Try to create the .png file & packfile using another tool, see my answer here.