Need help with phaser-arcade-slopes?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

hexus
120 Stars 14 Forks MIT License 184 Commits 7 Opened issues

Description

:triangular_ruler: A Phaser CE plugin that brings sloped tile collision handling to the Arcade Physics engine

Services available

!
?

Need anything else?

Contributors list

# 12,323
JavaScr...
PHP
Laravel
html5-g...
167 commits
# 443,831
Haxe
Shell
JavaScr...
collisi...
4 commits
# 463,492
C++
C
Shell
collisi...
2 commits

Phaser Arcade Slopes Plugin

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

Demo

Check out the demo!

Phaser Arcade Slopes

Features

  • 24 new tile types :tada:
  • SAT collision handling :ok_hand:
  • Unobtrusive and cooperative integration with Arcade Physics :v:
  • Supports sprites :rocket:, groups :bustsinsilhouette:, particle emitters :sparkles: and circular physics bodies :white_circle:

Compatibility

| 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 | | v3.x | hexus/phaser-slopes |

Installation

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


Usage

Enabling the plugin

Enable the plugin in the

create()
method of your Phaser state.
game.plugins.add(Phaser.Plugin.ArcadeSlopes);

Mapping tiles

The plugin provides a couple of built in tile slope mappings:

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 not

1
(the default), you can provide a third argument to specify it. The arguments provided to the
setCollisionBetween()
method may need to be adjusted as well.
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 usual

sprite.body.setCircle(radius)
.

Make sure you call

game.slopes.enable(object)
after making any changes to the size or shape of the physics body.

Collision

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);

Debug rendering

To debug your collision layer, set its debug property to

true
.

This will overlay the collision shapes of each tile when the layer is rendered.

ground.debug = true;

Extras

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.

Collision pulling

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

Building

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.

gulp watch

Thanks

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

And to contributors who have been generous with their time, talents and support:

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.