npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-pixi-tilemap

v2.0.2

Published

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

Downloads

13

Readme

react-pixi-tilemap

This package allows you to easily make use of levels created with Tiled in your React and Pixi based games.

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.

Screenshot of the demo map

Install

$ npm install react-pixi-tilemap
# Or
$ yarn add react-pixi-tilemap

Usage

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.

Using the component is dead simple. Simply load your map and pass it into the Tilemap component.

import { Tilemap, useTilemapLoader } from 'react-pixi-tilemap'

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

const App = (props) => {
    const map = useTilemapLoader(tilemap)

    return (
        <Stage>
            <Tilemap map={map} scale={0.75} {...props}>
                <Sprite ... />
                <Sprite ... />
                <Sprite ... />
            </Tilemap>
        </Stage>
    )
}

The return value of useTilemapLoader is an Object represented by TMX Map Format#map. Make sure to look over those docs to learn more about what properties you have access to.

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.

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.

Example

Check out the demo project for an example of how this all comes together. Be sure to open up the map.tmx file in Tiled and explore around.

To get setup, run the following commands:

$ cd demo
$ yarn install
$ yarn start

Foreground Layer

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.

Screenshot of the Layers pane in Tiled

Hooks

useCollisions()

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.

const collisions = useCollisions()

useInteractables()

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.

const interactables = useInteractables()

useMap()

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.

See TMX Map Format#map.

const map = useMap()

useObjects()

Returns a flat list of every object across every layer.

See TMX Map Format#object

const objects = useObjects()

useSpawnPoint()

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.

useTilemapLoader(tilemapPath)

This hook is what you use to load your .tmx map before passing it into the Tilemap component.

useTiles()

Returns a flat array of every tile in the map.

See TMX Map Format#tile.

Credits

Thanks to Cainos' for their awesome Pixel Art Top Down - Basic tiles.

Also very big shoutout to the following repos that were very invaluable in figuring out how to create this package.

Developing

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.

$ yarn install
$ yarn link
$ cd demo
$ yarn link react-pixi-tilemap
$ yarn install
$ cd ..
$ yarn start

License

MIT