https://github.com/explooosion/hitarea-shapes

PixiJS hitArea with multiple polygons.
https://github.com/explooosion/hitarea-shapes

exporter hitarea physicseditor pixi-js pixijs polygon shapes transparent

Last synced: 6 months ago
JSON representation

PixiJS hitArea with multiple polygons.

• Host: GitHub
• URL: https://github.com/explooosion/hitarea-shapes
• Owner: explooosion
• License: mit
• Created: 2020-03-04T05:03:16.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-03-06T16:00:36.000Z (over 5 years ago)
• Last Synced: 2025-03-25T07:41:38.237Z (7 months ago)
• Topics: exporter, hitarea, physicseditor, pixi-js, pixijs, polygon, shapes, transparent
• Language: JavaScript
• Homepage: https://robby570.tw/hitarea-shapes
• Size: 2.72 MB
• Stars: 10
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
[![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)](https://forthebadge.com)

[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)

[![forthebadge](https://forthebadge.com/images/badges/makes-people-smile.svg)](https://forthebadge.com)

# HitAreaShapes

Use [PixiJS](https://www.pixijs.com/) to set shape's [hitArea](https://pixijs.download/dev/docs/PIXI.Sprite.html#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](https://www.codeandweb.com/physicseditor).

## Demo

#### 👉 [Online Code Demo](https://robby570.tw/hitarea-shapes)

![demo](https://raw.githubusercontent.com/explooosion/hitarea-shapes/master/docs/demo.gif)

## Prepare

1. Download [PhysicsEditor](https://www.codeandweb.com/physicseditor).

2. Add sprite  

![image](https://user-images.githubusercontent.com/13682994/76091487-9edc7e80-5ff8-11ea-8578-e5a45a193c75.png)

3. Use shape tracer.  

![image](https://user-images.githubusercontent.com/13682994/76091676-ff6bbb80-5ff8-11ea-8f40-14f111042477.png)

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

![image](https://user-images.githubusercontent.com/13682994/76091884-60938f00-5ff9-11ea-8ee9-679058daea09.png)

5. Publish image with JSON format.  

![image](https://user-images.githubusercontent.com/13682994/76091960-8a4cb600-5ff9-11ea-92fe-3b03a58e7986.png)

#### ＊. Read More: [PhysicsEditor Documentation](https://www.codeandweb.com/physicseditor/documentation)

## Installation

#### Use cdn

```html

```

#### Use npm

```sh

npm install --save pixi.js hitarea-shapes

```

#### Use yarn

```sh

yarn add pixi.js hitarea-shapes

```

## Example

Import module and your `polygons json file`.

```javascript

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](https://github.com/eXponenta) - [pixi-poly](https://github.com/eXponenta/pixi-poly)

## Generator 

This library generated by [webpack-library-starter](https://github.com/krasimir/webpack-library-starter).

## License

[MIT](http://opensource.org/licenses/MIT)