HitAreaShapes

Use PixiJS to set shape's hitArea with multiple polygons. This library prevents hitarea from acting on transparent pixels.

In order to use the shape tracer to get the coordinates of the polygon, please install PhysicsEditor.

Demo

👉 Online Code Demo

Prepare

1. Download PhysicsEditor.

2. Add sprite
   

3. Use shape tracer.
   

4. Select Phaser(P2) from Exporter menu.
   

5. Publish image with JSON format.
   

＊. Read More: PhysicsEditor Documentation

Installation

Use cdn

<script src="https://unpkg.com/hitarea-shapes"></script>

Use npm

npm install --save pixi.js hitarea-shapes

Use yarn

yarn add pixi.js hitarea-shapes

Example

Import module and your polygons json file.

import HitAreaShapes from 'hitarea-shapes';
import polygons from './my-polygons.json';

const hitAreaShapes = new HitAreaShapes(polygons);

// flowerTop.png is a 119x181 rectangle
const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/flowerTop.png');

sprite.buttonMode = true;
sprite.interactive = true;

sprite.hitArea = hitAreaShapes;

Credit

• eXponenta - pixi-poly

Generator

This library generated by webpack-library-starter.

License

MIT