@seiyria/pixi-tiledmap
v1.12.0
Published
Pixi.js Tiled map editor plugin
Downloads
4
Maintainers
seiyriaReadme
pixi-tiledmap 
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-tiledmapor
yarn add @seiyria/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>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