멀티 레이어 HTML5 캔버스를 레이어 이미지로 사용하기

Question

웹 기반 게임 엔진을 사용하기 시작했지만 주로 스프라이트와 애니메이션을 처리하기 위해 jQuery를 사용 했으므로 게임 캔버스를 HTML5로 옮겨서 HTML5의 힘을 배우고 있습니다. 그래서 여기에 내가 겪고있는 문제가 있습니다 : 멀티플 캔버스를 http://html5.litten.com/layers/canvaslayers.html에서 레이어 이미지로 제안했습니다.

내가 999999에 Z- 인덱스를 설정 한 경우에도, 나를 위해이 작동하지 않습니다 : 여기 내 코드 ->

http://snipt.org/xoKn

객체 계층은 타일의 상단에없는, 감사입니다!

Answer 1

누구나 비슷한 문제가 발생하면 먼저 첫 번째 레이어를로드 한 다음 가장 낮은 레이어를 마지막으로로드하여 문제를 해결할 수있었습니다. 외관상으로는 무엇이든 첫째로 적재 될 것이 최상에있을 것이라는 점을 보인다.

내 솔루션은 타일 루프 위로 m 개의 루프를 이동하는 것이 었습니다. 나에게 흥미 롭다. 무엇이 먼저로드되는지는 중요하지 않았다.

Answer 2

코드가 작동해야합니다 (적어도 캔버스 처리 부분). 귀하의 스크립트를 살펴본 결과 이미지를로드하는 데 문제가있을 수 있습니다. 당신은

var tile = new Image(); 
tile.src = tiles[i]['bg']; 
tilesCtx.drawImage(tile, tiles[i]['col']*32, tiles[i]['row']*32); 

이 있지만 이미지가 아직로드되지 않아 작동하지 않습니다. 대신 당신은 (그것을 수정해야하므로 즉 당신이 i 변수에 대한 참조가되지 않습니다) 같은

tile.onload = function(){ 
    tilesCtx.drawImage(tile, tiles[i]['col']*32, tiles[i]['row']*32); 
} 

또는 무언가를 사용해야합니다.

튜토리얼에서 그들은 setInterval(drawAll, 20);을 사용하는데, 잠시 후에 (모든 이미지가로드 될 것이기 때문에) 잠시 후에 작동합니다.

이미지의 주문이 끊어 질 수도 있지만 (중요하지는 않지만) preloading 모든 이미지가 처음부터 모두 한 번에 그려지는 것이 좋습니다. 시도해 보시고 효과가 있다면 지금 보내주십시오!