Collision with large nonrectangular objects

[bulboka]

Good morning everyone!

 

I'm new to Phaser and need a piece of advise badly.

 

I've got a character in a shape of a circle of a very small radius, practically a dot. I need to handle collisions between my character and obstacles. Obstacles can be much larger than the character. And obstacles can be nonrectangular — diamond-shaped for example. I dont need to handle friction or bouncing, just overlap. I want to generate obstacles dynamically, as the character constantly moves upwards. And maybe animate them a bit: like pulsing brightness or something.

I've been exploring Phaser features for a while and I think I have a couple of possible decisions now. But I realy dont know which (or maybe none) of them are realy suitable.

 

1 Create an empty tilemap as high as I want my level to be. Move the character upwards and follow it with a camera. Fill tilemap with tiles dinamically and collide the character with the tilemap. If tile size is small, collisions with diamond-shaped obstacles will be accurate enough. But animating obstacles seems to be impossible.

 

2 Create a collision Bitmapdata with width and height respective to screen sizes. Generate obstacles as Sprites (or Groups of Sprites) and move them from the top of the screen to the bottom. Probably, I should use pooling for it. For every generated obstacle create a collision mask Sprite (or Group) of apropriate color. Every frame clear the collision Bitmapdata, render mask Sprite to collision Bitmapdata with draw method and check the color under the character to handle the overlap. This approach gives much more control over obstacles transform and animation but I have doubts about performance.

 

2.1 Obstacles are rather simple geometric shapes — rectangles, diamonds, circles. I could draw obstacle's collision mask on the collision Bitmapdata using canvas drawing API every frame. Also have doubts about performance. More than that, obstacles graphics is supposed to be minimalistic and also can be drawn using canvas API. Sorry for a dumb question, but will it work when Phaser is rendering using WebGL?

 

3 Use P2 Physics to which I'm not familiar at all. I'll need to create a polygonal body for every obstacle, wright?

 

Sorry for such a long explanation and thank you in advance!

[adamatt]

Hello, i think you should use P2 physics. I'm new to phaser and i understood how it works really fast, just look this example : http://examples.phaser.io/_site/view_full.html?d=p2%20physics&f=load+polygon+2.js&t=load%20polygon%202

 

You will probably need this this tool to create polygons https://www.codeandweb.com/physicseditor . It's free but has some limitations....

It's also easy to export polygons data, it require only few steps:

_ import your obstacle sprite

_ autotrace it's shape (you can play with settings to get the shape you want)

_ select the JSON exporter

_ save it using "publish as "

_ you're done. Use the example code to get it working

 

Actually i find P2 really fast, i think you should not worry about performance

[bulboka]

adamatt, thank you! I think I'll try P2 physics. It just seemed to me abundant to use it for such a simple task.

 

Recently I've read about the Phaser.Polygon class. I could create a Polygon for my obstacle, than every frame I could transform it's vertices according to obstacle's transform and use Polygon.contains method to determine if my hero is inside.

[valueerror]

p2 is not that much of an overkill..  you could deactivate most unwanted calculations (like damping, friction, sending impactEvents, etc. right after activating p2physics)  

(i tried to get more fps out of my game and started deactivating everything to the point where i deactivated physics completely just to test -  it gave me back 5 more fps ;-)  )

 

 

 with p2 you can also use the object layer in tiled to create polygonal lines around your obstacles (if you decide to place them in tiled)  - you could also combine those approaches and place the obstacles as tiles in tiled on an object layer but then in your code create sprites out of those objects and apply any polygonshape you want (and created in physicseditor)