HTML5 game

& gamification

design from

the trenches

Pietro Polsinelli

@ppolsinelli

Saturday, March 23, 2013

Use HTML5 as a

platform for games

and gamified

solutions.

Once upon a time, there were two happy hobbits in search of an adventure. They wanted

to … 2

On all updated web enabled platforms.

More or less.

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.

Saturday, March 23, 2013

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 a

background track for the game, changing only at level

change, and a few sound effects on events. The background

audio is not responsive with respect to game events.

Being a 3-match game, events are at a slow pace so effect

sounds would be mostly played one at a time, at most two

having a partial overlap.

There is no development platform built in the last 20 years

that does not support such minimal requirements for audio

(and much, much more, see e.g. Java, Flash, Unity…) so we

started in a quite confident mood.”

From our post on HTML5 audio: http://bit.ly/html5audio5

Example: current state

of mobile HTML5 audio

Just published an extended technical enquiry in mobile HTML5 audio – won’t enter in

technical details. Demo, sources, game, all at the address above.

http://bit.ly/html5audio5

Some of the problems we found:

- no concurrent audio

- no starting sounds in

background

- problematic impact on

performance

- no perfect sync

- no preloading

Resorted to sound sprites and other hacks.

Saturday, March 23, 2013

After the first days, we felt a mixture of disappointment, rage, frustration.

Saturday, March 23, 2013

Testing available libraries, web

audio superficially works, it doesn’t

really work on mobile:

1. cross browser / device

2. doesn’t compromise overall

performance of the rest

I have audio but no animations. Or vice versa. Libraries are unreliable, not tested, not

maintained. Web standards ignored or twisted. 11

Saturday, March 23, 2013

Its not

limited

technical

skills.

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

HTML5 seems unfit by design for games.

“A game is

essentially

animations,

3D, things that

go fast played

in real time”

Getting out of

despair.inc zone

Saturday, March 23, 2013

New resolve: turn weakness into power.

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

we got audio to fit our needs. 18

Out of the trenches

Saturday, March 23, 2013

“Unfit by design” is related to

geeky commonplaces about

games & fun.

“A game is essentially

animations, 3D, things that go fast

played in real time”

Not always true.

Saturday, March 23, 2013

Example: this game I

designed is

technologically and

game-mechanically

quite simple:

http://goodmorning.

appsfuel.com/

Simple tech is not equivalent to simple structure.

Saturday, March 23, 2013

It’s a misleading

simplicity. Making it

addictive requires a

study, design, testing,

previous attempts.

The key here is “fun

because of hints of a non

trivial narrative through

a trivial game

mechanics.”

Simple and addictive

So… it’s time

to get creative! 23

Follow me in a short detour. I have to say the obscene word.

GAMIFICATION

Black hat

gamification

Def. Black Hat Gamification

Definition: Adding points, badges, leaderboards & incentives to an

existing 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 intrinsic

motivation:

“people feel

diminished autonomy

in their action, coerced

and micro managed

by badges & scores”

#badGamification

Extrinsic motivation. 27

White hat

gamification

LONG WINDED INTRO

A 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

Saturday, March 23, 2013

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

Def. White Hat Gamification

Proposal: Gamifying means creating an

application that defines a meaningful

narrative through game design elements

and… it is not a game (though it should be

fun).

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: back

to HTML5 games

Saturday, March 23, 2013

The way out is (game specific)

storyboarding.

Video game storyboarding is not

synonymous with say movie

script writing (“narrative arc”,

“hero’s journey”...).

Tom Blissel http://www.brainygamer.com/the_brainy_gamer/2013/03/brainy-gamer-

podcast-episode-40.html

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 games

and gamification.

Entire classes of games are perfectly possible. Don’t waste your energy against walls:

put them in improving your storyboarding quality.

Saturday, March 23, 2013

Side effect: living, playing a story

leaves you something.

The remembering self will be

grateful for the story that

unfolded – which it didn’t have to

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

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-228758161234600176

http://upload.wikimedia.org/wikipedia/commons/5/59/French_biplane_crash_WWI.jpg

http://4.bp.blogspot.com/-

Gj_H38w0drc/TxgAJTWhOsI/AAAAAAAADQ8/rQahw0HlJuE/s1600/blackspot.jpeg

http://www.movpins.com/dHQwMTE3MTEw/muppet-treasure-island-%281996%29/

A few references. 47