├── .gitignore
├── .npmignore
├── demo
    ├── src
    │   ├── react-app-env.d.ts
    │   ├── setupTests.js
    │   ├── App.test.js
    │   ├── reportWebVitals.js
    │   ├── index.css
    │   ├── index.js
    │   ├── App.css
    │   ├── App.js
    │   └── logo.svg
    ├── public
    │   ├── robots.txt
    │   ├── favicon.ico
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── stages
    │   │   ├── TX Plant.png
    │   │   ├── TX Props.png
    │   │   ├── TX Struct.png
    │   │   ├── TX Shadow Plant.png
    │   │   ├── TX Tileset Wall.png
    │   │   ├── TX Tileset Grass.png
    │   │   ├── TX Shadow Plant.tsx
    │   │   ├── TX Tileset Grass.tsx
    │   │   ├── TX Plant.tsx
    │   │   ├── TX Props.tsx
    │   │   ├── TX Struct.tsx
    │   │   ├── TX Tileset Wall.tsx
    │   │   └── map.tmx
    │   ├── manifest.json
    │   └── index.html
    ├── .gitignore
    └── package.json
├── img
    ├── example.png
    └── layers-pane.png
├── src
    ├── TilemapContext.js
    ├── useMap.js
    ├── useObjects.js
    ├── useSpawnPoint.js
    ├── useInteractables.js
    ├── index.js
    ├── useTiles.js
    ├── useCollisions.js
    ├── useTilemapLoader.js
    ├── Layer.jsx
    ├── Tilemap.jsx
    └── getSprite.js
├── .editorconfig
├── LICENSE
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | src/


--------------------------------------------------------------------------------
/demo/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/img/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vocksel/react-pixi-tilemap/HEAD/img/example.png


--------------------------------------------------------------------------------
/demo/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/img/layers-pane.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vocksel/react-pixi-tilemap/HEAD/img/layers-pane.png


--------------------------------------------------------------------------------
/demo/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vocksel/react-pixi-tilemap/HEAD/demo/public/favicon.ico


--------------------------------------------------------------------------------
/demo/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vocksel/react-pixi-tilemap/HEAD/demo/public/logo192.png


--------------------------------------------------------------------------------
/demo/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vocksel/react-pixi-tilemap/HEAD/demo/public/logo512.png


--------------------------------------------------------------------------------
/demo/public/stages/TX Plant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vocksel/react-pixi-tilemap/HEAD/demo/public/stages/TX Plant.png


--------------------------------------------------------------------------------
/demo/public/stages/TX Props.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vocksel/react-pixi-tilemap/HEAD/demo/public/stages/TX Props.png


--------------------------------------------------------------------------------
/demo/public/stages/TX Struct.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vocksel/react-pixi-tilemap/HEAD/demo/public/stages/TX Struct.png


--------------------------------------------------------------------------------
/demo/public/stages/TX Shadow Plant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vocksel/react-pixi-tilemap/HEAD/demo/public/stages/TX Shadow Plant.png


--------------------------------------------------------------------------------
/demo/public/stages/TX Tileset Wall.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vocksel/react-pixi-tilemap/HEAD/demo/public/stages/TX Tileset Wall.png


--------------------------------------------------------------------------------
/demo/public/stages/TX Tileset Grass.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vocksel/react-pixi-tilemap/HEAD/demo/public/stages/TX Tileset Grass.png


--------------------------------------------------------------------------------
/src/TilemapContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 | 
3 | const TilemapContext = createContext()
4 | 
5 | export default TilemapContext
6 | 


--------------------------------------------------------------------------------
/src/useMap.js:
--------------------------------------------------------------------------------
1 | import { useContext } from "react"
2 | import TilemapContext from './TilemapContext'
3 | 
4 | const useMap = () => {
5 |     const { map } = useContext(TilemapContext)
6 |     return map
7 | }
8 | 
9 | export default useMap


--------------------------------------------------------------------------------
/demo/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/demo/public/stages/TX Shadow Plant.tsx:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <tileset version="1.5" tiledversion="1.6.0" name="TX Shadow Plant" tilewidth="32" tileheight="32" tilecount="256" columns="16">
3 |  <image source="TX Shadow Plant.png" width="512" height="512"/>
4 | </tileset>
5 | 


--------------------------------------------------------------------------------
/demo/public/stages/TX Tileset Grass.tsx:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <tileset version="1.5" tiledversion="1.6.0" name="TX Tileset Grass" tilewidth="32" tileheight="32" tilecount="64" columns="8">
3 |  <image source="TX Tileset Grass.png" width="256" height="256"/>
4 | </tileset>
5 | 


--------------------------------------------------------------------------------
/demo/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig is awesome: https://EditorConfig.org
 2 | 
 3 | # top-most EditorConfig file
 4 | root = true
 5 | 
 6 | [*]
 7 | indent_style = space
 8 | indent_size = 4
 9 | end_of_line = crlf
10 | charset = utf-8
11 | trim_trailing_whitespace = true
12 | insert_final_newline = true
13 | 
14 | [*.json]
15 | indent_size = 2


--------------------------------------------------------------------------------
/demo/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/demo/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/useObjects.js:
--------------------------------------------------------------------------------
 1 | import { useContext, useMemo } from "react"
 2 | import TilemapContext from "./TilemapContext"
 3 | 
 4 | const useObjects = () => {
 5 |     const { map } = useContext(TilemapContext)
 6 | 
 7 |     const objects = useMemo(() => map.layers
 8 |         .filter(layer => layer.type === 'object')
 9 |         .map(layer => layer.objects)
10 |         .flat(),
11 |     [ map ])
12 | 
13 |     return objects
14 | }
15 | 
16 | export default useObjects


--------------------------------------------------------------------------------
/demo/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   overflow: hidden;
 5 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 6 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 7 |     sans-serif;
 8 |   -webkit-font-smoothing: antialiased;
 9 |   -moz-osx-font-smoothing: grayscale;
10 | }
11 | 
12 | code {
13 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
14 |     monospace;
15 | }
16 | 


--------------------------------------------------------------------------------
/src/useSpawnPoint.js:
--------------------------------------------------------------------------------
 1 | import { Point } from "pixi.js"
 2 | import { useMemo } from "react"
 3 | import useObjects from "./useObjects"
 4 | 
 5 | const useSpawnPoint = () => {
 6 |     const objects = useObjects()
 7 |     
 8 |     const point = useMemo(() => {
 9 |         const spawn = objects.find(object => object.name === 'Spawn')
10 |         return new Point(spawn.x + spawn.width / 2, spawn.y + spawn.height / 2)
11 |     })
12 | 
13 |     return point
14 | }
15 | 
16 | export default useSpawnPoint
17 | 


--------------------------------------------------------------------------------
/src/useInteractables.js:
--------------------------------------------------------------------------------
 1 | import { useMemo } from 'react'
 2 | import useObjects from './useObjects'
 3 | 
 4 | const useInteractableObjects = () => {
 5 |     const objects = useObjects()
 6 | 
 7 |     return useMemo(() => {
 8 |         const interactables = []
 9 | 
10 |         for (const object of objects) {
11 |             if (object.properties.isInteractable) {
12 |                 interactables.push(object)
13 |             }
14 |         }
15 | 
16 |         return interactables
17 |     }, [ objects ])
18 | }
19 | 
20 | export default useInteractableObjects


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Tilemap from './Tilemap'
 2 | import useTilemapLoader from './useTilemapLoader'
 3 | import useMap from './useMap'
 4 | import useSpawnPoint from './useSpawnPoint'
 5 | import useCollisions from './useCollisions'
 6 | import useInteractables from './useInteractables'
 7 | import useObjects from './useObjects'
 8 | import useTiles from './useTiles'
 9 | 
10 | export {
11 |     Tilemap,
12 |     useTilemapLoader,
13 |     useInteractables,
14 |     useMap,
15 |     useSpawnPoint,
16 |     useCollisions,
17 |     useObjects,
18 |     useTiles,
19 | }
20 | 


--------------------------------------------------------------------------------
/demo/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>,
11 |   document.getElementById('root')
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/demo/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/useTiles.js:
--------------------------------------------------------------------------------
 1 | import { useContext, useEffect, useState } from "react"
 2 | import TilemapContext from "./TilemapContext"
 3 | 
 4 | const useTiles = () => {
 5 |     const { map } = useContext(TilemapContext)
 6 |     const [tiles, set] = useState([])
 7 | 
 8 |     useEffect(() => {
 9 |         if (map) {
10 |             const newTiles = map.layers
11 |                 .filter(layer => layer.type === 'tile')
12 |                 .map(layer => layer.tiles)
13 |                 .flat()
14 |                 .filter(tile => tile !== null)
15 | 
16 |             set(newTiles)
17 |         }
18 |     }, [ map ])
19 | 
20 |     return tiles
21 | }
22 | 
23 | export default useTiles


--------------------------------------------------------------------------------
/demo/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/demo/src/App.js:
--------------------------------------------------------------------------------
 1 | import { Stage, Sprite } from '@inlet/react-pixi';
 2 | import { Texture } from '@pixi/core';
 3 | import { Tilemap, useTilemapLoader } from 'react-pixi-tilemap'
 4 | 
 5 | const tilemape = process.env.PUBLIC_URL + '/stages/map.tmx'
 6 | 
 7 | const App = () => {
 8 |     const map = useTilemapLoader(tilemape)
 9 | 
10 |     return (
11 |         <Stage width={window.innerWidth} height={window.innerHeight} options={{ resizeTo: window }}>
12 |             <Tilemap map={map} scale={0.75}>
13 |                 {/* These sprites show off the layering order */}
14 |                 <Sprite texture={Texture.WHITE} x={120} y={380} width={64} height={64} />
15 |                 <Sprite texture={Texture.WHITE} x={700} y={420} width={64} height={64} />
16 |                 <Sprite texture={Texture.WHITE} x={500} y={700} width={64} height={64} />
17 |             </Tilemap>
18 |         </Stage>
19 |     )
20 | }
21 | 
22 | export default App;
23 | 


--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@inlet/react-pixi": "^6.5.4",
 7 |     "@testing-library/jest-dom": "^5.11.4",
 8 |     "@testing-library/react": "^11.1.0",
 9 |     "@testing-library/user-event": "^12.1.10",
10 |     "react-pixi-tilemap": "../",
11 |     "pixi.js": "^6.0.4",
12 |     "react": "^17.0.2",
13 |     "react-dom": "^17.0.2",
14 |     "react-scripts": "4.0.3",
15 |     "web-vitals": "^1.0.1"
16 |   },
17 |   "scripts": {
18 |     "start": "react-scripts start",
19 |     "build": "react-scripts build",
20 |     "test": "react-scripts test",
21 |     "eject": "react-scripts eject"
22 |   },
23 |   "eslintConfig": {
24 |     "extends": [
25 |       "react-app",
26 |       "react-app/jest"
27 |     ]
28 |   },
29 |   "browserslist": {
30 |     "production": [
31 |       ">0.2%",
32 |       "not dead",
33 |       "not op_mini all"
34 |     ],
35 |     "development": [
36 |       "last 1 chrome version",
37 |       "last 1 firefox version",
38 |       "last 1 safari version"
39 |     ]
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 |  The MIT License (MIT)
 2 | 
 3 | Copyright © 2021 David Minnerly
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | 


--------------------------------------------------------------------------------
/src/useCollisions.js:
--------------------------------------------------------------------------------
 1 | import { Rectangle } from "pixi.js"
 2 | import { useContext, useMemo } from "react"
 3 | import TilemapContext from "./TilemapContext"
 4 | 
 5 | const useCollisions = () => {
 6 |     const { map } = useContext(TilemapContext)
 7 | 
 8 |     const collisions = useMemo(() => {
 9 |         return map.layers
10 |             .filter(layer => layer.type === 'tile')    
11 |             .map(layer => {
12 |                 const rects = []
13 |         
14 |                 for (const tile of layer.tiles) {
15 |                     if (tile) {
16 |                         const { objectGroups } = tile
17 |         
18 |                         if (objectGroups.length > 0) {
19 |                             for (const rectangle of objectGroups) {
20 |                                 const { x, y, width, height } = rectangle
21 |                                 rects.push(new Rectangle(tile.x + x, tile.y + y, width, height))
22 |                             }
23 |                         }
24 |                     }
25 |                 }
26 |         
27 |                 return rects
28 |             })
29 |             .flat()
30 |     }, [ map ])
31 | 
32 |     return collisions
33 | }
34 | 
35 | export default useCollisions


--------------------------------------------------------------------------------
/src/useTilemapLoader.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react'
 2 | import tmx from 'tmx-parser'
 3 | 
 4 | const useTilemapLoader = (tilemapPath) => {
 5 |     const [map, setMap] = useState(null)
 6 | 
 7 |     useEffect(() => {
 8 |         tmx.parseFile(tilemapPath, (err, map) => {
 9 |             if (err) throw err
10 | 
11 |             // Add (x,y) coordinates to each tile so it is easy to align collision
12 |             // rectangles later.
13 |             map.layers = map.layers.map(layer => {
14 |                 return {
15 |                     ...layer,
16 |                     tiles: layer.tiles?.map((tile, index) => {
17 |                         const x = (index % map.width) * map.tileWidth
18 |                         const y = Math.floor(index / map.width) * map.tileHeight
19 |                         const width = map.tileWidth
20 |                         const height = map.tileHeight
21 | 
22 |                         return { ...tile, x, y, width, height}
23 |                     })
24 |                 }
25 |             })
26 | 
27 |             map.path = tilemapPath
28 | 
29 |             setMap(map)
30 |         })
31 |     }, [ tilemapPath ])
32 | 
33 |     return map
34 | }
35 | 
36 | export default useTilemapLoader
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-pixi-tilemap",
 3 |   "version": "2.0.2",
 4 |   "description": "Use maps created with Tiled in your React-based Pixi.js games",
 5 |   "source": "src/index.js",
 6 |   "main": "dist/index.js",
 7 |   "files": [
 8 |     "dist"
 9 |   ],
10 |   "scripts": {
11 |     "dev": "cd demo && yarn start",
12 |     "watch": "microbundle watch --jsx React.createElement",
13 |     "start": "concurrently \"yarn:watch\" \"yarn:dev\"",
14 |     "build": "microbundle build --jsx React.createElement",
15 |     "test": "echo \"Error: no test specified\" && exit 1"
16 |   },
17 |   "keywords": [
18 |     "react",
19 |     "pixi",
20 |     "tiled",
21 |     "tmx",
22 |     "tilemap",
23 |     "tileset"
24 |   ],
25 |   "repository": {
26 |     "type": "git",
27 |     "url": "https://github.com/vocksel/react-pixi-tilemap"
28 |   },
29 |   "bugs": {
30 |     "url": "https://github.com/vocksel/react-pixi-tilemap/issues"
31 |   },
32 |   "author": "David Minnerly",
33 |   "license": "MIT",
34 |   "peerDependencies": {
35 |     "@inlet/react-pixi": ">=6.5.2",
36 |     "pixi.js": ">=6.0.4",
37 |     "react": ">=17.0.2"
38 |   },
39 |   "dependencies": {
40 |     "tmx-parser": "github:eioo/node-tmx-parser"
41 |   },
42 |   "devDependencies": {
43 |     "concurrently": "^6.2.0",
44 |     "microbundle": "^0.13.0"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/Layer.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useMemo } from 'react'
 2 | import { Container } from "@inlet/react-pixi"
 3 | import getSprite from './getSprite'
 4 | 
 5 | const getTileSprites = (layer, map) => {
 6 |     const sprites = []
 7 | 
 8 |     for (let y = 0; y < map.height; y++) {
 9 |         for (let x = 0; x < map.width; x++) {
10 |             const i = x + y * map.width
11 |             const tile = layer.tiles[i]
12 | 
13 |             if (tile?.gid > 0) {
14 |                 sprites.push(getSprite('tile', tile, map))
15 |             }
16 |         }
17 |     }
18 | 
19 |     return sprites
20 | }
21 | 
22 | const getObjectSprites = (layer, map) => {
23 |     return layer.objects.map(object => {
24 |         if (object.gid) {
25 |             return getSprite('object', object, map)
26 |         }
27 |     })
28 | }
29 | 
30 | const Layer = ({ layer, map }) => {
31 |     if (!layer.visible) {
32 |         return null
33 |     }
34 | 
35 |     const sprites = useMemo(() => {
36 |         if (layer.type === 'tile') {
37 |             return getTileSprites(layer, map)
38 |         } else if (layer.type === 'object') {
39 |             return getObjectSprites(layer, map)
40 |         }
41 |     }, [ layer ] )
42 | 
43 |     return <Container alpha={layer.opacity}>
44 |         {sprites}
45 |     </Container>
46 | }
47 | 
48 | export default Layer
49 | 


--------------------------------------------------------------------------------
/src/Tilemap.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useMemo, useState } from 'react'
 2 | import { Container } from '@inlet/react-pixi'
 3 | import TilemapContext from './TilemapContext'
 4 | import Layer from './Layer'
 5 | 
 6 | const Tilemap = ({ map, children, ...props }) => {
 7 |     const [hasForeground, setHasForeground] = useState(false)
 8 | 
 9 |     const layers = useMemo(() => {
10 |         return map?.layers.map((layer, index) => {
11 |             const { name } = layer
12 |             if (name === 'Foreground') {
13 |                 setHasForeground(true)
14 |                 return children
15 |             } else {
16 |                 return <Layer key={index} layer={layer} map={map} />
17 |             }
18 |         })
19 |     }, [ map, children ])
20 | 
21 |     // Only render once the map is loaded so that our hooks don't need to
22 |     // conditionally check if anything in TilemapContext exists.
23 |     if (map) {
24 |         return <TilemapContext.Provider value={{ map }}>
25 |             <Container {...props}>
26 |                 {layers}
27 | 
28 |                 {/* If there's no foreground layer specified in the map, we simply render the children on top */}
29 |                 {!hasForeground && children}
30 |             </Container>
31 |         </TilemapContext.Provider>
32 |     } else {
33 |         return null
34 |     }
35 | 
36 | }
37 | 
38 | export default Tilemap
39 | 


--------------------------------------------------------------------------------
/src/getSprite.js:
--------------------------------------------------------------------------------
 1 | import path from 'path'
 2 | import { Rectangle, Texture } from 'pixi.js'
 3 | import { Sprite } from "@inlet/react-pixi"
 4 | import React from "react"
 5 | 
 6 | const getTilesetForGID = (gid, tilesets) => {
 7 |     let result
 8 |     for (const tileset of tilesets) {
 9 |         if (gid >= tileset.firstGid) {
10 |             result = tileset
11 |         }
12 |     }
13 |     return result
14 | }
15 | 
16 | const getTileTexture = (tile, map, tileset) => {
17 |     const { image, tileHeight, tileWidth } = tileset
18 |     const spriteIndex = tile.gid - tileset.firstGid
19 | 
20 |     const x = (spriteIndex % (image.width / tileWidth)) * tileWidth
21 |     const y = Math.floor(spriteIndex / (image.height / tileHeight)) * tileHeight
22 | 
23 |     const rootDir = path.dirname(map.path)
24 |     const baseTexture = Texture.from(`${rootDir}/${tileset.image.source}`)
25 | 
26 |     return new Texture(baseTexture, new Rectangle(x, y, tileHeight, tileWidth))
27 | }
28 | 
29 | const getTileSprite = (tileType, tile, map) => {
30 |     const tileset = getTilesetForGID(tile.gid, map.tileSets)
31 | 
32 |     if (tileset) {
33 |         const { x, width, height } = tile
34 |         const texture = getTileTexture(tile, map, tileset)
35 | 
36 |         // Objects are bottom aligned for some reason. This pushes them up so they align with the rest of the tilemap.
37 |         let y = tile.y
38 |         if (tileType === 'object') {
39 |             y -= height
40 |         }
41 | 
42 |         return <Sprite key={`(${x},${y})`}
43 |             texture={texture}
44 |             x={x}
45 |             y={y}
46 |             width={width}
47 |             height={height}
48 |         />
49 |     }
50 | }
51 | 
52 | export default getTileSprite
53 | 


--------------------------------------------------------------------------------
/demo/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/demo/public/stages/TX Plant.tsx:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <tileset version="1.5" tiledversion="1.6.0" name="TX Plant" tilewidth="32" tileheight="32" tilecount="256" columns="16">
 3 |  <image source="TX Plant.png" width="512" height="512"/>
 4 |  <tile id="50">
 5 |   <objectgroup draworder="index">
 6 |    <object id="1" x="8" y="32">
 7 |     <polygon points="0,0 16,0 16,-16 0,-16"/>
 8 |    </object>
 9 |   </objectgroup>
10 |  </tile>
11 |  <tile id="54">
12 |   <objectgroup draworder="index">
13 |    <object id="1" x="8" y="32">
14 |     <polygon points="0,0 16,0 16,-16 0,-16"/>
15 |    </object>
16 |   </objectgroup>
17 |  </tile>
18 |  <tile id="58">
19 |   <objectgroup draworder="index">
20 |    <object id="1" x="8" y="32">
21 |     <polygon points="0,0 0,-16 16,-16 16,0"/>
22 |    </object>
23 |   </objectgroup>
24 |  </tile>
25 |  <tile id="66">
26 |   <objectgroup draworder="index">
27 |    <object id="1" x="8" y="24.9375">
28 |     <polygon points="0,0 16,0 16,-24.9375 0,-24.9375"/>
29 |    </object>
30 |   </objectgroup>
31 |  </tile>
32 |  <tile id="70">
33 |   <objectgroup draworder="index">
34 |    <object id="1" x="8" y="24">
35 |     <polygon points="0,0 16,0 16,-24 0,-24 0,0"/>
36 |    </object>
37 |   </objectgroup>
38 |  </tile>
39 |  <tile id="74">
40 |   <objectgroup draworder="index">
41 |    <object id="1" x="8" y="24">
42 |     <polygon points="0,0 16,0 16,-24 0,-24"/>
43 |    </object>
44 |   </objectgroup>
45 |  </tile>
46 |  <tile id="97">
47 |   <objectgroup draworder="index">
48 |    <object id="2" x="6" y="17" width="22" height="8"/>
49 |   </objectgroup>
50 |  </tile>
51 |  <tile id="99">
52 |   <objectgroup draworder="index">
53 |    <object id="2" x="2" y="16.5455" width="27" height="11.4545"/>
54 |   </objectgroup>
55 |  </tile>
56 |  <tile id="101">
57 |   <objectgroup draworder="index">
58 |    <object id="1" x="0" y="0" width="32" height="30"/>
59 |   </objectgroup>
60 |  </tile>
61 | </tileset>
62 | 


--------------------------------------------------------------------------------
/demo/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/demo/public/stages/TX Props.tsx:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <tileset version="1.5" tiledversion="1.6.0" name="TX Props" tilewidth="32" tileheight="32" tilecount="256" columns="16">
  3 |  <image source="TX Props.png" width="512" height="512"/>
  4 |  <tile id="7">
  5 |   <objectgroup draworder="index">
  6 |    <object id="1" x="3" y="9" width="26" height="23"/>
  7 |   </objectgroup>
  8 |  </tile>
  9 |  <tile id="9">
 10 |   <objectgroup draworder="index">
 11 |    <object id="1" x="4" y="19" width="28" height="13"/>
 12 |   </objectgroup>
 13 |  </tile>
 14 |  <tile id="10">
 15 |   <objectgroup draworder="index">
 16 |    <object id="1" x="0" y="19" width="28" height="13"/>
 17 |   </objectgroup>
 18 |  </tile>
 19 |  <tile id="12">
 20 |   <objectgroup draworder="index">
 21 |    <object id="1" x="3" y="2" width="27" height="30"/>
 22 |   </objectgroup>
 23 |  </tile>
 24 |  <tile id="14">
 25 |   <objectgroup draworder="index">
 26 |    <object id="1" x="4" y="20" width="23" height="12"/>
 27 |    <object id="2" x="4" y="20" width="23" height="12"/>
 28 |   </objectgroup>
 29 |  </tile>
 30 |  <tile id="23">
 31 |   <objectgroup draworder="index">
 32 |    <object id="1" x="3" y="0" width="26" height="29"/>
 33 |   </objectgroup>
 34 |  </tile>
 35 |  <tile id="25">
 36 |   <objectgroup draworder="index">
 37 |    <object id="1" x="4" y="0" width="28" height="28"/>
 38 |   </objectgroup>
 39 |  </tile>
 40 |  <tile id="26">
 41 |   <objectgroup draworder="index">
 42 |    <object id="1" x="0" y="0" width="28" height="28"/>
 43 |   </objectgroup>
 44 |  </tile>
 45 |  <tile id="28">
 46 |   <objectgroup draworder="index">
 47 |    <object id="1" x="3" y="0" width="27" height="31"/>
 48 |   </objectgroup>
 49 |  </tile>
 50 |  <tile id="30">
 51 |   <objectgroup draworder="index">
 52 |    <object id="1" x="0" y="0" width="32" height="32"/>
 53 |   </objectgroup>
 54 |  </tile>
 55 |  <tile id="39">
 56 |   <objectgroup draworder="index">
 57 |    <object id="1" x="3" y="27" width="26" height="5"/>
 58 |   </objectgroup>
 59 |  </tile>
 60 |  <tile id="45">
 61 |   <objectgroup draworder="index">
 62 |    <object id="1" x="29" y="4" width="3" height="24"/>
 63 |   </objectgroup>
 64 |  </tile>
 65 |  <tile id="46">
 66 |   <objectgroup draworder="index">
 67 |    <object id="1" x="0" y="0" width="32" height="29"/>
 68 |   </objectgroup>
 69 |  </tile>
 70 |  <tile id="47">
 71 |   <objectgroup draworder="index">
 72 |    <object id="1" x="0" y="0" width="11" height="28"/>
 73 |   </objectgroup>
 74 |  </tile>
 75 |  <tile id="55">
 76 |   <objectgroup draworder="index">
 77 |    <object id="1" x="3" y="0" width="26" height="32"/>
 78 |   </objectgroup>
 79 |  </tile>
 80 |  <tile id="60">
 81 |   <objectgroup draworder="index">
 82 |    <object id="1" x="3" y="2" width="27" height="30"/>
 83 |   </objectgroup>
 84 |  </tile>
 85 |  <tile id="71">
 86 |   <objectgroup draworder="index">
 87 |    <object id="1" x="3" y="0" width="26" height="29"/>
 88 |   </objectgroup>
 89 |  </tile>
 90 |  <tile id="76">
 91 |   <objectgroup draworder="index">
 92 |    <object id="1" x="3" y="0" width="27" height="31"/>
 93 |   </objectgroup>
 94 |  </tile>
 95 |  <tile id="87">
 96 |   <objectgroup draworder="index">
 97 |    <object id="1" x="3" y="23" width="26" height="9"/>
 98 |   </objectgroup>
 99 |  </tile>
100 |  <tile id="91">
101 |   <objectgroup draworder="index">
102 |    <object id="1" x="2" y="14" width="28" height="18"/>
103 |   </objectgroup>
104 |  </tile>
105 |  <tile id="103">
106 |   <objectgroup draworder="index">
107 |    <object id="1" x="3" y="0" width="26" height="29"/>
108 |   </objectgroup>
109 |  </tile>
110 |  <tile id="107">
111 |   <objectgroup draworder="index">
112 |    <object id="1" x="2" y="0" width="28" height="32"/>
113 |   </objectgroup>
114 |  </tile>
115 |  <tile id="109">
116 |   <objectgroup draworder="index">
117 |    <object id="1" x="6" y="2" width="20" height="30"/>
118 |   </objectgroup>
119 |  </tile>
120 |  <tile id="119">
121 |   <objectgroup draworder="index">
122 |    <object id="1" x="4" y="15" width="24" height="17"/>
123 |   </objectgroup>
124 |  </tile>
125 |  <tile id="121">
126 |   <objectgroup draworder="index">
127 |    <object id="1" x="5" y="27" width="22" height="5"/>
128 |   </objectgroup>
129 |  </tile>
130 |  <tile id="123">
131 |   <objectgroup draworder="index">
132 |    <object id="1" x="0" y="0" width="32" height="27"/>
133 |   </objectgroup>
134 |  </tile>
135 |  <tile id="125">
136 |   <objectgroup draworder="index">
137 |    <object id="1" x="0" y="0" width="32" height="27"/>
138 |   </objectgroup>
139 |  </tile>
140 |  <tile id="135">
141 |   <objectgroup draworder="index">
142 |    <object id="1" x="1" y="0" width="30" height="24"/>
143 |   </objectgroup>
144 |  </tile>
145 |  <tile id="137">
146 |   <objectgroup draworder="index">
147 |    <object id="1" x="1" y="0" width="30" height="24"/>
148 |   </objectgroup>
149 |  </tile>
150 |  <tile id="151">
151 |   <objectgroup draworder="index">
152 |    <object id="1" x="3" y="15" width="26" height="17"/>
153 |   </objectgroup>
154 |  </tile>
155 |  <tile id="167">
156 |   <objectgroup draworder="index">
157 |    <object id="1" x="7" y="0" width="18" height="23"/>
158 |   </objectgroup>
159 |  </tile>
160 |  <tile id="189">
161 |   <objectgroup draworder="index">
162 |    <object id="1" x="4" y="7" width="28" height="25"/>
163 |   </objectgroup>
164 |  </tile>
165 |  <tile id="190">
166 |   <objectgroup draworder="index">
167 |    <object id="1" x="0" y="10" width="27" height="22"/>
168 |   </objectgroup>
169 |  </tile>
170 |  <tile id="205">
171 |   <objectgroup draworder="index">
172 |    <object id="1" x="4" y="0" width="28" height="24"/>
173 |   </objectgroup>
174 |  </tile>
175 |  <tile id="206">
176 |   <objectgroup draworder="index">
177 |    <object id="1" x="0" y="0" width="26" height="24"/>
178 |   </objectgroup>
179 |  </tile>
180 | </tileset>
181 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-pixi-tilemap
  2 | 
  3 | This package allows you to easily make use of levels created with [Tiled](https://www.mapeditor.org/) in your React and Pixi based games.
  4 | 
  5 | Supports embedded and external tilesets, collisions, child layering, and comes with a bunch of different hooks to work with tiles and objects from within your components.
  6 | 
  7 | ![Screenshot of the demo map](img/example.png)
  8 | 
  9 | ## Install
 10 | 
 11 | ```sh
 12 | $ npm install react-pixi-tilemap
 13 | # Or
 14 | $ yarn add react-pixi-tilemap
 15 | ```
 16 | 
 17 | ## Usage
 18 | 
 19 | Your `.tmx` files, and their associated `.tsx` and atlas files, should be in a static location, such as the `public` folder if you are using create-react-app. This makes it easy for the Tilemap component to find assets used in the map.
 20 | 
 21 | Using the component is dead simple. Simply load your map and pass it into the Tilemap component.
 22 | 
 23 | ```js
 24 | import { Tilemap, useTilemapLoader } from 'react-pixi-tilemap'
 25 | 
 26 | const tilemap = process.env.PUBLIC_URL + '/stages/map.tmx'
 27 | 
 28 | const App = (props) => {
 29 |     const map = useTilemapLoader(tilemap)
 30 | 
 31 |     return (
 32 |         <Stage>
 33 |             <Tilemap map={map} scale={0.75} {...props}>
 34 |                 <Sprite ... />
 35 |                 <Sprite ... />
 36 |                 <Sprite ... />
 37 |             </Tilemap>
 38 |         </Stage>
 39 |     )
 40 | }
 41 | ```
 42 | 
 43 | The return value of `useTilemapLoader` is an Object represented by [TMX Map Format#map](https://doc.mapeditor.org/en/stable/reference/tmx-map-format/#map). Make sure to look over those docs to learn more about what properties you have access to.
 44 | 
 45 | Be advised that you should not use a typical `import` statement. If you `import map from './map.tmx'`, Webpack (or similar build system) will take your .tmx file away from your tilesets, which breaks the Tilemap component's discovery. As such, keeping your tilemaps and tilesets in a static location will give you the best results.
 46 | 
 47 | Your tilesets can either be saved as `.tsx` files, or embedded in the `.tmx` file itself. Either works with this package. Keep in mind however that you _cannot_ save your tilesets as their `.json` equivalents. This seems to be an issue with tmx-parser.
 48 | 
 49 | ## Example
 50 | 
 51 | Check out the [demo project](demo) for an example of how this all comes together. Be sure to open up the [map.tmx]() file in Tiled and explore around.
 52 | 
 53 | To get setup, run the following commands:
 54 | 
 55 | ```sh
 56 | $ cd demo
 57 | $ yarn install
 58 | $ yarn start
 59 | ```
 60 | 
 61 | ## Foreground Layer
 62 | 
 63 | Adding a `Foreground` layer to your `.tmx` file determines where children of the Tilemap component are rendered. Without this layer, children are rendered on top of the map. If you want children to appear above some layers, and behind others, then make sure to include this layer. The order of the Foreground layer in Tiled's `Layer` pane controls where the children are rendered.
 64 | 
 65 | ![Screenshot of the Layers pane in Tiled](img/layers-pane.png)
 66 | 
 67 | ## Hooks
 68 | 
 69 | **`useCollisions()`**
 70 | 
 71 | Returns a flat list of Pixi.js Rectangle instances that represent the collisions defined in the `.tmx` file. These can be configured with Tiled's [Collision Editor](https://doc.mapeditor.org/en/stable/manual/editing-tilesets/#tile-collision-editor).
 72 | 
 73 | ```js
 74 | const collisions = useCollisions()
 75 | ```
 76 | 
 77 | **`useInteractables()`**
 78 | 
 79 | Any object that has a bool `isInteractable` custom property in Tiled will be picked up by this hook. This allows you to easily define objects in the game (such as NPCs, items on the ground, etc.) as something the user can interact with, and use them in your code.
 80 | 
 81 | ```js
 82 | const interactables = useInteractables()
 83 | ```
 84 | 
 85 | **`useMap()`**
 86 | 
 87 | Returns the `map` property passed into Tilemap. This can be helpful if you need to access metadata about the map, or if you need to write a hook that is not included in this package.
 88 | 
 89 | See [TMX Map Format#map](https://doc.mapeditor.org/en/stable/reference/tmx-map-format/#map).
 90 | 
 91 | ```js
 92 | const map = useMap()
 93 | ```
 94 | 
 95 | **`useObjects()`**
 96 | 
 97 | Returns a flat list of every object across every layer.
 98 | 
 99 | See [TMX Map Format#object](https://doc.mapeditor.org/en/stable/reference/tmx-map-format/#object)
100 | 
101 | ```js
102 | const objects = useObjects()
103 | ```
104 | 
105 | **`useSpawnPoint()`**
106 | 
107 | This hook is fairly specific, but if you add an object named `Spawn`, this hook will return it for you. This makes it easy to setup a spawn location for player characters.
108 | 
109 | **`useTilemapLoader(tilemapPath)`**
110 | 
111 | This hook is what you use to load your .tmx map before passing it into the Tilemap component.
112 | 
113 | **`useTiles()`**
114 | 
115 | Returns a flat array of every tile in the map.
116 | 
117 | See [TMX Map Format#tile](https://doc.mapeditor.org/en/stable/reference/tmx-map-format/#tile).
118 | 
119 | ## Credits
120 | 
121 | Thanks to Cainos' for their awesome [Pixel Art Top Down - Basic](https://cainos.itch.io/pixel-art-top-down-basic) tiles.
122 | 
123 | Also very big shoutout to the following repos that were very invaluable in figuring out how to create this package.
124 | 
125 | - [Reynau/tiled-to-pixi](https://github.com/Reynau/tiled-to-pixi)
126 | - [knervous/tiled-pixi-react](https://github.com/knervous/tiled-pixi-react)
127 | 
128 | ## Developing
129 | 
130 | Run the following commands from the root directory to install all dependencies, and get setup with a dev environment that will live-reload as you make changes to the package.
131 | 
132 | ```sh
133 | $ yarn install
134 | $ yarn link
135 | $ cd demo
136 | $ yarn link react-pixi-tilemap
137 | $ yarn install
138 | $ cd ..
139 | $ yarn start
140 | ```
141 | ## License
142 | 
143 | MIT
144 | 


--------------------------------------------------------------------------------
/demo/public/stages/TX Struct.tsx:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <tileset version="1.5" tiledversion="1.6.0" name="TX Struct" tilewidth="32" tileheight="32" tilecount="256" columns="16">
  3 |  <image source="TX Struct.png" width="512" height="512"/>
  4 |  <tile id="12">
  5 |   <objectgroup draworder="index">
  6 |    <object id="1" x="24" y="27" width="8" height="5"/>
  7 |   </objectgroup>
  8 |  </tile>
  9 |  <tile id="13">
 10 |   <objectgroup draworder="index">
 11 |    <object id="1" x="0" y="27" width="32" height="5"/>
 12 |   </objectgroup>
 13 |  </tile>
 14 |  <tile id="14">
 15 |   <objectgroup draworder="index">
 16 |    <object id="1" x="0" y="27" width="32" height="5"/>
 17 |   </objectgroup>
 18 |  </tile>
 19 |  <tile id="15">
 20 |   <objectgroup draworder="index">
 21 |    <object id="1" x="0" y="27" width="8" height="5"/>
 22 |   </objectgroup>
 23 |  </tile>
 24 |  <tile id="17">
 25 |   <objectgroup draworder="index">
 26 |    <object id="1" x="0" y="32">
 27 |     <polygon points="0,0 0,-32 8,-32 8,0"/>
 28 |    </object>
 29 |   </objectgroup>
 30 |  </tile>
 31 |  <tile id="18">
 32 |   <objectgroup draworder="index">
 33 |    <object id="1" x="24" y="0">
 34 |     <polygon points="0,0 0,32 8,32 8,0"/>
 35 |    </object>
 36 |   </objectgroup>
 37 |  </tile>
 38 |  <tile id="20">
 39 |   <objectgroup draworder="index">
 40 |    <object id="1" x="0" y="0">
 41 |     <polygon points="0,0 0,32 8,32 8,0"/>
 42 |    </object>
 43 |   </objectgroup>
 44 |  </tile>
 45 |  <tile id="21">
 46 |   <objectgroup draworder="index">
 47 |    <object id="1" x="24" y="0">
 48 |     <polygon points="0,0 0,32 8,32 8,0"/>
 49 |    </object>
 50 |   </objectgroup>
 51 |  </tile>
 52 |  <tile id="23">
 53 |   <objectgroup draworder="index">
 54 |    <object id="1" x="0" y="0">
 55 |     <polygon points="0,0 0,32 8,32 8,0"/>
 56 |    </object>
 57 |   </objectgroup>
 58 |  </tile>
 59 |  <tile id="24">
 60 |   <objectgroup draworder="index">
 61 |    <object id="1" x="24" y="0">
 62 |     <polygon points="0,0 0,32 8,32 8,0"/>
 63 |    </object>
 64 |   </objectgroup>
 65 |  </tile>
 66 |  <tile id="29">
 67 |   <objectgroup draworder="index">
 68 |    <object id="1" x="0" y="0">
 69 |     <polygon points="0,0 0,32 16,32 16,0 0,0"/>
 70 |    </object>
 71 |    <object id="2" x="16" y="0">
 72 |     <polygon points="0,0 16,0 16,16 0,16"/>
 73 |    </object>
 74 |   </objectgroup>
 75 |  </tile>
 76 |  <tile id="30">
 77 |   <objectgroup draworder="index">
 78 |    <object id="1" x="16" y="32">
 79 |     <polygon points="0,0 0,-32 16,-32 16,0"/>
 80 |    </object>
 81 |    <object id="2" x="0" y="0">
 82 |     <polygon points="0,0 16,0 16,16 0,16"/>
 83 |    </object>
 84 |   </objectgroup>
 85 |  </tile>
 86 |  <tile id="33">
 87 |   <objectgroup draworder="index">
 88 |    <object id="1" x="0" y="32">
 89 |     <polygon points="0,0 8,0 8,-32 0,-32"/>
 90 |    </object>
 91 |   </objectgroup>
 92 |  </tile>
 93 |  <tile id="34">
 94 |   <objectgroup draworder="index">
 95 |    <object id="1" x="32" y="0">
 96 |     <polygon points="0,0 0,32 -8,32 -8,0"/>
 97 |    </object>
 98 |   </objectgroup>
 99 |  </tile>
100 |  <tile id="36">
101 |   <objectgroup draworder="index">
102 |    <object id="1" x="0" y="0">
103 |     <polygon points="0,0 0,32 8,32 8,0 0,0"/>
104 |    </object>
105 |   </objectgroup>
106 |  </tile>
107 |  <tile id="37">
108 |   <objectgroup draworder="index">
109 |    <object id="1" x="24" y="0">
110 |     <polygon points="0,0 0,32 8,32 8,0 0,0"/>
111 |    </object>
112 |   </objectgroup>
113 |  </tile>
114 |  <tile id="39">
115 |   <objectgroup draworder="index">
116 |    <object id="1" x="0" y="0">
117 |     <polygon points="0,0 0,32 8,32 8,0"/>
118 |    </object>
119 |   </objectgroup>
120 |  </tile>
121 |  <tile id="40">
122 |   <objectgroup draworder="index">
123 |    <object id="1" x="24" y="0">
124 |     <polygon points="0,0 0,32 8,32 8,0"/>
125 |    </object>
126 |   </objectgroup>
127 |  </tile>
128 |  <tile id="45">
129 |   <objectgroup draworder="index">
130 |    <object id="1" x="0" y="0">
131 |     <polygon points="0,0 0,24 16,24 16,0"/>
132 |    </object>
133 |   </objectgroup>
134 |  </tile>
135 |  <tile id="46">
136 |   <objectgroup draworder="index">
137 |    <object id="1" x="16" y="0">
138 |     <polygon points="0,0 0,24 16,24 16,0"/>
139 |    </object>
140 |   </objectgroup>
141 |  </tile>
142 |  <tile id="49">
143 |   <objectgroup draworder="index">
144 |    <object id="1" x="0" y="32">
145 |     <polygon points="0,0 8,0 8,-32 0,-32"/>
146 |    </object>
147 |   </objectgroup>
148 |  </tile>
149 |  <tile id="50">
150 |   <objectgroup draworder="index">
151 |    <object id="1" x="32" y="0">
152 |     <polygon points="0,0 0,32 -8,32 -8,0"/>
153 |    </object>
154 |   </objectgroup>
155 |  </tile>
156 |  <tile id="52">
157 |   <objectgroup draworder="index">
158 |    <object id="1" x="0" y="0">
159 |     <polygon points="0,0 0,32 8,32 8,0"/>
160 |    </object>
161 |   </objectgroup>
162 |  </tile>
163 |  <tile id="53">
164 |   <objectgroup draworder="index">
165 |    <object id="1" x="24" y="0">
166 |     <polygon points="0,0 0,32 8,32 8,0"/>
167 |    </object>
168 |   </objectgroup>
169 |  </tile>
170 |  <tile id="55">
171 |   <objectgroup draworder="index">
172 |    <object id="1" x="8" y="0">
173 |     <polygon points="0,0 0,32 -8,32 -8,0"/>
174 |    </object>
175 |   </objectgroup>
176 |  </tile>
177 |  <tile id="56">
178 |   <objectgroup draworder="index">
179 |    <object id="1" x="24" y="0">
180 |     <polygon points="0,0 0,32 8,32 8,0"/>
181 |    </object>
182 |   </objectgroup>
183 |  </tile>
184 |  <tile id="77">
185 |   <objectgroup draworder="index">
186 |    <object id="1" x="0" y="0">
187 |     <polygon points="0,0 0,32 16,32 16,0"/>
188 |    </object>
189 |    <object id="2" x="16" y="0">
190 |     <polygon points="0,0 16,0 16,16 0,16"/>
191 |    </object>
192 |   </objectgroup>
193 |  </tile>
194 |  <tile id="78">
195 |   <objectgroup draworder="index">
196 |    <object id="1" x="0" y="0">
197 |     <polygon points="0,0 32,0 32,16 0,16 0,0"/>
198 |    </object>
199 |    <object id="2" x="16" y="32">
200 |     <polygon points="0,0 16,0 16,-16 0,-16"/>
201 |    </object>
202 |   </objectgroup>
203 |  </tile>
204 |  <tile id="81">
205 |   <objectgroup draworder="index">
206 |    <object id="1" x="0" y="0">
207 |     <polygon points="0,0 0,32 8,32 8,0 0,0"/>
208 |    </object>
209 |   </objectgroup>
210 |  </tile>
211 |  <tile id="82">
212 |   <objectgroup draworder="index">
213 |    <object id="1" x="24" y="0">
214 |     <polygon points="0,0 0,32 8,32 8,0"/>
215 |    </object>
216 |   </objectgroup>
217 |  </tile>
218 |  <tile id="84">
219 |   <objectgroup draworder="index">
220 |    <object id="1" x="0" y="0">
221 |     <polygon points="0,0 0,32 8,32 8,0 0,0"/>
222 |    </object>
223 |   </objectgroup>
224 |  </tile>
225 |  <tile id="85">
226 |   <objectgroup draworder="index">
227 |    <object id="1" x="24" y="0">
228 |     <polygon points="0,0 0,32 8,32 8,0"/>
229 |    </object>
230 |   </objectgroup>
231 |  </tile>
232 |  <tile id="87">
233 |   <objectgroup draworder="index">
234 |    <object id="1" x="0" y="0">
235 |     <polygon points="0,0 0,32 8,32 8,0"/>
236 |    </object>
237 |   </objectgroup>
238 |  </tile>
239 |  <tile id="88">
240 |   <objectgroup draworder="index">
241 |    <object id="1" x="24" y="0">
242 |     <polygon points="0,0 0,32 8,32 8,0"/>
243 |    </object>
244 |   </objectgroup>
245 |  </tile>
246 |  <tile id="93">
247 |   <objectgroup draworder="index">
248 |    <object id="1" x="0" y="32">
249 |     <polygon points="0,0 0,-32 16,-32 16,0"/>
250 |    </object>
251 |   </objectgroup>
252 |  </tile>
253 |  <tile id="94">
254 |   <objectgroup draworder="index">
255 |    <object id="1" x="16" y="32">
256 |     <polygon points="0,0 0,-32 16,-32 16,0"/>
257 |    </object>
258 |   </objectgroup>
259 |  </tile>
260 |  <tile id="97">
261 |   <objectgroup draworder="index">
262 |    <object id="1" x="0" y="0">
263 |     <polygon points="0,0 0,32 8,32 8,0"/>
264 |    </object>
265 |   </objectgroup>
266 |  </tile>
267 |  <tile id="98">
268 |   <objectgroup draworder="index">
269 |    <object id="1" x="24" y="0">
270 |     <polygon points="0,0 0,32 8,32 8,0"/>
271 |    </object>
272 |   </objectgroup>
273 |  </tile>
274 |  <tile id="100">
275 |   <objectgroup draworder="index">
276 |    <object id="1" x="0" y="0">
277 |     <polygon points="0,0 0,32 8,32 8,0"/>
278 |    </object>
279 |   </objectgroup>
280 |  </tile>
281 |  <tile id="101">
282 |   <objectgroup draworder="index">
283 |    <object id="1" x="24" y="0">
284 |     <polygon points="0,0 0,32 8,32 8,0 0,0"/>
285 |    </object>
286 |   </objectgroup>
287 |  </tile>
288 |  <tile id="103">
289 |   <objectgroup draworder="index">
290 |    <object id="1" x="0" y="0">
291 |     <polygon points="0,0 0,32 8,32 8,0"/>
292 |    </object>
293 |   </objectgroup>
294 |  </tile>
295 |  <tile id="104">
296 |   <objectgroup draworder="index">
297 |    <object id="1" x="24" y="0">
298 |     <polygon points="0,0 0,32 8,32 8,0"/>
299 |    </object>
300 |   </objectgroup>
301 |  </tile>
302 |  <tile id="113">
303 |   <objectgroup draworder="index">
304 |    <object id="1" x="0" y="0">
305 |     <polygon points="0,0 0,32 8,32 8,0"/>
306 |    </object>
307 |   </objectgroup>
308 |  </tile>
309 |  <tile id="114">
310 |   <objectgroup draworder="index">
311 |    <object id="1" x="24" y="0">
312 |     <polygon points="0,0 0,32 8,32 8,0"/>
313 |    </object>
314 |   </objectgroup>
315 |  </tile>
316 |  <tile id="116">
317 |   <objectgroup draworder="index">
318 |    <object id="1" x="0" y="0">
319 |     <polygon points="0,0 0,32 8,32 8,0"/>
320 |    </object>
321 |   </objectgroup>
322 |  </tile>
323 |  <tile id="117">
324 |   <objectgroup draworder="index">
325 |    <object id="1" x="24" y="0">
326 |     <polygon points="0,0 0,32 8,32 8,0"/>
327 |    </object>
328 |   </objectgroup>
329 |  </tile>
330 |  <tile id="119">
331 |   <objectgroup draworder="index">
332 |    <object id="1" x="0" y="0">
333 |     <polygon points="0,0 0,32 8,32 8,0"/>
334 |    </object>
335 |   </objectgroup>
336 |  </tile>
337 |  <tile id="120">
338 |   <objectgroup draworder="index">
339 |    <object id="1" x="24" y="0">
340 |     <polygon points="0,0 0,32 8,32 8,0"/>
341 |    </object>
342 |   </objectgroup>
343 |  </tile>
344 | </tileset>
345 | 


--------------------------------------------------------------------------------
/demo/public/stages/TX Tileset Wall.tsx:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <tileset version="1.5" tiledversion="1.6.0" name="TX Tileset Wall" tilewidth="32" tileheight="32" tilecount="256" columns="16">
  3 |  <image source="TX Tileset Wall.png" width="512" height="512"/>
  4 |  <tile id="17">
  5 |   <objectgroup draworder="index">
  6 |    <object id="1" x="0" y="0">
  7 |     <polygon points="0,0 0,32 8,32 8,0"/>
  8 |    </object>
  9 |    <object id="2" x="8" y="0">
 10 |     <polygon points="0,0 0,8 24,8 24,0"/>
 11 |    </object>
 12 |   </objectgroup>
 13 |  </tile>
 14 |  <tile id="18">
 15 |   <objectgroup draworder="index">
 16 |    <object id="1" x="0" y="0">
 17 |     <polygon points="0,0 32,0 32,8 0,8"/>
 18 |    </object>
 19 |   </objectgroup>
 20 |  </tile>
 21 |  <tile id="19">
 22 |   <objectgroup draworder="index">
 23 |    <object id="1" x="0" y="0">
 24 |     <polygon points="0,0 0,8 24,8 24,0"/>
 25 |    </object>
 26 |    <object id="2" x="24" y="0">
 27 |     <polygon points="0,0 8,0 8,32 0,32"/>
 28 |    </object>
 29 |   </objectgroup>
 30 |  </tile>
 31 |  <tile id="20">
 32 |   <objectgroup draworder="index">
 33 |    <object id="1" x="32" y="0">
 34 |     <polygon points="0,0 -8,0 -8,32 0,32"/>
 35 |    </object>
 36 |   </objectgroup>
 37 |  </tile>
 38 |  <tile id="21">
 39 |   <objectgroup draworder="index">
 40 |    <object id="1" x="0" y="0" width="32" height="32"/>
 41 |   </objectgroup>
 42 |  </tile>
 43 |  <tile id="22">
 44 |   <objectgroup draworder="index">
 45 |    <object id="1" x="0" y="0" width="32" height="32"/>
 46 |   </objectgroup>
 47 |  </tile>
 48 |  <tile id="23">
 49 |   <objectgroup draworder="index">
 50 |    <object id="4" x="0" y="0" width="32" height="32"/>
 51 |   </objectgroup>
 52 |  </tile>
 53 |  <tile id="24">
 54 |   <objectgroup draworder="index">
 55 |    <object id="2" x="0" y="0">
 56 |     <polygon points="0,0 0,32 8,32 8,0"/>
 57 |    </object>
 58 |   </objectgroup>
 59 |  </tile>
 60 |  <tile id="25">
 61 |   <objectgroup draworder="index">
 62 |    <object id="1" x="0" y="0">
 63 |     <polygon points="0,0 0,32 8,32 8,0"/>
 64 |    </object>
 65 |   </objectgroup>
 66 |  </tile>
 67 |  <tile id="26">
 68 |   <objectgroup draworder="index">
 69 |    <object id="1" x="24" y="0" width="8" height="32"/>
 70 |   </objectgroup>
 71 |  </tile>
 72 |  <tile id="28">
 73 |   <objectgroup draworder="index">
 74 |    <object id="1" x="0" y="0" width="32" height="8"/>
 75 |   </objectgroup>
 76 |  </tile>
 77 |  <tile id="29">
 78 |   <objectgroup draworder="index">
 79 |    <object id="1" x="0" y="0" width="32" height="8"/>
 80 |   </objectgroup>
 81 |  </tile>
 82 |  <tile id="30">
 83 |   <objectgroup draworder="index">
 84 |    <object id="1" x="0" y="0" width="32" height="8"/>
 85 |   </objectgroup>
 86 |  </tile>
 87 |  <tile id="33">
 88 |   <objectgroup draworder="index">
 89 |    <object id="1" x="0" y="0" width="10" height="32"/>
 90 |   </objectgroup>
 91 |  </tile>
 92 |  <tile id="35">
 93 |   <objectgroup draworder="index">
 94 |    <object id="1" x="24" y="0">
 95 |     <polygon points="0,0 0,32 8,32 8,0"/>
 96 |    </object>
 97 |   </objectgroup>
 98 |  </tile>
 99 |  <tile id="36">
100 |   <objectgroup draworder="index">
101 |    <object id="1" x="24" y="0">
102 |     <polygon points="0,0 0,32 8,32 8,0"/>
103 |    </object>
104 |   </objectgroup>
105 |  </tile>
106 |  <tile id="37">
107 |   <objectgroup draworder="index">
108 |    <object id="1" x="0" y="0" width="32" height="32"/>
109 |   </objectgroup>
110 |  </tile>
111 |  <tile id="38">
112 |   <objectgroup draworder="index">
113 |    <object id="1" x="0" y="0" width="32" height="32"/>
114 |   </objectgroup>
115 |  </tile>
116 |  <tile id="39">
117 |   <objectgroup draworder="index">
118 |    <object id="1" x="0" y="0" width="32" height="32"/>
119 |   </objectgroup>
120 |  </tile>
121 |  <tile id="40">
122 |   <objectgroup draworder="index">
123 |    <object id="1" x="0" y="0">
124 |     <polygon points="0,0 0,32 8,32 8,0"/>
125 |    </object>
126 |   </objectgroup>
127 |  </tile>
128 |  <tile id="41">
129 |   <objectgroup draworder="index">
130 |    <object id="1" x="0" y="0">
131 |     <polygon points="0,0 0,32 8,32 8,0 0,0"/>
132 |    </object>
133 |   </objectgroup>
134 |  </tile>
135 |  <tile id="42">
136 |   <objectgroup draworder="index">
137 |    <object id="1" x="24" y="0" width="8" height="32"/>
138 |   </objectgroup>
139 |  </tile>
140 |  <tile id="44">
141 |   <objectgroup draworder="index">
142 |    <object id="1" x="0" y="32">
143 |     <polygon points="0,0 8,0 8,-24 0,-24"/>
144 |    </object>
145 |    <object id="2" x="0" y="0">
146 |     <polygon points="0,0 0,8 32,8 32,0"/>
147 |    </object>
148 |   </objectgroup>
149 |  </tile>
150 |  <tile id="45">
151 |   <objectgroup draworder="index">
152 |    <object id="1" x="0" y="0">
153 |     <polygon points="0,0 32,0 32,8 0,8"/>
154 |    </object>
155 |    <object id="2" x="32" y="8">
156 |     <polygon points="0,0 -8,0 -8,24 0,24"/>
157 |    </object>
158 |   </objectgroup>
159 |  </tile>
160 |  <tile id="49">
161 |   <objectgroup draworder="index">
162 |    <object id="1" x="0" y="0" width="32" height="32"/>
163 |    <object id="2" x="0" y="0" width="32" height="32"/>
164 |   </objectgroup>
165 |  </tile>
166 |  <tile id="50">
167 |   <objectgroup draworder="index">
168 |    <object id="1" x="0" y="0" width="32" height="32"/>
169 |   </objectgroup>
170 |  </tile>
171 |  <tile id="51">
172 |   <objectgroup draworder="index">
173 |    <object id="1" x="0" y="0" width="32" height="32"/>
174 |   </objectgroup>
175 |  </tile>
176 |  <tile id="52">
177 |   <objectgroup draworder="index">
178 |    <object id="1" x="24" y="0">
179 |     <polygon points="0,0 0,32 8,32 8,0"/>
180 |    </object>
181 |   </objectgroup>
182 |  </tile>
183 |  <tile id="56">
184 |   <objectgroup draworder="index">
185 |    <object id="2" x="0" y="0">
186 |     <polygon points="0,0 0,32 8,32 8,0"/>
187 |    </object>
188 |   </objectgroup>
189 |  </tile>
190 |  <tile id="57">
191 |   <objectgroup draworder="index">
192 |    <object id="1" x="0" y="0">
193 |     <polygon points="0,0 0,32 8,32 8,0"/>
194 |    </object>
195 |   </objectgroup>
196 |  </tile>
197 |  <tile id="58">
198 |   <objectgroup draworder="index">
199 |    <object id="1" x="24" y="0" width="8" height="32"/>
200 |   </objectgroup>
201 |  </tile>
202 |  <tile id="60">
203 |   <objectgroup draworder="index">
204 |    <object id="1" x="0" y="0" width="32" height="32"/>
205 |   </objectgroup>
206 |  </tile>
207 |  <tile id="61">
208 |   <objectgroup draworder="index">
209 |    <object id="1" x="0" y="0" width="32" height="32"/>
210 |   </objectgroup>
211 |  </tile>
212 |  <tile id="65">
213 |   <objectgroup draworder="index">
214 |    <object id="3" x="0" y="0" width="32" height="32"/>
215 |   </objectgroup>
216 |  </tile>
217 |  <tile id="66">
218 |   <objectgroup draworder="index">
219 |    <object id="1" x="0" y="0" width="32" height="32"/>
220 |   </objectgroup>
221 |  </tile>
222 |  <tile id="67">
223 |   <objectgroup draworder="index">
224 |    <object id="1" x="0" y="0" width="32" height="32"/>
225 |   </objectgroup>
226 |  </tile>
227 |  <tile id="68">
228 |   <objectgroup draworder="index">
229 |    <object id="1" x="24" y="0">
230 |     <polygon points="0,0 0,8 8,8 8,0"/>
231 |    </object>
232 |   </objectgroup>
233 |  </tile>
234 |  <tile id="69">
235 |   <objectgroup draworder="index">
236 |    <object id="1" x="0" y="0" width="32" height="8"/>
237 |   </objectgroup>
238 |  </tile>
239 |  <tile id="70">
240 |   <objectgroup draworder="index">
241 |    <object id="1" x="0" y="0" width="32" height="8"/>
242 |   </objectgroup>
243 |  </tile>
244 |  <tile id="71">
245 |   <objectgroup draworder="index">
246 |    <object id="1" x="0" y="0" width="32" height="8"/>
247 |   </objectgroup>
248 |  </tile>
249 |  <tile id="72">
250 |   <objectgroup draworder="index">
251 |    <object id="1" x="0" y="0" width="10" height="8"/>
252 |   </objectgroup>
253 |  </tile>
254 |  <tile id="76">
255 |   <objectgroup draworder="index">
256 |    <object id="1" x="2" y="0" width="30" height="32"/>
257 |   </objectgroup>
258 |  </tile>
259 |  <tile id="77">
260 |   <objectgroup draworder="index">
261 |    <object id="1" x="0" y="0" width="30" height="32"/>
262 |   </objectgroup>
263 |  </tile>
264 |  <tile id="97">
265 |   <objectgroup draworder="index">
266 |    <object id="1" x="0" y="0" width="32" height="32"/>
267 |   </objectgroup>
268 |  </tile>
269 |  <tile id="98">
270 |   <objectgroup draworder="index">
271 |    <object id="1" x="0" y="0" width="32" height="32"/>
272 |   </objectgroup>
273 |  </tile>
274 |  <tile id="99">
275 |   <objectgroup draworder="index">
276 |    <object id="1" x="0" y="0" width="32" height="32"/>
277 |   </objectgroup>
278 |  </tile>
279 |  <tile id="100">
280 |   <objectgroup draworder="index">
281 |    <object id="1" x="0" y="0" width="32" height="32"/>
282 |   </objectgroup>
283 |  </tile>
284 |  <tile id="102">
285 |   <objectgroup draworder="index">
286 |    <object id="1" x="0" y="0" width="32" height="32"/>
287 |   </objectgroup>
288 |  </tile>
289 |  <tile id="113">
290 |   <objectgroup draworder="index">
291 |    <object id="1" x="0" y="0" width="32" height="32"/>
292 |   </objectgroup>
293 |  </tile>
294 |  <tile id="114">
295 |   <objectgroup draworder="index">
296 |    <object id="1" x="0" y="0" width="32" height="32"/>
297 |   </objectgroup>
298 |  </tile>
299 |  <tile id="115">
300 |   <objectgroup draworder="index">
301 |    <object id="1" x="0" y="0" width="32" height="32"/>
302 |   </objectgroup>
303 |  </tile>
304 |  <tile id="116">
305 |   <objectgroup draworder="index">
306 |    <object id="1" x="0" y="0" width="32" height="32"/>
307 |   </objectgroup>
308 |  </tile>
309 |  <tile id="118">
310 |   <objectgroup draworder="index">
311 |    <object id="1" x="0" y="0" width="32" height="32"/>
312 |   </objectgroup>
313 |  </tile>
314 |  <tile id="145">
315 |   <objectgroup draworder="index">
316 |    <object id="1" x="0" y="0" width="32" height="32"/>
317 |   </objectgroup>
318 |  </tile>
319 |  <tile id="146">
320 |   <objectgroup draworder="index">
321 |    <object id="1" x="0" y="0" width="32" height="32"/>
322 |   </objectgroup>
323 |  </tile>
324 |  <tile id="148">
325 |   <objectgroup draworder="index">
326 |    <object id="1" x="0" y="0" width="32" height="32"/>
327 |   </objectgroup>
328 |  </tile>
329 |  <tile id="149">
330 |   <objectgroup draworder="index">
331 |    <object id="1" x="0" y="0" width="32" height="32"/>
332 |   </objectgroup>
333 |  </tile>
334 |  <tile id="161">
335 |   <objectgroup draworder="index">
336 |    <object id="1" x="0" y="0" width="32" height="32"/>
337 |   </objectgroup>
338 |  </tile>
339 |  <tile id="162">
340 |   <objectgroup draworder="index">
341 |    <object id="1" x="0" y="0" width="32" height="32"/>
342 |   </objectgroup>
343 |  </tile>
344 |  <tile id="164">
345 |   <objectgroup draworder="index">
346 |    <object id="1" x="0" y="0" width="32" height="32"/>
347 |   </objectgroup>
348 |  </tile>
349 |  <tile id="165">
350 |   <objectgroup draworder="index">
351 |    <object id="1" x="0" y="0" width="32" height="32"/>
352 |   </objectgroup>
353 |  </tile>
354 |  <tile id="166">
355 |   <objectgroup draworder="index">
356 |    <object id="1" x="0" y="0"/>
357 |   </objectgroup>
358 |  </tile>
359 | </tileset>
360 | 


--------------------------------------------------------------------------------
/demo/public/stages/map.tmx:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <map version="1.5" tiledversion="1.7.0" orientation="orthogonal" renderorder="right-down" width="42" height="34" tilewidth="32" tileheight="32" infinite="0" nextlayerid="8" nextobjectid="8">
  3 |  <tileset firstgid="1" source="TX Plant.tsx"/>
  4 |  <tileset firstgid="257" source="TX Tileset Grass.tsx"/>
  5 |  <tileset firstgid="321" source="TX Shadow Plant.tsx"/>
  6 |  <tileset firstgid="577" source="TX Tileset Wall.tsx"/>
  7 |  <tileset firstgid="833" source="TX Struct.tsx"/>
  8 |  <tileset firstgid="1089" source="TX Props.tsx"/>
  9 |  <layer id="1" name="Base" width="42" height="34">
 10 |   <data encoding="csv">
 11 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 12 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 13 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 14 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,257,269,287,270,257,257,257,257,0,
 15 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,257,261,277,270,269,277,271,278,0,
 16 | 284,266,267,259,275,267,266,260,268,281,284,276,258,282,275,265,281,265,274,290,305,284,267,284,281,274,257,283,284,273,284,273,282,276,268,279,270,261,264,272,270,0,
 17 | 267,284,259,276,265,265,260,260,260,273,258,268,273,266,276,282,283,276,259,306,289,308,275,283,281,267,260,260,258,281,259,259,282,259,260,287,280,285,270,264,272,0,
 18 | 281,267,265,276,265,273,268,258,281,282,274,275,270,266,259,273,274,274,284,290,306,292,257,282,276,260,274,282,260,281,268,274,260,268,257,258,273,276,274,270,265,0,
 19 | 265,270,269,276,267,274,260,281,267,260,273,269,286,279,274,275,282,273,267,307,290,290,284,273,260,266,276,284,266,257,258,283,266,276,266,260,260,265,258,276,259,0,
 20 | 265,277,271,281,260,284,277,265,283,272,287,286,270,287,279,277,265,267,259,268,305,306,281,267,257,283,266,282,268,258,284,276,267,259,284,284,258,267,265,267,282,0,
 21 | 283,263,270,272,266,280,280,281,275,258,269,262,279,272,270,286,273,281,282,266,289,289,311,273,260,267,279,277,262,277,260,259,283,281,281,268,273,265,258,266,258,0,
 22 | 287,271,262,277,277,264,287,273,283,260,287,262,285,277,285,264,286,259,260,273,299,305,306,258,266,283,273,287,270,280,282,276,268,273,275,265,283,258,268,283,273,0,
 23 | 270,263,262,279,277,272,274,283,273,259,280,262,265,284,270,277,272,271,268,257,283,289,289,297,289,305,298,298,298,305,290,297,290,275,265,267,283,276,257,258,267,0,
 24 | 286,269,264,277,280,263,275,268,260,267,281,262,285,274,260,283,262,275,281,260,268,299,290,313,301,301,304,289,290,297,305,298,305,258,266,260,279,268,281,275,267,0,
 25 | 270,264,262,263,270,288,282,260,281,275,266,284,279,280,277,287,262,259,275,282,266,299,290,283,275,260,276,310,290,305,298,297,297,278,288,286,286,287,289,289,267,0,
 26 | 282,271,278,262,270,288,284,268,283,267,274,259,257,284,257,265,265,265,267,284,258,305,289,265,281,258,266,281,275,310,298,289,290,264,288,285,263,278,289,289,260,0,
 27 | 260,279,287,279,277,279,274,258,258,260,284,268,267,267,260,275,274,267,259,268,291,289,300,268,283,281,278,280,261,287,286,310,305,274,270,264,277,265,288,286,269,0,
 28 | 282,273,286,280,259,270,274,274,282,266,268,275,282,258,257,282,265,283,259,257,291,306,308,258,259,281,271,280,278,271,261,262,257,284,266,273,276,281,264,261,278,0,
 29 | 259,275,284,262,286,269,257,267,266,268,281,265,257,275,265,258,283,274,268,274,299,305,290,259,281,282,271,288,269,272,271,272,279,283,267,283,268,257,272,269,261,0,
 30 | 267,276,259,273,258,284,284,281,273,275,275,268,258,283,257,275,296,258,293,297,297,297,306,283,266,283,275,286,263,287,272,287,261,269,287,257,260,278,269,287,288,0,
 31 | 306,294,295,295,274,268,275,267,257,281,275,266,284,282,305,297,306,297,297,297,289,306,273,281,266,267,259,288,271,261,269,270,261,271,278,273,271,261,286,286,270,0,
 32 | 298,289,297,290,298,268,275,282,267,281,276,268,259,306,298,305,305,298,298,260,275,268,282,257,268,267,283,260,282,261,288,271,288,287,277,280,271,279,287,269,280,0,
 33 | 289,298,297,298,305,290,293,306,297,295,294,294,289,297,305,289,289,306,289,297,289,296,283,296,265,273,284,266,281,274,280,261,269,264,277,288,288,263,264,285,285,0,
 34 | 298,297,290,298,298,290,290,306,298,289,305,289,290,290,306,306,305,289,306,301,306,298,298,290,289,294,294,267,276,274,260,276,269,264,277,271,272,263,271,278,271,0,
 35 | 305,297,298,290,289,281,304,304,281,259,305,306,301,303,305,305,305,274,258,260,275,303,301,302,290,305,298,306,298,257,295,289,294,317,289,296,295,265,293,296,265,0,
 36 | 298,289,298,304,273,275,273,281,282,257,283,260,274,311,268,290,289,289,310,281,281,276,257,260,260,303,303,303,305,289,289,290,298,306,290,290,297,298,290,306,305,0,
 37 | 289,290,280,265,275,265,260,263,261,267,274,282,312,273,310,306,289,297,289,260,265,266,281,258,267,268,275,267,268,260,302,303,303,289,305,290,305,289,305,290,289,0,
 38 | 302,267,263,262,272,266,288,280,272,260,273,283,282,282,290,311,311,298,310,265,310,260,259,267,257,281,276,260,267,258,258,260,282,275,267,306,306,306,290,290,305,0,
 39 | 259,257,265,260,286,285,261,268,270,268,275,275,267,282,310,290,306,289,310,282,267,273,266,266,276,267,275,268,265,287,277,268,267,266,265,257,310,305,303,302,303,0,
 40 | 258,284,284,268,278,262,277,269,263,266,283,282,267,310,276,275,297,305,309,274,276,257,273,284,281,284,283,258,276,261,269,271,271,287,269,261,286,261,287,288,260,0,
 41 | 268,284,275,257,262,270,263,264,261,285,265,258,281,259,311,258,310,268,273,275,283,260,273,281,281,267,274,266,283,262,280,286,263,279,285,263,277,269,270,272,287,0,
 42 | 276,273,260,276,269,277,269,272,279,280,284,258,265,266,260,284,259,275,282,266,265,257,283,284,260,259,265,283,258,257,270,280,269,285,279,279,274,287,261,264,280,0,
 43 | 265,281,273,275,283,276,285,271,272,262,270,274,281,283,265,283,260,265,267,276,282,266,265,266,276,281,268,265,267,273,285,285,286,272,269,278,264,272,279,280,273,0,
 44 | 266,281,283,282,273,265,260,271,271,277,261,287,286,263,284,279,278,269,271,285,285,269,270,268,285,278,269,285,272,261,286,276,288,263,269,280,264,270,279,269,285,0
 45 | </data>
 46 |  </layer>
 47 |  <layer id="5" name="Shadows" width="42" height="34">
 48 |   <data encoding="csv">
 49 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 50 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 51 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 52 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,374,375,376,0,
 53 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,390,391,392,0,
 54 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,374,375,376,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 55 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,390,391,392,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 56 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,374,375,376,0,0,0,0,0,0,0,0,0,0,
 57 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,390,391,392,0,0,0,0,0,0,0,0,0,0,
 58 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 59 | 0,0,0,0,0,0,0,0,0,0,0,370,371,372,373,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 60 | 0,0,0,0,0,0,0,0,0,0,0,386,387,388,389,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 61 | 0,0,370,371,372,373,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 62 | 0,0,386,387,388,389,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 63 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 64 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 65 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,370,371,372,373,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 66 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,386,387,388,389,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 67 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 68 | 0,0,0,0,0,0,0,0,0,370,371,372,373,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 69 | 0,0,0,0,0,0,0,0,0,386,387,388,389,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,370,371,372,373,0,0,0,0,
 70 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,386,387,388,389,0,0,0,0,
 71 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 72 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 73 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 74 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 75 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 76 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,370,371,372,373,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 77 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,386,387,388,389,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 78 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 79 | 0,0,0,0,0,0,0,0,370,371,372,373,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 80 | 0,0,0,0,0,0,0,0,386,387,388,389,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 81 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 82 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
 83 | </data>
 84 |  </layer>
 85 |  <layer id="7" name="Props" width="42" height="34">
 86 |   <data encoding="csv">
 87 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 88 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 89 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 90 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1180,0,0,1180,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 91 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1196,0,0,1196,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 92 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1212,0,0,1212,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 93 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 94 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,1278,1279,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 95 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,1294,1295,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 96 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1198,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 97 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1214,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 98 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 99 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
100 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1180,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
101 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1196,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
102 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1212,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
103 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
104 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
105 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,1102,1103,1104,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
106 | 0,0,0,0,0,1180,0,0,0,0,0,0,1098,1099,1118,1119,1120,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
107 | 0,0,0,0,0,1196,0,0,0,0,0,0,1114,1115,1134,1135,1136,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
108 | 0,0,0,0,0,1212,0,0,0,0,0,0,0,0,1228,1229,1230,0,0,0,0,0,0,0,0,0,0,0,1278,1279,0,0,0,0,0,0,0,0,0,0,0,0,
109 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,1244,1245,1246,0,0,0,0,0,0,0,0,0,0,0,1294,1295,0,0,0,0,0,0,0,0,0,0,1180,0,
110 | 0,0,0,0,0,1180,0,0,0,0,0,0,0,0,1260,1261,1262,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1196,0,
111 | 0,0,0,0,0,1196,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1101,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1212,0,
112 | 0,0,0,0,0,1212,0,0,0,0,0,0,1149,0,0,0,0,0,0,0,1117,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
113 | 0,0,0,0,0,0,0,0,0,0,0,0,1165,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1180,0,
114 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1196,0,
115 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1212,0,
116 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
117 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1240,0,1240,0,1240,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
118 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1256,0,1256,0,1256,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
119 | 1279,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1208,0,1240,0,1208,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
120 | 1295,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1224,0,1256,0,1224,0,1210,0,0,0,0,0,0,0,0,0,0,0,0
121 | </data>
122 |  </layer>
123 |  <layer id="3" name="Foreground" width="42" height="34">
124 |   <data encoding="csv">
125 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
126 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
127 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
128 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
129 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
130 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
131 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
132 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
133 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
134 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
135 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
136 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
137 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
138 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
139 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
140 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
141 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
142 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
143 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
144 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
145 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
146 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
147 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
148 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
149 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
150 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
151 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
152 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
153 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
154 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
155 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
156 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
157 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
158 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
159 | </data>
160 |  </layer>
161 |  <layer id="6" name="Structure" width="42" height="34">
162 |   <data encoding="csv">
163 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
164 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
165 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
166 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,594,595,595,595,595,595,595,596,0,
167 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,610,0,0,0,0,0,0,612,0,
168 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,594,595,595,595,595,595,595,595,595,595,610,0,0,0,0,0,0,612,0,
169 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,610,0,0,0,0,0,0,0,0,0,610,0,0,0,0,0,0,612,0,
170 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,610,0,0,0,0,0,0,0,0,0,626,674,676,677,601,0,0,612,0,
171 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,610,0,0,0,0,0,0,0,0,0,642,691,692,691,610,0,0,612,0,
172 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,610,0,0,0,0,0,0,0,0,0,0,0,0,0,626,853,854,628,0,
173 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,626,677,676,677,679,675,675,850,851,0,0,0,0,0,642,869,870,644,0,
174 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,642,692,690,691,695,692,693,866,867,610,0,0,0,0,0,885,886,612,0,
175 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,882,883,626,601,0,0,0,0,0,0,612,0,
176 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,642,610,0,0,0,0,0,0,612,0,
177 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,610,0,0,0,597,910,911,628,0,
178 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,610,0,0,0,612,926,927,644,0,
179 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,610,0,0,0,612,0,0,0,0,
180 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,626,676,677,675,628,0,0,0,0,
181 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,642,690,693,690,644,0,0,0,0,
182 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
183 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
184 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
185 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
186 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
187 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
188 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
189 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
190 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
191 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
192 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
193 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
194 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
195 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
196 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
197 | </data>
198 |  </layer>
199 |  <layer id="4" name="Trees" width="42" height="34">
200 |   <data encoding="csv">
201 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,6,7,8,9,
202 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,22,23,24,25,
203 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,38,39,40,41,
204 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,22,23,24,0,0,0,0,0,0,0,0,0,0,0,0,54,55,56,57,
205 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,38,39,40,0,0,0,6,7,8,0,0,0,0,0,0,70,71,72,73,
206 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,54,55,56,0,0,0,22,23,24,0,0,0,0,0,0,0,0,0,0,
207 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,70,71,72,0,0,0,38,39,40,0,0,0,0,0,0,0,0,0,0,
208 | 0,0,0,0,0,0,0,0,0,0,1,2,3,4,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,54,55,56,0,0,0,0,0,0,0,0,0,0,
209 | 0,0,0,0,0,0,0,0,0,0,17,18,19,20,21,0,0,0,0,0,0,0,0,0,0,0,0,0,0,70,71,72,0,0,0,0,0,0,0,0,0,0,
210 | 0,1,2,3,4,5,0,0,0,0,33,34,35,36,37,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
211 | 0,17,18,19,20,21,0,0,0,0,49,50,51,52,53,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
212 | 0,33,34,35,36,37,0,0,0,0,65,66,67,68,69,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
213 | 0,49,50,51,52,53,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
214 | 0,65,66,67,68,69,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,3,4,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
215 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,17,18,19,20,21,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
216 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,33,34,35,36,37,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
217 | 0,0,0,0,0,0,0,0,1,2,3,4,5,0,0,0,0,0,0,0,0,0,49,50,51,52,53,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
218 | 0,0,0,0,0,0,0,0,17,18,19,20,21,0,0,0,0,0,0,0,0,0,65,66,67,68,69,0,0,0,0,0,0,1,2,3,4,5,0,0,0,0,
219 | 0,0,0,0,0,0,0,0,33,34,35,36,37,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,98,98,0,0,0,17,18,19,20,21,0,0,0,0,
220 | 0,0,0,0,0,0,0,0,49,50,51,52,53,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,98,98,0,0,33,34,35,36,37,0,0,0,0,
221 | 0,0,0,0,0,0,0,0,65,66,67,68,69,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,49,50,51,52,53,98,0,0,0,
222 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,98,65,66,67,98,69,0,0,0,0,
223 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,98,0,98,0,0,0,
224 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,98,98,0,0,0,0,0,0,
225 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,3,4,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
226 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,17,18,19,20,21,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
227 | 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,33,34,35,36,37,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
228 | 0,0,98,0,0,0,98,1,2,3,4,5,0,0,0,0,0,0,0,0,0,0,49,50,51,52,53,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
229 | 0,0,0,0,0,98,0,17,18,19,20,21,0,0,0,0,0,0,0,0,0,0,65,66,67,68,69,0,0,0,0,0,98,0,0,0,0,0,0,0,0,0,
230 | 98,98,0,0,0,0,0,33,34,35,36,37,0,0,0,0,0,0,0,0,0,98,0,0,0,0,0,0,0,0,0,0,98,98,98,98,0,0,0,0,0,0,
231 | 0,0,0,98,0,0,0,98,50,51,52,53,0,0,0,0,0,0,0,0,0,98,0,0,0,0,0,0,0,0,98,0,0,0,0,98,98,0,0,0,0,0,
232 | 0,0,98,0,98,0,98,98,66,67,68,69,0,98,0,98,98,0,0,0,0,0,0,0,0,0,0,0,0,98,98,0,0,0,0,98,98,0,0,0,0,0,
233 | 0,0,0,98,0,98,0,0,0,0,0,0,0,0,0,0,98,98,98,98,0,0,0,0,0,0,0,0,0,0,0,0,0,0,98,98,98,98,98,98,98,0,
234 | 0,0,98,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,98,0,98,98,0,0,0,0
235 | </data>
236 |  </layer>
237 |  <objectgroup id="2" name="Objects">
238 |   <object id="1" name="Spawn" x="480" y="704" width="32" height="32"/>
239 |   <object id="2" name="Exit" x="1295.75" y="799.67" width="16.25" height="94"/>
240 |   <object id="3" gid="1222" x="275.333" y="460.667" width="32" height="32"/>
241 |   <object id="6" gid="1204" x="615.583" y="684.25" width="48" height="48"/>
242 |   <object id="7" gid="1238" x="704.667" y="640" width="32" height="32"/>
243 |  </objectgroup>
244 | </map>
245 | 


--------------------------------------------------------------------------------