Jump to content

Recommended Posts

Hello everyone!

I thought I'd share something I've been working on for the past few weeks. A plugin for Phaser that provides collision handling for sloped tiles and half tiles, similar to Ninja Physics but somewhat more concisely.

Check it out on GitHub, give it a whirl, let me know what you think!

Github: https://github.com/hexus/phaser-arcade-slopes

Demo: http://hexus.github.io/phaser-arcade-slopes/

It's still early days for this project, as I've only just released v0.1.0-alpha today, but I look forward to continuing fleshing it out.

Why did I make this?

I've been intending to make a 2D platformer with Phaser for ages, and I knew I wanted it to have sloped tiles to allow for a liberating way to traverse the Y axis, but I couldn't find anything that worked the way I want it to.

I experimented with Ninja Physics, but it's deprecated and its limitations left me wanting. I tried P2, but it was too much in terms of physics for me, and I didn't want to tame a beast like that. I started searching these forums to see if anyone had managed to get sloped tiles working in Phaser, with some success, but not completely. The solutions wouldn't allow for completely free tile placement, and they just stuck physics bodies to the slopes and left it at that.

So, with a somewhat limited understanding of the maths I'd need to learn to achieve what I wanted, I started reading tutorials about the Separating Axis Theorem (SAT), particularly the ones from Metanet and one I found magically through a Google search.

After experimenting with SAT.js in Phaser, I decided that I could totally pull off my own plugin to solve this the way I wanted it to be.

With lots of learning, but with a clear vision of how I wanted the plugin to work, this is what I've managed!

I have lots more features planned, as you can see in the roadmap, but for now I'm just glad I've built something that can be plugged straight into any Arcade Physics project that just works.







Link to comment
Share on other sites

  • rich pinned this topic


I'll work a lot more on the map later on, and some better interaction, styling, something like that.

At least this lets you get a feel for it.


  • Click to teleport
  • WASD to move
  • K to toggle the plugin itself
  • F to toggle camera follow
  • G to toggle gravity
  • J to toggle particles
  • H to shake the screen for the heck of it

Have fun!

Link to comment
Share on other sites

7 hours ago, drhayes said:

Seriously good work. So excited about this.

EDIT: How can I help? If you make GitHub issues I'll try and knock'em down.

Cheers! Really appreciate it.

I'm planning on tackling the first few points on the roadmap myself, but stuff like the tile shape and collision vector debug rendering I haven't put much thought into yet and would totally appreciate any help with.

Also, none of the code has had its documentation generated as HTML yet. I imagine it'd be a lot easier to navigate and learn about once this is done.

Ideally I would have written all of this in ES6 and transpiled, too, but I've never actually used ES6 before and thought I'd keep it in line with Phaser's coding style so that any understanding of that would translate well to the plugin.

Link to comment
Share on other sites

Very impressive!

I had a play around with the demo and didn't come across any bugs. My only suggestion would be to add an option to 'slow' the player down in relation to the steepness of the slope.

I look forward to seeing how this one progresses!

Link to comment
Share on other sites

Thanks! There is still a teeny bug in the live demo that's already been fixed on the master branch, bravo if anyone finds it. ;)

I'm looking to make the demo a lot more interactive, with sliders to control gravity and bounce. Gravity is what drags the player down a slope by itself (and the demo has it set quite low), but having further control over that would be pretty handy.

Bugs will be a thing of the past when I get rid of the heuristics and start customizing SAT.js to ignore collisions on particular axes and choose the next-shortest way out (i.e. a non-internal edge).

Right now I'm thinking of ways to keep objects stuck to a slope if they're, say, under a certain velocity. This feature would prevent hopping off slopes after ascending, or while descending with a high X velocity. Would really help to keep that arcade feel!

I thought about raycasts but that might feel hacky and game-specific. If anyone has any good ideas about this, feel free to shoot them my way. :)

Link to comment
Share on other sites

Just pushed an update to the demo with a tonne of controls!



The "snap" feature is my experimentation with sticking bodies to tiles.

It works by moving them in a direction by the specified amount if they didn't successfully collide with any tiles (if there are any near enough to collide with), testing for a collision again after the move, and moving them back to their original position if it fails. If the collision succeeds then, hey presto, they've snapped to some tile in that direction. This messes things up more than I'd like when distances are set too high, though, so I'm not sure if it's a decent permanent solution.

In the near future, I intend to expand these controls a little further (velocity limits are still missing for example) and make them a little prettier.

Link to comment
Share on other sites

  • 1 month later...
  • 1 month later...
On 8/5/2016 at 11:04 AM, askariwa said:

Hi hexus, any thoughts about Circle body support ? :rolleyes:

I've already started work on it, but it's proving trickier than expected. I'll definitely update everyone here when it's sorted.

Link to comment
Share on other sites

  • 2 weeks later...

Finally sorted the issue that was driving me mad. That feel when one kind of tile has its vertexes defined counter-clockwise instead of clockwise...

Version 0.2.0-alpha has been released with initial support for circular physics bodies.

It still freaks out on some of the smallest tiles and sometimes on corners of tiles, but it's a good start.

Also, many thanks to IkonOne for the new typescript definitions.

Link to comment
Share on other sites

  • 3 weeks later...
  • 2 weeks later...
  • 2 months later...
  • 1 month later...
On 1/7/2017 at 3:54 PM, drhayes said:

Is this totally done now? Like, I should start using it in my games?

If you only need rectangular physics bodies to collide with slopes on a single, non-offset tilemap, then yes.

However, consult the roadmap for features I'm intending to implement.

While circular physics bodies have been implemented, there is still a really strange issue where it teleports the body after catching between square tiles. Not being able to solve this problem put me off working on the plugin for a while.

Link to comment
Share on other sites

  • rich unpinned this topic

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...