SlideShare uma empresa Scribd logo
1 de 32
Baixar para ler offline
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)
5 tips for your HTML5 games
HIGH
     PERFORMANCE
      JAVASCRIPT
         Nicholas C. Zakas




http://oreilly.com/catalog/9780596802806

Mais conteúdo relacionado

Mais procurados

Urinary incontinence - Final Year Lecture
Urinary incontinence -  Final Year LectureUrinary incontinence -  Final Year Lecture
Urinary incontinence - Final Year LectureMr Adeel Abbas
 
전리품 분배 시스템 기획 배상욱
전리품 분배 시스템 기획 배상욱전리품 분배 시스템 기획 배상욱
전리품 분배 시스템 기획 배상욱SwooBae
 
마비노기듀얼 이야기-넥슨 김동건
마비노기듀얼 이야기-넥슨 김동건마비노기듀얼 이야기-넥슨 김동건
마비노기듀얼 이야기-넥슨 김동건강 민우
 
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012devCAT Studio, NEXON
 
윤석주, 신입 게임 프로그래머가 되는 법 - 넥슨 채용 프로세스 단계별 분석, NDC2019
윤석주, 신입 게임 프로그래머가 되는 법 - 넥슨 채용 프로세스 단계별 분석, NDC2019윤석주, 신입 게임 프로그래머가 되는 법 - 넥슨 채용 프로세스 단계별 분석, NDC2019
윤석주, 신입 게임 프로그래머가 되는 법 - 넥슨 채용 프로세스 단계별 분석, NDC2019devCAT Studio, NEXON
 
퇴근 후 해볼만한 N 가지 활동(개발자 ver.)
퇴근 후 해볼만한 N 가지 활동(개발자 ver.)퇴근 후 해볼만한 N 가지 활동(개발자 ver.)
퇴근 후 해볼만한 N 가지 활동(개발자 ver.)Seokjae Lee
 
Overactive Bladder
Overactive BladderOveractive Bladder
Overactive Bladderfitango
 
Windows system - memory개념잡기
Windows system - memory개념잡기Windows system - memory개념잡기
Windows system - memory개념잡기ChangKyu Song
 
How To Become Better Engineer
How To Become Better EngineerHow To Become Better Engineer
How To Become Better EngineerDaeMyung Kang
 
임태현, MMO 서버 개발 포스트 모템, NDC2012
임태현, MMO 서버 개발 포스트 모템, NDC2012임태현, MMO 서버 개발 포스트 모템, NDC2012
임태현, MMO 서버 개발 포스트 모템, NDC2012devCAT Studio, NEXON
 
C# Game Server
C# Game ServerC# Game Server
C# Game Serverlactrious
 
게임 개발에 자주 사용되는 디자인 패턴
게임 개발에 자주 사용되는 디자인 패턴게임 개발에 자주 사용되는 디자인 패턴
게임 개발에 자주 사용되는 디자인 패턴예림 임
 
[NDC 발표] 모바일 게임데이터분석 및 실전 활용
[NDC 발표] 모바일 게임데이터분석 및 실전 활용[NDC 발표] 모바일 게임데이터분석 및 실전 활용
[NDC 발표] 모바일 게임데이터분석 및 실전 활용Tapjoy X 5Rocks
 
안정적인 서비스 운영 2013.08
안정적인 서비스 운영   2013.08안정적인 서비스 운영   2013.08
안정적인 서비스 운영 2013.08Changyol BAEK
 
Overlapped IO와 IOCP 조사 발표
Overlapped IO와 IOCP 조사 발표Overlapped IO와 IOCP 조사 발표
Overlapped IO와 IOCP 조사 발표Kwen Won Lee
 
게임 분산 서버 구조
게임 분산 서버 구조게임 분산 서버 구조
게임 분산 서버 구조Hyunjik Bae
 
혼자서 만드는 MMO게임 서버
혼자서 만드는 MMO게임 서버혼자서 만드는 MMO게임 서버
혼자서 만드는 MMO게임 서버iFunFactory Inc.
 

Mais procurados (20)

Fasciotomy & Escharotomy
Fasciotomy & Escharotomy Fasciotomy & Escharotomy
Fasciotomy & Escharotomy
 
Urinary incontinence - Final Year Lecture
Urinary incontinence -  Final Year LectureUrinary incontinence -  Final Year Lecture
Urinary incontinence - Final Year Lecture
 
전리품 분배 시스템 기획 배상욱
전리품 분배 시스템 기획 배상욱전리품 분배 시스템 기획 배상욱
전리품 분배 시스템 기획 배상욱
 
마비노기듀얼 이야기-넥슨 김동건
마비노기듀얼 이야기-넥슨 김동건마비노기듀얼 이야기-넥슨 김동건
마비노기듀얼 이야기-넥슨 김동건
 
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
 
윤석주, 신입 게임 프로그래머가 되는 법 - 넥슨 채용 프로세스 단계별 분석, NDC2019
윤석주, 신입 게임 프로그래머가 되는 법 - 넥슨 채용 프로세스 단계별 분석, NDC2019윤석주, 신입 게임 프로그래머가 되는 법 - 넥슨 채용 프로세스 단계별 분석, NDC2019
윤석주, 신입 게임 프로그래머가 되는 법 - 넥슨 채용 프로세스 단계별 분석, NDC2019
 
퇴근 후 해볼만한 N 가지 활동(개발자 ver.)
퇴근 후 해볼만한 N 가지 활동(개발자 ver.)퇴근 후 해볼만한 N 가지 활동(개발자 ver.)
퇴근 후 해볼만한 N 가지 활동(개발자 ver.)
 
Overactive Bladder
Overactive BladderOveractive Bladder
Overactive Bladder
 
Windows system - memory개념잡기
Windows system - memory개념잡기Windows system - memory개념잡기
Windows system - memory개념잡기
 
How To Become Better Engineer
How To Become Better EngineerHow To Become Better Engineer
How To Become Better Engineer
 
임태현, MMO 서버 개발 포스트 모템, NDC2012
임태현, MMO 서버 개발 포스트 모템, NDC2012임태현, MMO 서버 개발 포스트 모템, NDC2012
임태현, MMO 서버 개발 포스트 모템, NDC2012
 
C# Game Server
C# Game ServerC# Game Server
C# Game Server
 
게임 개발에 자주 사용되는 디자인 패턴
게임 개발에 자주 사용되는 디자인 패턴게임 개발에 자주 사용되는 디자인 패턴
게임 개발에 자주 사용되는 디자인 패턴
 
[NDC 발표] 모바일 게임데이터분석 및 실전 활용
[NDC 발표] 모바일 게임데이터분석 및 실전 활용[NDC 발표] 모바일 게임데이터분석 및 실전 활용
[NDC 발표] 모바일 게임데이터분석 및 실전 활용
 
안정적인 서비스 운영 2013.08
안정적인 서비스 운영   2013.08안정적인 서비스 운영   2013.08
안정적인 서비스 운영 2013.08
 
Log design
Log designLog design
Log design
 
Overlapped IO와 IOCP 조사 발표
Overlapped IO와 IOCP 조사 발표Overlapped IO와 IOCP 조사 발표
Overlapped IO와 IOCP 조사 발표
 
게임 분산 서버 구조
게임 분산 서버 구조게임 분산 서버 구조
게임 분산 서버 구조
 
혼자서 만드는 MMO게임 서버
혼자서 만드는 MMO게임 서버혼자서 만드는 MMO게임 서버
혼자서 만드는 MMO게임 서버
 
Think and-grow-rich-action-guide
Think and-grow-rich-action-guideThink and-grow-rich-action-guide
Think and-grow-rich-action-guide
 

Semelhante a 5 tips for your HTML5 games

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 tagDavid Voyles
 
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 FlashThomas Fuchs
 
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billyRotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billynimbleltd
 
Getting Visual with Ruby Processing
Getting Visual with Ruby ProcessingGetting Visual with Ruby Processing
Getting Visual with Ruby ProcessingRichard LeBer
 
How to make a video game
How to make a video gameHow to make a video game
How to make a video gamedandylion13
 
HTML5 Canvas - Let's Draw!
HTML5 Canvas - Let's Draw!HTML5 Canvas - Let's Draw!
HTML5 Canvas - Let's Draw!Phil Reither
 
Building a Visualization Language
Building a Visualization LanguageBuilding a Visualization Language
Building a Visualization Languagejeresig
 
Introduction to Generative Art with Processing
Introduction to Generative Art with ProcessingIntroduction to Generative Art with Processing
Introduction to Generative Art with Processingstefk00
 
XNA L07–Skybox and Terrain
XNA L07–Skybox and TerrainXNA L07–Skybox and Terrain
XNA L07–Skybox and TerrainMohammad Shaker
 
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?Patrick Chanezon
 
Canvas
CanvasCanvas
CanvasRajon
 
A practical intro to BabylonJS
A practical intro to BabylonJSA practical intro to BabylonJS
A practical intro to BabylonJSHansRontheWeb
 
Stupid Canvas Tricks
Stupid Canvas TricksStupid Canvas Tricks
Stupid Canvas Tricksdeanhudson
 
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 WebRobin Hawkes
 
Interactive Mouse (Report On Processing)
Interactive Mouse (Report On Processing)Interactive Mouse (Report On Processing)
Interactive Mouse (Report On Processing)TongXu520
 
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 anymoreRemy Sharp
 

Semelhante a 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
 

Último

Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 

Último (20)

Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 

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)
  • 32. HIGH PERFORMANCE JAVASCRIPT Nicholas C. Zakas http://oreilly.com/catalog/9780596802806

Notas do Editor

  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