Pietro Polsinelli, responsabile Game Design di OpenLab, illustra il design e lo sviluppo di una mobile web app scritta interamente in HTML5 e Javascript che usa Facebook Open Graph come unico livello di persistenza (quindi senza alcun codice server side). La web app è particolarmente interessante perché comprende un sistema di generazione immagini on-the-fly basato su SVG e canvas.

1. Gamify with Canvas over
Facebook Open Graph
Pietro Polsinelli @ppolsinelli

2. If only I remembered who these guys are.
2
Matteo Bicocchi “pupunzi”
http://pupunzi.com
Pino Panzarella
https://twitter.com/pugusel

3. Aim: a mobile HTML5 app for expressing
your mood on Facebook.
3

4. Original mockup

5. Structure of the app
5

7. 7

8. How to Add Scalable Vector Graphics toYour
Web Page http://www.sitepoint.com/add-
svg-to-web-page/
Inline SVG XML Embedded IntoYour HTML5
Page
“The method works in all HTML5 browsers
and also permits animation, scripting and
CSS”
8

9. http://picmood.com
9

11. 11

12. Available in DOM
12

13. 13

14. From SVG to CANVAS to BASE64
Paintbrush.js
14

15. Generate Canvas -> Visual Effects

17. Persistence:
Facebook!

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

19. https://developers.facebook.com/docs
/reference/javascript/

20. 20

21. 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!

22. Get the levels right
http://www.flickr.com/
photos/dreamtea/sets/
72157634248345402/
22

23. Otherwise...
23

24. This is how it should be.
24

25. Oh gosh the cat...
25

26. 26
Zombie owner...

27. No owner?
27

28. Until there were none.
28

29. HTML5 love / hate

30. - 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

31. 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

32. HTML5 apps are ideal for
gamified solution, as integration
in web sites / intranets, social
networks is natural.
HTML5 ideal for gamified solutions.

33. My twitter stream is mostly
dedicated to game design:
http://twitter.com/ppolsinelli
A blog on game design
http://designagame.eu