캔버스 다중 이미지 및 모바일 브라우저 성능

Question

HTML5 캔버스로 모바일 브라우저 성능에 대해 글을 남겼습니다. 나는 간단한 마리오 브라더스 같은 간단한 플랫폼 게임을 만들려고 노력하고있다. 나는 주인공과 점프 플랫폼을 모방 한 두 개의 적과 블록을 가지고있다. 캐릭터와 적들은 drawImage에 의해 그려지며 블럭은 fillRect에 의해 제거됩니다 (당장은 나중에 drawImage가 될 것입니다). 모든 것은 움직입니다 (문자가 움직일 때, 문자 X는 블록 X에 추가됩니다).

은 지금은 어떤 임의의 동전을 추가하기 위해 노력하고있어. 먼저 나는 무작위로 X와 Y와 객체 배열을 만드는거야

var coinB = new Image(); 
coinB.src = 'coin.png'; 

다음 이미지에 대한 변수를 만들어 :

을 :

var k; 
for (k = 0; k <= 30; k++) { 
    coins.push({ 
     x: Math.floor(Math.random() * 36 + 4) * 100, 
     y: Math.floor(Math.random() * 3 + 1) * 100, 
     width:25, 
     height:25 
    }); 
} 

그리고 그 후 나는 모든 것을 선택하고 그리려고

var l; 
/* left is the character X for the animation */ 
for (l = 0; l < coins.length; l++) { 
    ctx.drawImage(coinB, coins[l].x - left, coins[l].y, coins[l].width, coins[l].height); 
} 

모든 requestAnimFrame에 함수()이다.

불행하게도 그 후, 게임은 초당 30 프레임에 대한 모바일 파이어 폭스 (크롬 모바일 20 ~ 30 FPS)에 (동전없이 이전에 60 FPS에서)이있다. 그래서 그것은 동전으로 fps의 절반 정도입니다.

이미지를 가져오고 그들을 잡아하는 더 좋은 방법이 있나요? 예를 들어, 과 동일하게 모든 것에 대해 (주인 = 새 이미지(), 적 = 새 이미지(), 동전 = 새 이미지() = 요법)에 대해 new Image()을 수행합니다. 나는 그것이 최선의 해결책이 아니라고 생각한다. 더 나은 성능을 얻기 위해 (fps를 줄이기 위해) 어떻게해야합니까? 도움 주셔서 감사합니다.

Answer 1

나는 비슷한 경험을했습니다. 팁과 트릭을 찾았지만 성능 문제를 해결할 수있는 마법의 방법은 없습니다. 성능을 향상시키는 열쇠는 "drawImage"에 대한 호출을 절대 최소로 줄이는 것입니다 ... 프로세스의 병목 현상임을 명심하십시오! 따라서 현재 볼 수있는 것 (예 : 동전/블록/배경 그리기를하지 않음) 만 그려야합니다. 우려 이미지를로드하는 것을 들어

, 내가 현재 무엇을하고 있는지에 대한 대안을 참조니까. 최선의 방법은 고유 한 파일을 사용하고 모든 이미지를 포함하고 필요할 때 오른쪽 부분을 사용하는 것입니다. 이것은 다운로드 시간을 줄여야 만합니다 (1 개의 큰 파일은 여러 개의 작은 파일보다 낫습니다).하지만 성능이 향상되지는 않습니다.

희망이 조금 도움이, 재미있다!