README
pixi-tiled
Tiled importer for Objects, Layouts, Texts and Shapes.
TILEMAPS
Basic Support since 1.1.14.
For faster realisation use pixi-tilemap
, it will added as external renderer soon.
How to use
npm install pixiv5-tiled
Fully automatically importing. Images would be resolved automatically
import {Inject} from "pixiv5-tiled"
import * as PIXI from "pixi.js"
Inject(PIXI);
....
var loader = new PIXI.Loader();
loader.add("map","path/to/your/map.json")
.load(()=>{
//stage was builded automatically
let stage = app.loader.resources["map"].stage;
});
Manual
import {Inject, CreateStage} from "pixiv5-tiled"
import * as PIXI from "pixi.js"
//Inject only Mixins and apply global configuration
Inject(PIXI, {injectMiddleware : false});
....
var loader = new PIXI.Loader();
loader.add("map","path/to/your/map.json")
.add("atlass", "path/to/your/atlass.png)
.load(()=>{
const mapData = app.loader.resources["map"].data;
const atlas = app.loader.resources["atlass"].spritesheet;
//build manualy from map data and atlass
const stage = CreateStage(atlas, map);
});
Mixins
Inject
add some mixins to PIXI API:
PIXI.Container
:
getChildByPath<T>(path : string) : T | undefined
- Search child of container by relative pathaddGlobalChild(...childs : DisplayObject[]) : void
- Adding childs to container from other container and recalculating them's transforms relative new parent
PIXI.DisplayObject
:
replaceWithTransform (target : DisplayObject)
- replaŃetarget
intothis
fromtarget
parent container and copying it transforms (position, scale, rotation, pivot);
PIXI.utils.EventEmitter
:
onceAsync(eventName : string, context : eny) : Promise<any>
- callonce
in promise-like style forasync/await
support.
Demo
Go to demo folder: ./examples
Live:
Middleware: ./middleware.html
By constructor: ./constructor.html
Tilemap: ./tilemap.html
Tilemap + external tileset: ./tilemap_external.html