Html5 game and gamification design from the trenches
Upcoming SlideShare
Loading in...5
×
 

Html5 game and gamification design from the trenches

on

  • 8,114 views

Problems and opportunities in developing HTML5 games and gamified solutions.

Problems and opportunities in developing HTML5 games and gamified solutions.

Statistics

Views

Total Views
8,114
Views on SlideShare
3,744
Embed Views
4,370

Actions

Likes
10
Downloads
34
Comments
3

6 Embeds 4,370

http://designagame.eu 4276
https://twitter.com 84
http://www.atjaunojam.lv 4
http://rome.codemotionworld.com 4
http://www.onlydoo.com 1
http://callforpaper.codemotionworld.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 game and gamification design from the trenches Html5 game and gamification design from the trenches Presentation Transcript

  • HTML5 game& gamificationdesign fromthe trenchesPietro Polsinelli@ppolsinelli
  • Use HTML5 as aplatform for gamesand gamifiedsolutions.On all updated web enabled platforms.More or less.Once upon a time, there were two happy hobbits in search of an adventure. They wanted 2 to … Saturday, March 23, 2013
  • A simple mechanics, a catchy narrative, and we’ll conquer the world.
  • But they found out that it wasn’t a picnic. I was a war, where we lost hard battles.
  • First of all, what do you mean by “this works on mobile”? Wide spectrum plus do not compromise performance. We know that there are browser differences… but also devices matter a lot. In particular for games. Saturday, March 23, 2013
  • “Our audio feature requests are very limited: we want abackground track for the game, changing only at levelchange, and a few sound effects on events. The backgroundaudio is not responsive with respect to game events.Being a 3-match game, events are at a slow pace so effectsounds would be mostly played one at a time, at most twohaving a partial overlap.There is no development platform built in the last 20 yearsthat does not support such minimal requirements for audio(and much, much more, see e.g. Java, Flash, Unity…) so westarted in a quite confident mood.”From our post on HTML5 audio: http://bit.ly/html5audio5 Saturday, March 23, 2013
  • Example: current stateof mobile HTML5 audio
  • http://bit.ly/html5audio5Just published an extended technical enquiry in mobile HTML5 audio – won’t enter in technical details. Demo, sources, game, all at the address above.
  • Some of the problems we found:- no concurrent audio- no starting sounds inbackground- problematic impact onperformance- no perfect sync- no preloadingResorted to sound sprites and other hacks.
  • After the first days, we felt a mixture of disappointment, rage, frustration. Saturday, March 23, 2013
  • Testing available libraries, webaudio superficially works, it doesn’treally work on mobile:1. cross browser / device2. doesn’t compromise overallperformance of the restI have audio but no animations. Or vice versa. Libraries are unreliable, not tested, not 11 maintained. Web standards ignored or twisted. Saturday, March 23, 2013
  • Its notlimitedtechnicalskills.It’s a wall.Say not playing to audio files on Android. Simply nothing to do about it. Sprites, but “combinatorial sprites” would be absurd. Saturday, March 23, 2013
  • “A game is essentially animations, 3D, things that go fast played in real time”HTML5 seems unfit by design for games. Saturday, March 23, 2013
  • Getting out ofdespair.inc zone
  • New resolve: turn weakness into power. Saturday, March 23, 2013
  • Once you accept the fact that you have limited means, you immediately get a power refill.
  • Yes I’m not the first to say that. 17
  • Admit limited means -> Stop and think: what we do best? What we really need? This way 18 we got audio to fit our needs.
  • Out of the trenches
  • “Unfit by design” is related togeeky commonplaces aboutgames & fun.“A game is essentiallyanimations, 3D, things that go fastplayed in real time”Not always true. Saturday, March 23, 2013
  • Example: this game Idesigned istechnologically andgame-mechanicallyquite simple:http://goodmorning.appsfuel.com/Simple tech is not equivalent to simple structure. Saturday, March 23, 2013
  • It’s a misleadingsimplicity. Making itaddictive requires astudy, design, testing,previous attempts.The key here is “funbecause of hints of a nontrivial narrative througha trivial gamemechanics.”Simple and addictive Saturday, March 23, 2013
  • So… it’s timeto get creative! 23
  • GAMIFICATIONFollow me in a short detour. I have to say the obscene word.
  • Black hatgamification
  • Def. Black Hat GamificationDefinition: Adding points, badges, leaderboards & incentives to anexisting application in order to increase addictiveness.Runs under the slogan “everything is a game”.Image & ideas (a lot of them) from http://codingconduct.cc Sebastian Deterding
  • Undermining intrinsicmotivation:“people feeldiminished autonomyin their action, coercedand micro managedby badges & scores”#badGamificationExtrinsic motivation. 27
  • White hatgamification
  • LONG WINDED INTROA different idea of gamification, inspired by good videogames as they actually are.Gamify as find a real, anthropologically relevant core, and make it explicitly a theme. This is effective gamification.This is linked to game design as a methodology for other fields.You need the “meat”. I see developers everywhere thinking they can do games without the meat. YOU CAN’T. 29
  • Get attracted by a misleading analogy, web site / game.Those that come from web development, may fall in the mistake of a misleading analogy web site / web game. See http://www.slideshare.net/ppolsinelli/from-html5-websites-to-html5-games Saturday, March 23, 2013
  • Def. White Hat GamificationProposal: Gamifying means creating anapplication that defines a meaningfulnarrative through game design elementsand… it is not a game (though it should befun).Runs under the slogan: a gamified app is actually a completely new app. Yes, relates to intrinsic motivation, autonomy, learning.
  • I say that #gamification done properly MEANS storyboarding, not badges & points. 32
  • Jj Abrams tells that Jaws is a good, memorable movie because of the writing, not because of the effects. You can do the same with games http://www.ted.com/talks/j_j_abrams_mystery_box.html
  • What did the Romans do for us? Funnyfication of political discussion – but it is not meaningless or silly.
  • How can I talk about WW2 to today’s hurried reader? Limited mechanics, complex story. 35
  • Movie script writing is hard & fascinating. Idea: movie script writing -> call & response game -> 140 tweet -> that’s it! Here the storyboarding relationship is twisted, just to confuse your ideas further.
  • Melt-a-Plot – fast paced call & response writing game, 140 characters (quick) each, giggling. Like as hearts, top stories.
  • The way out: backto HTML5 games
  • The way out is (game specific)storyboarding.Video game storyboarding is notsynonymous with say moviescript writing (“narrative arc”,“hero’s journey”...).Tom Blissel http://www.brainygamer.com/the_brainy_gamer/2013/03/brainy-gamer- podcast-episode-40.html Saturday, March 23, 2013
  • 10.000.000 is a beautiful game, because it is game-specifically well scripted. Needs minimal development skills.
  • This is a liberating perspective for HTML5 gamesand gamification.Entire classes of games are perfectly possible. Don’t waste your energy against walls: put them in improving your storyboarding quality.
  • Side effect: living, playing a storyleaves you something.The remembering self will begrateful for the story thatunfolded – which it didn’t have tocreate itself.We desperately need stories: addicted gamblers project a logical story over gambling machines. Games that change tell stories. Saturday, March 23, 2013
  • Two storyboarding tools: Machinations, Balsamiq. Saturday, March 23, 2013
  • finale
  • Your own stories control you. Self-help & self-improvement can be seen as an ever strict self-dictatorship, articulated in stories. That’s our way of living 
  • My twitter stream is dedicated to game design: http://twitter.com/ppolsinelli A blog on game design http://designagame.eu
  • http://www.flickr.com/photos/drakegoodman/3401538824/sizes/l/http://www.despair.com/http://distility.com/building-brand/branding-secrets-apple-steve-jobs/http://www.kotaku.com.au/2011/08/youre-gonna-have-to-buy-rage-new-if-you-want-to-crawl-through-a-sewer/http://www.zazzle.com/warning_unfit_for_zombie_consumption_poster-228758161234600176http://upload.wikimedia.org/wikipedia/commons/5/59/French_biplane_crash_WWI.jpghttp://4.bp.blogspot.com/-Gj_H38w0drc/TxgAJTWhOsI/AAAAAAAADQ8/rQahw0HlJuE/s1600/blackspot.jpeghttp://www.movpins.com/dHQwMTE3MTEw/muppet-treasure-island-%281996%29/A few references. 47