A racing game built with Paper.js
A few months ago I was asked to develop a game with predominantly Vector graphics and simple 2D physics for movements and animations.
I only knew Paper.js “by sight”, therefore I decided to test it before using it for a business project; to do this I created this tiny 2D racing game.
I wanted to partially recreate the physics and gameplay of Racer; I recalled this splendid Chrome Experiment developed by Active Theory and I remembered that it had been developed in Paper.js, it had good physics and great performance on mobile also. Moreover (thanks to the active theory coders!) I could also find this HTML5 ROCK case study, a great place where to start.
I used Paper.js both for designing the track by reading an SVG file created with Illustrator, and for all the calculations regarding velocity, location, rotation, tangential velocity, etc.
Finally I added a basic UI and some basic logic to make the whole playable.
Considerations and tips
- The learning curve of Paper.js is very good: if you want to play with it you will get a lot of satisfaction in a short time;
- I didn’t really make the most of the drawing API, but the examples on the websites showcase its incredible potential;
- As far as vector mathematics is concerned, all the APIs I expected to find are present and well done, so thumbs up.
In general I strongly recommend this library, ideal for all those projects that require an important use of graphics and vector calculus.
Two more things
- I haven’t tested the code on obsolete browsers at all, that’s what I do for a living so I try to avoid it whenever I can :)
- Therefore, I will try to avoid JQuery, since I haven’t got backward compatibility problems, I’m trying to detox myself.