Merge pull request #20 from agmcleod/navigation

Navigation defined via tile object

Author: MikeMnD

README.md

@@ -5,7 +5,7 @@ Tiled plugins for exporting Tilemaps and Tilesets in Godot 3.2 format
  - export_to_godot_tilemap.js
  - export_to_godot_tileset.js
  - utils.js
- 
+
 The plugin requires Tiled version 1.3.4 or newer.
 
 More information about the Tilemap structure of Godot can be found here:
@@ -35,14 +35,14 @@ When you want to add these plugins to your Tiled installation:
   subdirectory.
 
   (Alternatively, clone this git repository into the extensions directory)
-  
+
   Tiled extension directory is:
-  
+
   - **Windows**
    `C:/Users/<USER>/AppData/Local/Tiled/extensions/`
   - **macOS**
   `~/Library/Preferences/Tiled/extensions/`
-  - **Linux**	
+  - **Linux**
   `~/.config/tiled/extensions/`
 
 * If using a version older than Tiled 1.3.3, restart Tiled, but better update your Tiled installation
@@ -66,8 +66,8 @@ Either way the value of projectRoot is transformed to a resource path which Godo
 **_!!! Pay attention to the "/" instead of standard windows "\\".
 Single Backslash "\\" is used for escaping special symbols._**
 
-This is needed so when you export to a subfolder in your Godot project all the relative 
-paths for the resources `(res://)` are set correctly and relative to the custom property 
+This is needed so when you export to a subfolder in your Godot project all the relative
+paths for the resources `(res://)` are set correctly and relative to the custom property
 you've added `"projectRoot"`;
 
 If everything is fine when you go to _File -> Export As_, a new option should exist:
@@ -105,6 +105,15 @@ if Input.is_action_just_pressed("reload_scene"):
 ```
 Don't forget to add key/mouse/controller mapping for the "reload_scene" action ;)
 
+### Tileset objects for collisions & navigation
+
+To setup a collision shape for a tile, first edit the tileset in Tiled:
+
+- Select the tile in the tileset file
+- You should see a side panel "Tile Collision Editor", use the menu above it to create a new shape. Use rectangle or polygon only.
+
+For navigation, do the same thing, but with the Object shape selected, set the `Type` field to `navigation`.
+
 ## Why use it?
 
 The main focus was easily editing and creating new maps and tilesets.
@@ -124,7 +133,7 @@ More about my struggles can be read in Tiled Forum or Godot reddit. Check the Co
 - [ ] Export visibility and opacity from layers
 - [x] Export collision shapes<sup>*</sup>
 - [ ] Export occluder shapes<sup>*</sup>
-- [ ] Export navigation shapes<sup>*</sup>
+- [x] Export navigation shapes<sup>*</sup>
 - [ ] Support for one-way collision shapes
 - [ ] Support for image layers
 - [x] Support for tile objects, which are exported to Godot as Sprite nodes. (Other types of objects are not yet included.)
@@ -133,7 +142,7 @@ More about my struggles can be read in Tiled Forum or Godot reddit. Check the Co
 - [ ] Custom properties for maps, layers, tilesets, and objects are exported as metadata. Custom properties on tiles can be exported into the TileSet resource
 - [ ] Map background layer exported as a parallax background
 
-Legend: ticked = done, unticked = to do 
+Legend: ticked = done, unticked = to do
 
 \* The Godot tileset editor supports only Rectangle and Polygon. That's Tiled are supported and are converted to polygons in Godot.
 

export_to_godot_tileset.js

@@ -12,6 +12,7 @@ class GodotTilesetExporter {
         this.spriteImagePath = this.spriteImagePath.replace(/^\/+/, '');
         this.shapesResources = "";
         this.shapes = "";
+        this.navpolyMap = [];
         this.firstShapeID = "0";
     };
 
@@ -37,6 +38,10 @@ class GodotTilesetExporter {
         // noinspection JSUnresolvedVariable
         let tiles = this.tileset.tiles;
 
+        let minNavId = tiles.reduce((id, tile) => {
+            return Math.max(id, tile.id)
+        }, 0);
+
         for (let index = 0; index < tiles.length; index++) {
 
             let tile = tiles[index];
@@ -62,8 +67,13 @@ class GodotTilesetExporter {
                         // noinspection JSUnresolvedVariable
                         let object = tileObjects[oIndex];
 
-                        //TODO: add occlusions, navigations
-                        this.exportCollisions(object, tile, autotileCoordinates);
+                        //TODO: add occlusions
+                        if (object.type === "navigation") {
+                            minNavId++;
+                            this.exportNavigations(object, minNavId, autotileCoordinates);
+                        } else {
+                            this.exportCollisions(object, tile, autotileCoordinates);
+                        }
                     }
                 }
             }
@@ -84,7 +94,16 @@ class GodotTilesetExporter {
             this.shapesResources += this.getCollisionShapeRectangle(tile.id, object);
             this.exportShapes(tile, autotileCoordinates);
         }
+    }
 
+    exportNavigations(object, id, autotileCoordinates) {
+        if (object.polygon.length > 0) {
+            this.shapesResources += this.getNavigationShapePolygon(id, object);
+            this.exportNavigationShape(id, autotileCoordinates);
+        } else if (object.width > 0 && object.height > 0) {
+            this.shapesResources += this.getNavigationShapeRectangle(id, object);
+            this.exportNavigationShape(id, autotileCoordinates);
+        }
     }
 
     exportShapes(tile, autotileCoordinates) {
@@ -98,6 +117,11 @@ class GodotTilesetExporter {
         );
     }
 
+    exportNavigationShape(id, autotileCoordinates) {
+        this.navpolyMap.push(`Vector2( ${autotileCoordinates.x}, ${autotileCoordinates.y} )`)
+        this.navpolyMap.push(`SubResource( ${id} )`)
+    }
+
     getTilesetTemplate() {
         // noinspection JSUnresolvedVariable
         return `[gd_resource type="TileSet" load_steps=3 format=2]
@@ -115,7 +139,7 @@ ${this.shapesResources}[resource]
 0/autotile/tile_size = Vector2( ${this.tileset.tileWidth}, ${this.tileset.tileHeight} )
 0/autotile/spacing = ${this.tileset.tileSpacing}
 0/autotile/occluder_map = [  ]
-0/autotile/navpoly_map = [  ]
+0/autotile/navpoly_map = [ ${this.navpolyMap.join(', ')} ]
 0/autotile/priority_map = [  ]
 0/autotile/z_index_map = [  ]
 0/occluder_offset = Vector2( 0, 0 )
@@ -166,6 +190,39 @@ points = PoolVector2Array( ${coordinateString} )
         return `[sub_resource type="ConvexPolygonShape2D" id=${id}]
 points = PoolVector2Array( ${topLeft.x}, ${topLeft.y}, ${topRight.x}, ${topRight.y}, ${bottomRight.x}, ${bottomRight.y}, ${bottomLeft.x}, ${bottomLeft.y} )
 
+`;
+    }
+
+    getNavigationShapePolygon(id, object) {
+        let coordinateString = "";
+        // noinspection JSUnresolvedVariable
+        object.polygon.forEach((coordinate) => {
+          let coordinateX = object.x + coordinate.x;
+          let coordinateY = object.y + coordinate.y;
+          coordinateString += coordinateX + ", " + coordinateY + ", ";
+        });
+        // Remove trailing commas and blank
+        coordinateString = coordinateString.replace(/,\s*$/, "");
+        return `[sub_resource type="NavigationPolygon" id=${id}]
+vertices = PoolVector2Array( ${coordinateString} )
+polygons = [ PoolIntArray ( ${object.polygon.map((_value, index) => index).join(', ')} ) ]
+
+`;
+      }
+
+    getNavigationShapeRectangle(id, object) {
+        const topLeft = { x: object.x, y: object.y };
+        const topRight = { x: object.x + object.width, y: object.y };
+        const bottomRight = {
+          x: object.x + object.width,
+          y: object.y + object.height,
+        };
+        const bottomLeft = { x: object.x, y: object.y + object.height };
+
+        return `[sub_resource type="NavigationPolygon" id=${id}]
+vertices = PoolVector2Array( ${topLeft.x}, ${topLeft.y}, ${topRight.x}, ${topRight.y}, ${bottomRight.x}, ${bottomRight.y}, ${bottomLeft.x}, ${bottomLeft.y} )
+polygons = [ PoolIntArray( 0, 1, 2, 3 ) ]
+
 `;
     }