31 posts in this topic

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.

Screenshots

phaser-arcade-slopes-6.gif

slopes-particles3.png

slopes-screenshot.png

slopes-screenshot2.png

slopes-particles.png 

Share this post


Link to post
Share on other sites

I'll put together a demo soon, yeah! GitHub pages and a Codepen equivalent for people to tinker with.

There isn't one yet because I was finishing up the plugin straight through from Friday evening to Sunday evening, so I thought I deserved a pub dinner. ;)

michaelcalkins likes this

Share this post


Link to post
Share on other sites

I was going to put together one that's a little less messy (really is messy), but maybe that doesn't matter too much :lol: Just want to make sure that if people read it, they can actually learn something about how to use the plugin.

drhayes likes this

Share this post


Link to post
Share on other sites

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

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.

Controls:

  • 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!

drhayes likes this

Share this post


Link to post
Share on other sites

Seriously good work. So excited about this.

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

Share this post


Link to post
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.

Share this post


Link to post
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!

hexus likes this

Share this post


Link to post
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. :)

Share this post


Link to post
Share on other sites

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

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

phaser-arcade-slopes-demo-controls.png

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.

Share this post


Link to post
Share on other sites

The plugin has been updated to support Phaser 2.4.9/2.5.0! Hurrah.

Grab v0.1.1!

Offset tilemap layers aren't properly supported yet, but the plugin now works with these versions. There was a signature change to an internal Phaser method that the plugin overrides.

michaelcalkins and drhayes like this

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

drhayes and askariwa like this

Share this post


Link to post
Share on other sites
On 9/4/2016 at 6:47 PM, gmaker said:

This is really cool! Great Job!!! Does the plugin support 128px tiles?

Yes, it supports tiles of any size.

I started building a tilesheet generator a while back, so that it'd be easy to grab an image that works with the plugin immediately, but I haven't put the time in to finish it yet. 

Share this post


Link to post
Share on other sites
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.

drhayes likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.