{"id":14963983,"url":"https://github.com/hexus/phaser-arcade-slopes","last_synced_at":"2025-10-25T03:31:19.293Z","repository":{"id":47712526,"uuid":"58310194","full_name":"hexus/phaser-arcade-slopes","owner":"hexus","description":":triangular_ruler: A Phaser CE plugin that brings sloped tile collision handling to the Arcade Physics engine","archived":false,"fork":false,"pushed_at":"2021-08-17T02:14:37.000Z","size":3985,"stargazers_count":127,"open_issues_count":7,"forks_count":16,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-01-31T05:33:30.949Z","etag":null,"topics":["collision","phaser","phaser-arcade-physics","phaser-plugin","separating-axis-theorem","slope","tile","tilemap"],"latest_commit_sha":null,"homepage":"","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/hexus.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-08T12:04:58.000Z","updated_at":"2024-11-24T06:32:14.000Z","dependencies_parsed_at":"2022-08-30T01:52:01.295Z","dependency_job_id":null,"html_url":"https://github.com/hexus/phaser-arcade-slopes","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hexus%2Fphaser-arcade-slopes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hexus%2Fphaser-arcade-slopes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hexus%2Fphaser-arcade-slopes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hexus%2Fphaser-arcade-slopes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hexus","download_url":"https://codeload.github.com/hexus/phaser-arcade-slopes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238075274,"owners_count":19412307,"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":["collision","phaser","phaser-arcade-physics","phaser-plugin","separating-axis-theorem","slope","tile","tilemap"],"created_at":"2024-09-24T13:32:25.614Z","updated_at":"2025-10-25T03:31:13.368Z","avatar_url":"https://github.com/hexus.png","language":"JavaScript","readme":"# Phaser Arcade Slopes Plugin\n\n**Arcade Slopes** brings sloped tile collision handling to\n[Phaser](http://phaser.io)'s [Arcade\nPhysics](http://phaser.io/examples/v2/category/arcade-physics) engine.\n\n## [Demo](http://hexus.github.io/phaser-arcade-slopes)\n\nCheck out the **[demo](http://hexus.github.io/phaser-arcade-slopes)**!\n\n![Phaser Arcade Slopes](screenshot.gif)\n\n## Features\n\n- 24 new tile types :tada:\n- [SAT](https://github.com/jriecken/sat-js) collision handling :ok_hand:\n- Unobtrusive and cooperative integration with Arcade Physics :v:\n- Supports sprites :rocket:, groups :busts_in_silhouette:, particle\n  emitters :sparkles: and circular physics bodies :white_circle:\n\n## Compatibility\n\n| Phaser Version   | Arcade Slopes Version                                               |\n| ---------------- | ------------------------------------------------------------------- |\n| v2.4.1 - v2.4.8  | [v0.1.0](https://github.com/hexus/phaser-arcade-slopes/tree/v0.1.0) |\n| v2.5.0 - v2.10.1 | [v0.1.1](https://github.com/hexus/phaser-arcade-slopes/tree/v0.1.1) - [v0.3.2](https://github.com/hexus/phaser-arcade-slopes/tree/v0.3.2) |\n| v3.x             | [hexus/phaser-slopes](https://github.com/hexus/phaser-slopes)       |\n\n## Installation\n\nGrab a copy of the\n[latest release](https://raw.githubusercontent.com/hexus/phaser-arcade-slopes/v0.3.2/dist/phaser-arcade-slopes.min.js)\nfrom the [**dist**](dist) directory in this repository and include it after\nPhaser.\n\n```html\n\u003cscript src=\"phaser.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"phaser-arcade-slopes.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n- [Enabling the plugin](#enabling-the-plugin)\n- [Mapping tiles](#mapping-tiles)\n- [Enabling physics bodies](#enabling-physics-bodies)\n- [Collision](#collision)\n- [Debug rendering](#debug-rendering)\n- [Extras](#extras)\n  - [Minimum Y Offset](#minimum-y-offset)\n  - [Collision pulling](#collision-pulling)\n\n### Enabling the plugin\n\nEnable the plugin in the `create()` method of your Phaser state.\n\n```js\ngame.plugins.add(Phaser.Plugin.ArcadeSlopes);\n```\n\n### Mapping tiles\n\nThe plugin provides a couple of built in tile slope mappings:\n\n- [Arcade Slopes tileset](assets)\n  (`arcadeslopes`)\n  ([16px](https://raw.githubusercontent.com/hexus/phaser-arcade-slopes/master/assets/arcade-slopes-16.png),\n  [32px](https://raw.githubusercontent.com/hexus/phaser-arcade-slopes/master/assets/arcade-slopes-32.png),\n  [64px](https://raw.githubusercontent.com/hexus/phaser-arcade-slopes/master/assets/arcade-slopes-64.png),\n  [128px](https://raw.githubusercontent.com/hexus/phaser-arcade-slopes/master/assets/arcade-slopes-128.png))\n- [Ninja Physics debug tileset](https://github.com/photonstorm/phaser/tree/v2.4.7/resources/Ninja%20Physics%20Debug%20Tiles)\n  (`ninja`)\n  ([32px](https://raw.githubusercontent.com/photonstorm/phaser/v2.4.7/resources/Ninja%20Physics%20Debug%20Tiles/32px/ninja-tiles32.png), [64px](https://raw.githubusercontent.com/photonstorm/phaser/v2.4.7/resources/Ninja%20Physics%20Debug%20Tiles/64px/ninja-tiles64.png),\n  [128px](https://raw.githubusercontent.com/photonstorm/phaser/v2.4.7/resources/Ninja%20Physics%20Debug%20Tiles/128px/ninja-tiles128.png))\n\nAfter you've created a tilemap with a collision layer, you'll need to convert\nthat layer to work with Arcade Slopes.\n\n```js\n// Create the tilemap and make it aware of the tileset it uses\nmap = game.add.tilemap('tilemap');\nmap.addTilesetImage('collision', 'arcade-slopes-32');\nmap.setCollisionBetween(1, 38);\n\n// Create the collision layer from the tilemap\nground = map.createLayer('collision');\n\n// Convert the collision layer to work with Arcade Slopes\ngame.slopes.convertTilemapLayer(ground, 'arcadeslopes');\n```\n\nIn the case that the first tile ID of the collision tileset in your tilemap is\nnot `1` (the default), you can provide a third argument to specify it. The\narguments provided to the `setCollisionBetween()` method may need to be adjusted\nas well.\n\n```js\nmap.setCollisionBetween(16, 53);\ngame.slopes.convertTilemapLayer(ground, 'ninja', 16);\n```\n\n**Please note:** Tile GIDs in maps exported from Tiled are always one more than\nthe ID shown in the GUI. Arcade Slopes expects the above parameter to match the\nfirst GID _as specified in the Tiled map data_.\n\n### Enabling physics bodies\n\nNow you need to enable slopes for any game entities you want to collide against\nthe tilemap.\n\n```js\ngame.physics.arcade.enable(player);\n\ngame.slopes.enable(player);\ngame.slopes.enable(emitter);\n```\n\nYou don't need to do anything special for circular physics bodies, just the\nusual `sprite.body.setCircle(radius)`.\n\n_Make sure you call `game.slopes.enable(object)` **after** making any changes to\nthe **size** or **shape** of the physics body._\n\n### Collision\n\nNow you can collide your sprite against the tilemap in the `update()` method of\nyour Phaser state, as you normally would, using Arcade Physics. Voila!\n\n```js\n// Collide the player with the collision layer\ngame.physics.arcade.collide(player, ground);\n\n// Collide the particles with the collision layer\ngame.physics.arcade.collide(emitter, ground);\n```\n\n### Debug rendering\n\nTo debug your collision layer, set its debug property to `true`.\n\nThis will overlay the collision shapes of each tile when the layer is rendered.\n\n```js\nground.debug = true;\n```\n\n### Extras\n\n#### Minimum Y offset\n\nThis feature separates rectangular physics bodies on the Y axis only, in the\nright situations.\n\n```js\n// Prefer the minimum Y offset for this physics body\nplayer.body.slopes.preferY = true;\n\n// Prefer the minimum Y offset globally\ngame.slopes.preferY = true;\n```\n\nIf you're making a platformer, your player has drag on the X axis, and you don't\nwant it to slide down slopes, this should solve your problem.\n\n#### Collision pulling\n\nTo attempt to keep objects on a surface, you can use collision pulling.\n\nThis will pull physics bodies into a collision by a set velocity, if it matches\nthe set direction.\n\n```js\n// Pull the player into downwards collisions with a velocity of 50\nplayer.body.slopes.pullDown = 50;\n```\n\nHere are the available properties for collision pulling:\n\n```js\nbody.slopes.pullUp\nbody.slopes.pullDown\nbody.slopes.pullLeft\nbody.slopes.pullRight\nbody.slopes.pullTopLeft\nbody.slopes.pullTopRight\nbody.slopes.pullBottomLeft\nbody.slopes.pullBottomRight\n```\n\n## Building\n\nIf you want to build the plugin yourself from source, clone the repository and\nrun NPM and Gulp like so.\n\n```bash\nnpm install\ngulp build\n```\n\nThere's also a watch task that builds the plugin whenever you make changes\nto the source.\n\n```bash\ngulp watch\n```\n\n## Thanks\n\nMy thanks go out to those who made this Plugin possible.\n\n- [Richard Davey](https://twitter.com/photonstorm) - for Phaser :rocket:\n- [Jim Riecken](https://github.com/jriecken) - [SAT.js](https://github.com/jriecken/sat-js)\n  is awesome and saved me loads of time\n- [Metanet](http://www.metanetsoftware.com/) - for their incredibly helpful\n  tutorials about [collision](http://www.metanetsoftware.com/technique/tutorialA.html)\n  [detection](http://www.metanetsoftware.com/technique/tutorialB.html)\n- [Olivier Renault](http://elancev.name/oliver/2D%20polygon.htm#tut4) - for their\n  tutorial on 2D polygon collision and response (from 2004!)\n- [Jan Geselle](https://github.com/geselle-jan) - for writing [a sloped tile\n  implementation](https://github.com/geselle-jan/Metroid/commit/9c213e9f5779df1dcd6f7d2bed2a9b676a9e3c6b#diff-467b4e6069f6692511fc5e60f3c426ccR158)\n  in Phaser that gave me the idea to write this plugin\n- Bethany - for listening to me blabber on about slopes for well over a month\n  :full_moon_with_face:\n\nAnd to contributors who have been generous with their time, talents and support:\n\n- [@IkonOne](https://github.com/IkonOne)\n- [@michaeljcalkins](https://github.com/michaeljcalkins)\n- [@kevin-chau](https://github.com/kevin-chau)\n- [@dave-kennedy](https://github.com/dave-kennedy)\n- [@SHG42](https://github.com/SHG42)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhexus%2Fphaser-arcade-slopes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhexus%2Fphaser-arcade-slopes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhexus%2Fphaser-arcade-slopes/lists"}