PAINT and PLAY! - A web game generated using artwork painted by users for the Jetty Museum.
LIVE SITE HERE: flytizziefly.co.uk
In the game you’ll play a Tizzie Whizie skimming over Windermere dodging boats, islands and legends to collect as many stories as you can.
My goal is to introduce the boats and stories of Windermere in a way that’s more palatable for those who’ll play on their phone rather than read the information boards in museums.
Primarily aimed at families and kids, I want to offer the chance to move from the trance-like consumption of mobile gaming to being creative and experimental with games.
How it works for users
Decorate all the game bits using paint, pencil, collage, clay… or whatever you fancy.
Snap a photo of your filled in sheet to generate your game
I'll show progress on a map of Windermere.
How it works behind the scenes
The remit from the Museum was to create something that works solely online. To do this I’ll be using a range of digital elements, many of which are completely new to me, but are all areas I’ve been keen to get to grips with for a while.
- I’ll base my game on
Google’s offline dinosaur game
- I’ve researched various online game engines, but they all seem too heavy duty for my needs so I’m going to make my own system for moving, point scoring etc.
- The printable sheets are based on things called spritesheets (aka
Texture Atlases ) which are
used in lots of games.
- They are single images containing all the artwork from a game.
- Along with the image there’s a data file containing the locations of each part of the game. E.g. Cloud: x=10, y=20, width:100, height: 50.
- I’ll use this technique to pick out all the game elements from the photographed artwork.
- For the progress bar I’m going to try a
SVG line animation
- SVGs (Scalable Vector Graphics) can be modified simply with code.
- I’ve used SVG graphics before, but I wanted to use a technique I’ve seen where you can animate a line within the graphic.
- I’ll use this to represent the game progress as a path along a map of Windermere.
- To grab the game sheet from a photo I’ll use things called
- These are markers that can be picked out from an image by analysing the pixel.
- These markers are more commonly used in Augmented Reality applications, but I’ll be using them to pick out the sheet from a user’s photo.
- I’ll use a WebGL Canvas or more spefically
an image effect library called
GLFX.js to straighten out
- It’s very unlikely a user will be able to take a photo that’s completely perpendicular to their artwork.
- WebGL is frequently used for speedy online 3D graphics, but I’ll just be using it to remove any tilt/perspective. This is probably the trickiest part of the project.
- I’ll also be using things I’ve used before to make the site: React , Node , Git , Github , Netlify
Notes for future me
Sketchy buttons etc:
This sound library made programming the sounds simple: