SlideShare a Scribd company logo
1 of 32
5 tips for your
HTML5 games
 @ernesto_jimenez
 Lead Developer, Six to Start
5 things that
   might be helpful
developing your games
the game loop
GAME LOOP
function updateGame () {
  processPlayerInput();
  updateGameLogic();
  draw();
  setTimeout(updateGame, 25);
}
GAME LOOP


• Drawing   is the most expensive

• Game   is locked while running the update

• We   are consuming resources
you don’t always need
     a game loop
frame buffering
ABOUT FLICKERING
function draw() {
  var canvas = document.getElementById('visible-canvas');
  var context = canvas.getContext('2d');
  context.fillStyle = 'red';
  // Draw 200x200 square in x: 0 y: 0
  context.fillRect(0, 0, 200, 200);
  // Draw 200x200 square in x: 200 y: 200
  context.fillRect(0, 0, 200, 200);
}
ABOUT FLICKERING
function draw() {
  var canvas = document.getElementById('visible-canvas');
  var context = canvas.getContext('2d');
  context.fillStyle = 'red';
  // Draw 200x200 square in x: 0 y: 0
  context.fillRect(0, 0, 200, 200);
  // Draw 200x200 square in x: 200 y: 200
  context.fillRect(0, 0, 200, 200);
}
ABOUT FLICKERING
function draw() {
  var canvas = document.getElementById('visible-canvas');
  var context = canvas.getContext('2d');
  context.fillStyle = 'red';
  // Draw 200x200 square in x: 0 y: 0
  context.fillRect(0, 0, 200, 200);
  // Draw 200x200 square in x: 200 y: 200
  context.fillRect(0, 0, 200, 200);
}
USE TWO CANVAS




off-screen      visible
1) DRAW OFF-SCREEN




off-screen     visible
2) COPY THE RESULT




off-screen      visible
RIGHT FRAME BUFFER

function draw() {
  var buffer = document.createElement('canvas');
  var canvas = document.getElementById('visible-canvas');
  buffer.width = canvas.width;
  buffer.height = canvas.height;

    var buffer_context = buffer.getContext('2d');
    var context = canvas.getContext('2d');

    buffer_context.fillStyle = 'red';
    // Draw ...

    context.drawImage(buffer, 0, 0);
}
WRONG FRAME BUFFER
function draw() {
  var buffer = document.createElement('canvas');
  var canvas = document.getElementById('visible-canvas');
  buffer.width = canvas.width;
  buffer.height = canvas.height;

 var buffer_context = buffer.getContext('2d');
 var context = canvas.getContext('2d');

 buffer_context.fillStyle = 'red';
 // Draw ...

  var data = buffer_context.getImageData(0, 0, canvas.width,
canvas.height);
  context.putImageData(data, 0, 0);
}
avg. time for 1,000 frame-buffer operations in Firefox 4.0b7
              right frame buffer                 wrong frame buffer


 7,000ms
 6,300ms
 5,600ms
 4,900ms
 4,200ms
 3,500ms
 2,800ms
 2,100ms
 1,400ms
  700ms
    0ms
                                   plain color
frame buffer is not
always useful right now
    Browsers are repainting the canvas after your JS
expensive drawing
getImageData
     &
putImageData
avg. time for 1,000 fillRect in Firefox 4.0b7
                 fillRect 100x100px                   fillRect 500x500px


4,000ms

3,500ms

3,000ms

2,500ms

2,000ms

1,500ms

1,000ms

 500ms

   0ms
             plain color         3 stops linear gradient       blurred shadow
fillText is cool
but it is expensive
think outside of the
       canvas
1 GAME != 1 CANVAS
combine different
canvas to produce a
   single screen
images from Belén Albeza (@ladybenko)
images from Belén Albeza (@ladybenko)
dirty rectangles
redraw only those areas
   that have changed
images from Belén Albeza (@ladybenko)
images from Belén Albeza (@ladybenko)
HIGH
     PERFORMANCE
      JAVASCRIPT
         Nicholas C. Zakas




http://oreilly.com/catalog/9780596802806

More Related Content

What's hot

カンバンゲーム ルール説明
カンバンゲーム ルール説明カンバンゲーム ルール説明
カンバンゲーム ルール説明
Yasui Tsutomu
 
홍성우, 게임 프로그래머는 어떻게 가르치나요?, NDC2018
홍성우, 게임 프로그래머는 어떻게 가르치나요?, NDC2018홍성우, 게임 프로그래머는 어떻게 가르치나요?, NDC2018
홍성우, 게임 프로그래머는 어떻게 가르치나요?, NDC2018
devCAT Studio, NEXON
 
임태현, MMO 서버 개발 포스트 모템, NDC2012
임태현, MMO 서버 개발 포스트 모템, NDC2012임태현, MMO 서버 개발 포스트 모템, NDC2012
임태현, MMO 서버 개발 포스트 모템, NDC2012
devCAT Studio, NEXON
 
이봄, 스토리텔링으로 즐기는 콘서트 - 시나리오 기획자를 위한 TRPG의 세계, NDC2019
이봄, 스토리텔링으로 즐기는 콘서트 - 시나리오 기획자를 위한 TRPG의 세계, NDC2019이봄, 스토리텔링으로 즐기는 콘서트 - 시나리오 기획자를 위한 TRPG의 세계, NDC2019
이봄, 스토리텔링으로 즐기는 콘서트 - 시나리오 기획자를 위한 TRPG의 세계, NDC2019
devCAT Studio, NEXON
 
정종필 팀장이됐어요(더저용량)
정종필 팀장이됐어요(더저용량)정종필 팀장이됐어요(더저용량)
정종필 팀장이됐어요(더저용량)
JP Jung
 
[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들
[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들
[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들
MinGeun Park
 
[1216 박민근] 게임회사취업및이직에관한조언
[1216 박민근] 게임회사취업및이직에관한조언[1216 박민근] 게임회사취업및이직에관한조언
[1216 박민근] 게임회사취업및이직에관한조언
MinGeun Park
 

What's hot (20)

쿠키런 1년, 서버개발 분투기
쿠키런 1년, 서버개발 분투기쿠키런 1년, 서버개발 분투기
쿠키런 1년, 서버개발 분투기
 
カンバンゲーム ルール説明
カンバンゲーム ルール説明カンバンゲーム ルール説明
カンバンゲーム ルール説明
 
홍성우, 게임 프로그래머는 어떻게 가르치나요?, NDC2018
홍성우, 게임 프로그래머는 어떻게 가르치나요?, NDC2018홍성우, 게임 프로그래머는 어떻게 가르치나요?, NDC2018
홍성우, 게임 프로그래머는 어떻게 가르치나요?, NDC2018
 
게임 분산 서버 구조
게임 분산 서버 구조게임 분산 서버 구조
게임 분산 서버 구조
 
임태현, MMO 서버 개발 포스트 모템, NDC2012
임태현, MMO 서버 개발 포스트 모템, NDC2012임태현, MMO 서버 개발 포스트 모템, NDC2012
임태현, MMO 서버 개발 포스트 모템, NDC2012
 
Iocコンテナについて
IocコンテナについてIocコンテナについて
Iocコンテナについて
 
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭するCEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
 
KGC 2014: 분산 게임 서버 구조론
KGC 2014: 분산 게임 서버 구조론KGC 2014: 분산 게임 서버 구조론
KGC 2014: 분산 게임 서버 구조론
 
[IGC 2017] 아마존 구승모 - 게임 엔진으로 서버 제작 및 운영까지
[IGC 2017] 아마존 구승모 - 게임 엔진으로 서버 제작 및 운영까지[IGC 2017] 아마존 구승모 - 게임 엔진으로 서버 제작 및 운영까지
[IGC 2017] 아마존 구승모 - 게임 엔진으로 서버 제작 및 운영까지
 
이봄, 스토리텔링으로 즐기는 콘서트 - 시나리오 기획자를 위한 TRPG의 세계, NDC2019
이봄, 스토리텔링으로 즐기는 콘서트 - 시나리오 기획자를 위한 TRPG의 세계, NDC2019이봄, 스토리텔링으로 즐기는 콘서트 - 시나리오 기획자를 위한 TRPG의 세계, NDC2019
이봄, 스토리텔링으로 즐기는 콘서트 - 시나리오 기획자를 위한 TRPG의 세계, NDC2019
 
NDC 2014) 별바람의 기묘한 모험 1991-2014
NDC 2014) 별바람의 기묘한 모험 1991-2014NDC 2014) 별바람의 기묘한 모험 1991-2014
NDC 2014) 별바람의 기묘한 모험 1991-2014
 
[NDC18] 만들고 붓고 부수고 - 〈야생의 땅: 듀랑고〉 서버 관리 배포 이야기
[NDC18] 만들고 붓고 부수고 - 〈야생의 땅: 듀랑고〉 서버 관리 배포 이야기[NDC18] 만들고 붓고 부수고 - 〈야생의 땅: 듀랑고〉 서버 관리 배포 이야기
[NDC18] 만들고 붓고 부수고 - 〈야생의 땅: 듀랑고〉 서버 관리 배포 이야기
 
コンテナDojo #4:VSCodeを使ったPodmanコンテナアプリ開発.pdf
コンテナDojo #4:VSCodeを使ったPodmanコンテナアプリ開発.pdfコンテナDojo #4:VSCodeを使ったPodmanコンテナアプリ開発.pdf
コンテナDojo #4:VSCodeを使ったPodmanコンテナアプリ開発.pdf
 
[IGC2015] 엔씨소프트 김주용-내가 사랑한 MMO들
[IGC2015] 엔씨소프트 김주용-내가 사랑한 MMO들[IGC2015] 엔씨소프트 김주용-내가 사랑한 MMO들
[IGC2015] 엔씨소프트 김주용-내가 사랑한 MMO들
 
정종필 팀장이됐어요(더저용량)
정종필 팀장이됐어요(더저용량)정종필 팀장이됐어요(더저용량)
정종필 팀장이됐어요(더저용량)
 
게임 프로그래밍 기초 공부법
게임 프로그래밍 기초 공부법게임 프로그래밍 기초 공부법
게임 프로그래밍 기초 공부법
 
[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들
[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들
[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들
 
[1216 박민근] 게임회사취업및이직에관한조언
[1216 박민근] 게임회사취업및이직에관한조언[1216 박민근] 게임회사취업및이직에관한조언
[1216 박민근] 게임회사취업및이직에관한조언
 
Ndc14 분산 서버 구축의 ABC
Ndc14 분산 서버 구축의 ABCNdc14 분산 서버 구축의 ABC
Ndc14 분산 서버 구축의 ABC
 
ブルックスのいう銀の弾丸とは何か?
ブルックスのいう銀の弾丸とは何か?ブルックスのいう銀の弾丸とは何か?
ブルックスのいう銀の弾丸とは何か?
 

Similar to 5 tips for your HTML5 games

Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billyRotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
nimbleltd
 
XNA L07–Skybox and Terrain
XNA L07–Skybox and TerrainXNA L07–Skybox and Terrain
XNA L07–Skybox and Terrain
Mohammad Shaker
 

Similar to 5 tips for your HTML5 games (20)

Wallpaper Notifier
Wallpaper NotifierWallpaper Notifier
Wallpaper Notifier
 
HTML5 Canvas
HTML5 CanvasHTML5 Canvas
HTML5 Canvas
 
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tagAdvanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
 
I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
 
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billyRotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
 
Getting Visual with Ruby Processing
Getting Visual with Ruby ProcessingGetting Visual with Ruby Processing
Getting Visual with Ruby Processing
 
How to make a video game
How to make a video gameHow to make a video game
How to make a video game
 
HTML5 Canvas - Let's Draw!
HTML5 Canvas - Let's Draw!HTML5 Canvas - Let's Draw!
HTML5 Canvas - Let's Draw!
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Building a Visualization Language
Building a Visualization LanguageBuilding a Visualization Language
Building a Visualization Language
 
Peint talk
Peint talkPeint talk
Peint talk
 
Introduction to Generative Art with Processing
Introduction to Generative Art with ProcessingIntroduction to Generative Art with Processing
Introduction to Generative Art with Processing
 
XNA L07–Skybox and Terrain
XNA L07–Skybox and TerrainXNA L07–Skybox and Terrain
XNA L07–Skybox and Terrain
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
 
Canvas
CanvasCanvas
Canvas
 
A practical intro to BabylonJS
A practical intro to BabylonJSA practical intro to BabylonJS
A practical intro to BabylonJS
 
Stupid Canvas Tricks
Stupid Canvas TricksStupid Canvas Tricks
Stupid Canvas Tricks
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
 
Interactive Mouse (Report On Processing)
Interactive Mouse (Report On Processing)Interactive Mouse (Report On Processing)
Interactive Mouse (Report On Processing)
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
 

Recently uploaded

Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 
Revolutionizing SAP® Processes with Automation and Artificial Intelligence
Revolutionizing SAP® Processes with Automation and Artificial IntelligenceRevolutionizing SAP® Processes with Automation and Artificial Intelligence
Revolutionizing SAP® Processes with Automation and Artificial Intelligence
Precisely
 

Recently uploaded (20)

How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Revolutionizing SAP® Processes with Automation and Artificial Intelligence
Revolutionizing SAP® Processes with Automation and Artificial IntelligenceRevolutionizing SAP® Processes with Automation and Artificial Intelligence
Revolutionizing SAP® Processes with Automation and Artificial Intelligence
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxVector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptx
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 

5 tips for your HTML5 games

  • 1. 5 tips for your HTML5 games @ernesto_jimenez Lead Developer, Six to Start
  • 2. 5 things that might be helpful developing your games
  • 4. GAME LOOP function updateGame () { processPlayerInput(); updateGameLogic(); draw(); setTimeout(updateGame, 25); }
  • 5. GAME LOOP • Drawing is the most expensive • Game is locked while running the update • We are consuming resources
  • 6. you don’t always need a game loop
  • 8. ABOUT FLICKERING function draw() { var canvas = document.getElementById('visible-canvas'); var context = canvas.getContext('2d'); context.fillStyle = 'red'; // Draw 200x200 square in x: 0 y: 0 context.fillRect(0, 0, 200, 200); // Draw 200x200 square in x: 200 y: 200 context.fillRect(0, 0, 200, 200); }
  • 9. ABOUT FLICKERING function draw() { var canvas = document.getElementById('visible-canvas'); var context = canvas.getContext('2d'); context.fillStyle = 'red'; // Draw 200x200 square in x: 0 y: 0 context.fillRect(0, 0, 200, 200); // Draw 200x200 square in x: 200 y: 200 context.fillRect(0, 0, 200, 200); }
  • 10. ABOUT FLICKERING function draw() { var canvas = document.getElementById('visible-canvas'); var context = canvas.getContext('2d'); context.fillStyle = 'red'; // Draw 200x200 square in x: 0 y: 0 context.fillRect(0, 0, 200, 200); // Draw 200x200 square in x: 200 y: 200 context.fillRect(0, 0, 200, 200); }
  • 13. 2) COPY THE RESULT off-screen visible
  • 14. RIGHT FRAME BUFFER function draw() { var buffer = document.createElement('canvas'); var canvas = document.getElementById('visible-canvas'); buffer.width = canvas.width; buffer.height = canvas.height; var buffer_context = buffer.getContext('2d'); var context = canvas.getContext('2d'); buffer_context.fillStyle = 'red'; // Draw ... context.drawImage(buffer, 0, 0); }
  • 15. WRONG FRAME BUFFER function draw() { var buffer = document.createElement('canvas'); var canvas = document.getElementById('visible-canvas'); buffer.width = canvas.width; buffer.height = canvas.height; var buffer_context = buffer.getContext('2d'); var context = canvas.getContext('2d'); buffer_context.fillStyle = 'red'; // Draw ... var data = buffer_context.getImageData(0, 0, canvas.width, canvas.height); context.putImageData(data, 0, 0); }
  • 16. avg. time for 1,000 frame-buffer operations in Firefox 4.0b7 right frame buffer wrong frame buffer 7,000ms 6,300ms 5,600ms 4,900ms 4,200ms 3,500ms 2,800ms 2,100ms 1,400ms 700ms 0ms plain color
  • 17. frame buffer is not always useful right now Browsers are repainting the canvas after your JS
  • 19. getImageData & putImageData
  • 20. avg. time for 1,000 fillRect in Firefox 4.0b7 fillRect 100x100px fillRect 500x500px 4,000ms 3,500ms 3,000ms 2,500ms 2,000ms 1,500ms 1,000ms 500ms 0ms plain color 3 stops linear gradient blurred shadow
  • 21. fillText is cool but it is expensive
  • 22. think outside of the canvas
  • 23. 1 GAME != 1 CANVAS
  • 24. combine different canvas to produce a single screen
  • 25. images from Belén Albeza (@ladybenko)
  • 26. images from Belén Albeza (@ladybenko)
  • 28. redraw only those areas that have changed
  • 29. images from Belén Albeza (@ladybenko)
  • 30. images from Belén Albeza (@ladybenko)
  • 31.
  • 32. HIGH PERFORMANCE JAVASCRIPT Nicholas C. Zakas http://oreilly.com/catalog/9780596802806

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n