/pixi-tiledmap

Pixi.js Tiled map editor plugin

Primary LanguageJavaScript

pixi-tiledmap

Fork of riebel/pixi-tiledmap, updated for Pixi.js >=5.0.0

⚠️ Some of the types are incorrect

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 as standalone class 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.AnimatedSprite.

Installation

npm install eioo/pixi-tiledmap

or

yarn add eioo/pixi-tiledmap

or include pixi-tiledmap.js after pixi.js in your html file.

<html>
  <head>
    <script
      type="text/javascript"
      src="https://pixijs.download/v4.8.7/pixi.min.js"
    ></script>
    <script type="text/javascript" src="pixi-tiledmap.js"></script>
  </head>
  <body>
    <script>
      (async () => {
        const app = new PIXI.Application();

        const tilemap = new TiledMap('assets/tilemap.tmx');
        await tilemap.load();

        this.app.stage.addChild(tileMap);
      })();
    </script>
  </body>
</html>

Usage

import * as PIXI from 'pixi.js';
import TiledMap from 'pixi-tiledmap';

(async () => {
  const app = new PIXI.Application();

  const tilemap = new TiledMap('assets/tilemap.tmx');
  await tilemap.load();

  this.app.stage.addChild(tilemap);
})();

License & disclaimer

Most of the work was done by these guys:

This project is licensed under the MIT License - see the LICENSE.md file for details