Date post: | 28-Jan-2015 |
Category: |
Technology |
Upload: | pietro-polsinelli |
View: | 106 times |
Download: | 0 times |
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
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