답변:
불행하게도, 대답은 덜 줄입니다. 캔버스 기반 응용 프로그램 (모든 플랫폼에서 실제로)의 병목 현상이 실제로 픽셀을 그리는 데 걸리는 시간이라는 것을 알았습니다.
다음은 시도해야 할 사항입니다.
여러 개의 캔버스 레이어를 사용하십시오. 객체를 다른 레이어에 그리는 동안 배경을 한 레이어에 그리십시오 (배경 레이어 위에 위치). (참고 : 모바일 사파리에서는 시도하지 않았지만 다른 플랫폼에서는 도움이 될 수 있습니다)
변경된 스프라이트 만 다시 그리십시오. 이것은 까다 롭지 만 확실히 성능을 향상시킵니다. 아이디어는 스프라이트를 다시 그릴 필요가 있는지 여부를 저장하고 그 뒤에 필요한 배경과 함께 스프라이트를 다시 그립니다. 스프라이트가 겹칠 수있는 다른 객체에도 캐스케이드해야합니다.
Chrome에서 개발 한 것은 a) JavaScript 엔진 (V8)이 지옥만큼 빠르며 b) 최신 버전 (7,8,9)은 캔버스 렌더링과 관련하여 GPU 가속이 약간 있다는 것입니다. 모바일 하드웨어가 데스크톱 / 노트북만큼 강력하지 않다는 사실과 함께 모바일 사파리에서 동일한 성능을 발휘하는 곳은 어디에서나 얻기가 정말 어려울 것입니다.
당분간 최선의 방법은 모바일 사파리에서 게임을 목표로 삼고 다시 그리기에 집중하지 않는 게임을 만들어 보는 것입니다.
약간 긴 샷이지만 CSS 변환을 사용하여 DIV 스프라이트에서 게임을 조작 할 수 있습니까? CSS 변환 및 전환 기능이있는 iOS 장치에서 물건을 움직일 때 놀라운 성능을 얻었 기 때문에 이것을 말합니다.
이것들은 하드웨어 가속으로 적절하게 가속 된 것으로 보이며, 가속을 시작하려면 변환에 3D 형식 (즉, 번역이 아니라 translate3D)을 사용해야한다는 기괴한 경고가 있습니다. 실제로 버터가 매끄럽고 iOS 브라우저 구현은 16 요소 부동 소수점 행렬을 직접 설정하는 양식으로 매우 편리합니다.
나는 그것이 얼마나 매끄러 워 지는지에 매우 감동했습니다. 그래서 나는 이런 식으로 작성된 간단한 게임 프로젝트를 시도하는 것을 의미했습니다.
선 그리기의 경우 스트로크를 호출하기 전에 많은 lineTo 명령을 결합하십시오.
이것과 다른 팁 : http://dt.deviantart.com/blog/38471599/
나는 오래된 스레드에 대한 답변을 추가하는 것을 싫어하지만 아무도 이것을 언급하지 않은 것에 놀랐습니다.
첫 번째 게임을 작성할 때는 성능이 현명하게 작동 할 것으로 예상되는 방식으로 작성하십시오. 위의 기술은 성능을 높이기위한 좋은 출발점이지만 실제 요령은 프로파일 러입니다. Chrome 또는 Firefox에서 애플리케이션을 프로파일 링하는 경우 (힌트 : 많은 방법을 사용하여 정확한 병목 현상을 볼 수 있으므로 나중에 이동할 필요가 없습니다. 어쨌든이 작업을 수행해야합니다.) 정확한 타이밍 결과. 필자의 경우 백그라운드를 계속 다시 그리는 데 브라우저 시간의 80 %가 걸렸습니다. 전화를 끊은 후에 다른 전화가 각각 40 % 이상을 차지하는 것을 보았습니다. 한두 시간 후에, 나는 상당한 FPS 이득을 보았습니다.
나는 또한 당신의 결과를 듣고 싶습니다. 나는 똑같은 일을하려고했습니다. 나는 많은 수학을하는 것이 좋지만 캔버스를 거기에 넣 자마자 정신과 프레임 속도가 떨어집니다.
효과를 표시하는 전경 오버레이가 있습니다. 매우 높은 품질의 이미지 였지만 알파 속도가 너무 느려서 초당 더 많은 프레임 수로 완전히 떨어졌습니다.
내가 한 또 다른 일은 PHP를 사용하여 무거운 수학을 해결하는 것이 었습니다. 나는 큰 데이터 세트를 가지고 있었지만 JavaScript가 데이터를 계산하고 보여주기보다 PHP가 작동하도록하고 JavaScript가 결과를 보여 주도록 결정했습니다. JavaScript는 수학과 함께 "sehr gut"이기 때문에 시간을 많이 절약하지 못했습니다.
전체 사이트가 HTML5로되어 있으므로 백그라운드 작업자와 함께 연주하십시오.
도움이 되었기를 바랍니다.