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.
npm install pixi-tiledmapor
yarn add pixi-tiledmapor 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>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 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
}support isometric and hexagonal orientation