SlideShare a Scribd company logo
1 of 13
Matt Rosenzweig – Midnight Oil Creative GAMES
What We’re Covering HTML5 WTF? A Brief History of Timewasters HTML5 Games Today Going Native The Future Examples Q&A
HTML5 WTF? The next evolution of HTML; last major update was HTML4 in 1999 Lots of awesome new features <video>, <audio>, <canvas> and other new multimedia goodness Richer semantics via <header>, <footer>, <article>, etc Offline storage, web workers, geolocation, forms Not officially part of HTML5, but CSS3 brings a wealth of new features to enable greater styling of HTML content HTML5 = HTML5 + CSS3 + JavaScript Support: Safari, Chrome, Firefox, Opera, IE9 (sort of)
A Brief History of Timewasters Casual games: simple rules, no required long-term time commitment, low production & distribution costs (Boyes 2008) Analog: Checkers, Solitaire, Beer Pong Early Digital: Pac Man, Duck Hunt, Tetris Early Online: Bejeweled, Kongregate, Y! Games Early Mobile: Snake, N-Gage
A Brief History of Timewasters Current Casual Gaming Trends Hybrid: Geocaching, Alternate Reality Advanced Mobile: Angry Birds, Doodle Jump, Cut The Rope Social: Farmville, Mafia Wars Console: Wii Classics, LittleBigPlanet
HTML5 Games Today Promising proof-of-concepts HTML5 Game Libraries: Impact, Akihabara, Rocket Engine, LimeJS They help with the heavy lifting: Asset management, animation, physics, keyboard / mouse input, processing of sounds and graphics Hybrid model: Open Source with commercial licensing = free to use / experiment with, cheap to commercialize
HTML5 Games Today Pros Cross Platform: Any device with an HTML5-enabled browser (including about 160 million iOS devices) More CPU-efficient than Flash Frictionless distribution: Put it online and the entire world can play it Client-Server / Network functionality: Just like building any other online application
HTML5 Games Today Cons 3D (via WebGL) is only in an experimental state Cross-browser complications due to differences in HTML5 implementations Discovery: No central repository store for HTML5 games Game development is hard, and we gotta put food on the table (monetization) Hampered by committee-driven standards formulation (the W3C), proprietary solutions have already solved most of these cons (iOS / App Store is the best example)
Going Native Generally speaking, native game solutions are kicking HTML5’s ass iOS: 3D, monetization via purchase, ad-supported, in-app purchases, licked the discovery problem too Android: Large install base, ad-supported games generate upwards of five-figure monthly incomes for developers Console / Desktop: Far more advanced graphics capabilities, support for hardware controllers, decades-old industry ecosystem to support future advancement (retail / dev / marketing / consumers)
The Future 3D support coming via WebGL (soon-ish) IE9 brings HTML5 support (but IE6 – IE8 are still out there and hard to upgrade) Advancements in hardware acceleration (better graphics faster)
The Future The Takeaway: In the next several years, HTML5 will probably have all the technology required to make great contemporary games. The problems that still need to be solved are largely business-related: Distribution, discovery, and  monetization. HTML5 developers should embrace what makes the platform unique and create games based on those qualities, but it will probably require a fundamental shift in how we think about both creating and playing games for that to happen.
Examples Roundball Biolab Disaster ZType
Q&A Questions? Ask away! If we run out of time, you can contact me here: Matt Rosenzweig Sr. Front End Developer Midnight Oil Creative mrosenzweig@midnightoilcreative.com

More Related Content

Similar to HTML5 Games - An Introduction

The Future of Flash
The Future of FlashThe Future of Flash
The Future of FlashChris Black
 
HTML5 Technical Executive Summary
HTML5 Technical Executive SummaryHTML5 Technical Executive Summary
HTML5 Technical Executive SummaryGilad Khen
 
HTML5 and video
HTML5 and videoHTML5 and video
HTML5 and videoMediaMosa
 
HTML5 & JavaScript Games
HTML5 & JavaScript GamesHTML5 & JavaScript Games
HTML5 & JavaScript GamesRobin Hawkes
 
Major HTML5 Game Development Opportunities to Know in 2024.pptx
Major HTML5 Game Development Opportunities to Know in 2024.pptxMajor HTML5 Game Development Opportunities to Know in 2024.pptx
Major HTML5 Game Development Opportunities to Know in 2024.pptxRed Apple Technologies
 
Viva Voce Presentation
Viva Voce PresentationViva Voce Presentation
Viva Voce Presentationkieranmmedia
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?Reto Meier
 
Real Benefits of HTML5 for Games (MS Campfire, 2012)
Real Benefits of HTML5 for Games (MS Campfire, 2012)Real Benefits of HTML5 for Games (MS Campfire, 2012)
Real Benefits of HTML5 for Games (MS Campfire, 2012)Juha Paananen
 
Mdc2010 Casual Game Dev
Mdc2010 Casual Game DevMdc2010 Casual Game Dev
Mdc2010 Casual Game Devmomobangalore
 
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh QuangOGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quangogdc
 
Ogdc 2013 cross platform game development with html5
Ogdc 2013 cross platform game development with html5Ogdc 2013 cross platform game development with html5
Ogdc 2013 cross platform game development with html5Son Aris
 
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile DevicesBringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile DevicesBrian Crescimanno
 
Landscape Of Virtual World Systems
Landscape Of Virtual World SystemsLandscape Of Virtual World Systems
Landscape Of Virtual World SystemsTim Holt
 
Where Design and Development Meet: Cross Platform Mobile Experiences
Where Design and Development Meet: Cross Platform Mobile Experiences Where Design and Development Meet: Cross Platform Mobile Experiences
Where Design and Development Meet: Cross Platform Mobile Experiences Seattle Interactive Conference
 
Video Game Industry Trends
Video Game Industry TrendsVideo Game Industry Trends
Video Game Industry TrendsAlex Ferrara
 

Similar to HTML5 Games - An Introduction (20)

The Future of Flash
The Future of FlashThe Future of Flash
The Future of Flash
 
Native vs web apps
Native vs web appsNative vs web apps
Native vs web apps
 
HTML5 Technical Executive Summary
HTML5 Technical Executive SummaryHTML5 Technical Executive Summary
HTML5 Technical Executive Summary
 
Presentation3
Presentation3Presentation3
Presentation3
 
Here comes html5
Here comes html5Here comes html5
Here comes html5
 
HTML5 and video
HTML5 and videoHTML5 and video
HTML5 and video
 
HTML5 & JavaScript Games
HTML5 & JavaScript GamesHTML5 & JavaScript Games
HTML5 & JavaScript Games
 
Major HTML5 Game Development Opportunities to Know in 2024.pptx
Major HTML5 Game Development Opportunities to Know in 2024.pptxMajor HTML5 Game Development Opportunities to Know in 2024.pptx
Major HTML5 Game Development Opportunities to Know in 2024.pptx
 
Viva Voce Presentation
Viva Voce PresentationViva Voce Presentation
Viva Voce Presentation
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
 
Real Benefits of HTML5 for Games (MS Campfire, 2012)
Real Benefits of HTML5 for Games (MS Campfire, 2012)Real Benefits of HTML5 for Games (MS Campfire, 2012)
Real Benefits of HTML5 for Games (MS Campfire, 2012)
 
HTML5
HTML5HTML5
HTML5
 
Mdc2010 Casual Game Dev
Mdc2010 Casual Game DevMdc2010 Casual Game Dev
Mdc2010 Casual Game Dev
 
Html 5 Features And Benefits
Html 5 Features And Benefits  Html 5 Features And Benefits
Html 5 Features And Benefits
 
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh QuangOGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
 
Ogdc 2013 cross platform game development with html5
Ogdc 2013 cross platform game development with html5Ogdc 2013 cross platform game development with html5
Ogdc 2013 cross platform game development with html5
 
Bringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile DevicesBringing HTML5 Video to Mobile Devices
Bringing HTML5 Video to Mobile Devices
 
Landscape Of Virtual World Systems
Landscape Of Virtual World SystemsLandscape Of Virtual World Systems
Landscape Of Virtual World Systems
 
Where Design and Development Meet: Cross Platform Mobile Experiences
Where Design and Development Meet: Cross Platform Mobile Experiences Where Design and Development Meet: Cross Platform Mobile Experiences
Where Design and Development Meet: Cross Platform Mobile Experiences
 
Video Game Industry Trends
Video Game Industry TrendsVideo Game Industry Trends
Video Game Industry Trends
 

Recently uploaded

MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024The Digital Insurer
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKJago de Vreede
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...apidays
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamUiPathCommunity
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024The Digital Insurer
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistandanishmna97
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney
 

Recently uploaded (20)

MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 

HTML5 Games - An Introduction

  • 1. Matt Rosenzweig – Midnight Oil Creative GAMES
  • 2. What We’re Covering HTML5 WTF? A Brief History of Timewasters HTML5 Games Today Going Native The Future Examples Q&A
  • 3. HTML5 WTF? The next evolution of HTML; last major update was HTML4 in 1999 Lots of awesome new features <video>, <audio>, <canvas> and other new multimedia goodness Richer semantics via <header>, <footer>, <article>, etc Offline storage, web workers, geolocation, forms Not officially part of HTML5, but CSS3 brings a wealth of new features to enable greater styling of HTML content HTML5 = HTML5 + CSS3 + JavaScript Support: Safari, Chrome, Firefox, Opera, IE9 (sort of)
  • 4. A Brief History of Timewasters Casual games: simple rules, no required long-term time commitment, low production & distribution costs (Boyes 2008) Analog: Checkers, Solitaire, Beer Pong Early Digital: Pac Man, Duck Hunt, Tetris Early Online: Bejeweled, Kongregate, Y! Games Early Mobile: Snake, N-Gage
  • 5. A Brief History of Timewasters Current Casual Gaming Trends Hybrid: Geocaching, Alternate Reality Advanced Mobile: Angry Birds, Doodle Jump, Cut The Rope Social: Farmville, Mafia Wars Console: Wii Classics, LittleBigPlanet
  • 6. HTML5 Games Today Promising proof-of-concepts HTML5 Game Libraries: Impact, Akihabara, Rocket Engine, LimeJS They help with the heavy lifting: Asset management, animation, physics, keyboard / mouse input, processing of sounds and graphics Hybrid model: Open Source with commercial licensing = free to use / experiment with, cheap to commercialize
  • 7. HTML5 Games Today Pros Cross Platform: Any device with an HTML5-enabled browser (including about 160 million iOS devices) More CPU-efficient than Flash Frictionless distribution: Put it online and the entire world can play it Client-Server / Network functionality: Just like building any other online application
  • 8. HTML5 Games Today Cons 3D (via WebGL) is only in an experimental state Cross-browser complications due to differences in HTML5 implementations Discovery: No central repository store for HTML5 games Game development is hard, and we gotta put food on the table (monetization) Hampered by committee-driven standards formulation (the W3C), proprietary solutions have already solved most of these cons (iOS / App Store is the best example)
  • 9. Going Native Generally speaking, native game solutions are kicking HTML5’s ass iOS: 3D, monetization via purchase, ad-supported, in-app purchases, licked the discovery problem too Android: Large install base, ad-supported games generate upwards of five-figure monthly incomes for developers Console / Desktop: Far more advanced graphics capabilities, support for hardware controllers, decades-old industry ecosystem to support future advancement (retail / dev / marketing / consumers)
  • 10. The Future 3D support coming via WebGL (soon-ish) IE9 brings HTML5 support (but IE6 – IE8 are still out there and hard to upgrade) Advancements in hardware acceleration (better graphics faster)
  • 11. The Future The Takeaway: In the next several years, HTML5 will probably have all the technology required to make great contemporary games. The problems that still need to be solved are largely business-related: Distribution, discovery, and monetization. HTML5 developers should embrace what makes the platform unique and create games based on those qualities, but it will probably require a fundamental shift in how we think about both creating and playing games for that to happen.
  • 12. Examples Roundball Biolab Disaster ZType
  • 13. Q&A Questions? Ask away! If we run out of time, you can contact me here: Matt Rosenzweig Sr. Front End Developer Midnight Oil Creative mrosenzweig@midnightoilcreative.com