hexus Posted May 8, 2016 Share Posted May 8, 2016 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 jamespierce, WombatTurkey, samme and 9 others 12 Link to comment Share on other sites More sharing options...
rich Posted May 8, 2016 Share Posted May 8, 2016 Topic pinned. Also, demo, demo, demo! Upload one WombatTurkey and michaelcalkins 2 Link to comment Share on other sites More sharing options...
WombatTurkey Posted May 9, 2016 Share Posted May 9, 2016 Starred on Github, keep it up.. As Rich said a demo would be amazing Link to comment Share on other sites More sharing options...
hexus Posted May 9, 2016 Author Share Posted May 9, 2016 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 1 Link to comment Share on other sites More sharing options...
rich Posted May 9, 2016 Share Posted May 9, 2016 Don't worry about Codepen and all that jazz, just shove the test up somewhere that generated those screen shots and link to it drhayes 1 Link to comment Share on other sites More sharing options...
hexus Posted May 9, 2016 Author Share Posted May 9, 2016 I was going to put together one that's a little less messy (really is messy), but maybe that doesn't matter too much Just want to make sure that if people read it, they can actually learn something about how to use the plugin. drhayes 1 Link to comment Share on other sites More sharing options...
hexus Posted May 9, 2016 Author Share Posted May 9, 2016 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 1 Link to comment Share on other sites More sharing options...
rich Posted May 9, 2016 Share Posted May 9, 2016 Now that's more like it Link to comment Share on other sites More sharing options...
hexus Posted May 9, 2016 Author Share Posted May 9, 2016 This new map is already allowing me to find more bugs drhayes 1 Link to comment Share on other sites More sharing options...
drhayes Posted May 13, 2016 Share Posted May 13, 2016 Seriously good work. So excited about this. EDIT: How can I help? If you make GitHub issues I'll try and knock'em down. Link to comment Share on other sites More sharing options...
hexus Posted May 13, 2016 Author Share Posted May 13, 2016 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 More sharing options...
Ryan Posted May 14, 2016 Share Posted May 14, 2016 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 1 Link to comment Share on other sites More sharing options...
hexus Posted May 14, 2016 Author Share Posted May 14, 2016 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 More sharing options...
hexus Posted May 19, 2016 Author Share Posted May 19, 2016 Just pushed an update to the demo with a tonne of controls! http://hexus.github.io/phaser-arcade-slopes/ 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. michaelcalkins and WombatTurkey 2 Link to comment Share on other sites More sharing options...
hexus Posted June 26, 2016 Author Share Posted June 26, 2016 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. drhayes and michaelcalkins 2 Link to comment Share on other sites More sharing options...
askariwa Posted August 5, 2016 Share Posted August 5, 2016 Hi hexus, any thoughts about Circle body support ? Link to comment Share on other sites More sharing options...
hexus Posted August 8, 2016 Author Share Posted August 8, 2016 On 8/5/2016 at 11:04 AM, askariwa said: Hi hexus, any thoughts about Circle body support ? 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 More sharing options...
hexus Posted August 19, 2016 Author Share Posted August 19, 2016 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 2 Link to comment Share on other sites More sharing options...
gmaker Posted September 4, 2016 Share Posted September 4, 2016 This is really cool! Great Job!!! Does the plugin support 128px tiles? Link to comment Share on other sites More sharing options...
hexus Posted September 19, 2016 Author Share Posted September 19, 2016 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. Link to comment Share on other sites More sharing options...
What? Posted December 1, 2016 Share Posted December 1, 2016 Does it work with tiles that aren't a power of 2? Link to comment Share on other sites More sharing options...
hexus Posted December 7, 2016 Author Share Posted December 7, 2016 On 12/1/2016 at 1:01 AM, What? said: Does it work with tiles that aren't a power of 2? It should work with tiles of any size. Link to comment Share on other sites More sharing options...
drhayes Posted January 7, 2017 Share Posted January 7, 2017 Is this totally done now? Like, I should start using it in my games? Link to comment Share on other sites More sharing options...
hexus Posted January 14, 2017 Author Share Posted January 14, 2017 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 1 Link to comment Share on other sites More sharing options...
drhayes Posted January 17, 2017 Share Posted January 17, 2017 That *is* what I need, yes! Thank you! hexus 1 Link to comment Share on other sites More sharing options...
Recommended Posts