Need Help

Recommended Posts

Hi guys, need some help. Im working on a game that I need to create (generate randomly two side walls) with collision detection, but I dont know what kind of approach do I need for such thing. Any help please?

Share on other sites

You could use p2 physics and dynamically update the polygons, example:

This is very conceptual, just to get an idea. You can switch between randomize functions in the update, so you can pass your own set of random data to drawPoly. you can for example generate curves from interpolated data. The  example provides the data as: [[x1,y1],[x2,y2]....], but flattened arrays [x1,y1,x2,y2....] should work too. Notice wall1 and wall2 seperate over time when drawing sines, not sure why its happening (think the endpoints are off), but should be some way the match the begin and endpoints:   [0,0], [0,100],  and [game.width,0],[game.width,100].

Share on other sites

When you need to collide with sloped, wavy or in some other way not-straight surfaces like this, the first thing to ask yourself is what kind of resolution you need. Very, very few games require pixel-perfect collision. A big factor in the decision is how fast your game will move. In a fast shmup-style game, your collision just need to be somewhat close. The game moves too fast to tell if you actually had pixels connect, so players will typically develop a "feel" for how close things have to be to collide. On the other end of this spectrum, a very meticulous, slow puzzle game where you are trying to move a marble through a maze (such as a video game version of a marble labyrinth game) is going to need to be closer to pixel-perfect because players will be able to tell.

So where to begin with this really depends on the design of your game. Is that ball going to be racing down a tunnel made up of those walls? If so, you could probably just take regular square collision boxes and try to line them up as best as you can to the walls. There are some nice calculus calculations that can help you with this but I have been out of the classroom too long to tell you how to do it. I just know they do exist since it is a very calculusy question. If that ball is going to be hopping around on those walls, bouncing off of them at the correct angles, rolling down them appropriately, etc., then you are going to need a much more accurate collision scheme and a robust physics engine that can deal with sloping angle collisions. I believe P2 does.

Share on other sites

The calculus part (in the example ) is mostly defining the type of curve you want. It can be A parabola , linear shape, sawtooth, sine wave,  its all possible by just passing the right set of data points to the drawPoly() function.

Here is the same example with interpolated data for more random curved walls. You can switch interpolation methods (line 74-79) to experiment with. The number of points to interpolate trough can also be passed as an argument.

Share on other sites

Sorry, @samid737 I actually didn't mean drawing the walls. I meant, in a fast game that doesn't need sloping collisions, you could use a calculus function to generate boxes that cover sloping walls with a certain level of accuracy. I think it is an integration except you have a predetermined amount towards the limit to keep it blocky and to prevent too many boxes from being created, but again, I meant to keep working calculus problems so i wouldn't forget it, but that didn't happen. This way you can randomly generate the sloping walls and also randomly generate collision boxes that fit good enough over the walls for the type of game. I am not sure if this is a performant strategy for Phaser, though. I just know it has been done in native game development.

Share on other sites

@Jackolantern  Thats a nice trick too, fused it with the example to give more ideas  :

in this case without integration, but the rectangles are distributed and the numbers can be adjusted to increase or decrease them... the curve is higly adjustable  and this time no p2 physics so thats nice. It really depends on what kind of collision model @Manecz needs I agree.

Share on other sites

Wow, very nicely done and with a very minimal amount of code, too.

Share on other sites

Collision test without any physics system is also possible, but the circle will of course need some custom function to move in a certain direction   :

This time by using circle and contains you can test wheter one of the interpolation points lies in the circle. You could also do line based collision test I think, but I can't seem to find the right function for it....

Share on other sites

Collision test based on circle and line intersection, the intersectsLine returns true or false, but it can also return the intersect points.

Share on other sites

Nice stuff again! I will have to look through this code here as I am learning more about Phaser!

Share on other sites

Thanks a lot. The examples are well demonstrated. Im trying use catmullRomInterpolation, with some random points generated. Here a simple example

``````function generatePoints(vertices, maxX, maxY){ //min 2 vertices
var points = {'x':[], 'y':[]};
var previousY = 0;
for(j = 1; j < vertices*3; j++){

if((j%2) === 0){
points.x.push(Math.floor((Math.random() * 3) + 1)*50);
}
else{
points.x.push(Math.floor((Math.random() * 20) + 0));
if(previousY <= maxY){
points.y.push(Math.round(previousY));
previousY += maxY/vertices;
}
}
}
return points;
}``````

than I pass that points to catmullRomInterpolation, but when Im trying to use drawPoly I cant figure how why it doesnt create nothing.

Share on other sites

generatePoints returns more x's than y's that could be the reason, x must match y in your case (vertical curve), so you have to limit the x's. generatePoints(4,300,800):

``````x:(11) [0, 50, 13, 50, 7, 100, 11, 100, 7, 150, 1] // should be 5
y:(5) [0, 200, 400, 600, 800] ``````

Share on other sites

That's correct! Thanks! One more question, do you know how can I draw a line instead of having the the walls body?

Share on other sites

If your looking for lines as p2 physics bodies:

If you only want to draw lines  you can use graphics:

Share on other sites

Thanks samid737 you are the best!

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.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.