SlideShare una empresa de Scribd logo
1 de 45
Descargar para leer sin conexión
HTML5 Game Development
Introductions and state o’ the art
Pascal Rettig
@cykod
Wednesday, November 17, 2010
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
This talk
The What,The Why,The How (later)
Wednesday, November 17, 2010
What is HTML5?
Wednesday, November 17, 2010
What is HTML5?
Eh,You’ve heard this before...
Wednesday, November 17, 2010
What is HTML5
Game Development?
Basically
HTML5 Game Development = Plugin Free Game Development
Wednesday, November 17, 2010
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
What is HTML5
Game Development?
We Care a lot about:
Canvas, Video, Audio,Web Sockets
Wednesday, November 17, 2010
For the most part, we’re talking
about Canvas
Wednesday, November 17, 2010
Why Canvas?
Wednesday, November 17, 2010
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
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
HTML5 Performance
Wednesday, November 17, 2010
Here’s my current project...
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Sorry, wrong slide...
Wednesday, November 17, 2010
Wednesday, November 17, 2010
Actually it’s not that bad..
Wednesday, November 17, 2010
Where We are
1985-90 1991-94 1995-20001977-84
Wednesday, November 17, 2010
Where we are
Q4 2010 Q2 2011 Q4 2011Q1 2010
Wednesday, November 17, 2010
Awesome is:
20Years of Game Development
Compressed down to 2 years
Wednesday, November 17, 2010
Next Generation of Browsers
Hardware acceleration on Canvas
WebGL (FF, Safari, Chrome)
Audio
http://www.chromium.org/developers/demos-gpu-acceleration-and-webgl
Wednesday, November 17, 2010
Why should you care?
Top Ten Reasons
Wednesday, November 17, 2010
Reason 1:
Wednesday, November 17, 2010
It’s new and shiny
If you write a crappy 2d game and write a tutorial,
you’ll actually get some attention for it.
Wednesday, November 17, 2010
Reason 2:
Wednesday, November 17, 2010
We can get a little retro
(And again, people will actually care)
Wednesday, November 17, 2010
How about a
Commander Keen-era
platformer?
Wednesday, November 17, 2010
Reason 3:
It’s Cross-platform
You can leverage the same codebase for a whole bunch
of different platforms
(Akihabara running on iPhone,Android, Firefox, ...)
Wednesday, November 17, 2010
Reason 4:
Wednesday, November 17, 2010
It’s kinda easy
Chances are you already know some Javascript,
so there’s not that much new to learn to make simple games
Wednesday, November 17, 2010
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
Reason 6:
(follows from 5)
Wednesday, November 17, 2010
Indie games have a chance
MineCraft....that’s all I have to say
Wednesday, November 17, 2010
Reason 7:
It’s coming
Apple (obviously), Microsoft are saying it’s the future
Microsoft just adjusted their SilverLight strategy.
Wednesday, November 17, 2010
Reason 8:
Wednesday, November 17, 2010
Games are fun
(And you’re going to have to learn HTML5 anyway)
Wednesday, November 17, 2010
Reason 9:
Wednesday, November 17, 2010
It’s Open
No restrictions on tools, open standards and
“development environments”
Closed is why I stopped game development mid 2000’s
Wednesday, November 17, 2010
Reason 10:
Wednesday, November 17, 2010
You can go back to basics
And not feel like you’re wasting your time:
Needed: 2D Physics, Collision detection,Vector Math, Sprite libraries
Wednesday, November 17, 2010
Bonus Reason
Wednesday, November 17, 2010
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
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
What you can do: Present!
Libraries
JavaScript Best Practices
JavaScript Patterns
WebGL
Web Sockets
Hacking Akihabara
New Audio API
Node.js
Wednesday, November 17, 2010

Más contenido relacionado

Destacado

Morfologi Cabang Linguistik dr PERMATApintar
Morfologi Cabang Linguistik dr PERMATApintarMorfologi Cabang Linguistik dr PERMATApintar
Morfologi Cabang Linguistik dr PERMATApintarNureen Alia
 
Идеальный сайт с точки зрения поисковиков
Идеальный сайт с точки зрения поисковиковИдеальный сайт с точки зрения поисковиков
Идеальный сайт с точки зрения поисковиковMegaIndexTV
 
How to track a viber number
How to track a viber numberHow to track a viber number
How to track a viber numberashley228
 
Paris La Nuit
Paris La NuitParis La Nuit
Paris La NuitThierry_B
 
Ugi 2015 q3 earnings call presentation v final final
Ugi 2015 q3 earnings call presentation v final finalUgi 2015 q3 earnings call presentation v final final
Ugi 2015 q3 earnings call presentation v final finalUGI_Corporation
 
MusicTech
MusicTechMusicTech
MusicTechoacore
 
Putt People First Slide Show
Putt People First Slide ShowPutt People First Slide Show
Putt People First Slide Showmilliken david
 
2014 Asdenca - On the applicability of concepts from variability modelling in...
2014 Asdenca - On the applicability of concepts from variability modelling in...2014 Asdenca - On the applicability of concepts from variability modelling in...
2014 Asdenca - On the applicability of concepts from variability modelling in...CaaS EU FP7 Project
 
How to find foreclosures in nj
How to find foreclosures in njHow to find foreclosures in nj
How to find foreclosures in njRobert Orfino
 
Gizarte Sareak
Gizarte SareakGizarte Sareak
Gizarte SareakPIKAPIEDRA
 

Destacado (14)

Morfologi Cabang Linguistik dr PERMATApintar
Morfologi Cabang Linguistik dr PERMATApintarMorfologi Cabang Linguistik dr PERMATApintar
Morfologi Cabang Linguistik dr PERMATApintar
 
Encuadre Pedagogico
Encuadre PedagogicoEncuadre Pedagogico
Encuadre Pedagogico
 
Chai rửa mắt khẩn cấp Plum
Chai rửa mắt khẩn cấp PlumChai rửa mắt khẩn cấp Plum
Chai rửa mắt khẩn cấp Plum
 
Идеальный сайт с точки зрения поисковиков
Идеальный сайт с точки зрения поисковиковИдеальный сайт с точки зрения поисковиков
Идеальный сайт с точки зрения поисковиков
 
How to track a viber number
How to track a viber numberHow to track a viber number
How to track a viber number
 
Paris La Nuit
Paris La NuitParis La Nuit
Paris La Nuit
 
Ugi 2015 q3 earnings call presentation v final final
Ugi 2015 q3 earnings call presentation v final finalUgi 2015 q3 earnings call presentation v final final
Ugi 2015 q3 earnings call presentation v final final
 
MusicTech
MusicTechMusicTech
MusicTech
 
Putt People First Slide Show
Putt People First Slide ShowPutt People First Slide Show
Putt People First Slide Show
 
2014 Asdenca - On the applicability of concepts from variability modelling in...
2014 Asdenca - On the applicability of concepts from variability modelling in...2014 Asdenca - On the applicability of concepts from variability modelling in...
2014 Asdenca - On the applicability of concepts from variability modelling in...
 
How to find foreclosures in nj
How to find foreclosures in njHow to find foreclosures in nj
How to find foreclosures in nj
 
Bluf 04 11-final
Bluf 04 11-finalBluf 04 11-final
Bluf 04 11-final
 
Gizarte Sareak
Gizarte SareakGizarte Sareak
Gizarte Sareak
 
Mac black bg
Mac black bgMac black bg
Mac black bg
 

Más de Pascal Rettig

Web Typography for Front End Developers
Web Typography for Front End DevelopersWeb Typography for Front End Developers
Web Typography for Front End DevelopersPascal Rettig
 
The State of Front End Web Development 2011
The State of Front End Web Development 2011The State of Front End Web Development 2011
The State of Front End Web Development 2011Pascal Rettig
 
3D in the Browser via WebGL: It's Go Time
3D in the Browser via WebGL: It's Go Time 3D in the Browser via WebGL: It's Go Time
3D in the Browser via WebGL: It's Go Time Pascal Rettig
 
Javascript Everywhere
Javascript EverywhereJavascript Everywhere
Javascript EverywherePascal Rettig
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig
 
Cracking the Customer Acquisition Nut
Cracking the Customer Acquisition NutCracking the Customer Acquisition Nut
Cracking the Customer Acquisition NutPascal Rettig
 

Más de Pascal Rettig (9)

Web Typography for Front End Developers
Web Typography for Front End DevelopersWeb Typography for Front End Developers
Web Typography for Front End Developers
 
Javascript FTW
Javascript FTWJavascript FTW
Javascript FTW
 
The State of Front End Web Development 2011
The State of Front End Web Development 2011The State of Front End Web Development 2011
The State of Front End Web Development 2011
 
Semantic chop
Semantic chopSemantic chop
Semantic chop
 
3D in the Browser via WebGL: It's Go Time
3D in the Browser via WebGL: It's Go Time 3D in the Browser via WebGL: It's Go Time
3D in the Browser via WebGL: It's Go Time
 
Mobile HTML5
Mobile HTML5Mobile HTML5
Mobile HTML5
 
Javascript Everywhere
Javascript EverywhereJavascript Everywhere
Javascript Everywhere
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
 
Cracking the Customer Acquisition Nut
Cracking the Customer Acquisition NutCracking the Customer Acquisition Nut
Cracking the Customer Acquisition Nut
 

Último

Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 

Último (20)

Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 

HTML5 Game Development Introduction