Phaser Arcade Slopes Plugin
Check out the demo!
- 24 new tile types
SAT collision handling
- Unobtrusive and cooperative integration with Arcade Physics
- Supports sprites
🚀, groups 👥, particle emitters ✨and circular physics bodies ⚪
|Phaser Version||Arcade Slopes Version|
|v2.4.1 - v2.4.8||v0.1.0|
|v2.5.0 - v2.10.1||v0.1.1 - v0.3.2|
<script src="phaser.min.js"></script> <script src="phaser-arcade-slopes.min.js"></script>
- Enabling the plugin
- Mapping tiles
- Enabling physics bodies
- Debug rendering
Enabling the plugin
Enable the plugin in the
create() method of your Phaser state.
The plugin provides a couple of built in tile slope mappings:
Arcade Slopes tileset
arcadeslopes) (16px, 32px, 64px, 128px)
Ninja Physics debug tileset
ninja) (32px, 64px, 128px)
After you've created a tilemap with a collision layer, you'll need to convert that layer to work with Arcade Slopes.
// Create the tilemap and make it aware of the tileset it uses map = game.add.tilemap('tilemap'); map.addTilesetImage('collision', 'arcade-slopes-32'); map.setCollisionBetween(1, 38); // Create the collision layer from the tilemap ground = map.createLayer('collision'); // Convert the collision layer to work with Arcade Slopes game.slopes.convertTilemapLayer(ground, 'arcadeslopes');
In the case that the first tile ID of the collision tileset in your tilemap is
1 (the default), you can provide a third argument to specify it. The
arguments provided to the
setCollisionBetween() method may need to be adjusted
map.setCollisionBetween(16, 53); game.slopes.convertTilemapLayer(ground, 'ninja', 16);
Please note: Tile GIDs in maps exported from Tiled are always one more than the ID shown in the GUI. Arcade Slopes expects the above parameter to match the first GID as specified in the Tiled map data.
Enabling physics bodies
Now you need to enable slopes for any game entities you want to collide against the tilemap.
game.physics.arcade.enable(player); game.slopes.enable(player); game.slopes.enable(emitter);
You don't need to do anything special for circular physics bodies, just the
Make sure you call
game.slopes.enable(object) after making any changes to
the size or shape of the physics body.
Now you can collide your sprite against the tilemap in the
update() method of
your Phaser state, as you normally would, using Arcade Physics. Voila!
// Collide the player with the collision layer game.physics.arcade.collide(player, ground); // Collide the particles with the collision layer game.physics.arcade.collide(emitter, ground);
To debug your collision layer, set its debug property to
This will overlay the collision shapes of each tile when the layer is rendered.
ground.debug = true;
Minimum Y offset
This feature separates rectangular physics bodies on the Y axis only, in the right situations.
// Prefer the minimum Y offset for this physics body player.body.slopes.preferY = true; // Prefer the minimum Y offset globally game.slopes.preferY = true;
If you're making a platformer, your player has drag on the X axis, and you don't want it to slide down slopes, this should solve your problem.
To attempt to keep objects on a surface, you can use collision pulling.
This will pull physics bodies into a collision by a set velocity, if it matches the set direction.
// Pull the player into downwards collisions with a velocity of 50 player.body.slopes.pullDown = 50;
Here are the available properties for collision pulling:
body.slopes.pullUp body.slopes.pullDown body.slopes.pullLeft body.slopes.pullRight body.slopes.pullTopLeft body.slopes.pullTopRight body.slopes.pullBottomLeft body.slopes.pullBottomRight
If you want to build the plugin yourself from source, clone the repository and run NPM and Gulp like so.
npm install gulp build
There's also a watch task that builds the plugin whenever you make changes to the source.
My thanks go out to those who made this Plugin possible.
Richard Davey - for Phaser
- Jim Riecken - SAT.js is awesome and saved me loads of time
- Metanet - for their incredibly helpful tutorials about collision detection
- Olivier Renault - for their tutorial on 2D polygon collision and response (from 2004!)
- Jan Geselle - for writing a sloped tile implementation in Phaser that gave me the idea to write this plugin
- Bethany - for listening to me blabber on about slopes for well over a month
And to contributors who have been generous with their time, talents and support: