Skip to content

explooosion/hitarea-shapes

Repository files navigation

forthebadge forthebadge forthebadge

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

demo

Prepare

  1. Download PhysicsEditor.

  2. Add sprite
    image

  3. Use shape tracer.
    image

  4. Select Phaser(P2) from Exporter menu.
    image

  5. Publish image with JSON format.
    image

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

Generator

This library generated by webpack-library-starter.

License

MIT