Phaser Arcade Slopes Plugin 📐

Arcade Slopes brings sloped tile collision handling to Phaser's Arcade Physics engine.

Demo

Check out the demo!

Features

• 24 new tile types 🎉
• SAT-driven collision handling 👌
• Unobtrusive and cooperative integration with Arcade Physics ✌️
• Heuristic SAT restraints that prevent AABBs catching on hidden edges 👏
• Works with sprites 🚀, groups 👥 and particle emitters ✨

Usage

Grab a copy of the latest release from the dist directory in this repository and include it after Phaser.

<script src="phaser.min.js"></script>
<script src="phaser-arcade-slopes.min.js"></script>

Enable the plugin in the create() method of your Phaser state.

game.plugins.add(Phaser.Plugin.ArcadeSlopes);

After you've created your tilemap, and have a collision layer that you want to enable slopes for, you'll need run it through the Arcade Slopes converter.

This works similarly to Ninja Physics, but you provide an explicit mapping of tile indexes to Arcade Slopes tile names instead of an array of integers.

Here's an example that maps the Ninja Physics debug tilesheets (32px, 64px).

map = game.add.tilemap('tilemap');
map.addTilesetImage('collision', 'ninja-tiles32');

ground = map.createLayer('collision');

game.slopes.convertTilemapLayer(ground, {
	2:  'FULL',
	3:  'HALF_BOTTOM_LEFT',
	4:  'HALF_BOTTOM_RIGHT',
	6:  'HALF_TOP_LEFT',
	5:  'HALF_TOP_RIGHT',
	15: 'QUARTER_BOTTOM_LEFT_LOW',
	16: 'QUARTER_BOTTOM_RIGHT_LOW',
	17: 'QUARTER_TOP_RIGHT_LOW',
	18: 'QUARTER_TOP_LEFT_LOW',
	19: 'QUARTER_BOTTOM_LEFT_HIGH',
	20: 'QUARTER_BOTTOM_RIGHT_HIGH',
	21: 'QUARTER_TOP_RIGHT_HIGH',
	22: 'QUARTER_TOP_LEFT_HIGH',
	23: 'QUARTER_LEFT_BOTTOM_HIGH',
	24: 'QUARTER_RIGHT_BOTTOM_HIGH',
	25: 'QUARTER_RIGHT_TOP_LOW',
	26: 'QUARTER_LEFT_TOP_LOW',
	27: 'QUARTER_LEFT_BOTTOM_LOW',
	28: 'QUARTER_RIGHT_BOTTOM_LOW',
	29: 'QUARTER_RIGHT_TOP_HIGH',
	30: 'QUARTER_LEFT_TOP_HIGH',
	31: 'HALF_BOTTOM',
	32: 'HALF_RIGHT',
	33: 'HALF_TOP',
	34: 'HALF_LEFT'
});

Now you need to enable slopes for any game entities you want to collide against the tilemap.

game.slopes.enable(player);
game.slopes.enable(emitter); // Call this after emitter.makeParticles()!

Now you can collide your player against the tilemap in the update() method of your Phaser state, as you normally would, using Arcade Physics. Voila!

game.physics.arcade.collide(player, ground);
game.physics.arcade.collide(emitter, ground);

If you're making a platformer, your player has drag on the X axis, and you don't want it to slide down slopes, try this on for size in your create() method:

// Prefer the minimum Y offset globally
game.slopes.solvers.sat.options.preferY = true;

// Or prefer the minimum Y offset only for a specific physics body
player.body.slopes.preferY = true;

Why not just use Ninja Physics?

The Ninja Physics engine provides the same tiles (in fact, a few more) but is now deprecated and lacking in features that I was in need of, like robust collision flags and a way to stop AABBs catching on tiles.

The implementation also wasn't as concise or as well-divided as I'd have liked. I wanted something that I could understand well, and what better way to learn than to build something yourself?

Roadmap

• v0.1.0
  • Full support for collision callbacks
    • physics.arcade.collide callbacks
    • Tile callbacks
  • Sticky slopes
  • Friction
  • body.slope properties for friction, sticky slopes, preferred separation axis and last overlap response
• v0.2.0
  • Arcade Slopes tilesheet
    • Premade tilesheets
    • Tilesheet generator
  • Mapping shortcuts
    • Ninja Physics debug tilesheet
    • Arcade Slopes tilesheet
    • Tile properties (tile.properties.type)
  • Graphical debug output
    • Collision vectors
    • Tile face properties
    • Tile polygons
  • Metroid collision solver
• v0.3.0
  • Custom SAT.js implementation that can prevent internal edge collisions (like this)
  • More consistent naming
    • Tile slope type constants
    • Direction/neighbour names
  • Swept intersection tests
  • Memory consumption improvements

Building

This plugin is built fairly simply and isn't properly modular. I wanted it to keep in line with Phaser's coding standards so that anyone familiar with its source could understand this plugin with relative ease.

If you want to build the plugin yourself from source, install Bower, clone the repository and run NPM, Bower and Gulp like so. I plan on making this simpler in future.

npm i -g bower
npm install
bower install
gulp build

There's also a watch task that runs the build task whenever you make changes to the source.

gulp watch

Thanks

My thanks go out to those who made this Plugin possible.

• Richard Davey - for Phaser 🚀; what an incredible framework
• Jim Riecken - SAT.js is awesome and saved me loads of time
• Metanet - for their incredibly helpful tutorials about collision detection
• Oliver 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 :full_moon_with_face: