The javascript physics engine behind the HTML5 game FootChinko

The javascript physics engine behind the HTML5 game FootChinko

Today we have a great guest post on our blog: we are going to talk with Enriqueto from the Ravalmatic studio, who developed one of the best HTML5 games out there: FootChinko.

Enrique will talk with us about the Javascript physics engine behind his game! Let’s start:

HTML5 js physics engine: FootChinko Over the last years mobile HTML5 games have been quite simple because of its poor performance compared to native games. The dominant genre has been Match3, being physics games nonexistent. The bottleneck was the rendering of the canvas element. However, the performance of mobile devices is continuously increasing and recently Apple released iOS8 with Safari supporting WebGL. Android had already this feature on high-end devices, but we expect that Apple decision of allowing hardware accelerated graphics will make this element universal on the mid- to long-term. WebGL support means that the rendering is done by the graphic card and not by the cpu, letting the cpu using its capacity to do the calculations required by a physics engine.

At this stage, Foot Chinko is one of the few HTML5 games designed to be played on mobile using a physics engine. We thought that the market was ready for a game like this. Our initial tests showed that the game could run smoothly at 60 fps on an iPad2 and a 2 years old Nexus7.

Foot Chinko uses the p2.js physics engine which is integrated on Phaser and is gaining popularity among HTML5 game engines. Its author is Stefan Hedman and there are a lot of examples on github illustrating its functionalities.

HTML5 games framework

P2.js includes collision detection contacts, friction, motors, shape types with concave shapes and the basic constraints. Compared to Box2d, which is a port of the popular C++ physics engine, it offers less features but it has a better performance.

It’s easy to use, has collision groups and kinematic, static and dynamic bodies like Box2d. However, it lacks of continuous collision detection and therefore the ball speed needs to be capped in order not to go through other bodies, but this functionality is already on p2.js roadmap.


Play Foot Chinko down here or FULL SCREEN for mobile devices!