Title: Blog
Kindle users, can your reader do this: Flappy bird on e-paper
Matevz, our frontend developer, got tired of failing at Flappy Bird on his iPhone so we set ourselves a challenge. Make a Flappy Bird clone for our V tablet. In an hour. This is the result.


Kindle users, can your reader do this: Flappy bird on e-paper
3 March 2014
Logo mark

Matevz, our frontend developer, got tired of failing at flappy bird on his iPhone so we set ourselves a challenge. Make a Flappy bird clone for our V tablet. In an hour. This is the result:

Icon quotation left
We put Flappy Bird on the electronic paper.
Icon quotation right
Experiments with Flappy Bird on our electronic paper device.

This is the play-by-play:

0-24 minute

We knew that we would never finish the game in time if we had to develop it from scratch. Plus, this is the Flappy Bird we're talking about.

A game that's so simple has to have millions of clones out there. After being pulled from the net it spawned a serious create your own Flappy Bird movement, with mainstream clones (JS, Flash, Unity,...) and even hardcore projects like Game Boy and Spectrum ZX versions for more hipster inclined.

Quick search online gave us a couple of interesting implementations built in browser. We decided to go with the one that looked head and shoulders above the rest - the flappybird.io clone.

It's alive and kicking!

25-48 minute

We needed to check if the addictive potential is on par with the fiendish iPhone and Android apps. We planned just to try it out for a minute or so.

Almost 25 minutes later - addictiveness? Confirmed!

49-50 minute

We ran a quick test - we just pointed the Visionect Server stack to the URL and checked if it magically works.

What to do, what to do?

Nothing happened.

We pulled down the HTML source of the page and poked around a bit. Aha! The page runs a canvas element which changes without any DOM manipulation which would trigger a render on the display. We knew that we were on the home stretch.

51-58 minute

Matevz edited the HTML source file and:

  1. Cleaned up the design with a bit of custom CSS (reformatting it to 600 x 800px).
  2. Added our jQuery plugin.
  3. Finally sprinkled a bit of JavaScript to request a screen render every interval (so we get the animation going).
//this is a part of periodic render_tick implemented by flappybird.io 
//Don't worry, you can't overload the system as the plugin makes 
//sure we send out renders with the speed that is acceptable for 
//the device. 
if(startRendering) { 
     okular.add({ 
          bitDepth: 1, 
          A2: true, 
          width: 600, 
          height: 800 
     }); 
}

Magic. The Bird was Flapping.

Ghosting-busting aka solving the ghosting issues.

A couple trials in we figured additional screen clean-up was required. The very fast refresh needed for fast graphics causes some ghosting artifacts, which can be seen on any e-paper screen. Luckily that's easy to solve.

A simple delay of fast rendering, coupled with request for full screen refresh did the trick.

//Causes a full screen refresh with blink in 4-bit grayscale 
setTimeout(function() { 
     okular.add({ 
          bitDepth: 4, 
          width: 600, 
          height: 800 
     }); 
     startRendering = true; 
}, 1000);

Caveats

While a nice proof of concept, Flappy just kept on dying. 5FPS+ animation on e-paper does take some resources, which means that precise touch needed for the app to work is a hassle which requires some fine tuning. We were closing on the one hour mark and we needed to fix the issue while staying true to the Flappy bird mission - annoy the hell out of any gamer.

The fix is fiendishly simple - flap the wings automatically so that players think that they are controlling the Bird. But always crash into the first or second pipe.

Couldn't be closer to my experience with Flappy Bird.

 

Attribution: e-paper bird clone was based on Flappy Bird clone crated by flappybird.io.

TAGS diy ·
Arrow left Arrow up Arrow right
Development Kit Package

Try the power of epaper yourself!

GET THE VISIONECT PLATFORM DEVELOPMENT KIT
READ ALSO
Architecture meets technology: the JOAN 9.7 Limited Edition electronic paper room booking solution
Did you know? Epaper holds an image even without power
Visionect is exclusively revealing its JOAN 9.7 Limited Edition room booking solution at ORGATEC, the leading international trade fair for office and commercial real estate in Cologne, Germany. The brand new display features a 9.7-inch E Ink® screen and cutting-edge Visionect power saving technology that offers superb battery autonomy of up to half a year....
One of the best features of eInk is the fact that the screen will retain the image displayed even when there is no electricity to power the digital sign. ...
TECHNOLOGY PARTNERS