Panda Physics Engine: General Chat

[Wolfsbane]

Hey Gang,

Having a play with the built-in Panda Physics engine over the last day. Does anyone here work with it? What's your experience with it? Or do people just go with the p2 or box2d? I can see a couple of the examples/templates are created with it for some basic collision detection.

The built-in physics seems a bit limited. (i.e. collision between a Circle and a Rectangle type doesn't' seem to work too well). I haven't looked at deep enough to come up with some solutions, or good use cases, enough for me to wonder if anyone actually uses it in their games?

Even the basic Rectangle is has 4 properties.. x,y,width, height. Which is great, except that the rectangle then seems to be centered by default. So you have to calculate the bounding box yourself if you've got some kind of custom collision code. E.g.

leftSideOfBoundingBox = box.x - box.width/2,

rightSideOfBoundingBox = box.x + box.width/2;

Normally I'd expect these attributes to be within the engine itself.

The 'DIR' return command seems a bit odd (UP,DOWN, LEFT, RIGHT). Fine for rectangle collisions, but doesn't work for Circle collisions. I'd have thought maybe Dir to be a 0-359 number.

There doesn't seem to be a 'collisionAt' method. E.g. So after colliding with a wall, I should be able to do a check like:

if ( collisionAt(x+4,y, other) //or other could be a Body type, e.g. Body.WALL
{
  //something is to the right of us.. so bounce to the left!
  body.velocity.x *= -1;
}

But doesn't seem like Panda has this type of function? I can promise it's very useful, and the overheard should be very small (if used correctly)

I coded, and got something, but it basically does a lot of math, getting the coordinates of the bounding boxes for both bodies, then comparing their x/y values, and checking which is where, before making a decision. Which is fine, but.. the code above is so much more simple. ?

Physics.testHit(Body a, Body b) doesn't seem to be quite what I'm wanting, as it only checks for a collision between two specific bodies at this current time. (rather than, if there *would* be a collision at a certain coodinate).

Any thoughts? 

[Ninjadoodle]

Hi @Wolfsbane @enpu

I've played with the built in engine and it is very limited, really only for basic stuff. I don't think there is any rotation for example, or like you said collision between circle and square.

To be honest, I don't really like P2 either. Maybe it's because I've used Box2d in the past, but I find P2 very strange. There don't seem to be any collision groups (at least not the same as in Box2d), as well as a bunch of other things.

I LOVE Panda - the best HTML5 engine there is. This is however in my opinion, one area where it's lacking a bit.

I would love to be able to use Box2d, and even better, have it simplified for game use. I know this is a lot of work, but it would be amazing for game designers.

I've had a look at Corona a long time ago, and really loved their streamlined Box2d implementation. You can literally setup / add physics objects in a couple of lines.

This is something I would really love to see in the future if possible - the rest of the engine is absolutely amazing

[enpu]

Panda's built-in physics engine is pretty simple and that is intentional, it is still enough for a lots of different types of games. For example Kuru Panda and game templates RPG, Jumping Fish, Spaceship, Platformer and Flying Dog are all made using the build-in physics engine.

Then Papa Piño and game templates Tipsy Tower and Tipsy Tower 3D require more advanced physics, so they use p2.js plugin.

I would totally disagree with @Ninjadoodle

P2 is made with JavaScript, rather than C++ which Box2D uses. This means P2 is more suitable and gives better performance with JavaScript game engine. Also P2 API is really close to Panda's built-in physics engine, which allows me to keep the code a lot more clearer. Box2D would just make everything look a lot more complicated.

Makes no sense for me to start making my own more advanced physics engine, when there is already one that does the job.

Also makes no sense for me to spend time on another physics engine plugin, i haven't found anything that i can do on Box2D that i can't do with P2.

Feels like i should just make more examples for P2. If there is something that you don't know how to achieve, you can always ask and i will do my best to help you out.

[Ninjadoodle]

Hi @enpu

I understand where you are coming from and it makes perfect sense using P2

I do however feel, that the way it's used in Panda is a little complicated and maybe some functions to simplify it's use would be really useful.

Examples would be absolutely awesome, as I found it really hard to find the correct information when I was setting up my tests.

I'm happy to contribute to a list of examples that would be really useful for P2, as I'm really struggling to pick it up.

 

[enpu]

Have you looked at the different scenes in the example project of p2.js plugin?

For example there is scene called "Simple" which shows you have to make simple floor and one physics sprite with circle shape and adds some velocity to it. With just few lines, can't be much simpler than that. Only thing that i personally don't like that much, is that P2 uses meters instead of pixels, which means you will have to convert all positions and dimensions. Will have to take a look at some point, if i could make that simpler.

I would be happy to add more examples, if you let me know what exactly are you looking for

[Ninjadoodle]

@enpu

Off the top of my head - one of the specifics I'm struggling with, is collision groups. Let's say I have 2 red balls and 2 blue balls. I want the red and blue balls to react to each other (physics), while I don't want the same colors to react.

The second one is restitution - I can't figure out how to give an object restitution and make them bounce of each other. Let's say I have a tennis ball and I spawn 20 of them, I would like them to all have a bounce quality and react to each other.

These are a couple of examples I could do in Box2d, but can't figure out in P2.

I'll make a longer list as well 

[pstrejczek]

I'll drop my 2 cents.

I find Panda built-in physics to be extremely helpful. In the game,  I have almost finished (I'm fighting with Cordova export right now, cause I don't want to use phonegap) I have made most of the physics myself, but the built-in engine helps me in detecting collisions. It works really well for that. It is great if you want to make something on your own but don't want to do everything from scratch.

P2 physics is great. There is a lot of nice demos and examples on P2 github page and they are extremely easy transferable to Panda2. I have experience now with both P2 and Box2D and don't see any advantages of one over the other. P2  is just a little different philosophy.

[Wolfsbane]

 

37 minutes ago, enpu said:

Panda's built-in physics engine is pretty simple and that is intentional, it is still enough for a lots of different types of games

I'll need to get back and keep playing with it, but I think I'm getting a bit confused with the play between the words physics and basic collision detection. I don't really want advanced physics in Panda engine, (I'm satisfied with the P2.js plugin). But I was expecting some more basic collision detection functions. (and as I mentioned, some of the existing functions i.e. circle to rectangle don't really work).

So take for instance: the collisionAt(x,y) method. Or take, say, making a top-down shooter, and you want to do somekind of collision between two points check. You'd have to loop through all the bodies in the list, calculate yourself the bounding boxes using the x+width/2, x-width/2, etc, style maths. 

Now: For most top-down shooters you don't need any kind of advanced Physics systems. It's just left/right, rotate, and blast with collision detection, etc.

So I'm curious who's using the built-in physic(collision system) and what they're doing with it. E.g. I saw your platform game template, you had to do some custom collision checking to make the platform dude collide with the walls/roof smoothly.

I wanted to make a standard 'bouncing' ball, arkanoid style, and I had to do much the same thing. Calculating the bounding box, checking boundaries, etc. Using a rectangle, because I couldn't quite get a Circle to bounce right off Rectangle.

Feels like we could be doing a lot of the same work that could be done in the Engine, so I think there's some room to possibly compare notes, and improve the Engine a little.

E.g. I would be thinking to ditch Built-in circles (they don't really work, and if you want that kind of precision, just go P2.js) and just do rectangles, and then pump some useful collision detection methods in there. 

Also: yeah, @Ninjadoodle, I don't have much experience with physics engines, but I'm pretty agnostic about what is used for advanced physics.

[enpu]

42 minutes ago, Ninjadoodle said:

Off the top of my head - one of the specifics I'm struggling with, is collision groups. Let's say I have 2 red balls and 2 blue balls. I want the red and blue balls to react to each other (physics), while I don't want the same colors to react.

The second one is restitution - I can't figure out how to give an object restitution and make them bounce of each other. Let's say I have a tennis ball and I spawn 20 of them, I would like them to all have a bounce quality and react to each other.

I have added these to the roadmap. Will do them asap!

28 minutes ago, Wolfsbane said:

I wanted to make a standard 'bouncing' ball, arkanoid style, and I had to do much the same thing. Calculating the bounding box, checking boundaries, etc. Using a rectangle, because I couldn't quite get a Circle to bounce right off Rectangle.

I can do simple arkanoid style game template with the built-in physics, that should be pretty fast to do.

[Wolfsbane]

Oh, I got the basic collisions working well enough for a decent Arkanoid gameplay. I've attached the source, if anyone wants to take a peak. I'm making it for others to use, or learn how to make games with. (Another reason why I'm wanting to use the built-in physics, as using the built-in physics, as anyone following what I write has to be able to use the trial of Panda to get the 'hook'.)

 

1 hour ago, pstrejczek said:

(I'm fighting with Cordova export right now, cause I don't want to use phonegap)

Cough up. ? What's the advantage? I'm wrapping something up, too, was just gonna do the default phonegap.

breakout_01.zip

[Ninjadoodle]

@Wolfsbane

Nice - awesome that you have it up and running! Ill have a look at your game - love seeing how other people make stuff

[Wolfsbane]

hey, I want to make a tutorial series, and I'm tossing up writing a book. Well, I want to write a book, time and commitment permitting.

I've already done an example on Minesweeper: Just need my pretty graphics to arrive. I'm not sure about how interested people are in the Panda community for this kind of thing, but I think Javascript games as a whole are getting pretty popular, so it's something I'd like to do. I think I might have something useful to share.

 

But.. enough pimping by me!

So for the Arkanoid code: The collision looks messy as heck, but it's kind of necesary because of this example:

 

The ball is colliding with the wall.. but what wall? And where? There are 3 individual wall pieces, and the ball is big enough to bump into all 3 at once. One of them could be an 'UP' collision, because it's technically above the ball, and the other could be a RIGHT collision, etc.

Visually, it's clear that it's all gonna be RIGHT collisions, and we should just bounce horizontally off it, but that's not very clear to the physics engine. And, as I mentioned, the built-in collision functions are a bit limited so there's not a 'pretty' way just figure out which block is were, and move accordingly. Instead: Calculate bounding box, and compare values, and then decide how we should bounce.

e.g. 

collide: function(other, dir) {
            var myLeft = this.body.last.x - this.body.shape.width/2;
            var myRight = this.body.last.x + this.body.shape.width/2;
            var myUp = this.body.last.y - this.body.shape.height/2;
            var myDown = this.body.last.y + this.body.shape.height/2;
            
            var otherLeft = other.last.x - other.shape.width/2;
            var otherRight = other.last.x + other.shape.width/2;
            var otherUp = other.last.y - other.shape.height/2;
            var otherDown = other.last.y + other.shape.height/2;
            
            var collision = false;
            //collision box.
            if ( myUp <= otherDown || myDown >= otherUp ) {
                
                if ( myLeft <= otherRight && myRight >= otherLeft) {
                    //vertical bump
                    if ( this.body.position.y < other.position.y ) {
                        if ( this.body.velocity.y > 0 ) {
                            this.body.velocity.y *= -1;
                            collision = true;
                        }
                    }
                    if ( this.body.position.y > other.position.y ) {
                        if ( this.body.velocity.y < 0 ) {
                            this.body.velocity.y *= -1;
                            collision = true;
                        }
                    }
                }
            }
            //collision box.
            if ( myLeft < otherRight || myRight > otherLeft) {
                //horizontal bump
                if ( myUp < otherDown && myDown > otherUp ) {
                    if ( this.body.position.x < other.position.x ) {
                        if ( this.body.velocity.x > 0 ) {
                            this.body.velocity.x *= -1;
                            collision = true;
                        }
                    }
                    if ( this.body.position.x > other.position.x ) {
                        if ( this.body.velocity.x < 0 ) {
                            this.body.velocity.x *= -1;
                            collision = true;
                        }
                    }
                }
            }
            if ( collision)
                other.collide();
                
            if (other.collisionGroup === game.Body.BAT) {
                console.log('yo');
                this.body.velocity.x = (this.body.position.x - other.position.x)*10;
            }
            return true;
        },

Now: That's a lot of work simply to have a big ball bounce off some little bricks!

(I should note: If the wall was a big long brick, we wouldn't have this 'issue'. But hey, I want people to use Tiled to make pretty maps! And it's Arkanoid.. Everything is a little brick!)

Edit: Gotta throw out there that I'm not complaining about the Built in Collision engine, just noting I'm finding it a bit featureless. 

featureless? You mean flexible to create all kinds of different collision systems you say? Yes.. yes I did. ? But an FYI nonetheless

[enpu]

Hi @Wolfsbane

I did take a look at your breakout project and i now totally see the issue.

Things get complicated when there is diagonal movement and body is colliding with multiple bodies in the same frame. Not sure yet what would be the simplest solution on this.

Suggestions are welcome

[enpu]

6 hours ago, pstrejczek said:

(I'm fighting with Cordova export right now, cause I don't want to use phonegap)

I'm curious to hear the reason for this. PhoneGap is basically same as Cordova, with just some additional tools build in top of it, like the cloud building.

[Wolfsbane]

3 hours ago, enpu said:

Not sure yet what would be the simplest solution on this.

Just a quick post before I sign off for the night.. but doesn't necessarily need to be solved by the Engine itself. Some problems are o.k. to leave for the developer, as situations can vary from project to project.

So my thoughts are I was expecting to see more, say, 'helper' functions that would help a developer solve his specific. I had to calculate the bounding boxes of the two bodies myself.. that doesn't seem fair! This surely must be something every Panda dev has to do.

So I'd just expect more helper functions. E.g. We can refactor my breakout code to look like below:

collisionAt: function(x,y,other) {
            var myLeft = x - this.body.shape.width/2;
            var myRight = x + this.body.shape.width/2;
            var myUp = y - this.body.shape.height/2;
            var myDown = y + this.body.shape.height/2;
            
            var otherLeft = other.last.x - other.shape.width/2;
            var otherRight = other.last.x + other.shape.width/2;
            var otherUp = other.last.y - other.shape.height/2;
            var otherDown = other.last.y + other.shape.height/2;

            if ( myRight <= otherLeft) return false;
            if ( myLeft >= otherRight) return false;
            
            if ( myUp >= otherDown) return false;
            if ( myDown <= otherUp) return false;
            console.log('1');
            
            return true;
        },
        /**
         * body is the other object we're colliding with.
         * dir is.. our direction?
         * 
         */
        collide: function(other, dir) {
            var collision = false;
            var xx = this.body.last.x;
            var yy = this.body.last.y;

            if ( this.collisionAt(xx+1,yy,other)) {
                if ( this.body.velocity.x > 0)
                    this.body.velocity.x *= -1;
                collision = true;
                console.log('x');
            } 
            if ( this.collisionAt(xx-1,yy,other)) {
                if ( this.body.velocity.x < 0)
                    this.body.velocity.x *= -1;
                collision = true;
                console.log('x');
            }
            if ( this.collisionAt(xx,yy-1,other)) {
                if ( this.body.velocity.y < 0)
                    this.body.velocity.y *= -1;
                collision = true;
            } 
            if ( this.collisionAt(xx,yy+1,other)) {
                if ( this.body.velocity.y > 0 ) 
                    this.body.velocity.y *= -1;
                collision = true;
                console.log('y');
            } 

            if ( collision)
                other.collide();
                
            if (other.collisionGroup === game.Body.BAT) {
                console.log('yo');
                this.body.velocity.x = (this.body.position.x - other.position.x)*10;
            }
            return true;
        },

(this collisionAt() function obviously doesn't cater for rotated Bodies.. yet, anyway)

I'm thinking along these kind of lines? Let the 'Dev' solve his own issue, but just give give them a few more tools to sort it out.

[pstrejczek]

2 hours ago, enpu said:

I'm curious to hear the reason for this. PhoneGap is basically same as Cordova, with just some additional tools build in top of it, like the cloud building.

Nah ... it is just my first time as I haven't used Cordova before. I have some problems with testing on emulators but it is rather not Panda related but my setup problem.

Making game is fun, but building with Cordova is not - I'm a little lazy  

I want to learn Cordova usage as paying a monthly fee for PhoneGap makes no sense if you use it occasionally. 

[enpu]

2 minutes ago, pstrejczek said:

I want to learn Cordova usage as paying a monthly fee for PhoneGap makes no sense if you use it occasionally. 

You don't have to pay to export using PhoneGap cloud building. Free plan allows you to have one private project, and that is enough.

[pstrejczek]

1 minute ago, enpu said:

You don't have to pay to export using PhoneGap cloud building. Free plan allows you to have one private project, and that is enough.

Hmmm ... I must have misunderstood something. I have to read the description of the PhoneGap plans carefully again.

Does one private project mean one game? If I want to export another one I need to buy the subscription ?

[enpu]

2 minutes ago, pstrejczek said:

Does one private project mean one game? If I want to export another one I need to buy the subscription ?

No. The way PhoneGap exporting works with Panda is that once you start exporting Panda will upload the project into PhoneGap. Then when building is done and the file (APK or IPA) is downloaded, Panda will automatically delete the project from PhoneGap. So it just creates the PhoneGap project temporarily, just for the exporting, then removes it.

[pstrejczek]

1 minute ago, enpu said:

No. The way PhoneGap exporting works with Panda is that once you start exporting Panda will upload the project into PhoneGap. Then when building is done and the file (APK or IPA) is downloaded, Panda will automatically delete the project from PhoneGap. So it just creates the PhoneGap project temporarily, just for the exporting, then removes it.

Ha ... Awesome! ... So bye-bye Cordova and today I'm starting experiments with PhoneGap cloud 

 @enpu - than you so much for the info ?

[pstrejczek]

@Wolfsbane

Actually, arkanoid (or breakout) was my first attempt to try Panda engine. I have not used any physics engine (event he built-in one) though. I was thinking to rewrite this with Panda physics, but started working on different project instead.

It is very rough as it was made only for engine test, but I think I can share my project

Breakout.zip

[Ninjadoodle]

Hi @Wolfsbane @pstrejczek

I'm liking this topic :) Thanks for sharing your code guys! It's always awesome to pick up tips and tricks from other creators.

@Wolfsbane - Awesome idea with the tuts! I've going to start doing some Youtube stuff as well - did some a while ago, but wanted to rethink my direction a bit.

The more tuts the better - would help bring more people to Panda!

@enpu Thanks for explaining the Phonegap thing, I also thought you would have to pay :) The way it works is awesome!

[Wolfsbane]

Hey, thanks @pstrejczek, That's what I was interested in seeing.. how people are building their various collision systems for their games. 

also.. I'm part of the group of people who thoughts that you have to pay for PhoneGap eventually. ? Everytime I built my game to test, I was crossing my fingers thinking it'd be the last one. +1 @enpu

8 hours ago, Ninjadoodle said:

I've going to start doing some Youtube stuff as well

If you're the guy I think you are, then your video comparing HTML5 game engines actually was the one that introduced me to Panda. I hadn't heard of it before then.

[enpu]

I have modified the text about cloud building in the website, to clarify that paid plan is not required. Thanks!

[enpu]

13 hours ago, Wolfsbane said:

We can refactor my breakout code to look like below:

@Wolfsbane

I'm having a bit hard time on understanding the logic in your code.

You have collide function, which is called when your body collides with other body or bodies. Then you are checking another collision by using last positions (which are positions before the body was moved by physics in that frame) and modifying your body's last position by 1 pixel?