July 21, 2018, 08:43:12 am


Welcome to the Platino support forum!

Collision Detection

Started by raybelisle, September 09, 2015, 04:48:47 pm

previous topic - next topic
Go Down


I know that you can detect collisions between sprites using sprite.collidesWith(otherSprite) or blendFunc. What I am wondering is if there is a detection method you can use that would respect the underlying sprite image, rotation and scale? For example, if I had a sprite that was a right angle triangle:

I might want to know when a sprite has collided with the 'red' part of the triangle, not the 'white' part... Or I might have 'pulsing' circle that grows and shrinks as part of a game. If I used the scale to grow/shrink the sprite, I would want to know when I collide with it in a 300% scale, but the current methods only allow me to detect collisions at 100% scale.

Hope that makes sense.



September 14, 2015, 03:14:06 am #1 Last Edit: September 16, 2015, 08:46:09 pm by johngould

Thanks for your question.  The answer is PhysicsJS!  You can absolutely do all kinds of different shapes and sizes of physics bodies and have them detect collisions correctly based purely on the physics body and not necessarily on the underlying sprite.  To be perfectly honest, I haven't had a whole lot of time to mess with PhysicsJS yet, so I'm not quite sure how to tell it what to actually do when objects collide (like blow up or die or whatever), but I can make them bounce off each other very nicely!   ;D

Here (http://wellcaffeinated.net/PhysicsJS/tutorials/creating-a-scene-of-interacting-polygons) is a tutorial on creating a scene of interacting polygons (ignore the bit about "canvas", since we stripped that out of course, and just start with "Physics(function(world){" like we do in our physics sample here:  https://platino.io/sample-code/.  The good stuff is in app/assets/scenes/ExampleScene.js.  I took the liberty of altering it slightly to show that you can change the scaling of the sprites and physics bodies and they'll interact just as they should.  Just start at line 30 and replace the touchstart event listener with this:

Code Select
var i = 8;
// The user can click anywhere on the background to drop a ball
bg.addEventListener('touchstart', function(e) {
// Create the ball as only a physics object

var ball = Physics.body('circle', { radius: ballSpriteTemplate.width / i });

if (i > 1) {
i = i / 2;

// Position the physics object
ball.state.pos.x = e.x;
ball.state.pos.y = e.y;

// Make sure the world acts upon the ball

// Set the lable to balls total
label.text = "Total balls: " + world.getBodies().length;

// Associate a platino sprite with the physics body
ball.sprite = Alloy.Globals.Platino.createSprite({image: 'sprites/basketball.png', centerX: e.x, centerY: e.y, width: ball.radius * 2, height: ball.radius * 2});

And for fun, try taking out the "height" attribute of ball.sprite and you'll have some flippy disks and footballs and things flying about, like I did the first time I compiled and forgot to do the height!  :D

There's more information on bodies here (you'll need to do a convex-polygon for the triangle, and I don't believe the body has to match the shape of the sprite, so you should be able to make it so that only the red part collides):  https://github.com/wellcaffeinated/PhysicsJS/wiki/Bodies

And there's way, way, way more information here:  http://wellcaffeinated.net/PhysicsJS/docs/#Physics-body

We'll be working on our own documentation as well, but for now, the PhysicsJS folks have done a pretty good job of it!

--John  :-)

Edit:  Just in case anyone is curious, but too lazy to try it out, here you go!  Oddly shaped balls at 5 in the morning!  http://puu.sh/kaQXT/670df811fe.png
Edit 2:  And yes, just confirmed that the oddly-shaped balls still collide as if they're normal-shaped balls, because the squished sprites are attached to normal circle-shaped physics bodies!  So you should be able to wire up the body to the sprite in such a way that only the red parts collide.  :)



I think you can do it using a convex body, and you set the parameter to the triangle. If your question is if exist a way ti platino do it automatically I don't think so. its too early for that kind of function.. Remember that the "Physics World" loop work separate to the game view and the sprites. maybe in a future release they will add that. but correct me if I'm wrong but right now is not posible.

My code don't have bugs.. just random and erratic behaviour..


It is very useful information offline.

Go Up