Very Back to School AR Game
A fun web augmented reality game to collect school items for a chance to win school prizes....
By John Phung
2020-08-07
A Brief Overview
A fun augmented reality project for going back to school admist unwinding of COVID lockdowns in Ireland. The game concept stems from flappy bird but using facial movement to trigger game movements, in which in this case is a car. By nodding up and down, the car moves up/down and the aim is to collect school items (backpack, sandwich, jacket et al) that contribute to a point system. By participating in the game, the user can opt-in to have a chance to win school prizes.
The Features
- Point collection game with object collision
- Form submission
- Engagement tracking
- Facial recognition for game movement
The Tech
Standard HTML, CSS and Javascript was used to develop this AR game. The facial recognition functionality belongs to face-api.js which is an open source facial recognition library. The form data is stored in Firebase realtime database. All game graphics is drawn in a canvas using a sprite sheet.
Performance
The game controls require detection of the face and also particular landmarks thus there is a bottleneck in terms of updating the frames and movement based on the efficiency and optimisation of the face-api.js library. The performance of face-api.js is not that great for real time AR especially if quick feedback is required for the user. A reduction to input size for the model and a maximum of 30ms frame updates is needed to make the game perform less laggy, although not optimal. That's the trade off for a open source library.