{"id":21623162,"url":"https://github.com/explooosion/hitarea-shapes","last_synced_at":"2025-04-11T11:22:42.831Z","repository":{"id":66234049,"uuid":"244811899","full_name":"explooosion/hitarea-shapes","owner":"explooosion","description":"PixiJS hitArea with multiple polygons.","archived":false,"fork":false,"pushed_at":"2020-03-06T16:00:36.000Z","size":2851,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T07:41:38.237Z","etag":null,"topics":["exporter","hitarea","physicseditor","pixi-js","pixijs","polygon","shapes","transparent"],"latest_commit_sha":null,"homepage":"https://robby570.tw/hitarea-shapes","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/explooosion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-04T05:03:16.000Z","updated_at":"2023-08-16T20:47:28.000Z","dependencies_parsed_at":"2023-03-30T11:35:10.532Z","dependency_job_id":null,"html_url":"https://github.com/explooosion/hitarea-shapes","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/explooosion%2Fhitarea-shapes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/explooosion%2Fhitarea-shapes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/explooosion%2Fhitarea-shapes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/explooosion%2Fhitarea-shapes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/explooosion","download_url":"https://codeload.github.com/explooosion/hitarea-shapes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248382145,"owners_count":21094541,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["exporter","hitarea","physicseditor","pixi-js","pixijs","polygon","shapes","transparent"],"created_at":"2024-11-25T00:11:50.967Z","updated_at":"2025-04-11T11:22:42.818Z","avatar_url":"https://github.com/explooosion.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)](https://forthebadge.com)\n[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)\n[![forthebadge](https://forthebadge.com/images/badges/makes-people-smile.svg)](https://forthebadge.com)\n\n# HitAreaShapes\n\nUse [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.\n\nIn order to use the shape tracer to get the coordinates of the polygon, please install [PhysicsEditor](https://www.codeandweb.com/physicseditor).\n\n## Demo\n\n#### 👉 [Online Code Demo](https://robby570.tw/hitarea-shapes)\n\n![demo](https://raw.githubusercontent.com/explooosion/hitarea-shapes/master/docs/demo.gif)\n\n## Prepare\n\n1. Download [PhysicsEditor](https://www.codeandweb.com/physicseditor).\n\n2. Add sprite  \n![image](https://user-images.githubusercontent.com/13682994/76091487-9edc7e80-5ff8-11ea-8578-e5a45a193c75.png)\n\n3. Use shape tracer.  \n![image](https://user-images.githubusercontent.com/13682994/76091676-ff6bbb80-5ff8-11ea-8f40-14f111042477.png)\n\n\n4. Select `Phaser(P2)` from Exporter menu.  \n![image](https://user-images.githubusercontent.com/13682994/76091884-60938f00-5ff9-11ea-8ee9-679058daea09.png)\n\n5. Publish image with JSON format.  \n![image](https://user-images.githubusercontent.com/13682994/76091960-8a4cb600-5ff9-11ea-92fe-3b03a58e7986.png)\n\n#### ＊. Read More: [PhysicsEditor Documentation](https://www.codeandweb.com/physicseditor/documentation)\n\n## Installation\n\n#### Use cdn\n\n```html\n\u003cscript src=\"https://unpkg.com/hitarea-shapes\"\u003e\u003c/script\u003e\n```\n\n#### Use npm\n\n```sh\nnpm install --save pixi.js hitarea-shapes\n```\n\n#### Use yarn\n\n```sh\nyarn add pixi.js hitarea-shapes\n```\n\n## Example\n\nImport module and your `polygons json file`.\n\n```javascript\nimport HitAreaShapes from 'hitarea-shapes';\nimport polygons from './my-polygons.json';\n\nconst hitAreaShapes = new HitAreaShapes(polygons);\n\n// flowerTop.png is a 119x181 rectangle\nconst sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/flowerTop.png');\n\nsprite.buttonMode = true;\nsprite.interactive = true;\n\nsprite.hitArea = hitAreaShapes;\n```\n\n## Credit\n\n- [eXponenta](https://github.com/eXponenta) - [pixi-poly](https://github.com/eXponenta/pixi-poly)\n\n## Generator \n\nThis library generated by [webpack-library-starter](https://github.com/krasimir/webpack-library-starter).\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexplooosion%2Fhitarea-shapes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexplooosion%2Fhitarea-shapes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexplooosion%2Fhitarea-shapes/lists"}