TMX file is not shown properly using AndEngine

Question

I have written a position locator application for indoor positioning. I've used TMX files to render my floor maps and load them with AndEngine. The problem is that the program does not show the TMX file properly.

Here is the original file:

and here is what my application shows:

How can I fix this? Here is code:

public class TiledViewer extends SimpleBaseGameActivity implements
    IOnSceneTouchListener, IScrollDetectorListener,
    IPinchZoomDetectorListener {

private static final int CAMERA_WIDTH = 480;
private static final int CAMERA_HEIGHT = 320;

private SmoothCamera camera;

private TMXTiledMap mTMXTiledMap;

private SurfaceScrollDetector mScrollDetector;
private PinchZoomDetector mPinchZoomDetector;
private float mPinchZoomStartedCameraZoomFactor;

@Override
public EngineOptions onCreateEngineOptions() {
    this.camera = new SmoothCamera(0, 0, CAMERA_WIDTH, CAMERA_HEIGHT, 400,
            400, 10f);
    final CroppedResolutionPolicy canvasSurface = new CroppedResolutionPolicy(
            CAMERA_WIDTH, CAMERA_HEIGHT);
    EngineOptions engineOptions = new EngineOptions(true,
            ScreenOrientation.PORTRAIT_FIXED, canvasSurface, this.camera);

    if (MultiTouch.isSupported(this)) {
        if (MultiTouch.isSupportedDistinct(this)) {
            Toast.makeText(
                    this,
                    "MultiTouch detected --> Both controls will work properly!",
                    Toast.LENGTH_SHORT).show();
        } else {
            Toast.makeText(
                    this,
                    "MultiTouch detected, but your device has problems distinguishing between fingers.\n\nControls are placed at different vertical locations.",
                    Toast.LENGTH_LONG).show();
        }
    } else {
        Toast.makeText(
                this,
                "Sorry your device does NOT support MultiTouch!\n\n(Falling back to SingleTouch.)\n\nControls are placed at different vertical locations.",
                Toast.LENGTH_LONG).show();
    }

    return engineOptions;
}

@Override
public void onCreateResources() {
    BitmapTextureAtlasTextureRegionFactory.setAssetBasePath("gfx/");
}

@Override
public Scene onCreateScene() {
    this.mEngine.registerUpdateHandler(new FPSLogger());

    final Scene scene = new Scene();
    scene.setOnAreaTouchTraversalFrontToBack();

    this.mScrollDetector = new SurfaceScrollDetector(this);
    this.mPinchZoomDetector = new PinchZoomDetector(this);

    scene.setOnSceneTouchListener(this);
    scene.setTouchAreaBindingOnActionDownEnabled(true);

    try {
        final TMXLoader tmxLoader = new TMXLoader(this.getAssets(),
                this.mEngine.getTextureManager(), TextureOptions.DEFAULT,
                this.getVertexBufferObjectManager(),
                new ITMXTilePropertiesListener() {
                    @Override
                    public void onTMXTileWithPropertiesCreated(
                            final TMXTiledMap pTMXTiledMap,
                            final TMXLayer pTMXLayer,
                            final TMXTile pTMXTile,
                            final TMXProperties<TMXTileProperty> pTMXTileProperties) {
                    }
                });
        this.mTMXTiledMap = tmxLoader.loadFromAsset("tmx/m03.tmx");

    } catch (final TMXLoadException e) {
        Debug.e(e);
    }

    final TMXLayer tmxLayer = this.mTMXTiledMap.getTMXLayers().get(0);
    scene.attachChild(tmxLayer);

    this.camera.setBounds(0, 0, tmxLayer.getHeight(), tmxLayer.getWidth());
    this.camera.setBoundsEnabled(true);

    return scene;
}

@Override
public void onScrollStarted(final ScrollDetector pScollDetector,
        final int pPointerID, final float pDistanceX, final float pDistanceY) {
    final float zoomFactor = this.camera.getZoomFactor();
    this.camera.offsetCenter(-pDistanceX / zoomFactor, -pDistanceY
            / zoomFactor);
}

@Override
public void onScroll(final ScrollDetector pScollDetector,
        final int pPointerID, final float pDistanceX, final float pDistanceY) {
    final float zoomFactor = this.camera.getZoomFactor();
    this.camera.offsetCenter(-pDistanceX / zoomFactor, -pDistanceY
            / zoomFactor);
}

@Override
public void onScrollFinished(final ScrollDetector pScollDetector,
        final int pPointerID, final float pDistanceX, final float pDistanceY) {
    final float zoomFactor = this.camera.getZoomFactor();
    this.camera.offsetCenter(-pDistanceX / zoomFactor, -pDistanceY
            / zoomFactor);
}

@Override
public void onPinchZoomStarted(final PinchZoomDetector pPinchZoomDetector,
        final TouchEvent pTouchEvent) {
    this.mPinchZoomStartedCameraZoomFactor = this.camera.getZoomFactor();
}

@Override
public void onPinchZoom(final PinchZoomDetector pPinchZoomDetector,
        final TouchEvent pTouchEvent, final float pZoomFactor) {
    this.camera.setZoomFactor(this.mPinchZoomStartedCameraZoomFactor
            * pZoomFactor);
}

@Override
public void onPinchZoomFinished(final PinchZoomDetector pPinchZoomDetector,
        final TouchEvent pTouchEvent, final float pZoomFactor) {
    this.camera.setZoomFactor(this.mPinchZoomStartedCameraZoomFactor
            * pZoomFactor);
}

@Override
public boolean onSceneTouchEvent(final Scene pScene,
        final TouchEvent pSceneTouchEvent) {
    this.mPinchZoomDetector.onTouchEvent(pSceneTouchEvent);

    if (this.mPinchZoomDetector.isZooming()) {
        this.mScrollDetector.setEnabled(false);
    } else {
        if (pSceneTouchEvent.isActionDown()) {
            this.mScrollDetector.setEnabled(true);
        }
        this.mScrollDetector.onTouchEvent(pSceneTouchEvent);
    }

    return true;
}
}

Answer 1

I had the same problem for realize an indoor program. I found a way to make better the display by editing directly the .tmx file. In the tileset you should add those attributes spacing and margin. For example: tileset spacing="3" margin="2" If you put the good value in the diferent field, you should have a better display.

My problem was resolved just by adding a margin=10 in this tileset.

I hope that help you,