Pes

Massimiliano Pesente

Full stack developer freelance
Lead developer of @gotostudio

Experiments, considerations and some tips,
based on my daily experience

About

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.

View demo Source on github

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.