mcfly

Another collision detection discussion

Recommended Posts

Hi all,

I'm new to Pixi.js, so excuse me, if the answer to my question is obvious.

I'm building a 2d platformer where I have a PIXI.Container which contains a few sprites (let say player's arm, body, head etc.).

Based on the user input I'm moving the whole container (not each sprite individually). I also have container which contains all platforms of the level (they are all of type PIXI.Spirte).

I want to detect when the player's container intersects with any of the platforms and stop the container from moving forward (the usual stuff).

Currently I'm using the Bump.js library (https://github.com/kittykatattack/bump). But I'm encountering few problems.

First of all Bump.js doesn't work for 'container vs array with sprites' type of collision, so I've tried to detect an intersection between each player's sprite against the array with platforms. Basically I'm using the following:

player.move(); // move the player's container to any direction
BUMP.hit(playersArm, platformsArray, true, false, true);
BUMP.hit(playersBody, platformsArray, true, false, true);
BUMP.hit(playersHead, platformsArray, true, false, true);

This is testing for intersection between each player's sprite and stops it from moving, if there is a collision. All this is working fine and if there is an intersection the intersecting player's sprite position will be set to a value that is not intersecting with the platforms. However all the other sprites will continue moving, as they are not yet intersecting with the platforms. Hope I expressed myself clear.

Have you ever had such problem and how did you solve it? I can only think of building a custom collision detection logic which works with 'container vs array with sprites', so I don't have to care for each player's sprite individually, but work with the container. Do you know of any library that already handled such cases?

Or maybe I've been wrong from the start by taking such approach (having player's container with several sprites in it)?

Thank you in advance.

Share this post


Link to post
Share on other sites

In general:

Its not obvious , because you are basically making simple arcade phys engine, and PixiJS has only a few functions that you can rely on for it: "getBounds()", "containsPoint()", "contains()"  (that one is about Point but for shapes), and when you look inside element you have to dig out its geometry, its difficult to produce readable code because of that. 

We are only a renderer lib - we dont know what people want from their physics. We dont have enough expertise to provide physics for newbies, we are all about graphics.

Some people integrate existing libs like "p2.js" or "matter.js" with pixi and the result is awesome - when you do that means you know pixi on a good level. 

Sadly, we still dont have docs about it because people who did that before mostly kept it to themselves. I'm working on a article that explains that but i cant share it yet. 

All we have are threads in this subforum that are difficult to search but they contain simple physics, and I cant say that code is readable. I've spent many hours helping people to fix solutions that they wanted for their games.

 

Your case:
Lets see https://github.com/kittykatattack/bump/blob/master/src/bump.js#L1350

First that I see is it spawns many functions , and you call it several times in a frame - it can be a performance problem in case of 100 and more sprites.

I suggest to copy that lib locally and change it the way you need.

Share this post


Link to post
Share on other sites

@ivan.popelyshev, I understand that PIXI is used for rendering only. I don't expect it to have built-in physics methods. I was trying to understand if I'm doing something wrong, as I'm sure a lot of people has encountered the same problem. Thank you for your detailed explanation. I'll definitely wait for the article you've mentioned.

@bubamara, thank you too for your suggestion.

I'll try to work something out of both your suggestions.

Share this post


Link to post
Share on other sites
15 minutes ago, mcfly said:

I was trying to understand if I'm doing something wrong, as I'm sure a lot of people has encountered the same problem. 

I'll try to work something out of both your suggestions.

Yep, you've got it right.

I can also recommend to watch out for "width" in containers with children, its a tricky calculated value.

"getBounds().width" is fine, "sprite.width" is fine when sprite has no children. And at some point if you have many objects you'll see major garbage collecting when you profile app, and you'll have to remove extra object creations.

Also watch out that "getBounds()" and "containsPoint()" are the only things that returns global (screen) coords, everything else is local stuff, you have to be aware in which coord system they work.

Share this post


Link to post
Share on other sites

You also have perfect timing. I'm gonna add physics in the list of my specialisations in pixijs team, so I'm ready to help people more on this subject. ITs like "ok, I solved most of Filter-related problems that people have, whats next" :)

If you do something and it doesnt (or does) work please share, I'll help to find bugs.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.