Tiled Map Documentation

Initial Attempt... 👎

Libraries and Frameworks: Initially attempting to use the Tiled maps on Java >

Java library repo Errors I came across
Java library issues > fixed add them in the pom.xml

displaying the tiles > not fixed, decided to move to js Highly likely there is an issue in this part of the code...


private void loadTiledMap() {
    try {
        File file = new File("src/main/java/com/nighthawk/spring_portfolio/mvc/collision/main-map.tmx");
        TMXMapReader mapReader = new TMXMapReader();
        tiledMap = mapReader.readMap(file.getAbsolutePath());
        mapWidth = tiledMap.getWidth();
        mapHeight = tiledMap.getHeight();

        tileset = tiledMap.getTileSets().get(0);

    // render layer 2-18
        int startLayerIndex = 2;
        int endLayerIndex = 18;

for (int i = startLayerIndex; i <= endLayerIndex; i++) { MapLayer layer = tiledMap.getLayer(i); if (layer instanceof TileLayer) { layersToRender.add((TileLayer) layer); } }

    } catch (IOException e) {
        e.printStackTrace();
    } catch (Exception e) {
        e.printStackTrace();
        // Handle other Exception
    }
}


## Rendering in JS Instead

[Rendering in web](https://discourse.mapeditor.org/t/javascript-game-engine/6364)
- some inital concerns I had even when trying to render on java was the .tsx file which had underlines and error but it is supposed to be like that ? I looked to see but yeah that is right

**Loading/Use**

Load game assets (**.tmg**, images, audio, ect) using the asset manager 
★ use .tmg one big mistake I made was trying to use the .tmx :(

register() { stage.iLoader.addAudio(url) stage.iLoader.addImage(url) stage.iLoader.addTileMap(url) } app.preloadAllData()

After using the preloadAllData the data is seen on the init() and start()
★ tilemaps, tilesets, images SHOULD ALL BE IN THE SAME FOLDER!!!
using the .tmg tilemaps to draw and organize the system levels
1. add the tilemap and load it
2. make a draw object in init() or the start()
3. ^^ makes a tilemap layer on canvas

init() { this.tiledLayer = this.draw.tiledLayer("tilemap_layer_key", "tilemap_key", setBoundaries, shapeMask); }


**Collisions via Layers**

Pass true as 3 parameter >> to extract the boundries on the tilemap layer

this.draw.tiledLayer("tilemap_layer_key", "tilemap_key", true, shapeMask);

 Boundaries/Collision layer is then retrieved through >>
The method also uses for collision calculations

this.stageData.getBoundaries()



This is what the folder should look like >
- The images folder should contain the Tiled, Tilemap, and Tiles
- The audio folder should contain all audio snippets you want to use (they should be .mp3 files)

<img width="344" alt="Screenshot 2024-02-07 at 12 21 20 PM" src="https://github.com/lunaiwa/student-template/assets/111661543/571f2881-bdf3-46c4-af15-23acd1fb8420">

- make sure that the tile maps have a packed and unpacked

lunaiwa / student-template

Tiled Map Documentation #18

Initial Attempt... 👎