@canvasengine/tiled 2.0.0-beta.25

package/src/classes/Tileset.ts

@@ -0,0 +1,34 @@
+import { TilesetTile } from "../types/Tile"
+import { TiledTileset } from "../types/Tileset"
+import { TiledProperties } from "./Properties"
+import { Tile } from "./Tile"
+
+export class Tileset extends TiledProperties {
+    private cacheTileId: Map<number, Tile> = new Map()
+
+    constructor(private tileset: TiledTileset) {
+        super(tileset)
+        Object.assign(this, tileset)
+        this.margin = this.margin ?? 0
+        this.spacing = this.spacing ?? 0
+        // Handle both 'tiles' and 'tile' property names
+        const tilesArray = tileset.tiles || (tileset as any).tile || []
+        for (let tile of tilesArray) {
+            this.addTile(tile)
+        }
+        Reflect.deleteProperty(this, 'tiles')
+        Reflect.deleteProperty(this, 'tile')
+    }
+
+    addTile(tileObj: TilesetTile): Tile {
+        const tile = new Tile(tileObj)
+        this.cacheTileId.set(tile.id, tile)
+        return tile
+    }
+
+    getTile(id: number): Tile | undefined {
+        return this.cacheTileId.get(+id)
+    }
+}
+
+export interface Tileset extends TiledTileset {}

package/src/generate/tileset.ts

@@ -0,0 +1,35 @@
+import builder from 'xmlbuilder'
+import { TiledTileset } from '../types/Tileset'
+
+export class Tileset {
+    constructor(protected nbTilesWidth: number, protected nbTilesHeight: number) {}
+
+    generate(attr: {
+        root: any,
+        image: any
+    }): builder.XMLElement {
+        const root = builder.create('tileset')
+        for (let param in attr.root) {
+            root.att(param, attr.root[param])
+        }
+        root.att('tilecount', this.nbTilesWidth * this.nbTilesHeight)
+        root.att('columns', this.nbTilesWidth)
+        root.ele('image', attr.image)
+        return root
+    }
+
+    createTile(id: number, properties): builder.XMLElement {
+        const tile = builder.create('tile', { headless: true })
+        tile.att('id', id)
+        const elProperties = tile.ele('properties')
+        for (let key in properties) {
+            const value = properties[key]
+            let type
+            if (typeof value == 'boolean') {
+                type = 'bool'
+            }
+            elProperties.ele('property', { name: key, type, value })
+        }
+        return tile
+    }
+}

package/src/generate/wangtile.ts

@@ -0,0 +1,166 @@
+import builder from 'xmlbuilder'
+import { Tileset } from './tileset'
+
+export class Autotile extends Tileset {
+    static readonly HEIGHT_TILES: number = 6
+    static readonly WIDTH_TILES: number = 8
+
+    constructor(private nbGroupTilesWidth: number, private nbGroupTilesHeight: number, private nbAnimation: number = 1) {
+        const totalWidth = nbGroupTilesWidth *  Autotile.WIDTH_TILES *  nbAnimation
+        const totalHeight = nbGroupTilesHeight *  Autotile.HEIGHT_TILES
+        super(totalWidth, totalHeight)
+    }
+
+    static getWangTiles(id: number): [number, number, number, number, number, number, number, number][] {
+        return [
+            [0,0,id,0,0,0,0,0],
+            [0,0,id,0,0,0,id,0],
+            [0,0,0,0,0,0,id,0],
+            [0,0,0,0,id,0,0,0],
+            [0,0,id,id,id,0,0,0],
+            [0,0,id,id,id,id,id,0],
+            [0,0,0,0,id,id,id,0],
+            [0,0,id,0,id,0,0,0],
+            [0,0,0,0,id,0,id,0],
+            [id,0,id,0,id,0,0,0],
+            [0,0,id,0,id,0,id,0],
+            [id,0,0,0,id,0,0,0],
+            [id,id,id,id,id,0,0,0],
+            [id,id,id,id,id,id,id,id],
+            [id,0,0,0,id,id,id,id],
+            [id,0,id,0,0,0,0,0],
+            [id,0,0,0,0,0,id,0],
+            [id,0,id,0,0,0,id,0],
+            [id,0,0,0,id,0,id,0],
+            [id,0,0,0,0,0,0,0],
+            [id,id,id,0,0,0,0,0],
+            [id,id,id,0,0,0,id,id],
+            [id,0,0,0,0,0,id,id],
+            [id,id,id,0,id,0,0,0],
+            [id,0,0,0,id,0,id,id],
+            [0,0,id,0,id,id,id,0],
+            [0,0,id,id,id,0,id,0],
+            [id,id,id,0,id,id,id,id],
+            [id,id,id,id,id,0,id,id],
+            [id,0,id,0,id,0,id,id],
+            [id,id,id,0,id,0,id,0],
+            [id,0,id,id,id,0,0,0],
+            [id,0,0,0,id,id,id,0],
+            [id,0,id,0,0,0,id,id],
+            [id,id,id,0,0,0,id,0],
+            [id,0,id,id,id,id,id,id],
+            [id,id,id,id,id,id,id,0],
+            [id,0,id,0,id,id,id,0],
+            [id,0,id,id,id,0,id,0],
+            [id,0,id,id,id,id,id,0],
+            [id,id,id,0,id,0,id,id],
+            [id,0,id,0,id,id,id,id],
+            [id,id,id,id,id,0,id,0],
+            [id,0,id,id,id,0,id,id],
+            [id,id,id,0,id,id,id,0],
+            [id,0,id,0,id,0,id,0]
+        ]
+    }
+
+    static getRandomColor() {
+        const letters = '0123456789ABCDEF'
+        let color = '#';
+        for (var i = 0; i < 6; i++) {
+            color += letters[Math.floor(Math.random() * 16)]
+        }
+        return color
+    }
+
+    get hasAnimation(): boolean {
+        return this.nbAnimation > 1
+    }
+
+    getIndex(x: number, y: number): number {
+        return x + y * this.nbTilesWidth
+    }
+
+    generate(attr: {
+        root: any,
+        image: any,
+        tile: any
+    }): builder.XMLElement {
+        const root = super.generate({
+            root: attr.root,
+            image: attr.image
+        })
+        for (let i=0 ; i < this.nbTilesHeight ; i++) {
+            for (let j=0 ; j < this.nbTilesWidth ; j++) {
+                const tileId = this.getIndex(j, i)
+                const nbProp = Object.keys(attr.tile).length
+                const hasAnimation = this.hasAnimation && j < Autotile.WIDTH_TILES
+                if (nbProp == 0 && !hasAnimation) {
+                    continue
+                }
+                const xmlTile = this.createTile(tileId, attr.tile)
+                if (hasAnimation) {
+                    const xmlAnimation = this.generateAnimationTile(tileId)
+                    xmlTile.importDocument(xmlAnimation)
+                }
+                root.importDocument(xmlTile)
+            }
+        }
+        const xmlWang = this.generateWangTiles()
+        root.importDocument(xmlWang)
+        return root
+    }
+
+    generateAnimationTile(tileId: number): builder.XMLElement {
+        let xml = builder.create('animation', { headless: true })
+        for (let i=0 ; i < this.nbAnimation ; i++) {
+            xml.ele('frame', { tileid: tileId + i * Autotile.WIDTH_TILES, duration: 100 })
+        }
+        return xml
+    }
+
+    generateWangTiles(tileId: number = 0, name = 'Autotile'): builder.XMLElement {
+        let xml = builder.create('wangsets', { headless: true })
+        const xmlWangset = xml.ele('wangset', { name, type: 'mixed', tile: tileId })
+        const getOrigin = (i, j) => i* Autotile.WIDTH_TILES + (j* Autotile.HEIGHT_TILES * this.nbTilesWidth)
+        for (let i=0 ; i < this.nbGroupTilesWidth ; i++) {
+            for (let j=0 ; j < this.nbGroupTilesHeight ; j++) {
+                xmlWangset.ele('wangcolor', { color: Autotile.getRandomColor(), tile: getOrigin(i, j), probability: 1 })
+            }
+        }
+        let k=0
+        for (let i=0 ; i < this.nbGroupTilesWidth ; i++) {
+            for (let j=0 ; j < this.nbGroupTilesHeight ; j++) {
+                const wangTiles = Autotile.getWangTiles(k+1)
+                const origin = getOrigin(i, j)
+                for (let l=0 ; l <= wangTiles.length ; l++) {
+                    const wangTile = wangTiles[l-1]
+                    if (!wangTile) continue
+                    const x = l % Autotile.WIDTH_TILES
+                    const y = Math.floor(l / Autotile.WIDTH_TILES)
+                    const index = this.getIndex(x, y)
+                    const tileId = origin + index
+                    xmlWangset.ele('wangtile', { tileid: tileId, wangid: wangTile.join(',') })
+                }
+                k++
+            }
+        }
+        return xml
+    }
+}
+/*
+const str = new Autotile(1, 2).generate({
+    root: {
+        version: '1.8',
+        tiledversion: "1.8.2",
+        name: "[A]Wall-Up_pipo",
+        tilewidth: "32",
+        tileheight: "32"
+    },
+    image: {
+        source: '../../../client/maps/assets/[A]Wall-Up_pipo.png',
+        width: "256",
+        height: "384"
+    },
+    tile: {}
+ }).end({ pretty: true })
+console.log(str)
+*/

package/src/index.ts

@@ -0,0 +1,16 @@
+export type { TiledWorld, TiledWorldMap } from './types/WorldMaps'
+export type { TiledTileset } from './types/Tileset'
+export type { TiledObject } from './types/Objects'
+export type { TiledImage } from './types/Types'
+export { type TiledLayer, TiledLayerType } from './types/Layer'
+export type { TiledText } from './types/Text'
+export type { TiledMap } from './types/Map'
+export { isTiledFormat } from './utils'
+export { TiledParser } from './parser/parser'
+export { TiledProperties } from './classes/Properties'
+export { Tile } from './classes/Tile'
+export { Layer } from './classes/Layer'
+export { Tileset } from './classes/Tileset'
+export { TiledObjectClass } from './classes/Object'
+export { TiledParserFile } from './parser/open-file'
+export { MapClass } from './classes/Map'

package/src/parser/open-file.ts

@@ -0,0 +1,155 @@
+import { TiledParser } from "./parser"
+import { TiledMap } from "../types/Map"
+import { TiledTileset } from "../types/Tileset"
+import { joinPath } from "../utils"
+
+type ParseOptions = { getOnlyBasename?: boolean }
+
+
+export class TiledParserFile {
+    private basePath: string
+
+    constructor(private file: string, {
+        basePath = '',
+        staticDir = '',
+        relativePath = ''
+    } = {}) {
+        this.basePath = basePath
+    }
+
+    static isBrowser() {
+        // @ts-ignore
+        return (typeof window !== 'undefined' && !window.useFileSystem)
+    }
+
+    static typeOfFile(file: string): {
+        isXml: boolean
+        isObject: boolean
+        isHttp: boolean
+        isPath: boolean
+    } {
+        file = file.trim()
+        const isString = typeof file == 'string'
+        const info = {
+            isXml: isString && file.startsWith('<?xml'),
+            isObject: !!file['version'],
+            isHttp: isString && file.startsWith('http')
+        }
+        return  {
+            ...info,
+            isPath: !info.isXml && !info.isObject && !info.isHttp
+        }
+    }
+
+    private _parseFile<T>(file: string, type: string, cb: Function) {
+        const isXml = content => TiledParserFile.typeOfFile(content).isXml
+
+        const loadContent = (content) => {
+            if (!content) {
+                return cb(null)
+            }
+            if (isXml(content)) {
+                const parser = new TiledParser(content, file, this.basePath)
+                if (type == 'map') {
+                    const json = parser.parseMap() as any
+                    return cb(json)
+                }
+                else if (type == 'tileset') {
+                    const json = parser.parseTileset() as any
+                    return cb(json)
+                }
+            }
+
+            return cb(JSON.parse(content))
+        }
+
+        if (TiledParserFile.typeOfFile(file).isObject) {
+            return cb(file)
+        }
+
+        const { isHttp } = TiledParserFile.typeOfFile(file)
+        if (isXml(file)) {
+            loadContent(file)
+        }
+        else if (isHttp || (TiledParserFile.isBrowser() && process.env.NODE_ENV != 'test')) {
+            let url = isHttp ? file : joinPath(this.basePath, file)
+            // @ts-ignore
+            if (TiledParserFile.isBrowser() && window.urlCache) {
+                // @ts-ignore
+                url = window.urlCache[file]
+            }
+            fetch(url, {
+                headers: {
+                    'Content-Type': 'application/xml'
+                }
+            })
+                .then(response => response.text())
+                .then(loadContent)
+                .catch(err => cb(null, err))
+        }
+    }
+
+    parseFile(cb: Function, options: ParseOptions = {}) {
+        const { getOnlyBasename } = options
+        const basename = path => path.substring(path.lastIndexOf('/') + 1)
+        if (getOnlyBasename) {
+            if (TiledParserFile.typeOfFile(this.file).isPath) {
+                this.file = basename(this.file)
+            }
+        }
+        this._parseFile<TiledMap>(this.file, 'map', (map, err) => {
+            let hasError = false
+            if (err) return cb(null, err)
+            if (map.tilesets) {
+                const parseTileset: TiledTileset[] = []
+                const finish = () => {
+                    loadAll++
+                    if (loadAll == map.tilesets.length && !hasError) {
+                        map.tilesets = parseTileset
+                        cb(map)
+                    }
+                }
+                let loadAll = 0
+                for (let i=0; i <  map.tilesets.length ; i++) {
+                    const tileset = map.tilesets[i]
+                    
+                    // Check if tileset already contains XML child data (tiles, image, etc.)
+                    if (!tileset.source || tileset.tiles || tileset.image || tileset.tile) {
+                        // Tileset already contains data, no need to load from external source
+                        parseTileset[i] = tileset
+                        finish()
+                        continue
+                    }
+                    
+                    if (getOnlyBasename) {
+                        if (TiledParserFile.typeOfFile(tileset.source).isPath) {
+                            tileset.source = basename(tileset.source)
+                        }
+                    }
+
+                    this._parseFile<TiledTileset>(tileset.source, 'tileset', (result, err) => {
+                        if (err) {
+                            hasError = true
+                            return cb(null, err)
+                        }
+                        parseTileset[i] = {
+                            ...result,
+                            firstgid: tileset.firstgid
+                        }
+                        finish()
+                    })
+                }
+                
+            }
+        })
+    }
+
+    parseFilePromise(options: ParseOptions = {}): Promise<TiledMap> {
+        return new Promise((resolve, reject) => {
+            this.parseFile((ret, err) => {
+                if (ret) resolve(ret)
+                else reject(err)
+            }, options)
+        })
+    }
+}