Project
A suite of web games targeting high schoolers with reading deficits.
Front end: HTML5, CSS3, Javascript
Back end: headless PHP, MySQL
Design: Photoshop, Illustrator
Getting the Right Feel
Problem: Older children who are behind in school do not want to be pandered to.
Solutions: After considering a few visual styles, a more photographic style was adopted.
The intended audience for this suite of web games is high-school aged children with reading difficulties. We were tasked with creating a fun style that was not cartoonish - so as not to turn the kids off immediately. We felt like this style could be taken a little more seriously.
Motivation
Problem: How to incentivize students to work through the program, besides the teachers' carrots and sticks.
Solutions: Part of the 'gamefication' of the application was adding a system where students could earn 'Medal Points'.
Getting a high score would award points that could be used in the 'shop' to buy trinkets and souvenirs from the places traveled to in the Expedition. This also presented an opportunity to add some trivia in the form of descriptions of the items.
Speeding Up Animations
Problem: The animations were heavy, and could slow down a weak computer.
Solution: I made use of the HTML canvas quite a bit, offloading the rendering to the GPU and opening up the CPU for more work on the UI thread.
I was trying to work for a framerate of at least 30 frames per second, roughly what video runs at. I used sprites and hidden canvasses to speed things up, and while these used more memory, the rendering passes were sped up significantly. I liked the look of a mathematical sine wave, so I incorporated the sine function from 0 to 2*PI in a custom easing function written for throwing the snowballs.
Lots of Trigonometry
Problem: I needed custom animations for use on the canvas.
Solution: Since I couldn't find one, I wrote a custom library to create the rotation animations on the canvas.
I had to brush up on my trigonometry in order to write smooth animations for the animals' legs and edge to edge sliding. A few of the challenges were making sure that the time steps between frames could be variable, and making sure that possible jank from rendering would be considered.
