Giter VIP home page Giter VIP logo

pixi-tiledmap's Introduction

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 pixi-tiledmap

or

yarn add 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
}

To do

support isometric and hexagonal orientation

pixi-tiledmap's People

Contributors

dat2 avatar riebel avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pixi-tiledmap's Issues

Tile events docs

Hi,

I was looking for a sprite map editor for PIXI when I found this!
I have been looking at the docs but I can't see how to set tile events like click. I guess that I will have to do it accessing the children... is there any example?

Error: Texture Error: frame does not fit inside the base Texture dimensions: X: 65 + 32 = 97 > 66 or Y: 1 + 32 = 33 > 66

This error seems to happen if you try to use margins when creating a tileset

<?xml version="1.0" encoding="UTF-8"?> <map version="1.2" tiledversion="1.2.1" orientation="orthogonal" renderorder="right-down" width="32" height="32" tilewidth="32" tileheight="32" infinite="0" nextlayerid="2" nextobjectid="1"> <tileset firstgid="1" name="testtiles" tilewidth="32" tileheight="32" margin="1" tilecount="4" columns="2"> <image source="testtiles.png" trans="004080" width="66" height="66"/> </tileset> <layer id="1" name="Tile Layer 1" width="32" height="32"> <data encoding="base64" compression="gzip"> H4sIAAAAAAAACu3PMQoAMAgDwNb/P7qTUFxKF13uIINTzFoA8LZLusXgD3Elu/Pu/KHu7+qv26f21wAAfw6sZbC2ABAAAA== </data> </layer> </map>

testtiles

Attempts to use fs (from node) while in browser. Am I missing a step?

I get the following error when attempting to load a tmx file:

pixi-tiledmap.js:12529 Uncaught TypeError: fs.readFile is not a function
at Object.defaultReadFile [as readFile] (pixi-tiledmap.js:12529)
at parseFile (pixi-tiledmap.js:12533)
at resolveTileSet (pixi-tiledmap.js:12480)
at pixi-tiledmap.js:12437
at pendGo (pixi-tiledmap.js:12752)
at Pend.go (pixi-tiledmap.js:12711)
at collectTileSet (pixi-tiledmap.js:12436)
at Object.opentag (pixi-tiledmap.js:11947)
at SAXParser.parser.onopentag (pixi-tiledmap.js:12372)
at emit (pixi-tiledmap.js:13381)

I get similar errors with using the min version, and when using require + browerify or webpack.

My source code looks lilke:

PIXI.loader.add('/images/spritesheet.png', '/images/spritesheet.json')
PIXI.loader.add('mountain.tmx')
PIXI.loader.load(function(loader, resource) {
    var tileMap = new PIXI.extras.TiledMap('mountain.tmx')
    ...

Thanks!

Error ts2306 : index.d.ts is not a module

Hi,

Thx for the development of pixi-tiledmap... But i'm not able of using it.

Here is my simple code :

_import { Component, OnInit, ElementRef } from '@angular/core';
import { Map } from '../../model/Map.model';
import { MapService } from '../../services/map/map.service';
import { GameService } from '../../services/game/game.service';
import { Application } from 'pixi.js';
import { TiledMap } from 'pixi-tiledmap';

@component({
selector: 'app-world',
templateUrl: './world.component.html',
styleUrls: ['./world.component.css']
})
export class WorldComponent implements OnInit {

private map: Map;
public app: any;

constructor(private gameService: GameService, private mapService: MapService, private elementRef: ElementRef) {
const app = new Application({
width: 800,
height: 600
});
this.app = app;
this.elementRef.nativeElement.appendChild(app.view);

app.loader
  .add('assets/maps/map1.tmx')
  .load(function () {
    app.renderer.render(new TiledMap('assets/maps/map1.tmx'));
  });

}

ngOnInit() {

this.gameService.getGameOnEvent().subscribe(game => {
  this.map = game.Map;
});

}

}_

And i got a compilation problem :

error TS2306 : File 'pixi-tiledmap.d.ts' is not a module

And in the console :

core.js:7187 ERROR TypeError: pixi_tiledmap__WEBPACK_IMPORTED_MODULE_4__.TiledMap is not a constructor

I guess I'm doing something wrong but can't know what :(

Would you please help me ?

Quentin

Missing group layers in TileMap

Hey Guys,

I have an issue with Tiled group layers. When added, pixi-tilemap can't load the layers anymore.
Is there a possibility to add Tiled group layers to the tilemap object?

Thanks in advance,

Maarten

Pixi v5

Pixi is already at 5.0.0-rc2. Are you planning to upgrade?

readFile is not a function

Hi guys!

First of all, great library to work with tmx files in cooperation with pixijs.

I am using Tiled Map Editor and created this file as follows:

<?xml version="1.0" encoding="UTF-8"?> <map version="1.0" tiledversion="1.1.5" orientation="orthogonal" renderorder="right-down" width="100" height="100" tilewidth="32" tileheight="32" infinite="0" nextobjectid="1"> <tileset firstgid="1" source="whatever.tsx"/> <layer name="Tile Layer 1" width="100" height="100"> <data encoding="base64" compression="zlib"> eJzt1NsJg1AURNFbRkwT0Sbysgm1/yIyn3Ih30dxLdgwFUxrAAAAAAAAAAAAAAAAXNktDenebWo80pimblPjmV7p3W1q7D/qk75pbr6ryv6jlrSmrfmuKv/+ynfV8FfH4q+OxV8BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGfxA5TdD80= </data> </layer> </map>

The problem is, that he is not able to read a file with .tsx source. I also tried to change the source to a .png File (the source png file for the tilesets => .tsx)

Am I doing something horribly wrong?

The error always says:

Uncaught TypeError: E.readFile is not a function
at Object.i [as readFile] (pixi-tiledmap.min.js:2858)

Thanks for helping!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.