HTML5 games for Cambridge University Press

React, PixiJS, matter.js

Alternative View Studios is a digital content and animation studio who make games, bespoke animations and digital tools for charity, education and health.

They have created a suite of editable game templates for the Cambridge University Press and Assessment English Language Teaching Department. Cambridge University is a world-leader in assessment, education, research and academic publishing.

The graphics, animation, music and sounds of these games can be modified using a custom-designed editor. This interface allows the team at CUP to create unique scenarios and themes for multiple game templates with a wide variety of text-based and audio-visual content suited to the subject, age group and education level targeted.

Learners can access and play the games through the Cambridge One platform on all desktop, tablet and mobile devices. Many of the games can also be played by teams in classrooms on touchscreen digital whiteboards.

The games are made using HTML, CSS and the React JavaScript framework. The content is rendered using PixiJS and the action controlled by the Matter.js physics engine.

The game and theme content is loaded via JSON files. The latest game is in 3D using Babylon.js. The editor is built in the popular PHP framework, Laravel.

I joined the project with a large, well established codebase already in place and had to get quickly up to speed. I took an existing game and stripped it down to its minimum functions. From this skeleton I created two new games; Bubble Stars and Board Game.

As I was working alongside another developer on shared as well as game-specific components, the challenge was to meet the brief within the existing metaphors and idioms of the project. I continued, converting three existing games from solo to team play: Angry Words, Blob Grow and Infinite Runner.

At Alternative View Studios I’ve also been involved in game design, maintaining the content databases, helping to manage a regular release cycle across development, QA and live servers, and making changes to the editor where it has a direct impact on the games I’m developing.

Technical skills

Core skills are those that I use every day, or at least frequently. Legacy skills are those that are deprecated or that I rarely use and my experience is likely to be a few versions behind.
Core
  • JavaScript
  • React, JSX
  • CSS3 and SASS
  • Bootstrap
  • HTML5
Production
  • Adobe CS
  • Sketch, Zeplin, Figma
  • GIT cli, GitHub, SourceTree
  • Webpack, Gulp, Grunt
  • JIRA, Confluence
  • Agile, SCRUM
  • Visual Studio Code, Sublime Text, WebStorm
  • StackOverflow
Legacy
  • AngularJS
  • jQuery
  • Foundation
  • Adobe Flash
  • ActionScript
Deep dives
Deep dives are where I’ve completed, or contributed to, a significant personal or professional project, but would not consider myself to be up to commercial standards.
  • iOS, Swift, XCode
  • C#, Unity
  • C#, .NET
  • Java
  • Vue.js
  • Node.js
  • PHP, Laravel
  • Python
  • Arduino
  • Processing
  • C++
  • Zilog Z80 assembler
  • Motorola 68000 series assembler
  • Multiple BASIC compilers
  • Pascal
  • MAX
  • FMOD

Non-technical skills

Workflow
  • Project management
  • Can work in teams or independently
  • Writing briefs
  • Documentation
  • Wireframing
  • Sympathetic to financial, business, and technical constraints
Communication
  • High standard of written English
  • Creative writing
  • Able to present technical subjects in simple terms
  • Able to communicate appropriately with clients
  • Able to communicate effectively with all roles found in a typical production environment
Personal qualities
  • Calm, friendly, and approachable
  • Solution-focused, can-do attitude
  • Willing to go outside my comfort zone
  • Curiosity
  • Eye for detail
  • Eagerness to learn new things
  • Fast learner