fossasia / flappy-svg

Flappy Bird in SVG. Play it at http://fossasia.github.io/flappy-svg/
Other
1.6k stars 157 forks source link

Suggestion: Using Webgl libraries for better physics? #96

Open vikasTmz opened 8 years ago

vikasTmz commented 8 years ago

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.

niccokunzmann commented 8 years ago

What would be the steps to implement this?

vikasTmz commented 8 years ago

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

niccokunzmann commented 8 years ago

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

My priorities are:

Given these, you can

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.