@canvasengine/tiled 2.0.0-beta.25

package/src/parser/parser.ts

@@ -0,0 +1,309 @@
+import { xml2js } from 'xml-js'
+import { TiledMap } from '../types/Map'
+import { TilesetTile } from '../types/Tile'
+import { TiledTileset } from '../types/Tileset'
+import { Buffer } from 'buffer'
+import { getBaseName, joinPath } from '../utils'
+
+export class TiledParser {
+  private layers: Map<number, any> = new Map()
+
+  constructor(private xml: string, private filePath: string = '', private basePath: string = '') { 
+  }
+
+  static propToNumber = (obj, props: string[]) => {
+    for (let key of props) {
+      if (obj[key] !== undefined) {
+        obj[key] = +obj[key]
+      }
+    }
+    return obj
+  }
+
+  static propToBool = (obj, props: string[]) => {
+    for (let key of props) {
+      if (obj[key] !== undefined) {
+        obj[key] = obj[key] == 'true' || obj[key] == '1'
+      }
+    }
+    return obj
+  }
+
+  static toArray<T>(prop): T[] {
+    if (!prop) return []
+    if (!Array.isArray(prop)) return [prop]
+    return prop
+  }
+
+  getImagePath(image: string) {
+    if (this.filePath.startsWith('http')) return new URL(image, this.filePath).href
+    return joinPath(this.basePath, image)
+  }
+
+  /**
+   * Check if the object is a tileset source reference
+   * Tileset sources should not have their paths transformed with getImagePath
+   */
+  private isTilesetSource(obj: any): boolean {
+    // Check if object has tileset-specific properties
+    return obj.firstgid !== undefined || 
+           obj.tilewidth !== undefined || 
+           obj.tileheight !== undefined ||
+           obj.tilecount !== undefined ||
+           obj.columns !== undefined
+  }
+
+  transform = (obj) => {
+    if (!obj) return
+    const attr = obj.attributes || obj._attributes
+    if (!attr) return obj
+    let newObj = {
+      ...obj,
+      ...attr,
+      ...TiledParser.propToNumber(attr, [
+        'version',
+        'width',
+        'height',
+        'tilewidth',
+        'tileheight',
+        'nextlayerid',
+        'nextobjectid',
+        'hexsidelength',
+        'opacity',
+        'x',
+        'y',
+        'offsetx',
+        'offsety',
+        'startx',
+        'starty',
+        'id',
+        'firstgid',
+        'imageheight',
+        'imagewidth',
+        'margin',
+        'columns',
+        'rows',
+        'tilecount',
+        'rotation',
+        'gid',
+        'tileid',
+        'duration',
+        'parallaxx',
+        'parallaxy',
+        'repeatx',
+        'repeaty',
+        'pixelsize'
+      ]),
+      ...TiledParser.propToBool(attr, [
+        'visible',
+        'infinite',
+        'locked',
+        'bold',
+        'italic',
+        'kerning',
+        'strikeout',
+        'underline',
+        'wrap'
+      ])
+    }
+    if (newObj.properties) {
+      const properties: any = TiledParser.toArray(newObj.properties.property)
+      const propObj = {}
+      for (let prop of properties) {
+        const attr = prop._attributes
+        if (!attr) continue
+        let val
+        switch (attr.type) {
+          case 'file':
+            val = this.getImagePath(attr.value)
+            break
+          case 'object':
+          case 'float':
+          case 'int':
+            val = +attr.value
+            break
+          case 'bool':
+            val = attr.value == 'true' ? true : false
+            break
+          case 'class':
+            val = {
+              ...(this.transform(prop)?.properties ?? {}),
+              _classname: attr.propertytype
+            }
+            break
+          default:
+            val = attr.value
+        }
+        propObj[attr.name] = val
+      }
+      newObj.properties = propObj
+    }
+    if (newObj.polygon) {
+      newObj.polygon = this.transform(newObj.polygon)
+    }
+    if (newObj.polyline) {
+      newObj.polyline = this.transform(newObj.polyline)
+    }
+    if (newObj.points) {
+      newObj = newObj.points.split(' ').map(point => {
+        const pos = point.split(',')
+        return { x: +pos[0], y: +pos[1] }
+      })
+    }
+    if (newObj.point) {
+      newObj.point = true
+    }
+    if (newObj.ellipse) {
+      newObj.ellipse = true
+    }
+    if (newObj.text) {
+      newObj.text = {
+        text: newObj.text._text,
+        ...this.transform(newObj.text)
+      }
+      delete newObj.text._text
+    }
+    if (newObj.image) {
+      newObj.image = this.transform(newObj.image)
+    }
+    if (newObj.source) {
+      // For tileset source, keep the original path without transformation
+      // The path resolution will be handled in the TiledParserFile class
+      if (!this.isTilesetSource(newObj)) {
+        newObj.source = this.getImagePath(newObj.source)
+      }
+    }
+    const objectgroup = newObj.object || newObj.objectgroup?.object
+    if (objectgroup) {
+      newObj.objects = TiledParser.toArray(objectgroup).map((object: any) => {
+        return this.transform(object)
+      })
+    }
+    delete newObj._attributes
+    delete newObj.attributes
+    delete newObj.object
+    delete newObj.objectgroup
+    return newObj
+  }
+
+  static unpackTileBytes(buffer: Buffer, size: number): number[] | never {
+    const expectedCount = size * 4
+    if (buffer.length !== expectedCount) {
+      throw new Error("Expected " + expectedCount +
+        " bytes of tile data; received " + buffer.length)
+    }
+    let tileIndex = 0
+    const array: number[] = []
+    for (let i = 0; i < expectedCount; i += 4) {
+      array[tileIndex] = buffer.readUInt32LE(i)
+      tileIndex++
+    }
+    return array
+  }
+
+  static decode(obj: { encoding: string, data: string }, size: number) {
+    const { encoding, data } = obj
+    if (encoding == 'base64') {
+      return TiledParser.unpackTileBytes(Buffer.from(data.trim(), 'base64'), size)
+    }
+    else if (encoding == 'csv') {
+      return data.trim().split(',').map(x => +x)
+    }
+    return data
+  }
+
+  parseMap(): TiledMap {
+    const json: any = xml2js(this.xml, { compact: true })
+    const jsonNoCompact: any = xml2js(this.xml)
+    //const layer = json.map.layer
+    const tileset = json.map.tileset
+    const group = json.map.group
+
+    const recursiveObjectGroup = (obj) => {
+      const { objectgroup, group, layer, imagelayer } = obj
+      const setLayer = (type) => {
+        if (!type) return
+        TiledParser.toArray(type).forEach((val: any) => {
+          if (this.layers.has(+val._attributes.id)) {
+            throw new Error(`Tiled Parser Error: Layer with id ${val._attributes.id} already exists`)
+          }
+          this.layers.set(+val._attributes.id, val)
+        })
+      }
+      setLayer(objectgroup)
+      setLayer(layer)
+      setLayer(group)
+      setLayer(imagelayer)
+      if (group) {
+        recursiveObjectGroup(group)
+      }
+    }
+
+    recursiveObjectGroup(json.map)
+
+    const recursiveLayer = (elements, array: any = []) => {
+      if (!elements) return array
+      for (let element of elements) {
+        const { name } = element
+        if (!['layer', 'group', 'imagelayer', 'objectgroup'].includes(name)) continue
+        const data = element.elements?.find(el => el.name == 'data')
+        element.layer = this.layers.get(+element.attributes.id)
+        const obj = {
+          ...(this.transform(data) ?? {}),
+          ...this.transform(element),
+          ...this.transform(element.layer),
+          layers: recursiveLayer(element.elements),
+          data: data ? data.elements[0].text : undefined,
+          type: name == 'layer' ? 'tilelayer' : name
+        }
+        delete obj.elements
+        delete obj.layer
+        if (obj.data) obj.data = TiledParser.decode(obj, obj.width * obj.height)
+        array.push(obj)
+      }
+      return array
+    }
+
+    const layers = recursiveLayer(jsonNoCompact.elements[0].elements)
+
+    const tilesets = TiledParser.toArray<TiledTileset>(tileset).map(tileset => {
+      const obj = this.transform(tileset)
+      return obj
+    })
+
+    const ret = {
+      ...this.transform(json.map),
+      layers,
+      tilesets
+    }
+
+    delete ret.layer
+    delete ret.tileset
+    delete ret.group
+    delete ret.imagelayer
+
+    return ret
+  }
+
+  parseTileset(): TiledTileset {
+    const json: any = xml2js(this.xml, { compact: true })
+    const { tileset } = json
+
+    const ret = {
+      ...this.transform(tileset),
+      image: this.transform(tileset.image),
+      tiles: TiledParser.toArray<TilesetTile>(tileset.tile).map((tile: any) => {
+        const ret = this.transform(tile)
+        if (tile.animation) {
+          ret.animations = TiledParser.toArray(tile.animation.frame).map(this.transform)
+        }
+        delete ret.animation
+        return ret
+      })
+    }
+
+    delete ret.tile
+
+    return ret
+  }
+}

package/src/types/Layer.ts

@@ -0,0 +1,127 @@
+import { TiledObject } from "./Objects";
+import { TiledChunk, TiledCompression, TiledEncoding, TiledImage, TiledProperty } from "./Types";
+
+export enum TiledLayerType {
+    Tile = 'tilelayer',
+    ObjectGroup = 'objectgroup',
+    Image = 'imagelayer',
+    Group = 'group'
+}
+
+export interface TiledLayer {
+    /**
+     * Incremental ID - unique across all layers
+     */
+    id: number;
+    /**
+     * Image used by this layer. imagelayer only.
+     */
+    image: TiledImage;
+    /**
+     * Array of unsigned int (GIDs) or base64-encoded data. tilelayer only.
+     */
+    data: number[] | string;
+    /**
+     * 	Array of chunks (optional). tilelayer only.
+     */
+    chunks: TiledChunk[];
+    /**
+     * Column count. Same as map width for fixed-size maps.
+     */
+    width: number;
+    /**
+     * Row count. Same as map height for fixed-size maps.
+     */
+    height: number;
+    /**
+     * Name assigned to this layer
+     */
+    name: string;
+    /**
+     * From [0, 1]
+     */
+    opacity: number;
+    properties: {
+        [key: string]: any
+    }
+    /**
+     * csv (default) or base64. tilelayer only.
+     */
+    encoding: TiledEncoding;
+    /**
+     * zlib, gzip, zstd (since Tiled 1.3) or empty (default). tilelayer only.
+     */
+    compression?: TiledCompression;
+ 
+    /**
+     * Type of layer (tilelayer, objectgroup)
+     */
+    type: TiledLayerType;
+
+    /**
+     * @since 1.9
+     */
+    class: string
+
+    /**
+     * Whether layer is shown or hidden in editor
+     */
+    visible: boolean;
+ 
+    /**
+     * Horizontal layer offset in tiles. Always 0.
+     */
+    x: number;
+    /**
+     * Vertical layer offset in tiles. Always 0.
+     */
+    y: number;
+ 
+    /**
+     * Layer order in the original Tiled source
+     */
+    order: number;
+    /**
+     * Horizontal layer offset in pixels (default: 0)
+     */
+    offsetx: number;
+    /**
+     * Vertical layer offset in pixels (default: 0)
+     */
+    offsety: number;
+    /**
+     * X coordinate where layer content starts (for infinite maps)
+     */
+    startx: number;
+    /**
+     * Y coordinate where layer content starts (for infinite maps)
+     */
+    starty: number;
+ 
+    /**
+     * Hex-formatted color (#RRGGBB or #AARRGGBB) that is multiplied with any graphics drawn by this layer or any child layers (optional).
+     */
+    tintcolor: string;
+    /**
+     * Hex-formatted color (#RRGGBB) (optional). imagelayer only.
+     */
+    transparentcolor: string;
+ 
+    /**
+     * topdown (default) or index. objectgroup only.
+     */
+    draworder: 'topdown' | 'index' | 'objectgroup';
+    /**
+     * Array of objects. objectgroup only.
+     */
+    objects: TiledObject[];
+
+    layers: TiledLayer[]
+
+    parallaxx: number
+    parallaxy: number
+    repeatx: number
+    repeaty: number
+    locked: boolean
+    color: string
+ }

package/src/types/Map.ts

@@ -0,0 +1,83 @@
+import { TiledLayer } from "./Layer";
+import { TiledTileset } from "./Tileset";
+import { TiledProperty } from "./Types";
+
+export interface TiledMap {
+    type: 'map';
+
+    version: number;
+ 
+    width: number;
+    /**
+     * Number of tile rows
+     */
+    height: number;
+    /**
+     * Length of the side of a hex tile in pixels (hexagonal maps only)
+     */
+    hexsidelength: number;
+    /**
+     * Map grid height
+     */
+    tileheight: number;
+    /**
+     * Map grid width
+     */
+    tilewidth: number;
+ 
+    /**
+     *	Hex-formatted color (#RRGGBB or #AARRGGBB) (optional)
+     */
+    backgroundcolor: string;
+    /**
+     * The compression level to use for tile layer data (defaults to -1, which means to use the algorithm default)
+     */
+    compressionlevel: number;
+    /**
+     * Whether the map has infinite dimensions
+     */
+    infinite: boolean;
+    /**
+     *	Auto-increments for each layer
+     */
+    nextlayerid: number;
+    /**
+     * Auto-increments for each placed object
+     */
+    nextobjectid: number;
+ 
+    /**
+     * Map orientation (orthogonal, isometric, staggered or hexagonal)
+     */
+    orientation: 'orthogonal' | 'isometric' | 'staggered' | 'hexagonal';
+ 
+    layers: TiledLayer[];
+    properties: {
+        [key: string]: any
+    }
+    tilesets: TiledTileset[];
+ 
+    /**
+     * Render order: right-down (the default), right-up, left-down or left-up (currently only supported for orthogonal maps)
+     */
+    renderorder: 'right-down' | 'right-up' | 'left-down' | 'left-up';
+ 
+    /**
+     * x or y (staggered / hexagonal maps only)
+     */
+    staggeraxis: 'x' | 'y';
+    /**
+     * odd or even (staggered / hexagonal maps only)
+     */
+    staggerindex: 'odd' | 'even';
+ 
+    /**
+     * The Tiled version used to save the file
+     */
+    tiledversion: string;
+ 
+    /**
+     * @since 1.9
+     */
+     class: string
+ }

package/src/types/Objects.ts

@@ -0,0 +1,64 @@
+import { TiledText } from "./Text";
+import { TiledPoint, TiledProperty } from "./Types";
+
+export interface TiledObject {
+    id: number;
+ 
+    /**
+     * Tile object id
+     */
+    gid: number;
+    /**
+     * Used to mark an object as a point
+     */
+    point: boolean;
+    height: number;
+    name: string;
+    properties: {
+        [key: string]: any
+    }
+    /**
+     * Angle in degrees clockwise
+     */
+    rotation: number;
+    type: string;
+    /**
+     * @since 1.9
+     */
+    class: string 
+    visible: boolean;
+    width: number;
+    /**
+     * X coordinate in pixels
+     */
+    x: number;
+    /**
+     * Y coordinate in pixels
+     */
+    y: number;
+ 
+    /**
+     * Reference to a template file, in case object is a template instance
+     */
+    template: string;
+ 
+    /**
+     *	Only used for text objects
+     */
+    text: TiledText;
+ 
+    /**
+     * Whether or not object is an ellipse
+     */
+    ellipse: boolean;
+ 
+    /**
+     * Polygon points
+     */
+    polygon: TiledPoint[];
+ 
+    /**
+     * Polyline points
+     */
+    polyline: TiledPoint[];
+ }

package/src/types/Text.ts

@@ -0,0 +1,47 @@
+export interface TiledText {
+    text: string;
+    /**
+     * Whether to use a bold font (default: false)
+     */
+    bold: boolean;
+    /**
+     * Hex-formatted color (#RRGGBB or #AARRGGBB) (default: #000000)
+     */
+    color: string;
+    /**
+     * Font family (default: sans-serif)
+     */
+    fontfamily: string;
+    /**
+     * Horizontal alignment (center, right, justify or left (default))
+     */
+    halign: 'center' | 'right' | 'justify' | 'left';
+    /**
+     * Whether to use an italic font (default: false)
+     */
+    italic: boolean;
+    /**
+     * Whether to use kerning when placing characters (default: true)
+     */
+    kerning: boolean;
+    /**
+     * Pixel size of font (default: 16)
+     */
+    pixelsize: number;
+    /**
+     * Whether to strike out the text (default: false)
+     */
+    strikeout: boolean;
+    /**
+     * Whether to underline the text (default: false)
+     */
+    underline: boolean;
+    /**
+     * Vertical alignment (center, bottom or top (default))
+     */
+    valign: 'center' | 'bottom' | 'top';
+    /**
+     * Whether the text is wrapped within the object bounds (default: false)
+     */
+    wrap: boolean;
+ }

package/src/types/Tile.ts

@@ -0,0 +1,19 @@
+import { TiledLayer } from "./Layer";
+import { TiledObject } from "./Objects";
+import { TiledFrame, TiledProperty } from "./Types";
+
+export interface TilesetTile {
+    gid: number
+    id: number;
+    type: string;
+    image: string;
+    imageheight: number;
+    imagewidth: number;
+    animations: TiledFrame[];
+    properties: {
+        [key: string]: any
+    }
+    terrain: number[];
+    objects: TiledObject[];
+    probability: number;
+ }