Need Help

[Manecz]

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?

[samid737]

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

https://codepen.io/Samid737/pen/brzGor

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]. 

[Jackolantern]

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. 

[samid737]

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. 

 

[Jackolantern]

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. 

[samid737]

 @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.

[Jackolantern]

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

[samid737]

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....

[samid737]

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

 

 

[Jackolantern]

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

[Manecz]

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.

[samid737]

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] 

 

[Manecz]

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

[samid737]

If your looking for lines as p2 physics bodies:
 

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

 

[Manecz]

Thanks samid737 you are the best!