Enviar pesquisa
Carregar
5 tips for your HTML5 games
•
50 gostaram
•
297,427 visualizações
Ernesto Jiménez
Seguir
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 32
Baixar agora
Baixar para ler offline
Recomendados
훌륭한 개발자로 성장하기
훌륭한 개발자로 성장하기
Changyol BAEK
Wonders of Willpower
Wonders of Willpower
Volunteer101
[창업자&예비창업자] 협동조합 마을기업 카페 운영
[창업자&예비창업자] 협동조합 마을기업 카페 운영
더게임체인저스
소프트웨어 학습 및 자바 웹 개발자 학습 로드맵
소프트웨어 학습 및 자바 웹 개발자 학습 로드맵
Javajigi Jaesung
PINTOS Operating system homework 2
PINTOS Operating system homework 2
Gichan Lee
Iocp advanced
Iocp advanced
Nam Hyeonuk
서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)
수보 김
개발을잘하고싶어요-네이버랩스 송기선님
개발을잘하고싶어요-네이버랩스 송기선님
NAVER D2
Mais conteúdo relacionado
Mais procurados
Fasciotomy & Escharotomy
Fasciotomy & Escharotomy
M Zaid Ur-Rehman
Urinary incontinence - Final Year Lecture
Urinary incontinence - Final Year Lecture
Mr Adeel Abbas
전리품 분배 시스템 기획 배상욱
전리품 분배 시스템 기획 배상욱
SwooBae
마비노기듀얼 이야기-넥슨 김동건
마비노기듀얼 이야기-넥슨 김동건
강 민우
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
devCAT Studio, NEXON
윤석주, 신입 게임 프로그래머가 되는 법 - 넥슨 채용 프로세스 단계별 분석, NDC2019
윤석주, 신입 게임 프로그래머가 되는 법 - 넥슨 채용 프로세스 단계별 분석, NDC2019
devCAT Studio, NEXON
퇴근 후 해볼만한 N 가지 활동(개발자 ver.)
퇴근 후 해볼만한 N 가지 활동(개발자 ver.)
Seokjae Lee
Overactive Bladder
Overactive Bladder
fitango
Windows system - memory개념잡기
Windows system - memory개념잡기
ChangKyu Song
How To Become Better Engineer
How To Become Better Engineer
DaeMyung Kang
임태현, MMO 서버 개발 포스트 모템, NDC2012
임태현, MMO 서버 개발 포스트 모템, NDC2012
devCAT Studio, NEXON
C# Game Server
C# Game Server
lactrious
게임 개발에 자주 사용되는 디자인 패턴
게임 개발에 자주 사용되는 디자인 패턴
예림 임
[NDC 발표] 모바일 게임데이터분석 및 실전 활용
[NDC 발표] 모바일 게임데이터분석 및 실전 활용
Tapjoy X 5Rocks
안정적인 서비스 운영 2013.08
안정적인 서비스 운영 2013.08
Changyol BAEK
Log design
Log design
Soo-Kyung Choi
Overlapped IO와 IOCP 조사 발표
Overlapped IO와 IOCP 조사 발표
Kwen Won Lee
게임 분산 서버 구조
게임 분산 서버 구조
Hyunjik Bae
혼자서 만드는 MMO게임 서버
혼자서 만드는 MMO게임 서버
iFunFactory Inc.
Think and-grow-rich-action-guide
Think and-grow-rich-action-guide
Sai santhi swaroop Kolanukonda
Mais procurados
(20)
Fasciotomy & Escharotomy
Fasciotomy & Escharotomy
Urinary incontinence - Final Year Lecture
Urinary incontinence - Final Year Lecture
전리품 분배 시스템 기획 배상욱
전리품 분배 시스템 기획 배상욱
마비노기듀얼 이야기-넥슨 김동건
마비노기듀얼 이야기-넥슨 김동건
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
윤석주, 신입 게임 프로그래머가 되는 법 - 넥슨 채용 프로세스 단계별 분석, NDC2019
윤석주, 신입 게임 프로그래머가 되는 법 - 넥슨 채용 프로세스 단계별 분석, NDC2019
퇴근 후 해볼만한 N 가지 활동(개발자 ver.)
퇴근 후 해볼만한 N 가지 활동(개발자 ver.)
Overactive Bladder
Overactive Bladder
Windows system - memory개념잡기
Windows system - memory개념잡기
How To Become Better Engineer
How To Become Better Engineer
임태현, MMO 서버 개발 포스트 모템, NDC2012
임태현, MMO 서버 개발 포스트 모템, NDC2012
C# Game Server
C# Game Server
게임 개발에 자주 사용되는 디자인 패턴
게임 개발에 자주 사용되는 디자인 패턴
[NDC 발표] 모바일 게임데이터분석 및 실전 활용
[NDC 발표] 모바일 게임데이터분석 및 실전 활용
안정적인 서비스 운영 2013.08
안정적인 서비스 운영 2013.08
Log design
Log design
Overlapped IO와 IOCP 조사 발표
Overlapped IO와 IOCP 조사 발표
게임 분산 서버 구조
게임 분산 서버 구조
혼자서 만드는 MMO게임 서버
혼자서 만드는 MMO게임 서버
Think and-grow-rich-action-guide
Think and-grow-rich-action-guide
Semelhante a 5 tips for your HTML5 games
Wallpaper Notifier
Wallpaper Notifier
Javier Eguiluz
HTML5 Canvas
HTML5 Canvas
Robyn Overstreet
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
David Voyles
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
Thomas Fuchs
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
nimbleltd
Getting Visual with Ruby Processing
Getting Visual with Ruby Processing
Richard LeBer
How to make a video game
How to make a video game
dandylion13
HTML5 Canvas - Let's Draw!
HTML5 Canvas - Let's Draw!
Phil Reither
Intro to HTML5
Intro to HTML5
Jussi Pohjolainen
Building a Visualization Language
Building a Visualization Language
jeresig
Peint talk
Peint talk
CyruzDraxs
Introduction to Generative Art with Processing
Introduction to Generative Art with Processing
stefk00
XNA L07–Skybox and Terrain
XNA L07–Skybox and Terrain
Mohammad Shaker
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
Patrick Chanezon
Canvas
Canvas
Rajon
A practical intro to BabylonJS
A practical intro to BabylonJS
HansRontheWeb
Stupid Canvas Tricks
Stupid Canvas Tricks
deanhudson
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
Robin Hawkes
Interactive Mouse (Report On Processing)
Interactive Mouse (Report On Processing)
TongXu520
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
Remy Sharp
Semelhante a 5 tips for your HTML5 games
(20)
Wallpaper Notifier
Wallpaper Notifier
HTML5 Canvas
HTML5 Canvas
Advanced 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 Flash
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
Getting Visual with Ruby Processing
Getting Visual with Ruby Processing
How to make a video game
How to make a video game
HTML5 Canvas - Let's Draw!
HTML5 Canvas - Let's Draw!
Intro to HTML5
Intro to HTML5
Building a Visualization Language
Building a Visualization Language
Peint talk
Peint talk
Introduction to Generative Art with Processing
Introduction to Generative Art with Processing
XNA L07–Skybox and Terrain
XNA L07–Skybox and Terrain
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
Canvas
Canvas
A practical intro to BabylonJS
A practical intro to BabylonJS
Stupid Canvas Tricks
Stupid Canvas Tricks
HTML5 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)
HTML5: 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 Tokenization
Stobox
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
KaustubhBhavsar6
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
DianaGray10
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 Live
IES VE
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
Satishbabu Gunukula
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
DianaGray10
March Patch Tuesday
March Patch Tuesday
Ivanti
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
nooralam814309
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
DanBrown980551
From the origin to the future of Open Source model and business
From the origin to the future of Open Source model and business
Francesco Corti
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 1
DianaGray10
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
MAGNIntelligence
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.pptx
Neo4j
SheDev 2024
SheDev 2024
GDSC PJATK
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
Kapil Thakar
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 Tokenization
How 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 World
UiPath 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 Live
Oracle 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.pdf
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
March Patch Tuesday
March Patch Tuesday
Graphene 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.0
From 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)
UiPath 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 Computing
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.pptx
SheDev 2024
SheDev 2024
Flow 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)
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
3.
the game loop
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
7.
frame buffering
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); }
11.
USE TWO CANVAS off-screen
visible
12.
1) DRAW OFF-SCREEN off-screen
visible
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
18.
expensive drawing
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)
27.
dirty rectangles
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
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Baixar agora