HTML5 Canvas 게임에서 더블 버퍼링?

간단한 캔버스 게임 은 Chrome에서는 잘 작동하고 Mac / Linux에서는 FF가 제대로 작동하는 것 같습니다. 아직 스마트 폰이나 Windows 환경에서 테스트 할 기회가 없었습니다. 이중 버퍼링을 사용하지 않지만 JS Canvas 예제를 사용했습니다.

이중 버퍼링 사용은 언제 권장됩니까? 특정 브라우저에서만 차이가 있습니까? 성능이 크게 향상 되었습니까?

감사!

— 페 테리 히에 타 비르 타
소스

OT :이 게임은 매우 유망하고 좋은 일입니다. (인터페이스에서 훨씬 더 많은 일을해야하고, 어떤 것이 명확하지 않은 경우 등)

— o0 '.

실제로 꽤 달콤합니다. 그러나 권장 사항 : 맵 레벨을 공간 이외의 것으로 전환하십시오. 브라우저 창을 매번 스크롤하는 데 성가신 종류.

— michael.bartnett

또한 조향을 위해 화살표 키를 사용하지 마십시오. 나는 현재 안전 모드에 있으며 작은 화면에서 계속 스크롤됩니다. fyi : p

— Tor Valamo

브라우저 창이 작동하지 않도록 키를 캡처하는 것이 가능하다고 생각합니다.

— AttackingHobo

감사! A, W, D 및 반환 작업도 이제 가능합니다. 추가 의견이나 아이디어를 위해 momentumracer에게 트윗을 보내거나 petteri@momentumracer.com으로 이메일을 보내 주시면 채팅 게시판이되지 않습니다 :-).

— Petteri Hietavirta

답변:

캔버스 기반 게임의 이중 버퍼링은 확실히 성능에 영향을 미칩니다. 매 프레임마다 캔버스 크기와 동일한 픽셀을 추가로 그릴 것입니다. 캔버스 기반 게임에서 캔버스로 그리기는 대부분의 경우 가장 큰 병목 현상이며, 특히 모바일 장치에서 최대한 많이 제한하려고합니다.

Chrome에는 최신 버전의 GPU 가속 기능과 모바일 환경에서 볼 수없는 악의 빠른 JavaScript 엔진 (V8)이 있습니다. Chrome에서도 이중 버퍼링을 구현하면 속도가 느려집니다.

간단히 말해서, 이중 버퍼링 ( "찢어짐"처리)의 이점은 성능 저하가 가장 적습니다.

— 제프
소스

그러나 깜박임이나 더블 버퍼와 비슷한 것이 발견되면이 문제를 해결할 것입니다. 귀하의 질문에 대답하려면 : 깜박임이 눈에 띄는 경우 이중 버퍼를 사용하는 것이 좋습니다. 그렇지 않으면 이유도 없습니다. 이중 버퍼는 쉽게 구현하거나 제거 할 수 있습니다 (성능 손실이 깜박임보다 큰 경우).

— user8363

html5 게임을 더블 버퍼링 할 필요가 없습니다. 스크립트는 스크립트가 실행 된 후에 만 캔버스 객체를 업데이트하여 이미이를 처리합니다. http://www.mail-archive.com/whatwg@lists.whatwg.org/msg19969.html

— G1i1ch
소스

다음과 같이 이중 버퍼링을 사용하는 것으로 나타났습니다.

모든 것을 보이지 않는 캔버스 그리기
보이지 않는 캔버스를 실제 캔버스에 복사

실제로 렌더링 속도를 높이는 대신 렌더링 속도를 낮 춥니 다 (낮은 fps).

— 실버 문
소스