vocksel/react-pixi-tilemap

Use .tmx maps created with Tiled in your React-based pixi.js games

react-pixi-tilemap's Issues

Used in other Tilemap format

Hi vocksel, I'm creating a map editor for https://github.com/CleverRaven/Cataclysm-DDA , it is not using Tiled, so I have to copy-paste and modify some of your code to achieve this, just let you know I'm using your code, thank you!

Would this work without react-pixi?

Hoping to load a map to my React ReduxTK project, but the map is not rendering. I installed react-pixi, and wrapped the Tilemap component inside Stage, but still all I get is a black screen. I don't have any sprites component either.

Hooks cause error

When calling a hook in the demo project, the following error message appears in the console (see screenshot)

Steps to reproduce:

• clone the repo and navigate to the demo section
• change the directory of the react-pixi-tilemap path to fit the package or install it via npm/yarn
• yarn install
• insert const mapHook = useMap() just before the return statement and add it to imports
• yarn start

Here the modified code from App.js, just for redundancy:

import { Stage, Sprite } from '@inlet/react-pixi';
import { Texture } from '@pixi/core';
import { Tilemap, useTilemapLoader, useMap } from 'react-pixi-tilemap'

const tilemape = process.env.PUBLIC_URL + '/stages/map.tmx'

const App = () => {
    const map = useTilemapLoader(tilemape)
    const mapData = useMap()
    // console.log(mapData)

    return (
        <Stage width={window.innerWidth} height={window.innerHeight} options={{ resizeTo: window }}>
            <Tilemap map={map} scale={0.75}>
                {/* These sprites show off the layering order */}
                <Sprite texture={Texture.WHITE} x={120} y={380} width={64} height={64} />
                <Sprite texture={Texture.WHITE} x={700} y={420} width={64} height={64} />
                <Sprite texture={Texture.WHITE} x={500} y={700} width={64} height={64} />
            </Tilemap>
        </Stage>
    )
}

export default App;