HTML5 Game Development Introduction
-
Upload
pascal-rettig -
Category
Technology
-
view
123 -
download
6
description
Transcript of HTML5 Game Development Introduction
![Page 1: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/1.jpg)
HTML5 Game DevelopmentIntroductions and state o’ the art
Pascal Rettig@cykod
Wednesday, November 17, 2010
![Page 2: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/2.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/3.jpg)
This talkThe What, The Why, The How (later)
Wednesday, November 17, 2010
![Page 4: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/4.jpg)
What is HTML5?
Wednesday, November 17, 2010
![Page 5: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/5.jpg)
What is HTML5?Eh, You’ve heard this before...
Wednesday, November 17, 2010
![Page 6: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/6.jpg)
What is HTML5 Game Development?
BasicallyHTML5 Game Development = Plugin Free Game Development
Wednesday, November 17, 2010
![Page 7: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/7.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/8.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/9.jpg)
For the most part, we’re talking about Canvas
Wednesday, November 17, 2010
![Page 10: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/10.jpg)
Why Canvas?
Wednesday, November 17, 2010
![Page 11: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/11.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/12.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/13.jpg)
HTML5 Performance
Wednesday, November 17, 2010
![Page 14: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/14.jpg)
Here’s my current project...
Wednesday, November 17, 2010
![Page 15: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/15.jpg)
Wednesday, November 17, 2010
![Page 16: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/16.jpg)
Sorry, wrong slide...
Wednesday, November 17, 2010
![Page 17: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/17.jpg)
Wednesday, November 17, 2010
![Page 18: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/18.jpg)
Actually it’s not that bad..
Wednesday, November 17, 2010
![Page 19: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/19.jpg)
Where We are
1985-90 1991-94 1995-20001977-84
Wednesday, November 17, 2010
![Page 20: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/20.jpg)
Where we are
Q4 2010 Q2 2011 Q4 2011Q1 2010
Wednesday, November 17, 2010
![Page 21: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/21.jpg)
Awesome is:
20 Years of Game DevelopmentCompressed down to 2 years
Wednesday, November 17, 2010
![Page 22: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/22.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/23.jpg)
Why should you care?Top Ten Reasons
Wednesday, November 17, 2010
![Page 24: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/24.jpg)
Reason 1:
Wednesday, November 17, 2010
![Page 25: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/25.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/26.jpg)
Reason 2:
Wednesday, November 17, 2010
![Page 27: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/27.jpg)
We can get a little retro(And again, people will actually care)
Wednesday, November 17, 2010
![Page 28: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/28.jpg)
How about a Commander Keen-era
platformer?
Wednesday, November 17, 2010
![Page 29: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/29.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/30.jpg)
Reason 4:
Wednesday, November 17, 2010
![Page 31: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/31.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/32.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/33.jpg)
Reason 6:(follows from 5)
Wednesday, November 17, 2010
![Page 34: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/34.jpg)
Indie games have a chanceMineCraft....that’s all I have to say
Wednesday, November 17, 2010
![Page 35: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/35.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/36.jpg)
Reason 8:
Wednesday, November 17, 2010
![Page 37: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/37.jpg)
Games are fun
(And you’re going to have to learn HTML5 anyway)Wednesday, November 17, 2010
![Page 38: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/38.jpg)
Reason 9:
Wednesday, November 17, 2010
![Page 39: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/39.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/40.jpg)
Reason 10:
Wednesday, November 17, 2010
![Page 41: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/41.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/42.jpg)
Bonus Reason
Wednesday, November 17, 2010
![Page 43: HTML5 Game Development Introduction](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/43.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/44.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7a6ad4a7959e7478b4676/html5/thumbnails/45.jpg)
What you can do: Present!Libraries
JavaScript Best PracticesJavaScript Patterns
WebGLWeb Sockets
Hacking AkihabaraNew Audio API
Node.js
Wednesday, November 17, 2010