Skip to main content

Fly Tizzie Fly

· 4 min read

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

LIVE SITE HERE: flytizziefly.co.uk​

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

Using Sound​

This sound library made programming the sounds simple:

https://joshwcomeau.com/react/announcing-use-sound-react-hook/#sprites

Finding sounds:

https://freesound.org/

https://www.zapsplat.com/