flappy-svg icon indicating copy to clipboard operation
flappy-svg copied to clipboard

Suggestion: Using Webgl libraries for better physics?

Open vikasTmz opened this issue 9 years ago • 3 comments

We could use Webgl libraries like Cannon.js , Ammo.js or Three.js to make this Game. This will obviously require us to rewrite the existing gameplay code but this will make the game smoother and efficient. We can create basic geometries and wrap them up with svgs. Cannon.js will handle the collisions. (http://schteppe.github.io/cannon.js/) , (http://threejs.org/)

Dat.Gui can also be implemented to dynamically modify(user side) or display variables.

vikasTmz avatar Feb 14 '16 05:02 vikasTmz

What would be the steps to implement this?

niccokunzmann avatar Feb 16 '16 10:02 niccokunzmann

Well if we're going to use Cannon.js (a purely physics library) , we can assume each of our characters and obstacles as some form of 2-D textured object. We can assign anisotropy properties to them using cannon.js where we can render each of their pixels (i.e map out every curve,edge corner individually) , instead of treating our characters bounded within a rectangle/square/circle. The collision detection and resolution will be handled by cannon.js.

How is this better? We can now create any form of SVG character with complex shape and geometry , load this image in Webgl using 'THREE.ImageUtils.loadTexture' and then render/store the image coordinates into a vertex array. Basically we're generating a geometry representing a parametric surface. This way collision detection will be as accurate as possible and in fact we can allow users to post their own SVGs can then create an algorithm to render out the coordinates. This will be challenging but the basic part above can be easily done.

A Demo (http://schteppe.github.io/cannon.js/examples/threejs_cloth.html). _Ignore the 3-D aspect of the demo _

vikasTmz avatar Feb 17 '16 05:02 vikasTmz

I feel like you like WebGL and because of this you would like to apply it.

My priorities are:

  • The tasks should be easy like adding a file or a layer.
  • The code should be beginner friendly.
  • There must be at least two people who understand the code, one of them having the right to merge.
  • It should work on smartphones, tablets, computers.
  • some more that may not apply here.

Given these, you can

  • create a demo with a background, a flappy and obstacles that renders it.
  • just put collision detection into WebGL or whichever framework.
  • do what you want.

Enhancing the current physics is hard, I guess, because gravity is pretty simple. Do you have in mind adding other physics simulations?

You can go ahead and implement whatever you like. If you keep my priorities in mind when adding features, I will merge it. If not, you may need to find another person to merge it. Also, both implementations may co-exist for some time and we could restructure the projects so both work.

niccokunzmann avatar Feb 17 '16 08:02 niccokunzmann