Gamify with Canvas over

Facebook Open Graph

Pietro Polsinelli @ppolsinelli

If only I remembered who these guys are.

2

Matteo Bicocchi “pupunzi” http://pupunzi.com

Pino Panzarella https://twitter.com/pugusel

Aim: a mobile HTML5 app for expressing

your mood on Facebook. 3

Original mockup

Structure of the app

5

7

How to Add Scalable Vector Graphics to Your

Web Page http://www.sitepoint.com/add-

svg-to-web-page/

Inline SVG XML Embedded Into Your HTML5

Page

“The method works in all HTML5 browsers

and also permits animation, scripting and

CSS”

8

http://picmood.com 9

11

Available in DOM 12

13

From SVG to CANVAS to BASE64

Paintbrush.js 14

Generate Canvas -> Visual Effects

Persistence:

Facebook!

Encode in image in POST -> in HD -> post to FB with FB- JS

API

https://developers.facebook.com/docs

/reference/javascript/

20

Nice that:

- “works” in the limited means of the

mobile browser JS environment. No

(app specific) server, no database.

P.S. : Same for pictures and videos

taken from your phone!!!

Scales!

Get the levels right

http://www.flickr.com/

photos/dreamtea/sets/

72157634248345402/

22

Otherwise...

23

This is how it should be.

24

Oh gosh the cat...

25

26

Zombie owner...

No owner?

27

Until there were none. 28

HTML5 love / hate

- So little is implemented uniformly of HTML5

specification

- Android’s …

- Media performance (sound, animation) seems

intentionally botched.

“An HTML5 audio library for mobile that tries to actually

work” http://pupunzi.open-lab.com/2013/03/13/making-html5-audio-actually-

work-on-mobile/

HATE 30

Practical, low cost aspects of html5:

- Ease of reform / release often / expand:

This is a great advantage in balancing / fun

phase which in games is a considerable part

- CTRL-R compile

- Used to beautiful fonts / typographic design.

It’s a nightmare in say Unity3d.

LOVE 31

HTML5 apps are ideal for

gamified solution, as integration

in web sites / intranets, social

networks is natural.

HTML5 ideal for gamified solutions.

My twitter stream is mostly dedicated to game design:

http://twitter.com/ppolsinelli

A blog on game design http://designagame.eu