Fly Tizzie Fly

October 15, 2020 · 4 min read

PAINT and PLAY! - A web game generated using artwork painted by users for the Jetty Museum.

NOTE: I've taken the Live Site down now, but it was live at flytizziefly.co.uk for one year after the project.

A web game that's generated using artwork painted by users. Made as part of SOURCE — the Cumbrian Artist Digital Development Lab from Signal Film & Media for the Windermere Jetty Museum .

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

Game Template

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 Aruco markers
- 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 images
- 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:

I made them using a free SVG Editor called Inkscape and got the files ready for the site using an optimiser called SVGOMG and a SVG to React Component widget called SVG2JSX

http://verysimpledesigns.com/vectors/inkscape-tutorial-sketch-and-hatch.html