hitarea-shapes

PixiJS hitArea with multiple polygons.

Usage no npm install needed!

<script type="module">
  import hitareaShapes from 'https://cdn.skypack.dev/hitarea-shapes';
</script>

README

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

👉 Online Code 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

＊. 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

Generator

This library generated by webpack-library-starter.

License

MIT