2017-10-09 3 views
-2

저는 캔버스에 간단한 게임 (위에서 본 것)을 만들려고합니다. 좀 더 빨리 말해주세요 :여러 캔버스 요소가 성능에 미치는 영향은 무엇입니까?

1) 모든 것을 그려서 <canvas>에 그려서 다시 그려야 할 부분을 계산하십시오.

2) 다른 <canvas> 요소에 장면의 특정 부분을 그리고 필요한 경우에만 각각을 업데이트하십시오. 이 변형에서 아마도 부분 그리기를 사용할 수도 있습니다.

예를 들어지도에서 한 요소, 두 번째 요소, 세 번째 요소에 커서 등을 그릴 수 있습니다. 적을 움직일 때, 두 번째 캔버스 만 다시 그릴 수있었습니다.

어떤 옵션이 더 좋고 왜 좋은지 자세히 설명하십시오. 그리고이 문제에 대한 나의 지식을 깊게 할 수있는 책을 조언 해 주시겠습니까? 초보자를위한.

+0

귀하의 질문은 코드가 무엇을 해야할지에 따라 달라질 수 있습니다. 복잡성은 CPU에만 작용합니다. 성능을 위해 간단하게 유지하십시오. 대부분의 게임은 하나의 디스플레이 캔버스를 사용하고 모든 프레임 (1/60 초) 전체 캔버스를 다시 그립니다. 지식을 얻는 가장 좋은 방법은 IDE를 열어 코드를 작성하는 것입니다. 곧 질문에 대한 답변을 얻을 수 있습니다. BTW 추적 영역 다시 그리기 영역은 막 다른 길입니다. – Blindman67

+0

왜 다시 그리기 영역을 추적하는 것이 막 다른 길일 것이라고 생각하십니까? 나는 이것이 부하를 줄여야한다고 생각했다. –

+0

GPU는 PPS (초당 픽셀) GPU에 관한 모든 것이 빠르며, 자바 스크립트는 아니다. 무슨 뜻인지 알기 위해서 캔버스를 만들고 컨텍스트를 얻은 다음'const test = s => { var n = performance.now(); for (var i = 0; i <10000; i ++) { ctx.clearRect (0,0, s, s); } console.log (((performance.now() - n)/(s * s)));} test (10); test (300); 두 번째 호출은 픽셀을 ~ 10,000 배 빠르게 지 웁니다. – Blindman67

답변

0

대부분의 캔버스 게임은 사용자가 설명하는 계층화를 사용합니다. 가장 먼 포워드 레이어는 별도의 캔버스 또는 HTML 요소에 의해 HUD가되며 플레이어를 업그레이드하는 경우와 같이 무언가가 발생한 경우에만 변경됩니다. 그런 다음 캔버스를 그리는 방법에 따라 다릅니다. 가장 간단한 방법은 단순히지도의 일부분을 그리고 장애물이 화면에 그려지는 것입니다.

+0

다른 캔버스 위에 하나의 캔버스를 겹쳐서 표시하는 경우 해당 프레임에서 픽셀을 레이어에 쓸 경우 한 번 프레임을 합성해야합니다. 사실 DOM이 자바 스크립트에서 drawImage를 통해 (잘) 합성하는 것보다 처리 속도가 느리다는 것입니다. DOM이 인식하지 못하는 짧은 작업을 수행 할 수 있기 때문입니다. – Blindman67

+0

글쎄, 게임 캔버스처럼 빈번히 다시 그리지 않는 것이 중요하다. –

+0

레이어 중 하나에서 하나의 픽셀을 수정하는 경우 모든 레이어를 합성해야합니다. 배경 및 전경 계층 된 캔버스. 그릴 때 전경을 비워야합니다. 종료하면 DOM은 백그라운드 및 포 그라운드 캔버스를 다시 작성합니다. 하지만 배경을 화면 밖으로 유지하고'ctx.clearRect'를 사용하는 대신'ctx.drawImage (bgCanvas, 0,0)'를 지우면 화면 전체의 픽셀 쓰기를 저장하게됩니다. 계층화 된 캔버스가 마술처럼 합성되지는 않지만 drawImage 호출처럼 GPU가 필요합니다. JS보다 느린 것은 무엇입니까 ?? DOM – Blindman67

관련 문제