Graphic update : Tiled Map

After setting up the scrolling star background, I worked on the map itself. For that I use the amazing level editor Tiled.

First, I need to draw a tileset... I spent 3 evenings on this and I am not near finishing it. I have the minimum to create some levels... without variety and without beauty...

I made the (probably bad) decision to work with square tiles of 100 pixels x 100 pixels. From what I usually see, people use lower resolutions like 32px x 32px for example.

So why this 100 x 100 resolution ?

Well... the truth is I ABSOLUTELY suck at drawing. And it seems much easier to draw with higher resolutions. I wasted more than one evening trying to draw 32x32 tiles, but seriously... when we talk about "pixel art", the word "art" is not excessive. With low resolution, every single pixel you draw is important.

For example, just doing a gradient is an art in low resolution, there are some precise rules to make a dithering look good while with higher resolutions you can just go with the "aaaaaah fuck it, Photoshop as the right tool for that" way.

Then, once the 100x100 resolution chosen, I can draw the tileset and create a first level in Tiled. For now, I came up with this obviously unfinished tileset. As you can see, I am still completely in the process of creating it. I try to figure out many things like the size or the color of different elements.

I put the tileset in the folder android ---> assets ---> Levels and I also save the .tmx file generated by Tiled in the same folder.

After drawing the map, I can render it with few code lines in the GameScreen.java.

First we need to create the TiledMap and the TiledMapRenderer in the constructor :

tiledMap = new TmxMapLoader().load("Levels/Level 3.tmx");
tiledMapRenderer = new OrthogonalTiledMapRendererWithSprites(tiledMap, GameConstants.MPP, game.batch);

Then in the renderer() we need these lines :

tiledMapRenderer.setView(camera);
tiledMapRenderer.render();

Very simple ! Here is the result :

Off course, the order you draw things is very important. If you want the game map to appear in front of the scrolling background I set up in the previous devlog, you must first draw the background, then draw the map, like this :

tiledMapRenderer.setView(camera);

//Background
game.batch.begin();
    game.batch.draw(backgroundTexture, 
            0, 
            0, 
            levelPixelWidth, 
            levelPixelHeight,  
            (int)(backgroundTime * 8), 
            0, 
            (int)(levelPixelWidth * 20), 
            (int)(levelPixelHeight * 20), 
            false, 
            false);
game.batch.end();
        
//Game map
tiledMapRenderer.render();

Where are the walls the Obstacles ??

As you can see in the above gif, there are still a lot of things rendered by the Box2d renderer, namely the walls and the objects.

• For the Obstacles, we can't do that with Tiled. As far as I know, Tiled can't draw moving objects. Thus, I'll need to implement a draw() method for every type of Obstacle.
• For the walls, it's different. Tiled is definitely made to draw walls. But I wanted to give me the option to draw thin walls. By thin, I mean walls with a width thinner than 100 px (which is a tile dimension in my project). And I want to be able to draw walls of any thickness. Therefore, the solution that came to my mind was using a NinePatch to draw walls. And I'll talk about that in the next devlog.