45
HTML5 Game Development Introductions and state o’ the art Pascal Rettig @cykod Wednesday, November 17, 2010

HTML5 Game Development Introduction

Embed Size (px)

DESCRIPTION

Introductory talk given to the Boston HTML5 Game Development Meetup

Citation preview

Page 1: HTML5 Game Development Introduction

HTML5 Game DevelopmentIntroductions and state o’ the art

Pascal Rettig@cykod

Wednesday, November 17, 2010

Page 2: HTML5 Game Development Introduction

Who Are we?

0

5

10

15

20

Chrome Firefox Safari Opera IE

Favorite Browser

0

2

4

6

8

Mario Luigi Peach Wario Other

Favorite Character

Wednesday, November 17, 2010

Page 3: HTML5 Game Development Introduction

This talkThe What, The Why, The How (later)

Wednesday, November 17, 2010

Page 4: HTML5 Game Development Introduction

What is HTML5?

Wednesday, November 17, 2010

Page 5: HTML5 Game Development Introduction

What is HTML5?Eh, You’ve heard this before...

Wednesday, November 17, 2010

Page 6: HTML5 Game Development Introduction

What is HTML5 Game Development?

BasicallyHTML5 Game Development = Plugin Free Game Development

Wednesday, November 17, 2010

Page 7: HTML5 Game Development Introduction

What is HTML5 Game Development?

We don’t care much about: New Semantic Tags, MicroData

We care a little about: CSS3, Local Storage, Web Workers, GeoLocation

Wednesday, November 17, 2010

Page 8: HTML5 Game Development Introduction

What is HTML5 Game Development?

We Care a lot about:

Canvas, Video, Audio, Web Sockets

Wednesday, November 17, 2010

Page 9: HTML5 Game Development Introduction

For the most part, we’re talking about Canvas

Wednesday, November 17, 2010

Page 10: HTML5 Game Development Introduction

Why Canvas?

Wednesday, November 17, 2010

Page 11: HTML5 Game Development Introduction

Just give us a f^%#$ buffer already

DirectDraw (DirectX) all over again

Game Development on Windows didn’t flourish until developers got direct access to a fast video buffer

Wednesday, November 17, 2010

Page 12: HTML5 Game Development Introduction

But, there’s wiggle room...AVES Game engine uses DOM Objects for better performance

Browsers are optimized to render DOM objects

(But we may never see it, as they just got bought by Zynga...)

Wednesday, November 17, 2010

Page 13: HTML5 Game Development Introduction

HTML5 Performance

Wednesday, November 17, 2010

Page 14: HTML5 Game Development Introduction

Here’s my current project...

Wednesday, November 17, 2010

Page 15: HTML5 Game Development Introduction

Wednesday, November 17, 2010

Page 16: HTML5 Game Development Introduction

Sorry, wrong slide...

Wednesday, November 17, 2010

Page 17: HTML5 Game Development Introduction

Wednesday, November 17, 2010

Page 18: HTML5 Game Development Introduction

Actually it’s not that bad..

Wednesday, November 17, 2010

Page 19: HTML5 Game Development Introduction

Where We are

1985-90 1991-94 1995-20001977-84

Wednesday, November 17, 2010

Page 20: HTML5 Game Development Introduction

Where we are

Q4 2010 Q2 2011 Q4 2011Q1 2010

Wednesday, November 17, 2010

Page 21: HTML5 Game Development Introduction

Awesome is:

20 Years of Game DevelopmentCompressed down to 2 years

Wednesday, November 17, 2010

Page 22: HTML5 Game Development Introduction

Next Generation of BrowsersHardware acceleration on Canvas

WebGL (FF, Safari, Chrome)Audio

http://www.chromium.org/developers/demos-gpu-acceleration-and-webgl

Wednesday, November 17, 2010

Page 23: HTML5 Game Development Introduction

Why should you care?Top Ten Reasons

Wednesday, November 17, 2010

Page 24: HTML5 Game Development Introduction

Reason 1:

Wednesday, November 17, 2010

Page 25: HTML5 Game Development Introduction

It’s new and shinyIf you write a crappy 2d game and write a tutorial,

you’ll actually get some attention for it.

Wednesday, November 17, 2010

Page 26: HTML5 Game Development Introduction

Reason 2:

Wednesday, November 17, 2010

Page 27: HTML5 Game Development Introduction

We can get a little retro(And again, people will actually care)

Wednesday, November 17, 2010

Page 28: HTML5 Game Development Introduction

How about a Commander Keen-era

platformer?

Wednesday, November 17, 2010

Page 29: HTML5 Game Development Introduction

Reason 3:It’s Cross-platform

You can leverage the same codebase for a whole bunchof different platforms

(Akihabara running on iPhone, Android, Firefox, ...)

Wednesday, November 17, 2010

Page 30: HTML5 Game Development Introduction

Reason 4:

Wednesday, November 17, 2010

Page 31: HTML5 Game Development Introduction

It’s kinda easyChances are you already know some Javascript,

so there’s not that much new to learn to make simple games

Wednesday, November 17, 2010

Page 32: HTML5 Game Development Introduction

Reason 5: Casual gaming

Huge industry, with a consumer base that cares lot less about graphics, etc than hardcore gamers used to.

Wednesday, November 17, 2010

Page 33: HTML5 Game Development Introduction

Reason 6:(follows from 5)

Wednesday, November 17, 2010

Page 34: HTML5 Game Development Introduction

Indie games have a chanceMineCraft....that’s all I have to say

Wednesday, November 17, 2010

Page 35: HTML5 Game Development Introduction

Reason 7:It’s coming

Apple (obviously), Microsoft are saying it’s the future

Microsoft just adjusted their SilverLight strategy.

Wednesday, November 17, 2010

Page 36: HTML5 Game Development Introduction

Reason 8:

Wednesday, November 17, 2010

Page 37: HTML5 Game Development Introduction

Games are fun

(And you’re going to have to learn HTML5 anyway)Wednesday, November 17, 2010

Page 38: HTML5 Game Development Introduction

Reason 9:

Wednesday, November 17, 2010

Page 39: HTML5 Game Development Introduction

It’s OpenNo restrictions on tools, open standards and

“development environments”

Closed is why I stopped game development mid 2000’s

Wednesday, November 17, 2010

Page 40: HTML5 Game Development Introduction

Reason 10:

Wednesday, November 17, 2010

Page 41: HTML5 Game Development Introduction

You can go back to basicsAnd not feel like you’re wasting your time:

Needed: 2D Physics, Collision detection, Vector Math, Sprite libraries

Wednesday, November 17, 2010

Page 42: HTML5 Game Development Introduction

Bonus Reason

Wednesday, November 17, 2010

Page 43: HTML5 Game Development Introduction

Create Game Mechanics that don’t suck

By moving Game development into the normal browser environment, we’re taking it out of it’s special box.

Wednesday, November 17, 2010

Page 44: HTML5 Game Development Introduction

What I’ve been doing...Trying to build as many mini-engines as possible to

get a sense for performance, capabilities,design patterns, cross-browser support.

Wednesday, November 17, 2010

Page 45: HTML5 Game Development Introduction

What you can do: Present!Libraries

JavaScript Best PracticesJavaScript Patterns

WebGLWeb Sockets

Hacking AkihabaraNew Audio API

Node.js

Wednesday, November 17, 2010