35
OUTSIDE THE BROWSER SURVIVAL GUIDE The Challenges of Hybrid Apps and Games

OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

  • Upload
    others

  • View
    3

  • Download
    0

Embed Size (px)

Citation preview

Page 1: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

OUTSIDETHEBROWSERSURVIVALGUIDETheChallengesofHybridAppsandGames

Page 2: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

WHOAREYOU?

IkerJamardo(@judax)VPofEngineering@Ludei

Passionateaboutsoftware,techproductsandvideogames

Page 3: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

3YEARSAGO,WEHADAVISIONINTOTHEFUTURE...

Page 4: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

WEDIDNOTWANTTOCONTINUEDEVELOPINGUSINGDIFFERENT

TECHNOLOGIES

Page 5: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

WEBELIEVEDINTHEWEB...

Page 6: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

...ANDWELOVEDMAKINGANDPLAYINGGAMES

Page 7: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

HTML5(ANDWEBGL)FORGAMEDEVELOPMENTWASTHEVISION

Page 8: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

WEMADEHTML5WORKFORGAMEDEVELOPMENT

Page 9: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

ITWASEARLY(noteverybodysharedthevisionatthetime)

Page 10: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

TODAYWEHAVE20.000+GAMEDEVELOPERS1.800+GAMESPUBLISHED

Page 11: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

ANDMORETHAN100FLAPPYBIRDCLONES:(:)

http://blog.ludei.com/why-flappy-bird-should-have-been-an-html5-game/

Page 12: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

WHYHTML5Number#1reason:Cross-platform

Page 13: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

WHYHTML5Butcross-platformisnotjustdevicesorOS,butstores!

iOSAppStore

GooglePlay

Amazon

OUYA

Windows

MacOSXAppStore

Steam

Facebook

ChromeStore

MozillaMarketplace

TizenStore

...

Page 14: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

WHYHTML5...andemergingbrowserbasedmarkets.

SpilGamesKik

ClickJogosClay.ioMarketJS

MundiJuegosKongregate

...

Page 15: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

WHYHTML5Allowsrapidprototyping

Page 16: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

WHYHTML5Allthebenefitsfromtheweb:

-Wellestablishedinfrastructure

-Widelyknownplatform

-Contentondemandinit'snature

Page 17: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

WHYHTML5

Page 18: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

WHYHTML5StillcanaccessallthenativefeaturesfromJS:

In-AppPaymentsNativeAdNetworksPushNotifications

SocialNetworkNativeSDKsAnalytics

CrashReports...

Developyourownextensions

Page 19: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

WHYHTML5Greattoolsareavailable

ImpactJSConstruct2

GooPlayCanvasPixiJSPandaJSKiwiJSHaxePhaser...

Page 20: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

WHYHTML5Bigcompaniesarebettingonandsupportingit

NVidiaQualcommGoogleAmazonApple

MicrosoftIntel

SamsungNickelodeonDisney...

Page 21: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

CHALLENGESFORHTML5DEVELOPERS

Page 22: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

CHALLENGE#1

PERFORMANCE

Page 23: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

LUDEI'SAPPROACH

FAST(ANDONLY)JAVASCRIPT

EXECUTIONENVIRONMENTTOCREATE

CANVAS2DANDWEBGLIOSANDANDROIDNATIVEAPPS

Page 24: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

CHALLENGE#2

DEVICE(ANDBROWSER)FRAGMENTATION

Page 25: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

LUDEI'SAPPROACH

ACONSISTENTSETOFHTML5FEATURESANDAPIS

ACROSSMANYDEVICESANDOSVERSIONS

Page 26: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

CHALLENGE#3

STORE/PLATFORMFRAGMENTATION

Page 27: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

LUDEI'SAPPROACH

ANATIVEHYBRIDAPPWRAPPERiOS,Android,WindowsPhone,Windows,MacOSX,Linux

Page 28: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

LUDEI'SAPPROACH

THECOCOONJSCLOUDCOMPILEROneclicktomultipleplatformdeployment

Page 29: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

CHALLENGE#4

WORKFLOW

Test->Debug->Deploy

Page 30: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

LUDEI'SAPPROACH

THECOCOONJSLAUNCHERAPPBrowser-likeexperienceonthedevice

RemotedebuggingofyourJavaScript

Nativeextensions/pluginstesting

Cordova/PhoneGapcompatible

Page 31: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

CHALLENGE#5

MAKEMONEY

Page 32: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

LUDEI'SAPPROACH

CROSS-PLATFORMVALUEADDEDSERVICESMonetization

(ads&IAPs)Engagement

(notificationsandsocialnetworks)AnalyticsMultiplayerA/Btesting

Onlineappupdate...

Page 33: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

CHALLENGE#6

DEVELOPERSNEEDMORECONTROL

Page 34: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

ADVANCEDFEATURESTOPROVIDEMORECONTROLTOHTML5GAMEDEVELOPERS

Image,canvasandsoundsynchronousmemorydeallocation

Extendedfeaturesforperformanceboost(screencanvas,devicemotionsetup,CSSmatrixserialisation,...)

Vibration,gamepadAPI,...

Page 35: OUTSIDE THE BROWSER SURVIVAL GUIDE - NVIDIAon-demand.gputechconf.com/...5...games-challenges.pdf · HTML5 Outside the Browser Survival Guide: The Challenges of Hybrid Apps and Games

SHOWMESOMEDEMOS!!!