Enviar búsqueda
Cargar
5 tips for your HTML5 games
•
Descargar como KEY, PDF
•
50 recomendaciones
•
297,552 vistas
Ernesto Jiménez
Seguir
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 32
Descargar ahora
Recomendados
ndc 2017 어쩌다 신입 - 초보 게임 개발자 2년 간의 포스트모템
ndc 2017 어쩌다 신입 - 초보 게임 개발자 2년 간의 포스트모템
Chaeone Son
업적,칭호,타이틀 그게 뭐든간에...
업적,칭호,타이틀 그게 뭐든간에...
SeungYeon Jeong
[NDC 16] 당신은 사랑 받기 위해 태어난 사람: 3년차 게임 디자이너의 자존감 찾기
[NDC 16] 당신은 사랑 받기 위해 태어난 사람: 3년차 게임 디자이너의 자존감 찾기
Jungsoo Lee
NDC 2012 이은석 - 게임회사 취업특강 (커리어세션)
NDC 2012 이은석 - 게임회사 취업특강 (커리어세션)
Eunseok Yi
NDC 2018 레벨 디자인 튜토리얼 Level Design Tutorial
NDC 2018 레벨 디자인 튜토리얼 Level Design Tutorial
용태 이
[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들
[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들
MinGeun Park
NDC 2011 영웅전 런칭팀 박영준
NDC 2011 영웅전 런칭팀 박영준
영준 박
게임강연정리
게임강연정리
Jeong Min Hwang
Recomendados
ndc 2017 어쩌다 신입 - 초보 게임 개발자 2년 간의 포스트모템
ndc 2017 어쩌다 신입 - 초보 게임 개발자 2년 간의 포스트모템
Chaeone Son
업적,칭호,타이틀 그게 뭐든간에...
업적,칭호,타이틀 그게 뭐든간에...
SeungYeon Jeong
[NDC 16] 당신은 사랑 받기 위해 태어난 사람: 3년차 게임 디자이너의 자존감 찾기
[NDC 16] 당신은 사랑 받기 위해 태어난 사람: 3년차 게임 디자이너의 자존감 찾기
Jungsoo Lee
NDC 2012 이은석 - 게임회사 취업특강 (커리어세션)
NDC 2012 이은석 - 게임회사 취업특강 (커리어세션)
Eunseok Yi
NDC 2018 레벨 디자인 튜토리얼 Level Design Tutorial
NDC 2018 레벨 디자인 튜토리얼 Level Design Tutorial
용태 이
[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들
[KGC2011_박민근] 신입 게임 개발자가 알아야 할 것들
MinGeun Park
NDC 2011 영웅전 런칭팀 박영준
NDC 2011 영웅전 런칭팀 박영준
영준 박
게임강연정리
게임강연정리
Jeong Min Hwang
레퍼런스만 알면 언리얼 엔진이 제대로 보인다
레퍼런스만 알면 언리얼 엔진이 제대로 보인다
Lee Dustin
Fps 모드의 분석(FPS MODE ANALYSIS)
Fps 모드의 분석(FPS MODE ANALYSIS)
준태 김
Unreal animation system
Unreal animation system
TonyCms
게임 프로그래밍 기초 공부법
게임 프로그래밍 기초 공부법
Chris Ohk
GameInstance에 대해서 알아보자
GameInstance에 대해서 알아보자
TonyCms
프로그래머에게 사랑받는 게임 기획서 작성법
프로그래머에게 사랑받는 게임 기획서 작성법
Lee Sangkyoon (Kay)
김동건, 할머니가 들려주신 마비노기 개발 전설, NDC2019
김동건, 할머니가 들려주신 마비노기 개발 전설, NDC2019
devCAT Studio, NEXON
쩌는 게임 기획서, 이렇게 쓴다(How to write great design documents) from GDC 2008 (Korean)
쩌는 게임 기획서, 이렇게 쓴다(How to write great design documents) from GDC 2008 (Korean)
Kay Kim
김동건, 게임팅커가 되자, 2015년 데브캣 스튜디오 워크샵
김동건, 게임팅커가 되자, 2015년 데브캣 스튜디오 워크샵
devCAT Studio, NEXON
게임제작개론 : #8 게임 제작 프로세스
게임제작개론 : #8 게임 제작 프로세스
Seungmo Koo
NDC2011 - 카메라 시스템을 통해 살펴보는 인터랙티브 시스템 개발의 문제점
NDC2011 - 카메라 시스템을 통해 살펴보는 인터랙티브 시스템 개발의 문제점
Jubok Kim
[IGC 2016] 컴투스 김동준 - 기획 지망생은 무엇을 준비하나요?
[IGC 2016] 컴투스 김동준 - 기획 지망생은 무엇을 준비하나요?
강 민우
AAA게임_UI_최적화_및_빌드하기.pptx
AAA게임_UI_최적화_및_빌드하기.pptx
TonyCms
[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법
[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법
강 민우
NDC2012 - 완벽한 MMO 클라이언트 설계에의 도전, Part2
NDC2012 - 완벽한 MMO 클라이언트 설계에의 도전, Part2
Jubok Kim
행동 기반 게임오브젝트
행동 기반 게임오브젝트
kgun86
NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임
NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임
Imseong Kang
전형규, 가성비 좋은 렌더링 테크닉 10선, NDC2012
전형규, 가성비 좋은 렌더링 테크닉 10선, NDC2012
devCAT Studio, NEXON
기획자의 포트폴리오는 어떻게 써야 할까
기획자의 포트폴리오는 어떻게 써야 할까
Han Je Sung
[IGC 2017] 넥슨코리아 심재근 - 시스템 기획자에 대한 기본 지식과 준비과정
[IGC 2017] 넥슨코리아 심재근 - 시스템 기획자에 대한 기본 지식과 준비과정
강 민우
Wallpaper Notifier
Wallpaper Notifier
Javier Eguiluz
HTML5 Canvas
HTML5 Canvas
Robyn Overstreet
Más contenido relacionado
La actualidad más candente
레퍼런스만 알면 언리얼 엔진이 제대로 보인다
레퍼런스만 알면 언리얼 엔진이 제대로 보인다
Lee Dustin
Fps 모드의 분석(FPS MODE ANALYSIS)
Fps 모드의 분석(FPS MODE ANALYSIS)
준태 김
Unreal animation system
Unreal animation system
TonyCms
게임 프로그래밍 기초 공부법
게임 프로그래밍 기초 공부법
Chris Ohk
GameInstance에 대해서 알아보자
GameInstance에 대해서 알아보자
TonyCms
프로그래머에게 사랑받는 게임 기획서 작성법
프로그래머에게 사랑받는 게임 기획서 작성법
Lee Sangkyoon (Kay)
김동건, 할머니가 들려주신 마비노기 개발 전설, NDC2019
김동건, 할머니가 들려주신 마비노기 개발 전설, NDC2019
devCAT Studio, NEXON
쩌는 게임 기획서, 이렇게 쓴다(How to write great design documents) from GDC 2008 (Korean)
쩌는 게임 기획서, 이렇게 쓴다(How to write great design documents) from GDC 2008 (Korean)
Kay Kim
김동건, 게임팅커가 되자, 2015년 데브캣 스튜디오 워크샵
김동건, 게임팅커가 되자, 2015년 데브캣 스튜디오 워크샵
devCAT Studio, NEXON
게임제작개론 : #8 게임 제작 프로세스
게임제작개론 : #8 게임 제작 프로세스
Seungmo Koo
NDC2011 - 카메라 시스템을 통해 살펴보는 인터랙티브 시스템 개발의 문제점
NDC2011 - 카메라 시스템을 통해 살펴보는 인터랙티브 시스템 개발의 문제점
Jubok Kim
[IGC 2016] 컴투스 김동준 - 기획 지망생은 무엇을 준비하나요?
[IGC 2016] 컴투스 김동준 - 기획 지망생은 무엇을 준비하나요?
강 민우
AAA게임_UI_최적화_및_빌드하기.pptx
AAA게임_UI_최적화_및_빌드하기.pptx
TonyCms
[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법
[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법
강 민우
NDC2012 - 완벽한 MMO 클라이언트 설계에의 도전, Part2
NDC2012 - 완벽한 MMO 클라이언트 설계에의 도전, Part2
Jubok Kim
행동 기반 게임오브젝트
행동 기반 게임오브젝트
kgun86
NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임
NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임
Imseong Kang
전형규, 가성비 좋은 렌더링 테크닉 10선, NDC2012
전형규, 가성비 좋은 렌더링 테크닉 10선, NDC2012
devCAT Studio, NEXON
기획자의 포트폴리오는 어떻게 써야 할까
기획자의 포트폴리오는 어떻게 써야 할까
Han Je Sung
[IGC 2017] 넥슨코리아 심재근 - 시스템 기획자에 대한 기본 지식과 준비과정
[IGC 2017] 넥슨코리아 심재근 - 시스템 기획자에 대한 기본 지식과 준비과정
강 민우
La actualidad más candente
(20)
레퍼런스만 알면 언리얼 엔진이 제대로 보인다
레퍼런스만 알면 언리얼 엔진이 제대로 보인다
Fps 모드의 분석(FPS MODE ANALYSIS)
Fps 모드의 분석(FPS MODE ANALYSIS)
Unreal animation system
Unreal animation system
게임 프로그래밍 기초 공부법
게임 프로그래밍 기초 공부법
GameInstance에 대해서 알아보자
GameInstance에 대해서 알아보자
프로그래머에게 사랑받는 게임 기획서 작성법
프로그래머에게 사랑받는 게임 기획서 작성법
김동건, 할머니가 들려주신 마비노기 개발 전설, NDC2019
김동건, 할머니가 들려주신 마비노기 개발 전설, NDC2019
쩌는 게임 기획서, 이렇게 쓴다(How to write great design documents) from GDC 2008 (Korean)
쩌는 게임 기획서, 이렇게 쓴다(How to write great design documents) from GDC 2008 (Korean)
김동건, 게임팅커가 되자, 2015년 데브캣 스튜디오 워크샵
김동건, 게임팅커가 되자, 2015년 데브캣 스튜디오 워크샵
게임제작개론 : #8 게임 제작 프로세스
게임제작개론 : #8 게임 제작 프로세스
NDC2011 - 카메라 시스템을 통해 살펴보는 인터랙티브 시스템 개발의 문제점
NDC2011 - 카메라 시스템을 통해 살펴보는 인터랙티브 시스템 개발의 문제점
[IGC 2016] 컴투스 김동준 - 기획 지망생은 무엇을 준비하나요?
[IGC 2016] 컴투스 김동준 - 기획 지망생은 무엇을 준비하나요?
AAA게임_UI_최적화_및_빌드하기.pptx
AAA게임_UI_최적화_및_빌드하기.pptx
[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법
[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법
NDC2012 - 완벽한 MMO 클라이언트 설계에의 도전, Part2
NDC2012 - 완벽한 MMO 클라이언트 설계에의 도전, Part2
행동 기반 게임오브젝트
행동 기반 게임오브젝트
NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임
NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임
전형규, 가성비 좋은 렌더링 테크닉 10선, NDC2012
전형규, 가성비 좋은 렌더링 테크닉 10선, NDC2012
기획자의 포트폴리오는 어떻게 써야 할까
기획자의 포트폴리오는 어떻게 써야 할까
[IGC 2017] 넥슨코리아 심재근 - 시스템 기획자에 대한 기본 지식과 준비과정
[IGC 2017] 넥슨코리아 심재근 - 시스템 기획자에 대한 기본 지식과 준비과정
Similar 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
Similar 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
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Enterprise Knowledge
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Neo4j
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Enterprise Knowledge
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Delhi Call girls
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
Último
(20)
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
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)
31.
32.
HIGH
PERFORMANCE JAVASCRIPT Nicholas C. Zakas http://oreilly.com/catalog/9780596802806
Notas del 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
Descargar ahora