Nebulous Plasma Muffin

    @seiyria/pixi-tiledmap
    TypeScript icon, indicating that this package has built-in type declarations

    1.12.0 • Public • Published

    pixi-tiledmap NPM version

    Use Tiled Map Editor maps with pixi.js.

    pixi-tiledmap is a Pixi loader middleware which loads Tiled Map Editor TMX maps and parses them with node-tmx-parser. It exports a pixi.js class PIXI.extras.TiledMap which is an extended PIXI.Container containing all layers of the tile map as an instance of PIXI.Container and all tiles within as an instance of PIXI.extras.AnimatedSprite.

    Installation

    npm install @seiyria/pixi-tiledmap

    or

    yarn add @seiyria/pixi-tiledmap

    or include pixi-tiledmap.min.js after pixi.js in your html file (See example/browser for an example).

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>pixi-tiledmap example</title>
    </head>
    <body>
    <script type="text/javascript" src="https://pixijs.download/v4.8.7/pixi.min.js"></script>
    <script type="text/javascript" src="pixi-tiledmap.min.js"></script>
    <script>
        (function() {
            const renderer = PIXI.autoDetectRenderer(442, 286);
            document.body.appendChild(renderer.view);
    
            /**
             * Simply load a Tiled map in TMX format like a usual resource
             */
            PIXI.loader
                .add('assets/01_basement.tmx')
                .load(function () {
                        /**
                         *   PIXI.extras.TiledMap() is an extended PIXI.Container()
                         *   so you can render it right away
                         */
                        let tileMap = new PIXI.extras.TiledMap('assets/01_basement.tmx');
                        renderer.render(tileMap);
                    }
                );
        })();
    </script>
    </body>
    </html>

    Usage

    var PIXI = require('pixi.js');
    require('pixi-tiledmap');
    
    var renderer = PIXI.autoDetectRenderer(1024, 768);
    document.body.appendChild(renderer.view);
    
    /**
     * Simply load a Tiled map in TMX format like a usual resource
     */
    PIXI.loader
        .add('map.tmx')
        .load( function () {
            /**
            *   PIXI.extras.TiledMap() is an extended PIXI.Container()
            *   so you can render it right away
            */
            renderer.render(new PIXI.extras.TiledMap("map.tmx"));
        }
        /**
            //Alternatively, an alias can be used in order to identify loaded map.
             
            .add("myMap", "path/to/myMap.tmx")
            .load( function () {
                  renderer.render(new PIXI.extras.TiledMap("myMap"));
            }
        */
    );

    ES6

    import * as PIXI from 'pixi.js';
    import 'pixi-tiledmap';
    
    const renderer = PIXI.autoDetectRenderer(442, 286);
    document.body.appendChild(renderer.view);
    
    /**
     * Simply load a Tiled map in TMX format like a usual resource
     */
    PIXI.loader
        .add('assets/01_basement.tmx')
        .load(() => {
            /**
             *   PIXI.extras.TiledMap() is an extended PIXI.Container()
             *   so you can render it right away
             */
            renderer.render(new PIXI.extras.TiledMap('assets/01_basement.tmx'));
        });

    For the browser examples in examples/browser/ run yarn and yarn start to start a devServer on Port 3000. For the webpack examples in examples/webpack/ run yarn and yarn start inside of examples/webpack/ to start a devServer on Port 3000.

    Open http://localhost:3000/ in your browser.

    Documentation

    Documentation available in docs/. You can read it online here

    Example TiledMap object

    {
        TiledMap {_events: Events, _eventsCount: 0, tempDisplayObjectParent: DisplayObject, transform: TransformStatic, alpha: 1,}
            alpha: 1
            background: Graphics {_events: Events, _eventsCount: 0, tempDisplayObjectParent: null, transform: TransformStatic, alpha: 1,}
            backgroundColor: undefined
            buttonMode: (...)
            children: (2) [Graphics, TileLayer]
            filterArea: null
            layers: Array(1)
                0: TileLayer
                    diagonalFlips: (187) [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, ]
                    horizontalFlips: (187) [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, ]
                    map: Map {version: "1.0", orientation: "orthogonal", width: 17, height: 11, tileWidth: 26,}
                    name: "meta"
                    opacity: 0.2
                    properties: {}
                    tiles: (283) [Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, Tile, 49: Tile, 50: Tile, 51: Tile, 52: Tile, 66: Tile, 67: Tile, 68: Tile, 69: Tile, 83: Tile, 84: Tile, 85: Tile, 86: Tile, 100: Tile, 101: Tile, 102: Tile, 103: Tile, 117: Tile, 118: Tile, 119: Tile, 120: Tile, 134: Tile, 135: Tile, 136: Tile, 137: Tile, 151: Tile, 152: Tile, 153: Tile, 154: Tile, 155: Tile, 156: Tile, 157: Tile, 158: Tile, 159: Tile, 160: Tile, 161: Tile, 162: Tile, 163: Tile, 164: Tile, 165: Tile, 166: Tile, 167: Tile, 168: Tile, 169: Tile, 170: Tile, 171: Tile, 172: Tile, 173: Tile, 174: Tile, 175: Tile, 176: Tile, 177: Tile, 178: Tile, 179: Tile, 180: Tile, 181: Tile, 182: Tile, 183: Tile, 184: Tile, 185: Tile, 186: Tile, 187: Tile, 188: Tile, 189: Tile, 190: Tile, ]
                    type: "tile"
                    verticalFlips: (187) [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, ]
                    visible: true
                    __proto__: Object
                meta: TileLayer {_events: Events, _eventsCount: 0, tempDisplayObjectParent: null, transform: TransformStatic, alpha: 0.2,}
                length: 1
                __proto__: Array(0)
            orientation: "orthogonal"
            parent: null
            properties: {}
            renderable: true
            resourceUrl: "assets/01_basement.tmx"
            tempDisplayObjectParent: DisplayObject {_events: Events, _eventsCount: 0, tempDisplayObjectParent: null, transform: TransformStatic, alpha: 1,}
            tileHeight: 26
            tileSets: Array(2)
                0: TileSet
                    firstGid: 1
                    image: Image {format: undefined, source: "meta.png", trans: undefined, width: 52, height: 26}
                    margin: null
                    name: "meta"
                    properties: {}
                    source: undefined
                    spacing: null
                    terrainTypes: []
                    tileHeight: 26
                    tileOffset: {x: 0, y: 0}
                    tileWidth: 26
                    tiles: Array(2)
                        0: Tile
                            animations: []
                            gid: 1
                            id: 0
                            image: null
                            objectGroups: []
                            probability: null
                            properties: {}
                            terrain: []
                            __proto__: Object
                        1: Tile {id: 1, terrain: Array(0), probability: null, properties: {}, animations: Array(0), }
                        length: 2
                        __proto__: Array(0)
                    __proto__: Object
                1: TileSet {firstGid: 1, baseTexture: Texture, textures: Array(2), margin: null, spacing: null,}
                length: 2
                __proto__: Array(0)
            tileWidth: 26
            trackedPointers: (...)
            transform: TransformStatic {worldTransform: Matrix, localTransform: Matrix, _worldID: 0, _parentID: 0, position: ObservablePoint,}
            version: "1.0"
            visible: true
            worldAlpha: 1
            _bounds: Bounds {minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity, rect: null,}
            _boundsID: 5
            _boundsRect: null
            _destroyed: false
            _enabledFilters: null
            _events: Events {}
            _eventsCount: 0
            _filters: null
            _height: 11
            _lastBoundsID: 2
            _localBoundsRect: Rectangle {x: 0, y: 0, width: 0, height: 0, type: 1}
            _mask: null
            _width: 17
            cacheAsBitmap: (...)
            filters: (...)
            height: (...)
            localTransform: (...)
            mask: (...)
            pivot: (...)
            position: (...)
            rotation: (...)
            scale: (...)
            skew: (...)
            width: (...)
            worldTransform: (...)
            worldVisible: (...)
            x: (...)
            y: (...)
            _tempDisplayObjectParent: (...)
            __proto__: Container
    }

    Notice

    I've updated this version to add ObjectLayer support and it's fairly minimal. That's the only change.

    To do

    support isometric and hexagonal orientation

    Install

    npm i @seiyria/pixi-tiledmap

    DownloadsWeekly Downloads

    3

    Version

    1.12.0

    License

    MIT

    Unpacked Size

    4.94 MB

    Total Files

    74

    Last publish

    Collaborators

    • seiyria